4️⃣Get code in 1 click

You are now all set to generate code with Clapy!

Select a frame to code

Once you are logged in to Clapy, you will land on a screen with a message prompting you to select an element in Figma.

To generate the code, just select the outer frame of the design you want to code. You can preview your selection to make sure you will generate the code for the right element.

Clapy allows you to convert any Figma element to code.

Get code advanced options

Once your element is selected -> just click the button < Generate code > and... that's it! 🚀

Select advanced options to adjust the code output

You can use advanced options to change the code output:

• Toggle full width/height (best result for pages)

• Select if you'd prefer to get React or Angular code

• Download the code as Zip (locally)

• Add a component directory

• Edit the CSS output (including adding custom CSS)

3 ways to get your code

• Codesandbox: By default, the plugin will publish the code to an online Codesandbox, where you will be able to preview the result and get the code more easily.

• Download as Zip: You can download the code as a Zip folder if you don't want to publish it to Codesandbox. To do so, click on the dropdown "advanced options" and select "download to zip" before generating your code.

• Github: Available soon -> select a repo and make a PR automatically from Figma!

Learn more in this section: Online code preview/editor, Github, and more

Duration of the code generation

The duration of the code generation depends on the number and size of the assets and the sub-components contained in the element you are generating.

If the code generation takes too much time and you cannot get the code, contact us on our Discord to see what we can do to optimize this.