How to link Figma variables to components
Here’s how to link Figma variables to components by connecting a variable to a variant property of a component.
This technique can go a lot further — you can do colour modes, expanded/condensed spacing, different languages — but this is the fundamental way in which it works.
Skip to 00:56 if you know about how to set up component variants. I’ve only showed one way to add a variant to an existing component set. You can also do it by clicking the + in a diamond, or from the right hand side properties panel for that component.
More about variants here: • Component variants: the 11 most important ...
00:00 Adding variants to components
00:56 Linking variables to component variant