Create a CONFIRMATION button in Figma with just two components

We are going to create a confirmation button with just two components with simple 5 steps

1. Create a button component

Use the text tool to create a label called a button. Add auto layout and give some breathing space for the button, add some padding around the button. give it a fill color. make it a component called confirm button.

Create four variants and name them as default, hover, confirming and confirmed. give suitable color for the 4 variants. make sure to add a check arrow to the confirmed variant.

2. Create the loading wheel component

Create a 30 x 30 ellipse. remove the fill. give a stroke with 4 px and make it the stroke centre of the ellipse. click the arc of the ellipse and drag it to the centre of the ellipse sweep as 75% ratio is 100%. give an angular gradient. make it a component and rename it as loading wheel.

Create 4 variants from the loading wheel. Name them as 01,02,03 and 04. Rotate the 02 variant from -90 deg, Rotate the 03 variant from -180 deg and Rotate the 04 variant from -270 deg

let's give the interaction to the loading wheel. Change to prototype mode Click on the 01 variant and drag it to the 02 variant select the interaction as after delay. set the animation properties as Smart animate Linear and 300ms. make sure to set the delay time as 1 ms.

let's follow the same interaction from the 02 variant to the 03 variant

now follow the same interaction from the 03 variant to the 04 variant

now follow the same interaction from the 04 variant to the 01 variant

3. Modify the confirming variant

Create an instance of the loading wheel and place it next to the confirming variant. then make the loading wheel instance absolute positioning and align it centre to the confirming variant. you will get a modified confirming variant as shown below.

When you make the loading wheel's absolute position you will the layer panel will change as below.

4. Lets give the interaction between confirm button variants.

Click on the default variant and create a while hovering interaction to the hover variant. Set the animation properties as Smart animate Ease in and out and 150ms.

Click on the hover variant and create an on-click interaction to confirming variant. Set the animation properties as Smart animate Ease in and out and 150ms.

now click on the confirming variant and drag the arrow to the confirmed variant. give the interaction as after delay and set the delay as 1500ms. set animation properties as smart animate, quick and 600ms

5. Interactive confirmed button is ready.

create a frame and get an instance of the confirm button and align it to the centre of the frame. press shift + space to on-screen preview. let's play with the confirm button.