Custom React components
from any Figma design

Don't code your custom UI from scratch.
Made by picky developers, for picky developers.

1 • 2 • 3,
Your code is ready!

STEP 1 

Design your component in Figma

Once the design is done, get the React code in 1 click.

STEP 2

Use the component in your app easily

Import the component anywhere and build your logic on top of it.

STEP 3

Update any time, everywhere

Keep your logic safe. Control UI updates pulled from Figma.

Maintain your Design System easily

Get production-ready UI components that you can extend to fit your needs.

1 click update, everywhere.

Update a component everywhere in your app, from Figma? Easy.
Change styles in your Figma files and send a pull request to your repository.

Focus on the logic, save time on the UI.

As a developer, you should focus on complex tasks to create better features, not updating your Design System components.

Code as you would have written it

Style tokens, variants, themes... Get reusable components, ready to be extended (MUI & Tailwind CSS integrations coming soon).

Made with Clapy

Wondering what Clapy is capable of and what the code looks like?
Check out some Codesandboxes generated with Clapy.

dashboard blue

Dashboard (desktop)

100% generated with Clapy. No code added.

Dashboard (desktop)

100% generated with Clapy. No code added.

dashboard blue

Landing page (responsive)

Desktop & mobile code generated with Clapy. Includes media queries to switch breakpoints.

Clapy plugin images

Clapy is made with Clapy!

Yes, we use Clapy in production to generate the UI of Clapy from our Figma designs, and save hours in handoffs and front-end integration!

Want to know more?

Frequently asked questions

Where can I download the plugin?

You can download our plugin on Figma's marketplace with this link 👇
https://www.figma.com/community/plugin/1083031796594968801

Do I own the code generated by Clapy?

Yes. You own 100% of the code generated by Clapy.

How do I receive the code?

Right now, you can preview and download the code in the Codesandbox editor (when you click on "Edit code").

We are working on other ways to provide you the code (Zip download, Github PR...).
If you have a suggestion for your use case -> suggest it on Discord!  

How can I deploy my code?

Codesandbox allows you to deploy your code on Netlify super fast.
We're also working on Github integration to speed up the process.
Follow the updates on our Discord!

How to get the cleanest code possible from Figma?

Clapy uses both designers and developers best practices to get the most out of Figma, faster.

- Responsiveness: using auto-layouted frames in your designs, you can get components that behave like Figma and adjust to the screens widths.
- Design tokens: use Figma's design tokens features (colors, typos, effects) to get your global variables defined in one place. Don't know where to start? Need advanced settings? Use the Figma Tokens plugin to have full control over your tokens, then export clean code with Clapy.
- Components: create components and variants in Figma to define states (default, hover, disabled...), and get the props directly in your code, in one location.

Which UI kits and libraries does Clapy support?

We partnered with Untilted UI, the best Figma UI kit, and will soon support MUI's library.
Get 15% off Untitled UI's paid plans with the code "Clapy".