Variant Component Properties

We will be creating a button with an icon with properties to change the text label, the The icon and also switch the icon on and off. Then we will create Bottom types such as filled and outlined and then finally Variant for different states such as enabled, hovered and pressed.

1. Create a new Figma project create a new page and call it Components. Bring in some icons using the material design plug-in from the Figma community and change each of them into components so they will appear in your Assets panel.

1. We will now create a button with an icon using auto layout

1. We will now add Component Properties for the text label, switching the icon on/off and also changing the icon

1. We will now use Variant to create a button Type (filled) and three State properties: enabled, hovered and pressed.

1. We will now use Variants to create a button Type (outlined) and three State properties: enabled, hovered and pressed

1. We will now drag out and copy a Instance of the button Component from the Assets panel onto a new page and frame - and see how we can apply States and Properties in a layout view.