What We Do

Company

Resources

Events

Blog

Free Consultation

ahoy@headway.io

(920) 309 - 5605

3 min
Design Tokens in Figma - Setting Up Your Design System
Subscribe

Design Tokens in Figma - Setting Up Your Design System

Billy Sweetman
Head of Design

Design systems and their corresponding UI kits are a great tool to speed up the design process and development. However, there is still a delay between a change in the design and when it gets adjusted into the living development environment.

One way to speed up this process is by creating design tokens.

In this blog post, we'll cover how to setup your Figma file and some tools that can help facilitate the tokenization of your design system in Figma.

What we'll cover

  • What are design tokens?
  • Benefits of design tokens
  • What to set up as design tokens
  • How to prepare your Figma file
  • Design token tools to help facilitate the communication

What are Figma design tokens?

Design tokens are visual values that construct the foundational pieces of your designs. These items must be simple data components that can easily be consumed by our living coded design system. Examples of design tokens are elements like colors, type styles, spacers, shadows, animations.

visual example of what a design token is

Rather than using hard-coded values such as pixel values or hex values for color, design tokens create consistency as your design system scales.

Benefits of design tokens

Setting up tokens will not only speed up the hand-off from design to development - it will also help keep things consistent between design and development. After the initial setup, these tokens will help push changes from your design tool to the live system - either completely automating the process or automating a good portion of the process.

Here are some benefits:

  • Faster hand-off process
  • Consistent design implementation in development
  • Increases design automation

What to set up as Figma design tokens

There are a lot of components that could be tokenized - however we want to focus on the lowest building blocks for our system. Those building blocks tend to be the least complicated components or things that are the foundations of our system.

  • Colors
  • Opacity
  • Typographic Scale
  • Shadows
  • Corner Radius
  • Vertical Spacers
  • Animation Curves

How to prepare your Figma file

Once we've selected what items we want to set up for tokenization we'll need to work that into our design system in Figma as well. This is one of the first steps we'll do when working on our design systems.

Where to store Figma design tokens

One of the biggest questions is where do you store your tokens.

We tend to fall into the multi-tiered UI kit for large systems and have our tokens in their own file. But if you look at our Shipwright UI Kit in Figma they can also be stored right in the UI kit as well. We recommend having them as their own page if that is the case.

design system tokens example in figma file

Once you've decided that, the rest is really setting up your colors, type, and shadows as different styles in our Figma file. There currently isn't a way to save spacers as a style, so we'll make those as components that we can use in our designs.

Review with design and development team

Once your styles are setup, it's a good idea to walk through all the design tokens you created and where they will live with the design and development team. Go through the token page and cover any questions they might have.

Naming conventions

When you meet with the design and development team, another key thing to discuss is creating a naming convention that works for your team and product.

Figma design token tools and management

Toolabs

screenshot of toolabs design system manager

One of the tools that will help connect your Figma design system to your developed system is Toolabs. This tool will allow you to create a page with the entire system visible to your developers. There is even an API that can be accessed.

Toolabs - Design System Manager

Figma API

figma api process for design tokens

Another direction you can go, is to hook up directly to the Figma API. Below you can find a great blog post to learn more.

Design Tokens with Figma API

Next steps and development

Now that your file is prepared, the next step is to work with the development team to get them living in the coded system. Check out the process we use to update our design systems.

Become a design system pro with our new course

image promo for design system course

Want a more in-depth guide on design tokens?

We recently just launched our Figma design system course.

It includes 20+ videos and free Figma templates to make the design system process way easier.

Free design system resources

Intro to Design Systems

Design System Management and Documentation

Design System Updates and Communication

Multi-Tiered UI Kits for Design Systems

Figma Plugins for Better App Design Workflows

Free Figma UI Kit and Design System Template

What Is Design Debt and How to Manage It

Want to join our design team?

We're always looking for talented and open-minded people to help us bring new ideas to life. See what it's like to work at Headway and the opportunities we currently have available.

Learn more about careers at Headway

Asking Better Questions About Your Product

Download our free guide to begin implementing feedback loops in your organization.

By filling out this form, you agree to receive marketing emails from Headway.

Scaling products and teams is hard.

In this free video series, learn how the best startup growth teams overcome common challenges and make impact.

Scaling products and teams is hard.

In this free video series, learn how the best startup growth teams overcome common challenges and make impact.

You don’t need developers to launch your startup

In this free video series, learn proven tactics that will impact real business growth.

By filling out this form, you agree to receive marketing emails from Headway.

Make better decisions for your product

Dive deeper into the MoSCoW process to be more effective with your team.

By filling out this form, you agree to receive marketing emails from Headway.

A mindset for startup growth

In this free video series, learn the common mistakes we see and give yourself a greater chance for success.

By filling out this form, you agree to receive marketing emails from Headway.

The ultimate UX audit kit

Everything you need for a killer DIY audit on your product.

  • UX Audit Guide with Checklist
  • UX Audit Template for Figma
  • UX Audit Report Template for Figma

Enjoyed this post?

Other related posts

See all the ways we can help you grow through design, development, marketing, and more.

View All

Listen and learn from anywhere

Listen and learn from anywhere

Listen and learn from anywhere

The Manifest

Level up your skills and develop a startup mindset.
Stay up to date with the latest content from the Headway team.