How to make an animated spinner button in Figma

In more sophisticated prototypes, you may want a button to display a spinner after being clicked to indicate and simulate something is happening in the background. Bootstrap has a bit of documentation how you can create Buttons with a Spinner using their frontend framework, and their typical use cases. Here’s a quick tutorial on how to make one in Figma using community imports, animation, advanced resizing, and Components.

Import a Spinner component

Below is a Spinner I found in the Figma community that works perfectly for our purposes, and replicates the Spinner animation used throughout Material Design. Import it by duplicating the file, and either work in this file directly or copy and paste the contents of the ‘Components’ page into your own working file.

Figma - Spinner | A method to obtain the loading spinner by using autolayout into a mask. Note…

I could show you how to make one from scratch, but just like with development, it’s often a better idea to find one that someone else made already that we know works. That being said, I do encourage you to take some time separately to inspect the layers and interactions used to achieve it to improve your Figma fluency.

Protip: You may want to read more about keyframes and animation to understand it better. Flash creators will feel at home.

Create some Button Components

An “active” button on the left, and a “disabled” button with a Spinner on the right.

Next, you will need:

• a regular button with a label — I named mine Button
• a ‘loading’ button with the Spinner — I named mine LoadingButton

Making a basic Button

I made the Button by:

• adding a Typography layer at 24px font size, shortcut t
• add a Frame and Autolayout in one go, shortcut Shift + a
• then setting the padding to 8px on the top and bottom and 24px on the left and right

The shorthand for the padding is 8 24 in the “Padding around items” texbox on the righthand pane, whilst the…