Figma

How to create a Variant-powered Component in Figma

In this tutorial I'll show you how to create a Floating Action Button Component in Figma.

Marc Andrew
Oct 12, 2021
6 min read
Photo by Ion Şipilov / Unsplash

Table of Contents

In this tutorial, I'll show you how to create a new Floating Action Button Component in Figma, so you can see how easy it is to start building your own components and how to use powerful but sometimes confusing features such as Variants.

Ok. Wow. A Floating Action Button. Well, it's more about showing you how to create Components with Variants. And like anything, it's better to start small and then work your way up to bigger things right?

Now. Variants as powerful as they are can be a little confusing the first time you start creating components with them.

But don't worry, this tutorial will fix any confusion that you might have, and you'll be Variant ready the next time you create a suitable component.

This content is only available to Members

Subscribe now and have access to exclusive content (like this), all articles and stay up to date with the latest news.

Unlock content