Workshop: Building token-based Design Systems in Figma Basics - Step by step

Into Design Systems
2 ratings

Learn how to create and apply Design Tokens in Figma. With Figma Tokens you will be able to easily customize and maintain your Design System and create Themes (e.g Light & Dark Themes) within minutes.

Hands-on workshop designing token-based design systems in Figma utilizing the plugin "Figma Tokens".

3 hours of practical content

Workshop Trailer:


What you’ll learn from this course:

In this workshop you will create tokens for choices that drive your design system's foundations and components.

  • spacing
  • border radii
  • typography
  • color
    By using the plugin we'll be able to store the tokens on a single source of truth, enabling designers and developers to both access the same design tokens.

Supported Tokens

  • Colors (Fill, Border Color — hex, rgba, hsla)
  • Spacing (Horizontal, Vertical, Gap)
  • Sizing (Width/Height)
  • Border Radius (individually or each corner)
  • Border Width
  • Opacity
  • Typography (Font family, font weight, font size, line height, letter spacing, paragraph spacing)
  • Shadow tokens (both dropShadow and innerShadow)


Workshop facilitator:

Jan Six, Sr. Product Designer at GitHub & creator of the Figma Tokens Plugin

What's inside - Preview:







NEW: Upcoming live workshop:

Live Workshop: Building token-based Design Systems in Figma - Part 2

Live hands-on workshop designing token-based design systems in Figma utilizing the plugin "Figma Tokens".

🗓 Date: May, 22nd 2022
Time: 4PM - 8PM CET
⏱Duration: 4 hours
🙋🏽‍♂️Workshop facilitator: Jan Six, Creator of Figma Tokens Plugin & Sr. Product Designer at GitHub
🎟 Limited spots
🛸 This live workshop is a pre-event of our live conference "The Future of Design Systems"


👉🏻 Figma Tokens Live Workshop


⭐️Praise from the community:

"Best workshop ever"

Karla

"This is amaziiiinggg!!!! working on a multi-brand. This will make work easy for me. I have been looking for this much flexibility. And this is just it for me."

Samuel

"Ok ... mind blown ..."

Jay

-Quantity 1+
2 ratings
  • ⭐️Learn how to save tons of hours of time by building a token-based Design System in Figma with Jan.

  • ⭐️Learn how to save tons of hours of time by building a token-based Design System in Figma with Jan.

Ratings

5.0
(2 ratings)
5 stars
100%
4 stars
0%
3 stars
0%
2 stars
0%
1 star
0%
Powered by

Checkout

Workshop: Building token-based Design Systems in Figma Basics - Step by step

Enter your info to complete your purchase of Single License

Card

or pay with
You'll be charged US$249.