How to Make a Button in Figma

George Apostolov
Updated 05 Oct 2026
- ▣ Figma

How to Make a Button in Figma: step-by-step guide

Go to the bottom section of your Figma design canvas and click the 'Shape Tools' button.
Choose the shape you wish to use as your button.
Following that, go back to the canvas and draw the selected shape using your mouse cursor.
Next, access the right-side panel and then configure the given settings to finalize the design of your button. For instance, you may customize its Position, Layout, Appearance, Color, and Visual Effects.
Go back to the bottom section afterwards and click the 'Text' button.
Subsequently, tap the shape once again and then type a short button label you prefer to use.
Once done, head back to the right-side panel and then use the provided settings to customize the style of the text based on your preferences.
Select the shape and the text layers together.
Next, go to the right-side panel and click the 'More Actions' icon.
Choose 'Create Component' from the list of options.
Tap the 'Prototype' tab afterwards to create a responsive connection between the button and the frames.
Subsequently, hover your mouse cursor over the button component and then grab the 'Add' icon attached to its side. Drag it to one of the frames you wish to use.
Configure the Interaction settings based on your preferences. Simply specify the Trigger, Action, and Animation you wish to use.
After that, right-click the button component and select 'Copy' from the list of options.
Select the frame where you wish to add the button component.
Right-click on the selection and then tap 'Paste Here'.
Finally, navigate to the top-right corner and click the 'Present' button.
After completing these steps, the button will be created according to your inputs and design. You may now click it for initial review and testing.

Quick answer: To make a button in Figma, choose a shape tool from the canvas, draw the shape, and configure its settings in the right panel. Add a text layer, customize its style, and select both layers to create a component. Finally, configure prototype interactions, copy the component, paste it onto a frame, and click Present to test.

About this Figma tutorial

Create, style, and prototype custom interactive buttons easily in Figma by combining shapes, text layers, and component settings. This guide shows how to make a Button in Figma in 18 steps, starting with "Go to the bottom section of your Figma design canvas and click the 'Shape Tools' button" and finishing with "After completing these steps, the button will be created according to your inputs and d...". The interactive demo above is a click-through copy of the real Figma interface, so you can rehearse each step before doing it in your own account.