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.

This example you can see a product name, product image, offer price and total price entered once and matched to all variants.

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…