Export Figma design to React components

It’s finally time to say goodbye to design hand-off 👋

Get started for free

No credit card required

Supercharge your frontend development

Pixel perfect components
Your components will look exactly like they do in Figma
Dynamic content and interactions
Add content variables and event handlers to your components
Packaged up and ready to go
Install published components straight from your terminal via NPM or Yarn
Automatic version control
Keep your components in sync with design without breaking your code
First class TypeScript support
Always know which props are available and which are required
Works with your framework
Whether you are using Next.js, Remix or any other, it’s ready to use

Meet your new favourite Figma plugin

Select a component from your Figma file and define which parts are dynamic

Content props example

Make it interactive

Bring it to life by adding interactions

Interaction props example

Preview and publish

Check out how your component looks and functions and then publish it

Component preview example

Fits right into your toolchain

Install new components straight from your terminal

➜ ~/project npm install @awesomecorp/button

New home for your components

A private npm registry just for your UI components

➜ ~ npm login --registry=registry.uipkg.com

Strongly typed

Every component has TypeScript definitions so you can rely on IntelliSense for autocompletion

import Button from "@awesomecorp/button";
const App = () => {
return (
<Button variant="primary">
Click me
export default App;
import Post from "@awesomecorp/post";
const App = () => {
return (
title="What is going on guys"
Click me
export default App;





(property) variant?: "primary" | "secondary"

It's just React™

Use it like you would any other React component

import Listing from "@awesomecorp/listing";
const App = () => {
const data = useListingData();
return (
{data.map((listing) => (
onFavouriteClick={() => markAsFavourite(listing.id)}
onBuyClick={() => showCheckout(listing.id)}
export default App;

A library of your team's components

All of your exported components in one place

Screenshot of packages page

Track changes between versions

Easily switch between different versions of your components

Screenshot of package details page

Collaborate with your team

Share and discover components with your team

Screenshot of packages page

Ready to supercharge your frontend development?

uipkg helps reduce friction between designers and devs while delivering top-notch user experiences to your end users

Get started for free

No credit card required