How to setup
Design tokensComponents
Text 
Text field
Button
Control
List cells
Section heading
Navigation bar
Tab bar
Header
Toast
Tooltip
Page
Label
Cloud box
Loader
Slot
Empty stateModules
Banner
Bottom sheet
Modal
Drawer
Alert view
List view
Collection
Scalable collection
Scrollable collection
Interface editorial policy
Icons
Skeleton
Team
ChangelogHow to setup
How to change mode
All Modulor components in Figma are built with color tokens so they support switching between light and dark modes using the Themer plugin.
Install and configure the plugin to switch the appearance of components.
1. Install the plugin
/w=3840,quality=90,fit=scale-down)
2. Sign up on jsonbin.io using your email and copy the API key
/w=3840,quality=90,fit=scale-down)
3. Open Themer and paste the API key in the first field
/w=3840,quality=90,fit=scale-down)
4. Save themes with [Light] and [Dark] files and publish it like a library
To save a theme, click Create a theme, create a name for the theme, and click Create. First, [Light] and [Dark] themes must be distinguished. Then, after the themes are loaded, tag the [Light] and [Dark] themes for changing themes.
/w=3840,quality=90,fit=scale-down)
5. Try switching the theme
Select any component or frame, select a theme and click on the Apply button.
/w=3840,quality=90,fit=scale-down)
How to install your own mode
With our design system, you can set your edited theme. To do this, we can use the native theme switching from Figma — Swap Library.
1. Set up a new theme and publish it like a library
/w=3840,quality=90,fit=scale-down)
2. Go to the Team Library file (book icon)
/w=3840,quality=90,fit=scale-down)
3. Switch dark and light themes on your files
The library should be tested when switching because bugs may appear.
Downloads
SF Symbols SF Roboto
