June 22, 2023

Figma Updates from Config 2023

A ton of big updates to Figma were announced yesterday at Config 2023. Here’s a big list:

• Dev Mode - A dev-first view focused on maintenance, reusability, and composition that can be toggled in any Figma design file, with an improved selection mode, a visual compare changes feature, unit customization, a streamlined list of sections, a “ready for dev” state. And it’s fully extensible with plugins to support advanced features like code export. This is huge.
• Variables - Figma’s take on design tokens. Reusable values like color, string, boolean, numbers (with image and variable type values coming soon) that can be stored and used for common values like spacing, color, etc. Figma variables support complex scoping, like setting variables at the global scope or on individual elements. You can even alias variables, meaning you can create multiple layers of variables (e.g. component-specific color → semantic color → base color).
• Modes - A powerful tool for changing variable values in different contexts. If you think about color variables, two modes might be dark more and light mode. If you think about max-width variables, you might have mobile mode, tablet mode, and desktop mode. Modes will be a very important part of using variables well.
• Better Prototyping - Paired with variables, more complex user flows are possible, with multiple actions now being supported on action triggers, expressions (like increasing or decreasing the value of a variables), conditionals, and an inline view of your active prototype.
• Autolayout Updates - Values like min-width and max-width can be set on elements along with wrapping rules to create truly responsive layouts and mimic a lot of browser-based flex behavior. Also more advanced text truncation.
• VSCode Extension - A peek into your Figma designs from within VSCode, with code completion, the ability to link code to design elements.
• Updated Font Picker - The font picker finally got some love, with search, filter, and the ability to preview the font face.
• Updated File Browser - Lots of improvements to the file browser, including better sorting and filtering and a dedicated shared section.
• Diagram Acquisition - Figma acquired Diagram, a company with a suite of AI-powered design tools, so expect AI-improvements coming to the tool in the future.

I’m most interested in and excited for Dev Mode and Variables. Using those well will be an important part of good collaboration between dev and design. More from me about that in the near future.

—
Cheers,

Up Next: Where does AI fit in product design?

← Full Archives