What is all this?
Let us keep it simple.
Styles
What it is: Saved design choices.
When to use it: When you want to reuse colour and type easily in Figma.
Tokens
What it is: Named values for design.
When to use it: When you want a system, and a way to export to code.
Variables
What it is: A smarter version of tokens, inside Figma.
When to use it: When you want flexible themes and a more dynamic way of working.
1. Start with styles. Build the visual language.
Styles in Figma are the simplest place to start. They let you save and reuse colour, typography and effects across a project.
Examples:
Make a primary colour as a style, for example orange.
Make a Heading / H1 type style.
Make a Shadow / Soft style for shadows.
Advantage: Very easy to use. You click, and you reuse.
Limit: Little logic. Hard to switch theme, or to export to code.
2. Use tokens if you want to think in systems
Design tokens are structured, named information that describes design decisions. You can use plugins such as Figma Tokens or Token Studio to make a token system that developers can use directly.
Examples:
color-primary = #FF5733
spacing-small = 8px
font-heading = Inter Bold
Advantage: Good for working with developers, and for building a system.
Limit: It asks for a bit more tooling and structure.
3. Try Figma variables if you want more power
Variables in Figma are a newer way of working. You define values you can use directly in the design, and switch theme with one click, for example light and dark mode.
Examples:
A variable color-primary = #FF5733, used on buttons.
A variable spacing-md = 16, used in the layout.
You make a light theme and a dark theme, and switch between them.
Advantage: Flexibility, logic and control of themes, without plugins.
Limit: A slightly new way of thinking. Not hard once you try it.
How to start, step by step
Step 1: Start with styles in Figma
Make colour styles with names such as Color / Primary and Color / Text / Dark.
Make text styles for headings and body text.
Reuse them through the whole design.
Step 2 (optional): Use variables instead, or as well
Go to Assets, then Variables, and make variables for colour and spacing.
Use them in your components.
Make a dark theme and a light theme if that fits.
Step 3 (when you are ready): Explore tokens
Install a plugin such as Figma Tokens.
Make named tokens that can be exported to JSON or CSS.
Work with developers on the same system.
In short: what should you choose?
Just you, and a simple project? Use styles.
You want a system, and you like Figma? Use variables. Simple, and current.
A large team, or a design system with developers? Use tokens, possibly combined with styles or variables.
This is meant as a simple introduction. There is more if you go further into Figma variables or tokens.