Your first Figma component
Last updated
Last updated
If you already have a Figma design, you can skip this section and directly head to the next one: Generate code with Clapy.
If you don't have Figma designs yet, this sections helps you setup your first design, ready to be converted into code with Clapy.
The first step is to create a Figma account and open their application. You can use the web app or the desktop app.
Once Figma is opened, create a New design file.
After you have successfully created your design file, it is time to create your first frame.
It is important for Clapy that we use frames instead of rectangles as containers, to generate high quality code.
For background colors, use the fill property of your frames.
Rectangles should only be used in specific cases where that's the shape you want for a drawing.
Awesome, we've got the right setup to get started. To continue, add a Text in the frame you've just created.
Very well. Now that we've got our text, let's define the layout. Select your text, right-click, then choose "Add auto layout" (or you can use the shortcut: SHIFT + A).
The text is now wrapped into a sub-frame using the auto layout.
Good to know: Using auto layout is generally a good practice, especially to get clean code with Clapy.
You can find a presentation here: https://www.youtube.com/watch?v=TyaGpGDFczw
and a playground here: https://www.figma.com/community/file/784448220678228461
Now we are ready to give our button a color. You can do this by selecting your frame and going over to the right to see the properties panel. Here, you can select the fill and give your button a color.
Awesome, we are almost done! Select your frame and look at the properties panel again. You will see something called Auto layout. You will see some properties with default values, e.g. 10 for the padding. We can adjust these by clicking when the arrow cursor appears and dragging horizontally.
Wow, that went very well! Our last step is to make our outer frame an auto layout as well. We can do this by selecting it and pressing SHIFT + A (or right-click > Add auto layout).
We can now adjust the properties a bit. In the Auto layout section, a table with 9 cells represent the vertical and horizontal alignment of the selection's children. Select the middle one.
We are almost done! Select your outer frame again, and you will see at the top of your properties panel the width and height of your frame. Set the width from hug to fixed.
Awesome. Finally, right-click on your button and click Create component. And thats all!
Congratulations! We've created our first component, ready to be turned into code by Clapy. đĨŗ
