DECEMBER 15, 2023

/
#FIGMA
How to Use Variables in Figma – A Handbook for BeginnersIjelekhai Faith Olohijere

Prerequisites:
Table of Contents:
What are variables?
Differences between Variables and Styles in Figma
Why are Variables Important to the Design Process?
How to Create Variables in Figma
How to Create Colour Variables in Figma
How to Create Colour Variables for Tokens
How to Implement Colour Variables in Your Designs
How to Create Different Modes with Variables
How to Create Number Variables in Figma
How to Create String Variables in Figma
How to Create Boolean Variable in Figma
How to Use Variables for Advanced Prototyping
Advanced Prototyping with Number Variables
Advanced Prototyping with Boolean Variables
How to Use Variables for Developers- Using APIs
Conclusion
What Are Variables?
Differences between Variables and Styles in Figma
Variables are a more advanced feature, and they allow you to define and reuse values like colours, text, and spacing across your designs. On the other hand, styles are predefined sets of design properties such as text styles, colour styles, and effect styles.
Variables allow designs to change when used in various contexts, because of their dynamic nature, unlike styles. For example, you can change your designs from light mode to dark mode or have padding values change when designing for different devices. This makes variables useful for creating design systems with adaptable components.
Variables offer a more flexible design process in creating flexible design components, especially where you want to change values like button text or color on different instances of the same component. Styles are typically used for maintaining consistent design elements like button styles, text headings, or colour palettes.
Variables can store raw, single values, while styles store sets of values.
Why are Variables Important to the Design Process?
How to Create Variables in Figma
Color: used for colour fills.
Number: used for dimensions, corner radius, and auto layout properties.
String: used for text layers and variant properties.
Boolean: used to toggle layer visibility.
How to Create Colour Variables in Figma
Step 1: Open a new Figma file

Blank Figma file

Step 2: Choose a colour palette

Creating a colour palette

Step 3: Create variables for each colour

Click on local variables

Create a colour variable

Choose colour variables

Rename variable & type in colour code

Edit variable

Edit the colour variable/add a description

Create variables for other colours

Group the colour variables

New group with selection
Edit variables
Duplicate variables
Delete variables

New group with selection

Rename group

Colour blue variables grouped.

Rename collection

Renamed primitives collection

How to Create Colour Variables for Tokens

New collection

Creating and grouping text variables

Assigning colour from libraries

Choosing colour black

Assigning colour variables for text

Colour variables for surfaces and borders

How to Implement Colour Variables in Your Designs

Low-fidelity wireframes

Click on button

Select a fill colour from the colour variables in libraries

Implemented button colour

Implementing colour variable for button text

Implemented button text colour

Updating colour variables for other screens

Adding illustrations to updated design

How to Create Different Modes with Variables
Primary Button
Main Blue
Main Black
Main Background

Opening "Local variables"

Creating a new collection

Renaming a collection

Renamed collection "Modes"

Creating a variable called Color

Created color variable with default colour code: FFFFFF

Renamed color variable: Background

Clicking on the plus icon

Column 1 (the title of the variable – Background)
Mode 1 (the first value of the variable – colour code FFFFFF)
Mode 2 (the first value of the variable – colour code FFFFFF)

Created new mode

Renamed modes: Light & Dark

Changed value for dark mode background

Continue Reading