Docs
  • Introduction
  • 🚀Get started
    • 1ī¸âƒŖInstall the plugin
    • 2ī¸âƒŖLoad Clapy in your file
    • 3ī¸âƒŖSign in/up to Clapy
    • 4ī¸âƒŖGet code in 1 click
    • Online code preview/editor, Github, and more
  • 🖌ī¸Figma Basics
    • Components
    • Your first Figma component
    • Add auto-layout in Frames
    • Groups vs Frames
  • ⚙ī¸The generated code
    • The project structure
    • Components
    • Instances
    • Figma Tokens integration
    • Responsive code
  • ℹī¸Extras
    • Changelog
      • 01/08/2022
      • 25/07/2022
      • 15/07/2022
    • Github
Powered by GitBook
On this page

Was this helpful?

  1. Get started

Install the plugin

Follow this step-by-step guide to start using Clapy in Figma!

PreviousIntroductionNextLoad Clapy in your file

Last updated 2 years ago

Was this helpful?

Ready to get the code of your component? 🤩

Let's see how to run the plugin and generate the React code.

Load the plugin in Figma

To install Clapy, click on the "Try it out" button on our Figma community page

This will open an empty draft in Figma where you can load the plugin, by clicking on the "Run" button. But... this draft is empty! Let's see how to open Clapy in a Figma file containing the designs you want to code.

Now, let's open the plugin in a file with designs you want to code!

🚀
1ī¸âƒŖ
https://www.figma.com/community/plugin/1083031796594968801
Install Clapy from the Community page
Launch the plugin in your file by clicking on the "run" button from the community dropdown menu