April 11th, 2024, posted in learning
by Adelina
As a UI/UX designer, a big part of your work will be figuring out how to use design software to its full potential. All of this software has its own nuts and bolts and mastering them can help you improve your work.
So in this article, we’re going to go into detail about our most useful tips and tricks for Figma, the design software we use in our projects. These tips come from years of experience, lots of practice, mistakes, tutorials, team feedback, and collaboration.
Master auto layout. Move things faster.
Auto layout is one of the most useful tools Figma can offer, and it’s not until you start playing with it that you can see its full potential. It might appear that it’s only useful when creating buttons, but you can do so much more with it: it helps you keep spacing consistent between elements, even as you edit them. This way, you won’t have to move things around if you edit one row of text.
So here are some examples of how you can use auto layout to move elements faster.
Easy to update progress bars
Let’s say you’re doing a design for a multi-step process, like purchasing something, or account registration. These steps might change as you discuss the design with your clients, so how do you make it easy to swap and update steps?
The answer is: auto layout. So here is what I did with the example above:
Step 1. I grouped each step’s name and the line next to it (this means that the last element will be by itself, so a group of 1 text item).
Step 2. I took these text and line groups one by one and activated auto layout. I made sure the spacing between each text bit and line is the same (in my example, it’s 12 pixels).
Step 3. I selected all of them and activated auto layout. This way, each progress bar element can be edited while the space between the text and the lines stays the same - and the progress bar overall stays within the same spacing rules. See below how this should look in the left side panel.
Make sure to make each text element auto-width - this will ensure that the line next to it will move according to the length of the text you type in (otherwise it will follow the width of the text element itself). And center the entire progress bar so it doesn’t change position while you edit its content (unless you want to align it to the left or right, in which case, set constraints accordingly).
Here’s an example of the same multi-step process element, but with some step names changed. Notice how nothing moved around and it all still looks neat? With all the auto layout setup done beforehand, all I needed to do was modify the names themselves - nothing more.
Easy to move around table elements
Creating a table is not the quickest design task out there. There’s a lot of measuring, duplicating, and copy pasting involved if you want it to look good without spending too much time on it. But Figma can do the measuring for you - in such a way that editing the table later on won’t be a pain.
Here is a quicker, more seamless way, to build a table in Figma using auto layout:
Step 1. Create a header for your table. Create a line that will serve as a divider between the table heads and the columns. Then, duplicate that line and make it thinner or lighter, and place it at least 40px below the first line - in our example, we did 46px. Select these first 2 lines and activate auto layout - now, you can keep duplicating lines and they’ll sit at exactly 46px. The rows of your table are now done!
Step 2. In a similar fashion, create your first column. Start by creating the table head, and then the first column item. Duplicate this item, place it at least 20px below (we used 28px in this example) and select both of them, then activate auto layout. Now you can quickly create an entire column just by duplicating the column items multiple times.
Step 3. Group the column content and its header. Now you can duplicate this and replace the heads and column content with what makes sense for your table - in our example, we’re adding some locations, numbers, names, and dates.
Activate auto layout when you’ve created 2 columns, so that each new one sits at a decent distance from the rest. Keep in mind - you can’t know for sure what the spacing between columns should be until you create them all. So set that at whatever distance you want - we used 40px in this example.
When you’ve created all the columns, play around with the spacing between them until they fit into the table width.
Now you’re done! This setup will allow you to easily swap columns, add new ones, remove them, or add new items to them. And most importantly - if you’re designing an app with a large array of tables, all with different content, setting up the first one this way will make it much easier down the line.
Easy to add to sidebar items
Moving and updating elements in a sidebar can lead to extra time spent moving things around so they look like they fit together. But with auto layout, all the spacing is already planned out.
Here is our method of creating a quick and easy sidebar menu:
Step 1. Place an icon and a piece of text next to it. Select them both and activate auto layout. Now, add some vertical padding to this frame. Our suggestion is setting it at 12px. Why, you might ask? This is ideal if you want to add a little background to the currently active menu item. Adding 12px to the vertical padding gives just enough space for that. Plus, you can place each menu item right after the other.
Step 2. Duplicate this element and edit it to create the 2nd menu item. Bonus points if you’re using icons set as components - all you have to do is swap it from the right side menu.
Step 3. Select your existing menu items and activate auto layout. From here onwards, just keep duplicating menu items to add new ones to the sidebar. You can quickly add new items at any point, remove them without needing to move things to cover free space or make the spacing between them larger. And that’s it! Your sidebar is done. See below a more realistic example.
One thing to keep in mind: not all icons have the same width and height, and swapping them out using components might result in uneven spacing. You can play around with each individual menu item and adjust spacing rules so that all icons line up vertically.
Naming conventions, the gift that keeps on giving.
A really cool feature Figma brings is the ability to create styles to use across a design document. This is ideal for UI Kits and design systems, as it helps solidify the color and typography choices you’ve made - and easily apply them throughout your design.
You’d think that just creating these elements and adding them as styles to your document is all you need. But if you’re creating a full on UI kit, naming everything in a smart way can help you sort through all your colors and typography, and save lots of time.
Here’s how we make use of naming in Figma.
Colors
To start off, create your design document’s color palette. Make several squares and color them in. No need to get too deep into naming just yet, you can leave that last. You can use this as an example of how to set up a color palette. Long story short, the key is having a series of neutral, primary, secondary, success and failure shades - 10 of each is ideal, while 5 shades for success and failure should be enough.
Once you’ve created all the shades and organized them into a Figma document page, you can start the style creating process. To create a color style, select an item that contains your chosen color, go to the right side menu, under Fill, and click on the four circles icon (above the eye icon). In the dropdown that opens, click the + icon.
Now you’ll get a pop-up for the color style’s name - and this is where you need to respect a color naming rule. Each shade you create should follow this formula:
Color category/Shade number
where
Color category refers to the larger group this shade belongs to. This can be, “neutrals”, “primary”, “secondary”. Or if you’re creating a larger color palette with the main colors of the rainbow, this can be “blue”, “red”, “green” and so on.
Shade number will be a number that signifies how light or dark this shade is, compared to other shades belonging to its color category. The darkest shade can be “900” while the lightest shade can be “000”.
Example
The name of the darkest primary color in your palette will be: “Primary/900”
Why do I need to do all of this? You might ask. If you name your color palette without this formula, they will show up in a completely random order in your Color Styles panel. This means that if you’re in a hurry and you’re looking for your lightest neutral shade, it’ll take you a while to find it among 30 different colors. But if you use this formula, you’ll be able to find all the neutral shades in one spot, where the lightest will be the last. Scroll back up to our screenshot of such a menu to see it in action.
Typography
A decent UI kit or design system has at least 10 variants of their typography. If you’ll be using these to create landing pages + admin panels, you need at least a big display text and a small one, standard headings from 1 to 5 (from large to small), a paragraph version and a small subheading. On top of all of that, each of these can have variations in terms of font weight.
What does this mean? The naming conventions we’ve been talking about can help you sort these so you won’t have trouble finding them when needed.
Here is the best naming formula for typography:
Type/Font weight
where
Type refers to the type of text, in terms of size, that this element belongs to. This can be “display” or “H1”, “H2”, “paragraph”, “subheading” and so on.
Font weight is self-explanatory. This can say, “bold”, “regular”, “semibold” and so on.
Example
The name of your largest display text, in bold, would be: “Display 1/Bold”
Buttons
Here is where naming gets even more advanced. When it comes to buttons, a good naming system is useful if you’re turning all of them into components. This way, it’ll be easier and quicker to find exactly the kind of button you’re looking for, just by opening the Assets menu from the left side panel. Otherwise, you’d waste time searching through your design document.
You can have a multitude of button variations - regular, outline, big, small, warning, disabled. When naming your buttons, start by creating the major categories your button styles will belong to. Just as a note, we’re going to go more in depth about this in the next section, so if you’re designing a big app or a design system, we suggest you read that too before you apply what we’ll talk about in this section.
We’re giving the Backpack Template as an example here:
In this UI kit, the main categories the buttons are split into refer to their overall style: standard, outline, ghost, square, and pill. The second way they’re divided is by state: normal, active, and disabled. Lastly, they’re divided by color. This is a more complex way to do buttons, and it’s not always this complicated, but understanding this will make simpler setups look easy peasy.
So here is the naming formula for buttons, based on the complexity of this example:
Style/State/Color
where
Style refers to the main style of your chosen button, such as “standard”, “outline” or “pill”.
State refers to the different variations a button can have in a real app, such as “normal”, “active”, “hover”, or “disabled”.
Color refers to the color of the button, of course. Focus on 3 or 4 shades of each color category you created, based on each state your buttons can take.
Example
The name of a pill-shaped active secondary button would be: “Pill/Active/Secondary”
A more simple way to split button styles into categories is going by color styles, and then sizes. In that case, your naming formula would be Color Style/Size, where Color Style can be “primary”, “secondary”, “success”, “warning” or others, and Size can be split into Small, Medium, Large and Extra Large.
Master your variants. Save valuable time.
Components in Figma can be a very powerful tool. But they can be just as complex, to the point where you’d hesitate to use them.
With the right setup via components and variants, every time you need an alert to be red and with a warning icon instead of green and no icon, all you’ll need to do is select these options from the right side menu. No need to take a green alert and transform it.
Our best example in taking advantage of variants is button styles. We’ve already talked about how to group buttons, but we’ll go more in depth so we can show you how this works.
Let’s say you’re first grouping your button styles by color, using your neutral primary, secondary, success and failure colors. Color is a possible variant, and the specific colors themselves will be values belonging to this variant. Similarly, let’s say you’re also grouping your buttons by state: normal, active, disabled. Style is a variant, while “active”, for instance, is a value for “Style”. Another variant can be the size, with “small”, “medium” and “large” as variants.
So how do you set this all up?
Step 1. Create all your buttons. No need to get into components just yet, you can leave that last. Remember to create them using auto layout from the very beginning, so that their width updates automatically when you change the button text.
Using the example we gave, create a group of primary, secondary, success and failure buttons. You can also add a tertiary and an outlined button if you wish. Within each of these groups, you’ll have a small, medium and large button. We also added an extra small. Within all of these sizes, create unique states. We did normal, active, disabled and focused. To learn more, check out this tutorial.
Step 2. Name them. With the way we grouped these buttons, your naming formula would be: Type/Size/State. After you name all the buttons, go one by one and turn them into components.
Step 3. Select all your buttons. A new button will appear on the right side panel, under Components, that says “Combine as variants”. Click that, and your buttons will be turned into a group of components, based on the variants you set yourself (like primary, small, active and so on).
Step 4. Now you can have fun with it. Go into the Assets panel, into Buttons, and drag and drop one of them into your document. On the right side panel, you’ll have the option to switch it out to a specific variant.
Now you’re done! You can freely switch out between different buttons and save lots of time. To get a stronger visual representation of how this works, watch this tutorial.
There you have it, these were some of our favorite tips and tricks for Figma. We hope these help you save time and improve your design skills - and who knows, maybe you’ll discover your own awesome tips and tricks.
If you’re looking for someone who can scale up your app, contact us and let’s see what we can build together.
