Setproduct Design System is a React-based UI toolkit for the web. Designed and well-organized in Figma. Optimized for building complex data-dense interfaces for desktop and mobile applications. This digital product contains both Figma design files (FIG) and React components (ZIP) which styled and named analogously.
Highlights:
2-in-1 toolkit for design & development. We carefully translated styles and specs from Figma into the React framework to fit with each pixel.
Open-source. You're free to modify the code and customize Figma library with new styles. It's easy as a finger click.
30+ categories of components powered by Figma's auto-layout. Every UI item comes with Active, Onhovered, Clicked and Disabled styles (if necessary)
Each component is available in two sizes. We've included "Dense" variants for high-density software interfaces.
12 Tokens Color System: 6 tints and 6 shades for 9 base colors as Figma styles to toggle your design into the dark mode (coming soon!)
Variety of styles and colors available for every component: Flat, Outlined, Smooth, Raised, Filled. Whether you are an individual or an Enterprise — you'll find a theme for any GUI case:
Version 2.1.0 with new components: Badges, Dropdowns, Calendar with Range, Toasts, Tooltips. Some architecture (React) improvements to prepare for templates.
Version 2.0.1 includes some minor bug fixes + New components: Hamburger menu effects, Timepicker, Datepicker (range is coming soon), ButtonGroup
For organizations
Setproduct Design System is ready to be deployed for team purposes and provides an opportunity to quickstart massive production immediately
For developers
Our Figma library allows you to learn or enhance prototyping skills. Simply dip into the design process, where you only need to drag, drop and fit. That’s it!
For designers
Skip creating from scratch those boring UI items along with a project. Use our design system to concentrate on the consistency, not on start-from-scratch routine
.png)