How to Create Buttons in Figma

A walkthrough on the different kinds of buttons used in web design & designing them using Figma!

Photo by Aleksandar Cvetanovic on Unsplash

New to Figma? Not a problem, I talk through the basics of using Figma in my last post which you can check out below!

How to Design Using Figma

How to build a button

1. Create a new Figma design.
2. Add a new frame (using the F key on the keyboard) and select phone or desktop.
3. Add a rectangle (R key on the keyboard). Make the height 50px and the width 200px.
4. Add some text (T key on the keyboard). Centre the text in the middle of the textbox (vertically and horizontally). Place the textbook in the middle of the rectangle.
5. Group the components if you like.

Yay! Now we have a button!

The button that was just created

Where to get colours