All Collections
Figma Integration
Inspecting Figma Variables in Zeplin
Inspecting Figma Variables in Zeplin

Learn how to inspect Figma Variables in Zeplin

Bedriye avatar
Written by Bedriye
Updated over a week ago

If you apply variables to the layers in your design in Figma, you can access them in Zeplin while inspecting these layers. When you export your design from Figma, Zeplin will automatically show the variables you’ve set up in Figma for:

  • Colors

  • Text styles

  • Copies (string)

  • Values/Number (for spacing, width, height, radius, and gap)

  • Booleans (true/false)

When inspecting a layer with variables, Zeplin reflects the variable types and values in a rectangle on the right panel. When you hover over the value on the right panel, you will see the “has variable” icon revealed next to it to indicate that the value is part of a variable. You can click on this variable icon to see the different modes for that variable.

💁‍♀️ You can click on the variable value to copy its name so that you can use it in the code.

If you have nested variables applied to your layer, you’ll also notice this nested structure in Zeplin. When you click on the variables icon, you’ll see the nested variable’s name with a gray background. Clicking on it will reveal the modes under it. You can use the back arrow to go back to the previous view.

Related articles:

Did this answer your question?