Customizing & Using the UI Kit
Quest supports multiple design systems. Learn how to customize your design kits and leverage them across your designs and development.
Last updated
Quest supports multiple design systems. Learn how to customize your design kits and leverage them across your designs and development.
Last updated
We seed the Quest UI Kit for the App that's created by default upon signup. The Quest UI Kit is completely free to use with any Quest Subscription. The Quest UI Kit comes with a large number of Professional Templates, Components, Styles, Typography, etc to bootstrap your design development with ease. You may also choose other supported Figma Design Kits such as MUI and Chakra.
IMPORTANT: If you are building your Custom Figma Components using MUI Design System, before you sync your first custom component into the Quest App, please be sure to Sync your MUI Design Kit into the corresponding Quest APP. To do this, launch the Figma to React Quest plugin while you are on the MUI Design Kit, Select the desired workspace/app (ONLY if you have more than one Workspace/App) and hit the Sync Design System. Then you are ready to sync your MUI based custom components into this app.
In summary, please ensure the Quest App, the Design System you choose (Quest Kit or MUI or Chakra), and the component you build based on the Design System are all aligned across, Figma and Quest. i.e. You shouldn't sync a custom Figma component built with MUI into the App that's associated with the Quest Kit. The same applies for Chakra and MUI.
We are working to support many more design components but please check this page for our current list: Supported Quest components & How-to Make Edits in Figma
You can associate a Design System such as Quest UI Kit (based on MUI), MUI Kit or Chakra UI Kit with every App in Quest. Each App can only have one of these design systems. If you intend to use both the design systems, you can create multiple apps and associate the desired Design System with that App. Once you create an App with the Design System, you can no longer change it. You can discard the App and recreate it with the right design system if necessary.
To add an App and Sync the Design System:
Navigate to Workspaces within Quest and select the desired Workspace
Click on the Add App, provide a name for your App and select the desired Design Systems. For using Quest UI Kit, select MUI from the below list as Quest UI Kit is built on top of the MUI.
Now you need to sync your Design System from Figma into the corresponding App in Quest. To do this:
Open the Design System in Figma
Open the "Quest - Figma to React" Quest Plugin
You'll see an option like below to Sync the Design System. Select the desired Workspace/App and click on the "Sync Design System" button. If you don't see your newly added App in the dropdown, just close the plugin and re-open it to refresh the available Workspaces/Apps. You have now successfully Synced the Design System to your app.
Now you can create your custom components using the elements from your Design System and sync those custom components into the App associated with the Design System. This will ensure your App and the Design System are working together to properly render your custom components in Quest.
You can grab the official Free Quest UI Kit here:
You can find official MUI Design Kit (Community Version) here:
Quest also supports the official full MUI Design Kit with the full list of MUI components. You can buy it separately here:
You can also use Chakra UI as the component library for your App the same way as you would use MUI. We pre-seed MUI and this doc will use MUI for example purposes. Add a new app and choose Chakra then use this doc to learn more.
These design kits serve 2 purposes in that it helps you start designing your custom components much faster but also is designed to work with the Quest Plugin so that when you export the custom components, you gain the full functionality of the Quest, fully interoperable with MUI. An example of this is using a button will gain hover & press functionality or using a text field component will gain all the interaction and styling for using input fields including validations.
There’s 2 ways you’ll want to adjust the design kit to match your brand.
IMPORTANT: Never add your own custom components or elements such as your own custom avatars, buttons to the Design System. For example, you may want to create your own Nav Bar or Footer, or a battery of cool avatars, etc that will be re-used in a variety of other components. Create such commonly used custom components in a separate Figma file as a repository of your reusable components outside of the design system. When you need to incorporate such a reusable custom component into different parts of your application, you can just copy them from your repository. Just do not add them to the UI Kit / Design System Figma file as the results will be inconsistent in Quest and may cause syncing to fail.
Customize the Theme (Fonts, colors, shadows, etc.)
Adjusting individual Components
For instance, when you follow the instructions and make edits to the Text Styles in the “Typography” page, those changes can affect different components in the UI Kit itself. For instance, changing the “Button Font - Large” Text Style will change it in all button variants on the “Buttons” page. Not every test style here is used in the kit however as for example “H1” would only be used in your custom components.
You’ll want to do these steps in order as all the components in the system are based on the Font, Color, and Shadow libraries. So adjusting those first few pages of the Kit will affect the look across all the Quest UI components. To navigate between things you’ll see that all the available elements and components you can customize are set up on individual pages in Figma.
Using the Quest Design Kit that we seed into your account, you can copy and paste components into your own custom Figma design files to create custom components. You can also utilize the styles such as typography and colors in the Quest Design Kit as this allows you to customize the kit to meet your branding needs.
In this button example, to use it in your custom components, you’ll want to just copy and paste the default state and not the disabled or hover states. Doing this will allow Quest to auto-support the disabled, hover and such additional states without having to write additional custom logic for such functionality. For instance, the hover will automatically work in Quest when you roll-over the button if it is done this way.
There’s 2 ways to use the Design Kit in your own custom components.
Adding library to the same Figma file as your custom components
Pasting main components into your custom components
When you start creating a Figma doc with custom components, you will first want to be sure the Design Kit you are using is synced. To do so, go to the Assets tab next to the Layers tab in Figma. Then press the “Team Library” book icon button (in blue in the screenshot). From here, you’ll be able to toggle on the “Quest UI Kit” version you are using and get access to the styles and components you set up.
Once you’ve done so, you’ll be able to choose colors, fonts and shadows that are setup in the Design Kit essentially giving you a source of truth for all styles used in your product. It is not required that you use those styles but it helps with keeping the code clean as well as managing things across your entire product so it is highly recommended that you pull styles from the UI Kit.
If you find that you need additional colors, fonts or shadows, you can add them in the Design Kit as needed. There is no limit to the amount of styles you can use. The ones that are there by default are ones that are mostly required by Quest UI Kit but you are free to make more.
By copying and pasting the Main components from the UI Kit into your custom components, you’ll automatically get the functionality of that same Quest UI Kit component once exported to Quest. But also, simply using Font Libraries and Color Libraries design tokens in your custom components, styles will get linked to your design system in Figma and in React so adjusting your design kit will adjust all your custom components using that piece of it.
For instance, when copying and pasting a button from the UI Kit into your custom component, then exporting it to Quest, Quest will automatically convert that into a working Quest UI button and will reflect as such when you export the custom component code. Using the components from the UI Kit will give you all the benefit of a stylized version of a Quest UI/Material UI component.
Note: You aren’t required to use the design kit if you’re only going to be making custom components.
Also, the structure and naming of the pages is very important. You can change the look and feel of the kit overall to match your brand but you should not reorder or rename pages to ensure Quest can properly recognize it when you sync.
We are currently working towards supporting all components from the full paid version of the MUI Kit.
