Customizing & Using the Design Kit
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.
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:
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.
- 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.