Yesterday Figma released a lot of updates. These updates can be categorized into 5 groups.
- Auto Layout
- Advanced Prototyping
- Dev Mode
- 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.
1.5. Plugins to help
A number of plugins to help us get started.
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: