Design Tokens with Figma Variables
4.6 (19)
10 Days
·Cohort-based Course
Learn how to work with Figma’s powerful variables for design systems.
Design Tokens with Figma Variables
4.6 (19)
10 Days
·Cohort-based Course
Learn how to work with Figma’s powerful variables for design systems.
Graduates at
Course overview
Set design foundations to improve your workflows
Variables aren’t just for developers anymore! Now, from the comfort of our design workspace, we can unlock the power of more adaptive and flexible design. Boost your designs by adding support for light, dark, and high contrast color modes. Improve usability by supporting multiple densities.
Take your designs to a whole new level with fewer headaches and more precision. Why should developers get to have all the power (and fun)?
The course is designed to fit your busy schedule. We meet for 8 hours total—4 sessions of 2 hours each.
Mondays and Wednesdays
July 22, 24, 29 & 31
9:30am – 11:30pm Pacific
12:30pm – 2:30pm Eastern
6:30pm – 8:30pm CET
Who is this course for
01
Junior designers who want to get ahead of the curve and stand out from the crowd
02
Seasoned designers who are looking to up their game and support new capabilities in their products
03
Senior designers looking to take their learnings back to their teams
What you’ll get out of this course
Use color variables like a pro
Build color palettes that differentiate between primitive color values, semantic colors, and component-specific colors.
Use numbers to define spacing and sizing systems
Stop pixel-pushing and start using a system that translates more immediately to the implementation of your designs.
Integrate variables into a system of typography styles
Make your typography styles more powerful using variables to support responsive design.
Communicate better with developers
Your developers already think in terms of variables and conditional logic. Now you can too without leaving the comfort of Figma!
What’s included
Live sessions
Learn directly from Nevan Scott in a real-time, interactive format.
Lifetime access
Go back to course content and recordings whenever you need to.
Community of peers
Stay accountable and share insights with like-minded professionals.
Certificate of completion
Share your new skills with your employer or on LinkedIn.
Maven Guarantee
This course is backed by the Maven Guarantee. Students are eligible for a full refund up until the halfway point of the course.
Design Tokens with Figma Variables
Course syllabus
4 live sessions • 11 lessons
Week 1
Jul
22
Session 1
Jul
24
Session 2
Course Intro
Color modes
Density modes
Week 2
Jul
29
Session 3
Jul
31
Session 4
Typography styles
Design Tokens for Design Systems
Project
Wrap up
4.6 (19 ratings)
What students are saying
What you’ll learn
Nevan shows what you’ll be learning and working on in class.
What people are saying
Héctor Rebollo
Johanna Grimberg
Lina Forero
Sabrina Arcella
Meet your instructor
Nevan Scott
Head of Education at Button School
Nevan has been teaching designers and developers for over a decade, and still loves every minute of it! He’s led programs at General Assembly and Ironhack, and coached designers and developers at every stage of their careers. He’s built design systems for the Swiss Red Cross, Northeastern University, Rustic Pathways, and Buzzfeed.
Be the first to know about upcoming cohorts
Design Tokens with Figma Variables
Course schedule
8 hours over 4 sessions
Live Classes
4 Sessions
We’ll meet live on Zoom for lessons, demos, and small group practice sessions in breakout rooms.
Take-Home Exercises
2 hours
You’ll have exercises to practice with between sessions to enrich your learning and bring more insight to class discussions.
Design Tokens: A Visual Primer
This brief visual guide will walk you through the most essential design tokens and naming conventions for any design system. A great companion to keep at your side as you work through organizing and naming variables in Figma!
Get this free resource
Learning is better with cohorts
Active hands-on learning
This course builds on live workshops and hands-on projects
Interactive and project-based
You’ll be interacting with other learners through breakout rooms and project teams
Learn with a cohort of peers
Join a community of like-minded people who want to learn and grow alongside you
Frequently Asked Questions
Stay in the loop
Sign up to be the first to know about course updates.
Be the first to know about upcoming cohorts