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 basics

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

The layout

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

Let's style it a bit

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!

Congratulations! We've created our first component, ready to be turned into code by Clapy. 🥳