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

zsh
~/project npm install @awesomecorp/button

New home for your components

A private npm registry just for your UI components

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

Strongly typed

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

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

variant?

subtitle?

onHeartClick?

onClick?

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

It's just React™

Use it like you would any other React component

App.jsx
import Listing from "@awesomecorp/listing";
const App = () => {
const data = useListingData();
return (
<div>
{data.map((listing) => (
<Listing
key={listing.id}
title={listing.title}
description={listing.description}
onFavouriteClick={() => markAsFavourite(listing.id)}
onBuyClick={() => showCheckout(listing.id)}
/>
))}
</div>
);
};
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