5 Major Figma updates on Config 2023 | by Sepideh Yazdi | Medium

Yesterday Figma released a lot of updates. These updates can be categorized into 5 groups.

1. Variables
2. Auto Layout
3. Advanced Prototyping
4. Dev Mode
5. Enhance Overall User Experience

Roadmap for this article

This article has these 5 sections. At the beginning of each section, I explained a brief about the update and then I included the details of that update in sub-sections. Each sub-section has a small Gif that shows how the feature works briefly. After the details, I added all the Figma resources, playgrounds, guidelines, and tutorials. Finally, at the end of each section, I added a recap that summarizes the whole section plus a screenshot of the slide deck of the keynote. So you can scroll and read those if you like.

If you don’t have time

At the end of this article, I added a summary of all these features so that you can scan it within the second and decide to read the in-depth details of any section that you are interested in.

While everyone was expecting tokens to be the updates, Figma released Variables.

With variables, we can make adaptable designs. With different themes and device formats and they can be exported as tokens.

1.1. Adaptation to change

Variables can be different things like colors, numbers, or words. They can have different values in different modes, like light and dark modes.

1.2. Design in another dimension

With number variables, we can change things like width, height, and spacing to create different layouts easily.

1.3. Localization in one click

With word variables, we can include and switch between different languages for designs that everyone can understand.

1.4. API to get serious

The API documentation has been improved to make it easier to manage design systems.

Variables plugin API

Variables REST API (read and write, Enterprise plan only)

1.5. Plugins to help

A number of plugins to help us get started.

Variables import/export plugin

Styles to variables converter

To recap, with variables we can define different color, number, string, and Boolean variables. We can group them and name them accordingly and we can define different modes. (Free plan 1 mode/Pro and Org 4 mode and 40 modes for Enterprise plan)

Resources for variables

If you want to start and test this feature here is the tutorial.

Here are the community resources: