Become an affiliate and earn up to 35%
You can participate in Setproduct partnership program and earn up to 35% from every sale you made. We provide promo materials and detailed instructions how to boost the conversion
We used to reply ASAP
Hire Setproduct professionals for your project
We'll take any of our Figma design systems, adjust with your brand guidelines, create all the additional custom templates, and code a web application based on React, Angular, Vue or etc.
How to reach you out?
Type of job
Select design system
Whats your approximate budget?
URL (optional)
We used to reply ASAP
Looking for a custom design based on our Figma templates? We are ready to customize any of our UI kit personally for you and create custom design based on your brief, wireframes, outdated UI or online call. Please, fill the form below or drop us a line at
Your e-mail
Pick a design system for your project
Pick a project size
Describe in a few words (optional)
For browser-based applications
For iOS & Android mobile apps
Whats your budget, USD
Please, provide the approximate number. The total price depends on the amount of templates in your order
New release ✨ Material You UI kit for web apps
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...