Features
NEW
You can switch properties from the menu in the You can enable dark mode for the entire page or a
Design panel on the right-hand side. Use the menus specific frame with just one click. Follow the guide
to customize the component's properties. below to learn how to enable it.
NEW
Click the slider below
0 12
Most of the components are interactive. To activate Subcomponents are now available! The library is
them, click on the play button located in the top right designed to use the nested components feature. To
corner . learn more about this, check out Schema's video on
the topic.
New: Variables
Changing colors
The library is built using variables, which means that colors can only be modified from the variables panel. To access
it, make sure that you do not have any layers or artboards selected, which will allow you to view the global right-hand
panel. Follow the steps below to change the preferred colors:
Variables panel
To access the library of variables, click on the icon shown to open the
variables panel. This is where all variables are located.
Collections
Collections have been created to closely resemble the theme object.
This is to ensure a familiar developer experience in case of any
overwrites. To change colors, select the “palette” collection.
Watch Demo
Changing colors: main, dark and light
Select a variable group, and adjust the color for both Light and Dark
modes. You can freely edit the colors "main", "light", and "dark", or use
MUI's color tool if you are not familiar with generating shades.
Changing colors: states
As Figma currently does not support composition, we must manually
create our state colors. To do this, copy the color code of your new
"main" color, and replace the old one while keeping the opacity.
Changing typography
Unfortunately, variables do not yet support typography variables, but this feature is planned for the future. Until then,
q (
changing global styles, such as the font family, re uires a bit of effort approximately 5 minutes). We have already
defined everything as a style, so your only point of command is the right-hand panel.
Watch Demo
Changing the global ont f
To change the font style for the entire library, go into each defined style
and apply your new changes.
New: Dark Mode
Enabling Dark Mode
Switching modes can be switched flawlessly with the help of the modes for variables.
Switching modes for the entire page Switching modes individual frames
From the right-hand panel, go to palette and switch to Do you want to compare screens side by side ? No
the desired mode. problem! Simply select the mode for individual frames.
Watch Demo
Naming
<Component>
Components begin and end with an < and > respectively so one can easily search and differentiate as API
components and not as elements or context instances/components.
Developers are also familiar with the component naming, so it helps understand quicker what instance is being used.
_Custom
Custom components are swappable instances that begin with an underscore (_) so one can identify and search for
them easily.
These are simply context-created bundle of base components which unifies a custom component like a Profile
Menu. Use them to avoid detaching your instances!
_Library
Simply used for library headings, and annotations.
F AQ
How to install MUI for Figma?
I
Thank you for purchasing MU for Figma! The first step is to extract the archive which is located in the same folder
as this README. In the extracted folder, you should see a .fig source file for each theme - light & dark. To import a
file simply click the New button from Figma and choose “Import” from the menu.
How to import a local .fig file? (Article)
https: //help.figma.com/hc/en-us/articles/360041003114-Import-files-into-Figma
How do I add to make this file my design system library? (Article)
https: //help.figma.com/hc/en-us/articles/360041051154-Guide-to-libraries-in-Figma?
How To Insert Components to Your Design Files
Option 1: Work in the ‘ M I for
U Figma’ file
Open the Assets panel in the left hand navigation (or press Alt/
Option + 2)
In the list of assets, locate the library “local components”.
To insert a component, click and drag the item from the menu and
paste it into your working .
Option 2: Cop y and paste components from the ‘ M I for
U
Figma’ file
I
Select the “MU for Figma’” page in the Layers panel in the left hand
navigation
Copy the desired component and paste it into your working file.
Migration from Design to React?
We recommend using the design tokens as much as possible to perform the customizations. It makes it easier to
share the values between Figma and React.
A "design token" is simply a variable that can be shared with the React implementation, for instance, the font size, in
pixels of the body2 variant. You can have hundreds of design tokens.
A feature that we have been considering is a Figma plugin that could import and export a ready to us theme
structure.
Now, until this feature is available, we would recommend to dive into the structure of the React theme and identify
each value that needs to be changed.
//mui.com/customization/default-theme/ and a description of the structure
You can find the default theme at https:
at https://mui.com/customization/theming/.
