Say Hello!
Send us your questions or customization on demand requests
We used to reply ASAP

5 simple steps

before you started to design the system

5 simple steps

Before you started to design the system

Step 1

Determine all the repeating elements in your layout, prototype or concept. As the example below we have repeating card, repeating image and repeating floating action button.

Step 2

Form a list of all possible states of any component, depending on the system response or users' actions. For example, disabled input or onhover state.

Step 3

Now start your components development process. Keep in mind to set constraints immediately, it helps to avoid routine, when there will be a lot of elements.

Step 4

Duplicate specific component to create additional states. Use detach instance function, then add the necessary changes and clone it. Use accessible and valid names of components.

Step 5

Continue assembling your design system this way. Drag and drop the component, adjust size and indents according to your design plan.

Design system live

1682 components awaiting

Application bar, Avatars, Badges, Bottom nav, Buttons, Cards, Chips, Dialogs, Drawers, Expansion panels, Grids, Lists, Menus and more...