Get started with variables

Templates
Figma Resource

Use this file to follow along our

Intro to variables

and

Prototype with variables

video tutorials.

Intro to variables

Variables in Figma store reusable values, like color values and numbers, that can be applied to all kinds of design properties. They act as a source of truth that helps you design faster, and make design systems more powerful and efficient to manage.

In this tutorial, learn how to use variables to help you design faster, use aliasing to implement design tokens, and account for different product themes.

Prototype with variables

With variables, you can build high-fidelity prototypes using fewer frames. We’ve introduced two new prototyping actions: Set Variable and Conditional. In this video, you’ll learn how to use variables to build advanced, realistic prototypes.