Your first Figma component
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.
Its easy to create our first design file with Figma
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.
Creating our first frame
Awesome, we've got the right setup to get started. To continue, add a
Text in the frame you've just created.
Writing some text
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.
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.
Giving our 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.
Adding padding to our button
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.
Selecting center alignment of our auto layout
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!
Last modified 7mo ago