New Features in Figma: The Magic Behind Them
Figma’s annual conference, Config, was held both in person and virtually this year. Although I couldn’t attend form San Francisco (that would be the dream), I attended the conference virtually and was very excited about the new features!
It’s always awesome to see the design community get together, talk about design, and for Figma to present new features. I wasn’t really sure what to expect from the keynote presentation, but I was hoping for a feature for design tokens.
So, let’s take a closer look at those new features introduced in Figma and how to use them!
Variables
When variables were presented, the audience just went wild. They were cheering and clapping. And, the overwhelmingly positive reaction to Variables makes perfect sense.
Since design systems have been all the rage for quite some time, it has been a real challenge for teams to build and maintain one for more complex products with multiple themes, modes, and extensive documentation and to connect all this to code. Variables are Figma’s solution to these shortcomings, and they will help us build more structured systems with the flexibility needed in our design work.
Currently, four different types of variables are available: color, number, boolean, and string.
1. Color variables
These variables can be applied to a solid fill or a stroke. The exciting thing is that you can define custom values when you’re defining variables or connect them to values from existing libraries.
That means that if you need to change the color of a variable linked to a value from an existing library, you can just change the source variable instead of each and every instance of it. This not only makes updating color values much faster, but it’s also less prone to human error.
2. Number variables
Adding these variables means assigning a numerical value to define spacing, padding, radius, width, and height.
3. Boolean variables
By assigning boolean values to a variable, we can control the visibility of a layer or an instance. During the presentation, they mentioned that this is super useful for advanced prototyping, which I’ll explain in more detail a bit later.
4. String variables
String variables can be applied to text. They will help teams who work on projects with multiple languages in terms of localization and content management, but it also makes it easier to work with repeated content.
Using variables in the design
There is a clear reason why designers have been so happy to see variables introduced. It’s not just that you can now build a design system in Figma and keep it all neat and organized.
With variables, it’s now possible to create a light and dark mode design much faster and see if the color schemes work for both solutions.
Even if you need to add a theme to your product, you can easily do so by defining the Color Variables for the new theme.
Of course, this is just the beginning, and there will be more possibilities in the future with this feature.
Advanced Prototyping
Another huge announcement that I mentioned previously is Advanced Prototyping. It allows creating more dynamic prototypes with fewer screens and fewer connections in Figma.
I’m pretty sure that every designer who wanted to show how a product would behave in a multitude of different possible scenarios had to create a massive amount of screens that would all show each and every possible scenario. This, in turn, led to so many connections that it was a pain to look at them once you switched to the prototype mode. And editing or changing the flow made many designers cry (I’m yet to shed a tear). However, I myself am guilty of skipping prototyping entirely sometimes because of the number of connections, confusion, and painful editing that takes up just too much time.
But alas, help is now here, and we can build more powerful prototypes that show how a product would work more realistically. And the magic behind this Advanced Prototyping lies within Variables.
Designers can now create dynamic prototypes using variables, conditional logic, and expressions.
Thank God, that means designing fewer screens for all possible outcomes, which leads to fewer connection nodes on the canvas.
I can’t wait to try it out and play around some more, and I can only imagine how much easier it will be to prepare prototypes for user testing!
Auto-Layout Updates
Many designers now can’t even imagine how it was to design something without auto-layout. I personally love using auto-layout and would never ever go back to just grouping elements.
But I did find there were some shortcomings with the current auto-layout. For example, when I designed tags with fully rounded corners with the content of different lengths, the ones that contained really short words always ended up looking more like a circle than a pill-shaped tag. Well, we can now apply min and max width to components to fix this.
And the second update they’ve introduced is wrapping elements when an auto-layout frame grows or shrinks.
Never again will I have to manually fix a list of items when working on responsive designs. Life’s really good!
Dev Mode
I’m pretty sure that the announcement of Dev Mode was a huge surprise, at least for me. It is a view of a Figma file’s contents created with developers in mind. Once they started presenting all the features in Dev Mode, it became clear that we’ve all needed this for quite some time now.
To access Dev Mode, switch on the toggle at the top right of the Figma file or press Shift + D.
Let’s see what Dev Mode has in store for us.
Finding your way in the Figma file
One of the biggest pains for developers in Figma is navigating through all the pages and frames. And the overwhelming left-side panel wasn’t really helpful either.
Now, once you turn on Dev Mode, the layer panel looks slightly different. Sections marked as Ready for development for developers are at the top of the panel, and there is also a thumbnail for each screen Ready for development. Other Sections not marked as Ready for development are still there but at the bottom of the panel.
This means that designers will have to learn how to organize files so they can be viewed in Dev Mode. It’s actually pretty easy to do so, and you can do that by using Sections to manage your frames, i.e., screens. It’s easier to see what frames are part of which flow, and once you’re done with the flow you’re working on, you can mark the Section as Ready for development.
Aside from the reimagined layer panel, the right panel has also undergone a makeover. You get much more useful information once you click on a frame or component. You can now see the component name, open it up in VS Code directly, and compare changes made to the selected item. Also, there’s now an overview of the documentation for the component or any dev resources that can include links to Storybook, GitHub, Jira, etc. The spacing and layout measurements can now be viewed in CSS, SwiftUI, or Compose code snippets. Below, developers can see the color tokens used and assets ready for export.
Comparing changes in Dev Mode
It’s now also easier for anyone viewing in the Dev Mode to see when changes to an item have been made. The frame history shows the name of the selected item, what type it is (can be a frame, component, etc.), and when it was last edited.
Aside from knowing when the changes have been made, it’s also possible to view and compare changes. Once you click on Compare changes, a modal opens up, and you can see the current version and compare it to previous ones. You can view them next to each other or as an overlay.
At the bottom of the modal, you can find more information about the changes, like whether an element has been added, removed, or edited, and see what properties have changed. Designers can name versions in the Version History, which helps developers understand the changes better.
Dev Mode and the Component playground
Regarding all the new features of Dev Mode, the Component Playground is, to me, the most brilliant one. Things can get more interactive now and, hopefully, clearer as well.
When selecting an item on the canvas and clicking on the Open in Playground button in the right panel, a modal opens up where you can, you guessed it, play around with the item.
So, now you can see all possible variations, such as size, mode, layout, etc. And you can even see how a component would behave with different text. The best thing about it is that you’re not changing the original design. It’s just there for you to see what combinations there are.
That’s not all, folks!
I know the list of all the new and shiny features is quite long, and it will take time to wrap our heads around some of these, but there are some additional updates I want to mention here as well.
The layout of the file browser was updated and reorganized, so it’s now easier to search and find files. Also, the font picker is now updated and improved, and there’s a preview of the font right from the picker. So finding and picking a font just became easier. Yay!
And lastly, with all the AI craze going on, I’m sure it’s not a big surprise that Figma announced incorporating AI within the tool. We still have to see what this will look like in the future. But hey, something to look forward to.
Out of all the features and updates, I’m really excited to try out Variables and Advanced Prototyping in my work. Everyone is talking about how Variables will speed up the process, but that’s not the highlight for me. The best part is they will help us maintain and organize our designs better, and updating any changes will be much easier and less prone to human error. And let’s not forget that we can now build awesome and dynamic prototypes with Variables.
Exciting times are ahead of us for sure. If you feel a little lost or confused, do not worry, you can find useful links to learn more about all the new features here:
And if you’re more of a visual learner, check out Figma’s official tutorials:
