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
iOS & Android custom development
We'll take our iOS & Android Figma templates, adjust with custom styles, create necessary layouts, and turn the system into production-ready Flutter templates. You'll get powerful design & code system which help you to produce more layouts in future by minimal costs.
How to reach you out?
Your budget
URL (optional)
We used to reply ASAP
Material Design custom development
We'll take our Material & Dashboard Figma libraries, adjust with your brand guidelines, create all the additional necessary layouts, and turn the system into responsive web application based on React, Angular, Vue or etc.
How to reach you out?
Type of job
Your development budget
URL (optional)
We used to reply ASAP

Create consistent apps with styled components

Figma, React,
Angular UI kit

SETPRODUCT SYSTEM FOR DESIGN AND DEVELOPMENT. ALL-IN-ONE!
Figma React Angular components UI design

Styled components for design and developing teams


Setproduct Design System is a timesaver where are Angular and React components match Figma design library. UI styles are synchronized in the manual mode to keep any team design consistent during development. Based on Material Design specifications.
Angular, React and Figma UI kit to speed up the app development

Design & Code

Design system components React, Angular, Figma
Flexible design system with easy-to-customize global styles

Adjustable styles

Design system shadows & colors
Designed in Figma this library matches React & Angular components

One for all design

Design system guidelines and specs
onHover, onClick, onFocus, Action and other states are guided

With statements

Material design system components styles

Take a quick tour

Production-ready components for Figma, Angular and React
Setproduct Design System starts with components-driven UI library made in Figma. Supported with detailed specifications, attention to the details and smart Atomic architecture. Named and organized as a developer likes.

Made in Figma

Figma design system components library
Setproduct Design System is based on Angular Material (material.angular.io) & React (material-ui.com). Quickstart for existing apps - only small tweaks needed. All stock components restyled and functional.

Preview for

React & Angular

Material design inputs UI
Get started now!


Design system where React & Angular components same-designed as in Figma library.
100% moneyback on demand, if you're not satisfied
Figma library
$78
For design purposes. Figma design library full of custom styled components. Well-organized and prototyping-ready

Open in Figma

Purchase
React & Figma
$128
For design & development. Includes Figma library + React code based on restyled Material-UI components

React Storybook

Purchase
Angular & Figma
$144
For design & development. Includes Figma library + Angular code based on restyled Angular.Material

Angular components

Purchase
Questions and Answers
Which license type should I choose?
You must select proper license type according to the amount of employees in your company. If you're a freelancer or individual player - pick a Single license. If you're representing a small business with total amount of 2-10 employees - pick a Business license. For big companies with 11+ employees Enterprise license is the best fit.
Can I build commercial projects with this design system?
Yes! You can build unlimited amount of commercial or personal projects with your license. But, please, consider your organization size while picking a license.
How to start with this design system?
After the successful purchase via Gumroad (it's safe and encrypted) you will be taken to a download page. You will also get the download link in your email (check the SPAM folder sometimes). Then just simply drag and drop .FIG file onto your Figma app. Do not drop it onto the project. Drop it over the starting screen with recent projects grid.
How to avoid "File failed to import..." in Figma?
In some rare occasions, the import is finishing with an error. It's on Figma's side. Figma is sensitive to your machine GPU and RAM. For the first, try to re-import via the browser app. Yes! Figma works in the browser. Simply open figma.com, then sign in and drag and drop .FIG file again. For the second, if there's no effect, you can message us and we will send you a direct link for your copy, so you can duplicate it and start. Don't panic, you will get your system in any case!
Your design is awesome, but I need the code as well...
We're open minded for your development inquires. If you're looking for a front-end solutions based on our design products, simply drop us a line describing your preferences and budget. We can code for React, Angular and VUE.