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: https://youtu.be/mft8CUDZ52s
00:00 Adding variants to components
00:56 Linking variables to component variant

Видео How to link Figma variables to components канала Paavan — Designer in London