Figma Config has become one of the main events for designers. Event organized by leading design tool creators deserves attention, not only because it includes new feature announcements. Config’s agenda is full of inspiring talks & thoughts from world-class designers.

Now let’s grab the mug of your favorite coffee, and let me summarize for you what was announced for Figma.

1. Design Tokens Variables!

When Dylan told us that they were not launching design tokens on Config, I felt disappointed for a few seconds. Because the newly introduced feature — Variables, will cover all the stuff that tokens should do and even more.

Obviously, you may define tokens for colors, typography, border radius, and spacing. However, they are much more useful — you may define copy elements as variables and translate your design almost on the fly!

They will help you define dark and light modes, and they support much more flexible theming.

Variables are also insanely useful when it comes to prototyping. But let’s get back to this later.

2. Auto Layout improvements

Auto Layout is already super-powerful, but with Config 2023, it gets extra capabilities.

First, you may now define the minimum and maximum width of the Frame.

Next, you may wrap the content according to a specific setup.

A combination of these turns your design into a responsive beast! You resize the Frame, and all elements adjust to new constraints superfast!

Finally, Figma promises also to deliver new text truncation options. Lots of useful improvements.

3. Prototyping

The new variable feature brings a lot of value also to prototyping. Is there anyone here who would not turn their prototype into a spaghetti monster? Figma knew this and found a way to help us build advanced prototypes much easier.

Imagine a design: you have a list of products and their details. Opening all details with proper images and text would require duplicating all these frames and replacing them manually to prepare a prototype.

Now When you define variables for images and copy, they may populate each page with variables or add an extra rule with a simple “if else” conditional.

We also received inline viewer and in-context editing, small things that increase the comfort of use a lot!

4. Mark as ready for dev

Design handoff in Figma is fast and easy but sometimes confusing. With a tiny improvement “Mark as ready for dev” will help us to highlight what matters for engineering the most.

5. Figma Dev mode

This is just the beginning of features that will help engineers implement our designs more precisely. Folks from Figma just announced Dev mode, which turns our favorite design tool into an advanced solution for handoff.

Devs may not only inspect colors or sizing more precisely. They got the ability to change measurement values and improve code snippets. They may benefit from design tokens variables and define them in code — a huge step forward for design systems.

There is also a new tool — plugins tailored for dev mode. Massive workflow booster for software developers.

It looks like the dev mode might be the hottest thing (after variables), impacting daily workflow.

Summing up

We got many announcements that are game-change Variables, New Auto Layout, Prototyping improvements & Dev mode. It’s time to start to learn them, practice and use them in daily work.

Stay tuned for tutorials, tips & tricks for these Figma updates soon!

Thanks for reading!