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/.