React UI kit made in Figma

Design System 2-in-1 library to design & code

Roman Kamushken
4 min readJun 2, 2020

Since I’ve been involved seriously in making Figma templates to sell, I started to seek for a possible stack between design & React code. API in Figma seems to be abandoned or on pause. The same in the community — a silence and no serious ideas, tools or progress. I assume there are no chances to see the real-time design⇆code translation soon, but with hope for things to be changed.

Despite the problem still exists: The World 🙏🌎🗽️ is waiting for a components library to design & code where everything is designed analogously. I hope so because we’ve spent months and months for polishing this library 🤞

What is the purpose?

Speed. Consistency. No routine. Your developers now never asking like “Hey, what’s the shadow elevation for this button?” OR “What’s the onhover specs for this (or that) component?”. With such a Figma React UI kit everything is on hand, documented and served for a quick start. Import a design library directly in Figma and deliver React .zip library where your devs team is.

Acceleration — is in the aim of Setproduct Design System. But it’s still no real-time design⇆code translation. It’s something in the middle. But it saves your time and costs. Guaranteed!

For whom?

Designers, who code

Freelancing? Skip a routine of starting from scratch when your every new customer arrives. Use our system to concentrate on perfect layouts, not on crafting boring buttons and inputs. We have them all already covered!

Developers, to design better

Yeah, I know—your layouts might look better🤦‍♂️. It’s hard to build a product without a designer. Setproduct Design System is not a designer «out from the box», but we provide you a toolkit to enhance your applications.

Businesses, to save time and costs

Let’s sit and estimate how expensive is it — to develop a consistent design system from scratch. Our product is aimed to save resources. Pick a business license, and your team will be able to release faster. Deploy our kit today and start a massive production tomorrow!

See React documentation

Who purchases this?

A lot of people discovering the design by browsing commercial UI kits. You can always ask on Twitter someone of those happy customers, who already won a mission with our products.

What’s new in 2.0?

  • Migrated from Material-UI to BlueprintJS framework
  • Updated design principles
  • Updated states for many of components
  • Enhanced color theme
  • Enhanced organization in Figma
  • Auto-layout added

What’s to expect?

Templates, new components, visual enhancements, dark theme and more. Now it’s time to ship the updates more often.

Start today!

Setproduct Design System is the unlike React UI kit. Including Figma design sources + React components based on enhanced and restyled BlueprintJS library this system saves «a penny». This product is a next-level material design transformation.

Highlights:

  • All-in-one toolkit for design & development. We carefully translated styles and specs from Figma into the React framework to fit with each pixel.
  • 20+ categories of components powered by Figma’s auto-layout. Every UI item comes with Active, Onhovered, Clicked and Disabled styles.
  • 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:

PS: Thanks for scrolling this, for attentive visitors, there’s a secret code (limited offer) “PIZDEC2020” to cut 25% off just in case you read a lot!

--

--