Creating a button component

Creating a button component in Figma is a fundamental skill for any designer. In this lecture, you’ll build a reusable button that resizes itself around its label, carries its own styling, and can be dropped anywhere in a file — then updated everywhere from one place.

1. Enable the Text tool Clicking TT, tool and click on the canvas and type Button.

   

2. Wrap it in Auto Layout. With the text layer selected, right-click and select Auto Layout.

   

3. Style the button. Select the Auto Layout frame (not the text inside it) and give it a solid fill, a corner radius of 4, and set the text layer and change the fill colour to white.
   
   and rename the frame to Primary Button.

   

4. Turn it into a component. With the frame selected, right click and select Create component.
   
   The frame now has a purple diamond icon, which means it is the main component. Any changes you make to this frame will push out to every instance of it.

   

5. Make button text as property. Select the button text layer and click Apply varilable/property icon in the right panel. Click + to add a new property, name it Label, and click Create. Now the button text is a property of the component, and you can change it on any instance.