What’s new in Figma as of May 2022

Figma just conducted its annual design conference, Config 2022, with numerous talks on two stages spread throughout twenty-four hours. Besides listening to great people from many, many awesome companies, Figma also had announcements about and demos of their mind-blowing new features. If you were hesitant to start using Figma in the past, this might be the time when you want to take this step.

DARK MODE

To select dark mode click the top left Figma button > Preferences > Theme > Dark.

In the last couple of years, many applications started to provide their users an option to switch to dark mode. We are happy to see that Figma has joined as well by offering dark mode both in the desktop app and in the browser.
Switch to dark mode if you haven’t yet done so to reduce eye strain over time. Note: you will have to adjust your canvas color manually, just like before.

AUTO LAYOUT

Auto layout is an existing feature, one of the most powerful ones when it comes to creating pages in a dynamic fashion, and we all love it. In this update, Figma has put auto layout on steroids.

• Padding and element spacing can now be set on the canvas

• Absolute positioning of elements kept in an auto layout

Hover over an auto layout and change the settings by dragging with the appearing pink handles.

Just as in code, absolute positioning will remove the element from the layout flow.

VARIABLE FONTS

Playing around with the different properties of a variable font.

Now designers can use variable fonts in Figma. This allows us to use a single font file with properties like weight, slant, etc, instead of multiple files, and on-the-fly, one can change these properties on the UI.

You might have come across the issue of your buttons changing sizes in hover state as they use a heavier font. Now you can set the grade property of a variable font higher, which will only increase the perceived width of the font but not the entire label’s size.

You can find variable fonts on Google Fonts by applying the filter for them or checking out this list. Many popular font families provide this format, like Roboto, Open Sans, Montserrat, etc.

TRUNCATE TEXT

The new fourth option of text container resizing.

Another very handy tool we get from Figma to treat text in our designs is the truncate text function. This automatically handles text overflow with placing ellipsis to the end of the last word that fits the frame.

Truncating text function in action.

DIVIDERS

You never ever have to draw those dividers between table rows or content sections again. You can set the border of a container on each side, similar to Excel. This feature creates a great combination with auto layout if you want to create a list of elements.

Setting individual strokes.

COMPONENT PROPERTIES

Chances are that a large percent of users switched to Figma from Sketch. These users will be happy to see component properties on their Figma UI.

Do you have a bunch of buttons on multiple pages that need a label change? Now you can select these buttons and change their label all at once on the properties panel without having to click into each text container in the buttons and edit them one by one.

Text property in a button component.

Ok, this is just an everyday pain point for me, but most importantly with component properties, one can control components to a much greater extent than before. Now you can specify which properties/layers can be controlled in a component instance. There are three types of properties you can add to a component: Boolean, text, and swap instance. With Boolean you can set layer visibility, with text you can override labels, and with swap instance you can change nested components without having to enter their usually pretty complex structure. In practice, this means that you can decrease the number of variants in your design system a great deal as these properties will handle many of the settings themselves.

If this is not enough, now you can batch select layers in your component variants, but you don’t have to click into the structures of the variants until you find the right layer anymore. Figma provides you with a target button, by clicking on which you will select all the matching layers at once.

SPRING ANIMATIONS

Catch! :-) It is easy to set up exciting animations with the new feature.

Figma has added options for us in creating animations that provide more realistic interactions in our designs. Four presets are provided: gentle, quick, bouncy, and slow. If you feel like it, you can customize your animation setting as well. This feature will be great for taking micro-interactions to the next level.

LET’S CONNECT

Are you on Discord already? Come, join us on the general Design channel and share your favorite update of Figma!