15/07/2022
Last updated
Was this helpful?
Last updated
Was this helpful?
After 2 months of hard work, we are proud to announce that Clapy now turns Figma components and instances into clean code with all overrides Figma supports!
We are the first Figma to code tool to generate components and instances with properties from arbitrary designs. It is a milestone to position Clapy as a dev tool generating production-ready code for large web apps.
Previously, each time a given component was used in the selected frame (with an instance), a separate component was created for each usage. It generated duplicate code that was not ideal to maintain large project.
Now, a component is generated only once, and all usages on Figma, also called instances, will generate instances in the React code. Including all customizations applied to instances making them differ from the original component.
Figma allows 4 types of customization on instances: styles, text, swap instances and show/hide. All of them are provided to the coded instance as properties.
The progress of the code generation is now displayed. It is especially useful on large pages with plenty of components, or with large assets.
Generating SCSS instead of CSS is now allowed as a beta feature.
The generated code can be downloaded as a zip file instead of sending to CodeSandbox.
We have plenty of ideas to make development easier than ever. Among them, adding a github integration and supporting variants.
This is described in more details in our fresh documentation: .
Any feature you would love to find in Clapy? !