If you have time for only one thing this week, this should be it. First, Figma CEO Dylan Field introduces new features — variables, auto layout updates, and advanced prototyping. Then, CTO Kris Rasmussen talks about rethinking product building from the ground up and how the new Dev Mode is bringing design and engineering closer together. In the end, Dylan talks about file browser refresh, font previews, and what AI could look like in Figma — wrapping things up by announcing the acquisition of Diagram.

I watched every Config keynote over the years, and this year’s announcements were the most anticipated and ambitious ever. It’s incredible to see how Figma is growing in depth and breadth at the same time, now providing incredibly advanced tools while covering an entire product-building process from brainstorming to design to development. Exciting time to be a maker.

Dylan’s recap of all the updates from the keynote, in a brand-new blog. ​“Our vision is to build a new kind of design tool — one that is designed for the entire product development team. Today’s launches reimagine how design and development come together in Figma. I’m excited to introduce three ways we’re doing this: making developers feel at home in Figma with Dev Mode, connecting design to the language of code with variables, and putting a step in between a 2D design and a shipped product with advanced prototyping.”

A YouTube playlist with recordings of all 47 sessions (some split into multiple videos) from Config. As the conference had 5 tracks on the first day and 6 tracks on the second, I didn’t attend most of those sessions and looking forward to catching up during the next few weeks.

Herbert and Jenny from Figma’s editorial team take us behind the scenes of Config 2023 with daily recaps of what it was like in the heart of the action.

A new feature page for the Dev Mode, a space in Figma for developers offering features that help translate designs into code faster. This is a great overview to learn about inspecting designs, exporting variables as design tokens, generating production-ready code snippets, integrating Figma into your development workflow, bringing design files into the VS Code, adding structure to the handoff process, and comparing changes. Dev Mode is currently in beta and free to use through 2023.

Kris Rasmussen, CTO of Figma, answers a question of how a design tool can work better for developers by introducing Dev Mode, ​“a new workspace in Figma that’s designed to get developers what they need, when they need it, harnessing the tools they use every day.” Something I didn’t expect: ​“Today, we know that on our paid plans more developers visit Figma than designers.” With this in mind, it’s great to see new plans for developers: ​“Starting in 2024, you’ll have an option to purchase Dev Mode access only for $25 per seat per month on Organization, and $35 per seat per month on Enterprise.”

(If you’re curious about what developers think about Dev Mode, check out comments on Hacker News. While that community tends to be overly negative, it’s interesting to see what kind of problems Figma is addressing with this launch.)

This playground is an interactive guide to the Dev Mode, made with two audiences in mind. Designers will get to know how to set up files for handoff, connect design and code, and explain Dev Mode to developers, while developers will learn how to track design status and changes, inspect designs, get relevant code snippets, and use plugins to extend and connect workflows.

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.

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 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.

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 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.

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.

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.” 

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.)

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.

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

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

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

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

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!”

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.

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.

Starting point for the new advanced prototyping in help articles.

A fully working version of Flappy Bird made with physics-based movement, pseudo-randomized pipe placement, and scoring. Made by Dave Williames using 46 variables.

One of the fun test files that Figma engineer Willy Wu used for testing advanced prototyping. ​“With stuff like this, we’re entering Turing-complete territory… it’s only a matter of time before someone gets Doom running in Figma!”

Miguel Solorio already built a simple, functioning calculator with advanced prototypes and variables.

And here is a fully functional stopwatch demo as well.

Noah Levin, VP of Design, unveils Figma’s vision for AI and shares that Figma has acquired Diagram. (It’s fun to look back at all Jordan’s experiments I shared in this newsletter, starting from 2020.) ​“In short, AI can help us do more — across every part of the product development process — faster. It’s not a feature, but a core capability; more than a product, it’s a platform that can up-level our work to the plane of problem solving — arguably the core pursuit of our craft, and the reason many of us got into design and product building in the first place.”

The first segment of the opening talk of the second day, with Noah Levin and Diagram team discussing how AI will shape our future and work. Continue by watching Generative AI and Creative Arms Race by Ovetta Patrice Sampson from Google, AI and empowering creative careers by Scott Belsky and Brooke Hopper from Adobe, and wrap up with The crescendo of AI in our collective future by Kanjun Qiu and Reid Hoffman.

The first-ever demo of a new plugin by Diagram. Can’t wait for it to become a part of the editor!

With the latest round of auto layout updates, learn how you can wrap objects to a new line, set minimum and maximum widths and heights, and truncate text based on a set number of lines.

Lauren Budorick explains how the new text truncation works: ​“Now, whenever we can, we figure out at line layout time whether the next line will fit. If it won’t, we’ll override our line breaking engine to say that, if this is the last line before truncation, every glyph pair is breakable.” She also points to where the new ​“Max lines” truncation feature can be found.

Oh my, this one was long in the making! Font previews were first announced at Config 2020, but now they’re finally live along with other improvements to the font picker. See this feature tour from KC Oh.

A refresh to the file browser, so you can spend less time searching, and more time creating. New shared projects and files tabs help you easily find files that others have shared with you. Search, Recents, and notifications now include content across your entire account.

Small improvement, but I know it will make many people excited!

You might have noticed that some of the above links point to Shortcut, Figma’s new blog. ​“Explore insights and opinions from industry leaders, get tips and inspiration from creators using Figma to build great things, and go in-depth and behind-the-scenes with the Figma team.”

“After a year of exponential growth and a successful beta, Figma and Google for Education are doubling down on the promise of bringing design and technology tooling on Chromebooks to K12 students across the US and Japan. […] Today, we are excited to take another step forward in this journey by opening up free Figma access to all K‑12 districts across the US.”

It might be hard to notice if you’re logged in to the app, but Figma rocks a new marketing website! Such a clear message and beautiful design.

“Apple’s initial visionOS design kit for Figma contains a comprehensive set of UI components, views, system interfaces, text styles, color styles, and materials. All of the core ingredients you need to quickly create highly realistic visionOS app designs.” See also Designing for visionOS at Apple Design Resources.