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
ChangelogIcons
/w=3840,quality=90,fit=scale-down)
Сreating icons
Rules of a good, Modulor-style icon:
Indents
The indents should be 1 px.
The icon should not fit closely to the edges of the frame, but have indents from the edges.
Outline shape
The outline shoud be 2 px.
The inner outline can be thinner than the outer one to visually balance the icon. But you can reduce the inner outline proportionally by 0.2 px. For example, if the outer outline is 2 px, then the inner one can be 1.8, 1.6, but not 1.7 px.
Roundings
All Modulor icons are rounded. Use the 3 px rounding at the center, 4 px outside, and 2 px inside.
One shape, one line
The icon can’t be composed of two elements.
Vector only The icons should be in vector only.
Visual approach If you need to create a new icon, here’s a lifehack. Take an icon from Material design as a basis, then deform it similarly to iOS icon style.
No inappropriate associations Check whether the icon is perceived ambiguously.
Adding an icon
The icon should always stay inside the frame.
The frame should always have the Component type.
The name of the frame with the icon is constant and can’t be changed later.
/w=3840,quality=90,fit=scale-down)
Before exporting the icon, set both Constraints parameters to Scale. In that way, if the frame size changes, the icon will increase evenly.
The icon can be added at the bottom of the list and the last column or group.
The name should have a prefix for better export:
- ic/ — if the icon has the token (one color which can be changed in the future).
- img/ — if the icon or image has already existing personal colors and doesn’t need to use token.
On this page
