All in the (layer) name! Figma tip to get the most out of your variant components.
This tip will allow designers to add content (text and images) once and will map to the corresponding layer in the other variants automatically.
I’ve created this as a super short post to document a little tip I personally think is either not known or not shouted about nearly enough in the Design Systems community but has saved me so much time over the years.
This article will assume you are familiar with the basics of Figma and creating Components with variants.
Step 1: Create your component and add variants
These variants can use any of the Figma properties, Boolean, Instance swap or Text. Placement of the layers can be as aligned or diverse as you see fit.
In this example I use 3 variants, Horizontal-1, Horizontal-2 and Vertical
Step 2: Layer names
Name your layers, these names must match between component variants for Figma to understand what maps…