Intro
Figma just had a new update a couple of days ago (actually about 2 weeks ago). In this article, I'll go through most of the new features using brief practical examples.
The update includes many little changes, but the main 2 upgrades came to auto-layout and components. And since auto-layout and components are the main features of Figma, it's important to understand these updates and how to use them to improve your workflow.
There is no better way to explain something than to use an example. So let's have a look at the updates by creating a button.
Here's a link to the Figma community file used in this article.
Dark Mode
We'll start by opening a new design file.
And the first new feature is Dark-mode. The easiest way to toggle between dark and light modes is to press "Cmd /" to open up "Quick actions", then write "dark", and press enter. The Ui changes to Dark-mode but the Canvas's color we have to change ourselves. This makes sense, if Figma changes it for you, the color it chooses might conflict with your design. To change the color of the Canvas (The background color), click anywhere on it, then at the Design panel, adjust the "Background" color.
Variable Fonts
Let's make our button.
Grab the text tool (T), press to insert a text box, and write "Button", then change the font to "Roboto Flex".
Figma just added support for variable fonts.
I also didn't know what variable fonts were when I first read this.
I didn't dive deep into it but here's what I understood by reading briefly on it; Basically variable fonts give you more flexibility while customizing your type, instead of just preset custom sizes and styles (like "Bold", or "italic"), variable fonts give you more control. At the same time, all this functionality is packed in one file (unlike normal fonts, where each style has a new file), this leads to faster load times.
If you want to read more on variable fonts, check out this Introduction to variable fonts on the web article.
Just note that not all fonts are variable fonts, and not all variable fonts give you the same amount of options. "Roboto flex" gives many options so you can play with it and customize it.
To access the variable options select the text, go to the design panel, Text, click on "Type settings" (The three dots icon), then select the variable tab. And you can start customizing the text of your button.
Auto Layout Text Baseline Alignment
Now let's add an auto-layout frame around our text. Which will function as the frame for our button. Do this by selecting the text and then pressing "Shift A". You can also name the frame "button".
We also want our button to have an icon, next to the text. To do this press "cmd /" and then write the name of any icon plugin you have installed, I used the "Material Design Icons" plugin. If you don't have one you can install one from the Figma community.
Just select some random icons that you might want to use for your button. I'll turn each of those icons into a component by individually selecting each icon, and pressing the create component button at the very top of the page. Then I will group these components by selecting all of them and adding an auto-layout frame around them, giving this frame a stroke and naming it "buttons_icons".
Grab an instance (just a copy) of one of the icons components, and drop it into the button. (The auto-layout frame holding the text)
A new feature added to auto-layout is text-based alignment, to use it select the button's auto-layout frame, in the design panel, auto-layout, press on "Advanced auto-layout settings". Then press on the checkmark next to "text-based alignment". This should align the icon and text to the bottom, regardless of the text's line-height. (This, however, adjusts the text to the frame holding the icon, so if there is space between the icon and its, frame it will not give you the desired result.)
Auto Layout Visual Alignment
Auto-layout now has visual alignment added to it. So we can visually adjust the padding and the spacing between items.
Individual Strokes
Let's add a stroke to our button. (In the design panel, Stroke, press the plus button.)
Another new feature in Figma is individual strokes. Inside the stroke settings, you'll find a circle icon, if you hover above it should say "Strokes per side", click on it, and choose left.
Now, we have a stroke to one side only. Bump up the size of the stroke to 10px.
You can also press on the "Strokes per side" icon, and have complete control over stoke size per side.
We've covered a lot of updates, but now let's move to the big one.
Component Properties
Select our button frame, and turn it into a component by pressing the "Create component" button, at the top of the page.
We can still use components the same way we're used to, by creating variants, and variant properties, but we now have the option of using component properties as well.
Components properties are different than variant properties. A component property can be a boolean property (allows you to toggle a layer on and off), a text property (allows you to quickly change the default text, without needing to manually select text boxes), or an instance swap (allows you to easily swap nested components). This will only make sense with an example.
Select the text inside our button, by double-clicking. Then inside the design panel, you'll find a new content section, you can edit the default text here, then press on the "Apply text property" icon. Leave the property name as text, and its default value as "Button". and click on "Create property".
Now take an instance of our button component (You take an instance just by copying it). You can notice the difference between a component and its instance by noticing its icons. Any changes you make to the component will automatically take place in all its instances.
Select the instance and now you can change the text to any text you want right from the design panel, no need to select the text box anymore. This saves time, especially when your design is complex, and it would take many clicks to get to your text boxes.
Since I have a fingerprint icon, I'll change the text to unlock.
Let's add secondary text to our button. In the component, duplicate the "Button" text box. Change the new text to a smaller and thinner size. We want it to be below the main text. But our auto-layout is set in the horizontal direction, so we'll select both text boxes and press "Shift A" to add a nested auto-layout frame around them, and set it in the vertical direction. Update the line height, set them to left alignment, and set the spacing between them.
Select the new smaller text and create a new text property for it. Since we duplicated the other text box and it has a "Text" property this one does too, but we want it to have a new property. So inside the design panel, content, press on "Remove property", change the text, then press on the "Apply text property" icon, then select "Create new property", name it "secondary_text" and press "Create property".
Now, if you select our instance you'll have 2 options, Text and Secondary_text. So set a custom secondary_text.
Now that we have 2 text boxes, text baseline alignment is not ideal, so remove it and align to center instead.
Let's add a boolean property. Select the icon in our component. And go to the design panel, Layer, then press on the "Apply boolean property icon". Name the property whatever you want, I'll name it "icon", and leave it set to true.
Grab another instance of our button. Select it and have a look at the design panel. You'll find a new option in there to toggle the icon off and on. Toggle it off. Not all buttons will have icons. This will allow you to use one component in different cases. Change the text properties.
But if we want a button with no secondary text? We'll just add a new boolean property that will toggle the secondary text on and off.
Select the secondary text inside the button component. In the design panel, Layer, press on the "Add boolean property" icon.Then "create property", name it "show_secondary_text", and leave it as True.
Make a new instance, and toggle the secondary text off. I framed the instances together in an auto-layout frame to separate them from the component, and later in this article, we'll present this frame when we make the buttons interactive.
We also want to easily switch between the icons that we chose for our design, so let's create an instance swap property.
Select the icon inside the component. And in the design panel, next to the name of the component, press on "Apply instance swap property". Name the property "select_icon" And press "Create property".
Now create a fourth instance of our button component. And inside the design panel, find the select icon property and you'll find a drop-down menu that allows you to swap easily between the icons inside our "buttons_icons" frame, change the text to go along with your new icon, and remove the secondary text.
Component properties allowed us to use one component to make four different button styles.
But when to avoid using a component property and use a variant instead?
I think it's best to set your properties first, then create variants if needed. You can set properties after creating variants, but this will require setting them to every variant, which will add a bit of work, not too much but why do more work than needed.
The first case where you don't want to use a component property and should use a variant instead is if you want to use interactive components (if you want to create an interaction, between different variants), like creating a hover state, that will work in prototypes, for example. Component properties can't be used interactively inside prototypes. interactive components work by internally connecting variants of the same components together, so obviously you need a variant to do this.
So let's create a hover state for our button. Select our button component. The add "Add variant" button moved from the design panel to the top of the page. I read some frustrated comments about this, but it makes little difference. Press on the button and a new variant will be added.
Variants have properties. No two variants can have the exact same property values, if they do, you'll get an error message. By default the first variants you create will have one property, named "Property 1", and its value will be "Default" for the very first variant, and "Variant 2" for the new variant. Let's change this to something that makes more sense. Change "Property 1" to "Hover", change "Default" to "False", and "Variant 2" to "True".
Now let's change the looks of the "Hover=True" variant so that when we change to it we actually see a change. Select the "Hover=True" variant, add a fill to it, and give it any color you want your hover effect to be. We can change the text style as well.
Now let's select our instances and we can toggle the hover on and off. Everything is working fine, except I think we've discovered a bug. When the instance with the icon swapped changes to hover, the icon gets stuck with the hover color!
I've sent to Figma's team about this bug, hopefully, it will be fixed.
To make this work in a prototype select the "Hover=False" component, press "Shift E" to switch to prototype settings, and connect it to the "Hover=True" variant, with a "While hovering" and "change to" connection.
To present the design and try out the prototype. Select the "Instances" frame, give it a fill, then press the present button.
Now you can hover above all the buttons and see the hover effect in action.
Now let's look at some of the other new Figma updates, that we didn't cover in our example.
Auto Layout Negative Spacing
We've mentioned some changes to auto-layout while going through the previous example. We mentioned visual spacing and text baseline alignment, but the more impactful changes are negative spacing and relative positioning.
Auto-layout now allows negative spacing and this allows you to stack elements on top of each other. In an upcoming article, I'll show you how I used it to create the example below.
For now, just know that it's there. And to use it just set the distance between elements to a negative number, and you can choose the order of the stack from the advanced auto-layout settings.
The order of the stack can be reversed, by going to "Advanced layout settings" and setting "Canvas stacking" to "First on top".
And here's another bug. An element that is in a negative stack does not know the difference between hovering over it or over the element above it. I assume the same issue would be there with clicking as well. In the image below I hover above the unlock button, but in the common area between it and the Dev button and both buttons are showing the hover effect.
Spring Animation
Select one of your icons and add a variant to it. You can rename "Property 1" to "clicked", and give it a value of "True" instead of "Variant 2". Change the "clicked=Default" variant to "clicked=False".
Switch to prototype settings by pressing "Shift E", and connect the "clicked=False" variant to "clicked=True". Set the connection interaction to "on click" and "change to". Change the instant animation to "smart animate". Then select one of the preset spring animations (Gentle, Quick, Bouncy, or Slow) or make a custom one.
For an animation to actually happen there should be a difference between the 2 variants. So bump up the size of the second variant a bit, and let's also change its color.
To present it make a new frame and add an instance of the "clicked=False" variant inside it, then present the frame and try it out.
The icon will change to the larger size using a spring animation.
It would be nice if it would change back to its original size after a short delay. So, go back to the component, select the "clicked=True" icon variant, press "Shift E" to switch to prototype settings, and set an "After delay" of "800ms", "change to", "clicked=False" interaction to it.
Present the frame and click try it one more time.
Check the prototype it should change to clicked=True, then after a short delay, change back to clicked=False.
Favoriting Files
The drafts folder will become a mess once you have a large number of files in there. There is no way to organize files. And it becomes more and more difficult to find older files as the number of files in your drafts folders grows. Finally, Figma added the ability to add files to a Favorites list, this is not enough to end the mess, but it's a good first step.
You can add a file to the "Favorite files" list in the drafts folder by right-clicking it and selecting "Add to your favorites" or pressing on the star icon.
You can also add a file to your Favorites while you're inside the file.
This is it. These are the updates I found most impactful and for a full official list check this page. You can also check the free Figma community file with the examples in this article.
You might want to check out this article: How to make a dropdown menu in Figma.