Like every craftsman, designers love their tools. Especially those tools that promise to stay up to date with upcoming needs. Figma dropped new updates during its Config ‘22, and the updates created a buzz around the design community for all the right reasons. We got 15+ big and small updates; some with slight learning curves. They are a good mix of ‘much needed’, ‘really wanted’, and ‘didn’t know we needed till we got it.
After using the new updates, here are my two cents on what I feel about them, and how you can use them to improve your design process. So without further ado let’s discuss some of the top favorites.
As per a study, about 91.8% of users like to use dark mode in some form. So naturally, a dark mode was one of the most requested features amongst the Figma users.
If you are a big dark mode enthusiast, the universe (read: internet) may have also presented some hacks to achieve the night view. However, with the new release, you can now add the dark theme by following these simple steps -
This feature also pushed a lot of plugin creators to build a dark mode for their plugins to fit seamlessly with Figma. Whether you prefer dark mode to reduce eye strain, improve battery life, or for aesthetic appeal, you know you got it.
We really love Figma's ability to design the way an element will be coded; breaking a barrier between developers and designers. However, lacking the option of individual strokes hampered this goal.
Moreover, using lines instead of borders added an extra element that needed to be accounted for during padding and auto-layout. Yes, every pixel matters.
Forgetting the past, we are just happy to be able to add custom strokes by the following steps -
Auto-layout is one of the features that sets Figma apart from other design tools. Being an avid user of auto-layout, having to break out of auto-layout, or nest multiple frames as a hack was (not to sound dramatic) heartbreaking. However, with the new update, auto-layout has now become even more versatile.
With negative spacing, we can now stack elements using auto-layout. The most common use case is the ability to stack avatars, or cards. This can also come in handy for smooth prototyping using ‘smart animate’.
As a component evolves, the layout may not be as simple as having elements in a horizontal or vertical flow.
For example, to show an update on a card, we may add an indicator on the top corner. Theoretically, the indicator is not in a relative position to any of its sibling elements. Instead, it is relative to the parent element, i.e. the card.
Until now, to achieve this, we would add another frame for the card and the indicator to be in. Now, by clicking the ‘Absolute Positioning’ icon on the top right corner of the left panel, we can set the element to absolute. This removes the element out of the auto-layout flow, while still being a child in the same frame.
However, with great features, comes great responsibility. The absolute positioning may seem tempting in cases where we are short on time, or changing the auto-layout setting may be tedious. To make the most out of auto-layout, use absolute positioning only where it truly makes sense.
This is your one-click for pixel-perfect alignment (in relation to text). Elements, sometimes when aligned horizontally with text, visually appear unaligned. This is because the whitespace of the line height is calculated as well. The line height is unaccounted for with text baseline alignment, and the elements are aligned with the text baseline.
Canvas controls are the new life savers! You can now select and hover over any frame on auto-layout and view the spacing size. With another simple click, you can make edits right then and there. These new features fall into the "didn't know I needed but omg thank you Figma" bucket; they save so much time!As designers, we like to trust our instincts. No longer are you restricted by setting numbers, simply drag, move and adjust to see what looks best and satisfies your design needs.
Remember the amount of time we spent understanding the concept of ‘base components’? Yeah well, we don’t need those anymore. With the new component properties, Figma has simplified the way we create components, and how we add them to our design systems. The new properties introduced are
This property lets you toggle the layer visibility. This is helpful in cases where the difference between two variants is just the addition of an element.
How to use it
Where to use it
💡 Adding the prefix “Show” to the property name makes it easier for others to understand the purpose of the property
Ability to change the instance of a nested component, without digging into the layers. However, to change the variant of the instance, you need to go into a layer deep.
How to use it
💡 There is no constraint on which instance can be swapped. You can create this constraint by grouping the swappable instances in a frame and giving them a meaningful name. Make sure you also mention the frame name in the description.
Allows you to customize text layers from the component properties. This is also intuitive to showcase where the text can be customized. Moreover, this keeps any text changes consistent while switching the variants.
How to use it
Where to use it
Although the new properties make designing so much easier, some do come with a bit of a learning curve. After using the newer components for the past month here are some issues I’ve faced:
One fine Friday evening, as per our team ritual, all the designers got together on a Figjam to do anything but design. That's when we came across the magical Washi Tape feature. We spent the next 45 minutes taping anything and everything we could find and exploring all the different patterns (Note to non-designers, this is a part of our creative process).
Come Monday, coffee in hand, hair in a mess, we realized Figma pulled a classic April Fools prank on us. The washi tapes were gone! However, they did drop the feature a few weeks later and boy are we glad. Though I've never used it as extensively as I did that day, it feels good to know I've got the ability to use some Washi Tape when I need to.
Figma is constantly dropping new updates to make the life of designers easier and for that, we are ever grateful. Thank you for all these new updates, they’ve been game changers. For any of you who haven’t checked out some of the talks from Config ’22, here’s one of my favorites.
Always Beta: Memetic Branding in the Digital Age - Charl Laubscher (Config 2022)
I’d just like to end by saying, (Figma if you’re reading this) one of the features I would really love to have is multiple pages in Figjam!
Thanks for reading and have a great day!
Song of the article: Explore, Be Curious by Cloudkicker
Tanya is a UI & UX designer at Wednesday Solutions, and she loves everything that has to do with problem solving, Figma, and design systems. The excitement to build a future that will be used by millions is what drives her. Oh, and definitely pasta!