Config is Figma’s annual design conference, where we bring the Community together for two days of exciting feature launches and talks from industry professionals.
In this article, we’ll walk you through the features we announced during Config 2023. Some of these features launched in beta, so we’ll indicate the availability for each feature and keep you in the loop with any updates.
Dev Mode open beta
New Dev Mode experience
We introduced a brand new space in Figma design just for developers: Dev Mode.
Dev Mode gives developers everything they need to navigate design files and transform designs into code. With Dev Mode, designers and developers stay on the same page, making sure important details aren’t lost in the handoff process.
Get to know Dev Mode:
- Guide to Dev Mode →
- Navigate designs in Dev Mode →
- Use code snippets in Dev Mode →
- Compare changes in Dev Mode →
- Link dev resources to layers in Dev Mode →
Visual Studio Code plugin
In addition to Dev Mode, the Figma for VS Code gives developers a new way to navigate and inspect design files, collaborate with designers, track design changes, and speed up design implementation—all without leaving Figma. With Figma for VS code, eliminate context switching and busy work by bringing these tools together.
Variables open beta
We also announced variables! Variables in Figma design 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.
For example, with variables you can:
- Create design tokens for better efficiency when managing design systems
- Switch a frame between different device sizes and have spacing immediately update, according to a defined spatial system
- Preview how text flows in different languages by switching copy on a frame
Learn all about variables:
- Guide to variables →
- Overview of variables, collections, and modes →
- Create and manage variables →
- Apply variables to designs →
- Modes for variables →
When prototyping with variables, you can build high-fidelity prototypes using fewer frames—no noodles needed. Plus, get even more advanced with features like expressions and conditionals to take your prototypes to the next level.
Learn how to make advanced prototypes:
Prototype inline preview
Prototypes replicate how users might interact with your designs, allowing you to see and test how they work before moving to development. Now, you can preview your prototypes directly from the canvas without needing to enter Preview or Play mode.
Auto layout (version 5)
Auto layout is a powerful feature, and version 5 brings new support and flexibility for wrapping and min/max width. First, wrapping enables you to wrap objects to the next “line” once the maximum of the width of the parent container is reached. Meanwhile, min/max width lets you define a minimum and maximum width and height for a given layer.
File browser glow up
The file browser is the home of your account and holds all of your Figma design and FigJam files. This year, our file browser went through a glow up! The file browser got an update and improvement to the layout, functionality, and look of the browser.
Picking the right font can help determine the legibility and appeal of your design. That’s why this year we announced font picker. Font picker lets you preview your fonts, search for a font you’re looking for, or peruse organized groups of fonts so you can find the perfect one for your design.
Watch all of Config 2023
If you weren’t able to make it live, catch up on the recordings of Config 2023 on our YouTube channel →. We’ll be posting more videos, so subscribe to never miss a new video.