Introduction
Last updated
Was this helpful?
Last updated
Was this helpful?
Clapy has stopped operating. We are thankful for your support. After years of generating projects code from design, it's time to move forward.
Clapy is a allowing you to generate React components from your Figma designs.
Watch our demo or follow our guide to with Clapy!
Our goal is to accelerate the development of React-based web applications, especially front-end integrations.
We created Clapy because, as developers, we know how time consuming pixel-perfecting a UI is, while there is so much more to code in a web app. What's worse than slowly translating a Figma file to code with 3 screens? Figma for reference, the IDE to code and the browser to preview? đ
With its developer-centric features, Clapy can be used for following use cases:
Kickstart a web app from Figma
Automate the integration of your wireframe and updates
Automate your Design System management
Before generating the code, you have a couple of options.
If enabled, the selected element will be stretched to use all width and height available, even if "Fill container" is not configured. Useful for top-level frames. If generating a page, this is likely the expected behavior.
If enabled, the code is downloaded as zip file instead of being sent to CodeSandbox for preview.
The project uses ViteJS for crazy fast development builds.
If enabled, styles will be written in .scss files instead of .css.
If enabled, the generated SCSS is a tree of classes following the BEM convention instead of top-level classes only. For now, only components can follow this convention. Instance overrides are still at the root.
CSS modules make most of BEM obsolete, but it is useful for legacy projects.