Home
Tutorials
How to Make a Button in Figma

Buttons can be created very quickly in Figma. Here is a simple step-by-step explanation:

1.Scroll to the bottom of your Figma project and select the ‘Shape Tools’ button.

2.Select the shape that you want to turn into your button.

3.After that, go back to the canvas and use your mouse cursor to draw the chosen shape.

4.Next, access the right panel and set the available options to complete the design of your button. You may alter its Position, Layout, Appearance, Color and Visual Effects.

5.Following that, make your way back to the bottom area and choose the ‘Text’ button.

6.After that, touch the symbol for a second time and then enter the label you like for the button.

7.With all that done, go to the right-side panel and then use the given settings to change the look of the text to your tastes.

8.Choose the shape and the text layer at the same time.

9.After that, click the ‘More Actions’ icon located on the right-side panel.

10.Look for ‘Create Component’ in the list and select it.

11.After that, tap the ‘Prototype’ button to set up the responsive connection between the button and the frames.

12.As a result, hover on the button component and click the ‘Add’ image that appears beside it. Drag the photo into one of the frames you like.

13.Set up the Interaction menu the way you like it. Just indicate which Trigger, Action and Animation should be used.

14.Subsequently, right-click the button component and choose ‘Copy’ from the list.

15.Decide on the place where you want to add the button.

16.Hold your mouse down while clicking on the selection and then select ‘Paste Here’.

17.Press the button in the top-right corner that says ‘Present.’

18.After finishing each step, the button will be created based on your specifications and appearance. Click on the link to check and experiment with it for the first time.

FAQ'S

How to Make a Button in Figma

We make websites that bring joy and meet your goals.

We create digital experiences that not only capture the users but also empower businesses in a highly competitive world. We are dedicated towards developing creative solutions that will easily fuse creativity with functionality, with long-lasting effects.

Get in touch
Schedule a call with Webflow Certified Partner
Schedule Consultation
icon tick
Link Copied!
cross icon