Starting point for the new advanced prototyping in help articles.

An in-depth session with Designer Advocate Miggi, Software Engineer Ricky Rajani, and PM Garrett Miller on how to build even higher fidelity prototypes with less complexity.

Software Engineer Jon Kaplan, Product Designers Nikolas Klein and Chia Amisola, and Prototyping Product Manager Garrett Miller talk about the newly announced advanced prototyping features.

See how variables, conditional logic, and expressions can let you build more realistic prototypes with fewer frames and connections. Available on Professional plan and up. ​“Prior to variables, prototypes that have changing states e.g. adding items to cart, required duplicating frames and connections to mimic those flows. Now, you can set and modify variable values with prototyping actions to create dynamic prototypes with as little as a single frame and couple of interactions!”

A short video tutorial on building advanced prototypes with variables and two new prototyping actions: Set Variables and Conditional.

“159 variables across 13 modes, totaling 1,843 values” — cheers to the Figma API!

Cool to see how Atlassian has already rolled out the variables support to their massive Components and Design Tokens libraries.

Zander Whitehurst shows how to switch color modes with new variables, supafast!

I was wondering what variables mean for Tokens Studio. Turns out the new version 1.37 already supports them, and the founder is very excited: “…this removes the need for the plugin to do all the heavy lifting itself. Applying design tokens should not be a plugin’s job, and I’m looking forward to Figma supporting even more token types and values!” Jan also answers some questions in this short video.

Developer Advocates Jake and Akbar made a couple of sample plugins for importing/​exporting variables and converting existing color styles to variables. (Also, Ryhan provides an interesting insight into how Figma migrated from color styles to variables in their internal design system.)

Confused by how variables are different from styles? Design Systems Product Manager Jacob Miller explains: ​“Styles can contain multiple fills as well as blend modes, and that restricts their use case for design-code alignment and where we can apply them. […] Variables are a single value. They’re more atomic. This means we will be able to use color variables anywhere you see a hex code.” This is my favorite way to think about it: ​“One way to think of it is a style is a CSS class (a group of values), whereas a variable is like a CSS variable.” 

A starting point in help articles about variables: ​“Variables in Figma store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.”

Speaking of help articles, in Figma Beta Features you can see that additional variable types (images and typography), properties (strokes, effects, opacity), and extended collections (Enterprise-only) are coming later this year.

An in-depth session by Designer Advocate Luis Ouriach and Design Systems PM Jacob Miller on how you can level up your design system in Figma for better scalability, theming, and more using variables.

An interactive playground designed to help you get started with variables. These playgrounds are the best step-by-step guides to new Figma features.

This short video tutorial covers how variables work, and how to use them to represent design tokens and account for different modes and themes.

An insightful thread about Dev Mode from Joel Miller, a Product Designer on Dev Tools at Figma: ​“It’s the culmination of an ~18-month journey, filled with countless riffs, prototypes, reviews, PRDs, and PM mocks. Here’s my story of how we got here.”

Linear wins the most over-the-top plugin page award. The new plugin enables designers and engineers to collaborate seamlessly without the need to switch tools or context by creating and linking to issues directly from Figma, navigating design tasks in context, and collaborating across teams and tools.

If you’re ready to dive in, this help article is a good introduction to starting using Dev Mode.

“The Figma for VS Code extension lets you navigate and inspect design files, collaborate with designers, track changes, and speed up design implementation — all without leaving your development environment.”

An in-depth session with practical perspectives on how designers and developers can leverage brand new Figma capabilities to unlock tighter collaboration with one another, prepared by four Figmates — Developer Advocate Jake Albaugh, Group Product Manager Avantika Gomes, Designer Advocate Lauren Andres, and Software Engineer Jenny Lea.