How to make an animated spinner button in Figma

Chuck Rice
UX Collective
5 min readMar 16, 2022

--

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

--

--

Sr. Design Systems Designer @ Moonpig 🌙🐷 • Figma Community Advocate • 🎓 Educator: chk.fyi/LearnFigma • 383k+ Medium views • #DesignSystems #DesignOps.