Custom React libraries for
picky coders

Forget the hastles of maintaining a custom UI.

Update the UI from Figma.

Add your logic easily.

Control your workflows.

As easy as
1 - 2 - 3

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).

Want to know more?

Ping us on Discord, we answer ASAP ⚡

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 all paid plans on Untilted UI shop with the code Clapy.