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.
If you would like to learn more about Zeplin's Figma integration or any other topics related to Zeplin, reach out to our Customer Success crew at success@zeplin.io to schedule a 30-minute call.
Related articles: