Today we are going to create a fun, animated button in Figma! Using component properties, variances, and prototype animations, we can build a dynamic and highly-flexible asset that will work across your project. Let’s explore the tools we are going to be using, and then we can watch the tutorial:
Variants
We’ll use variants as our main mechanism to manage the state of the button, such as Resting, Hover, and Pressed. Variants are great for this because we can set up prototype transitions between the variants. Then, every time this button component is used in a design, it will already have those actions applied.
Boolean
A Boolean is a simple data type: yes/no or true/false. We’ll set up the button component with the option to have an icon or not. This makes it so much more versatile in long run. We could have ‘Variants’ of the button with and without the icon, but we’ll then have to create states for those as well. The Boolean option lets us use just one set of variants to manage the state. We retain all of those interactions, but this lets the designer decide if we need an icon on the button or not.
Instance
We will manage whether we want to show an icon with the Boolean function, but we can manage which icon we show using the instance function. The instance is a specific property placed on the component that creates an endless number of variants, without having to create a set of button variants with each individual icon we might need!
Text
This is an important property to apply on every component where the content needs to be variable — like buttons! Instead of having different variants for Save, Close, Delete, or Learn More, we can use the text property to change label of the button in Figma and ensure that the content remains the same across all of the state variants.
Awesome! Let’s watch the video below to see how to combine all of these properties into a complex component that is quite easy to use.