Cohort 1

Learn how to work with Figma’s powerful variables for design systems.

Nevan Scott

Head of Education at Button School


Design Tokens with Figma Variables

Accenture

Adobe

Google

Pentagram

Square

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&nbsp;8 hours total—4 sessions of 2 hours each. Mondays and WednesdaysJuly 22, 24, 29 &amp; 319:30am – 11:30pm Pacific12:30pm – 2:30pm Eastern6:30pm – 8:30pm CET

Set design foundations to improve your workflows

Junior designers who want to get ahead of the curve and stand out from the crowd

Seasoned designers who are looking to up their game and support new capabilities in their products

Senior designers looking to take their learnings back to their teams

Who is this course for

What you’ll get out of this course

Build color palettes that differentiate between primitive color values, semantic colors, and component-specific colors.

Use color variables like a pro


Stop pixel-pushing and start using a system that translates more immediately to the implementation of your designs.

Use numbers to define spacing and sizing systems


Make your typography styles more powerful using variables to support responsive design.

Integrate variables into a system of typography styles

Your developers already think in terms of variables and conditional logic. Now you can too without leaving the comfort of Figma!

Communicate better with developers


Variables in Figma unlock new possibilities for color systems in different themes.

Color systems

We’ll explore spacing systems that support multiple densities, and start use variables to define sizes for things like icons.

Spacing and sizing systems

We'll use conditional logic to hide and show elements based on the current state, navigate to different screens depending on what the user has selected, and calculate live information based on user input.

Variables for logic

Course syllabus

What you’ll learn

What people are saying

Meet your instructor

We’ll meet live on Zoom for lessons, demos, and small group practice sessions in breakout rooms.

Live Classes

You’ll have exercises to practice with between sessions to enrich your learning and bring more insight to class discussions.

Take-Home Exercises

Course schedule

This course builds on live workshops and hands-on projects

Active hands-on learning

You’ll be interacting with other learners through breakout rooms and project teams

Interactive and project-based

Join a community of like-minded people who want to learn and grow alongside you

Course completed by

About this course

Get notified about the next cohort

Learn from live sessions