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 (desktop)
100% generated with Clapy. No code added.
Dashboard (desktop)
100% generated with Clapy. No code added.
Landing page (responsive)
Desktop & mobile code generated with Clapy. Includes media queries to switch breakpoints.
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
You can download our plugin on Figma's marketplace with this link 👇
https://www.figma.com/community/plugin/1083031796594968801
Yes. You own 100% of the code generated by Clapy.
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!
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!
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.
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".
