Customizing & Using the Design Kit
Quest supports multiple design systems. Learn how to customize your design kits and leverage them across your designs and development.
Quest seeds the official MUI Design Kit (Community Version). In it you’ll find sample styles and a small set of sample components you can use to get started building your product. We recommend getting the full MUI Design Kit, with all the components that are in MUI, once you’re ready to start building your product.
We are working to support all the MUI components but please check this page for our current list:
Support MUI components & How-to Make Edits in Figma
You can associate a Design System such as MUI or Chakra with the 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:
- 1.Navigate to Workspaces within Quest and select the desired Workspace
- 2.Click on the Add App, provide a name for your App and select the desired Design Systems:
- 3.Now you need to sync your Design System from Figma into the corresponding App in Quest. To do this:
- 1.Open the Design System in Figma
- 2.Open the "Figma to React" Quest Plugin
- 3.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.
- 4.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 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 MUI so that when you export the MUI components, you gain the full functionality of 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 Design System as the results will be inconsistent in Quest
- 1.Customize the Theme (Fonts, colors, shadows, etc.)
- 2.Adjusting individual Components
“MUI Design Kit” (Material-Components-v5.2.0)
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 Design 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 Material 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.
“MUI Design Kit” Button Component
Using the MUI Community 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 only utilize the styles such as typography and colors if you are using the fully paid MUI Design Kit as this community kit is more of a way to experiment and should be considered a sample. It will still allow you to bring those components into Quest and export the React code to get MUI components so you can try it out for yourself. Again, we encourage you to purchase the full MUI kit to be able to fully customize your design system.
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 as those will lose the functionality of MUI when exported into Quest. 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.
- 1.Adding library to the same Figma file as your custom components
- 2.Pasting main components into your custom components
Enable the MUI design kit through Libraries
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 “MUI for Figma Material-Components” kit version you are using and get access to the styles and components you set up.
Chooseing a color from the Design Kit
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 Design 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 Material UI but you are free to make more.
By copying and pasting the Main components from the Design Kit into your custom components, you’ll automatically get the functionality of that same Material UI 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.
Copy and paste a button from the Design Kit
For instance, when copying and pasting a button from the Design Kit into your custom component, then exporting it to Quest, Quest will automatically convert that into a working Material UI button and will reflect as such when you export the custom component code. Using the components from the Design Kit will give you all the benefit of a stylized version of a 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.