Figma is a powerful design tool, full of features that range from simple to complex. Figma holds the largest market share among collaborative design tools, so it’s no surprise that designers want to learn and master such a valuable software skill.
While many designers have already taken the time to learn some basic skills with Figma, to stand out as a truly proficient UX designer, it helps to know and demonstrate some shortcuts that will improve your workflow and make you a more efficient designer. The following are ten tips and tricks to get you there.
If you’ve taken a beginner course in Figma, you probably know that auto layout is one of the most convenient features to keep your designs clean and consistent. But inevitably, you’ll find a time when you want to add something to your design that doesn’t need to align to an auto layout container.
However, as soon as you drop that new object into the frame, you might find yourself fighting against the layout rules as the object keeps snapping into an auto layout container and pushing all of the other objects out of place.
To drag an object into a frame while ignoring the auto layout rules, simply hold down the SPACEBAR while you drag into the destination frame:
Just as it can be frustrating to wrestle with auto layout settings when you don’t want them, you will often find yourself fighting with the inbuilt constraints of child objects when you need to resize its parent container.
For example, let’s take that same grouped list from above. The mouse cursor I placed into the frame is a group of layers and it has a scale constraint in both dimensions, which means the cursor’s image will maintain its relative size when its parent container grows:
The problem with this constraint is that when I want to increase the height of my frame, the cursor image stretches out of proportion. It’s a minor inconvenience, but one that will happen frequently during my workflow and slow me down without an easy shortcut to prevent it.
Fortunately, if I hold down CTRL (Windows) or CMD (Mac) while I resize the container, it ignores any constraints at the child level of the container and I no longer get that distortion:
Okay, so we just saw two ways to override an existing constraint for an ad hoc change, but what if you wanted to create something that always ignores the constraints of the objects around it? The design panel contains a button to set an “absolute position” for a given layer inside an auto layout container. This will ignore any existing layout rules inside of the container and allow you to manually set the position of that layer.
Consider the following example: a notification button with a badge. I want the button to be an auto layout container so that the main button can scale, but I want that badge to always be pinned to that top corner of the button, no matter what size it is:
To achieve this, I selected the notification dot, and then inside the frame position parameters, I clicked on the Absolute Position icon (circled in red below). This constrains the dot to its current position (offset by 1px from the top and right).
And because the constraint settings (also shown below) are set to “top” and “right,” as I make additional sizes of this button, the dot will always hold that 1px offset from the top and right of its frame:
Figma is a handy tool for many types of image manipulation, and it offers a variety of simple and complex cropping capabilities. While you could spend a couple hours practicing the more intricate ways you can crop images in Figma, you can also save time on simple crop jobs just by holding the CTRL key (Windows) or the CMD key (Mac) while you drag the resize handles of the image. It’s that simple:
Now that you’re an intermediate Figma user, your projects are getting more complex and you might find yourself with many copies of objects that each have a deep nest of layers. When it comes time to make a change to one of those lower levels, it might seem tedious to have to select every single instance of that layer.
But luckily for you, there’s a shortcut for bulk selecting layers from your hierarchy. If you select multiple frames at once, you can press ENTER to step your selection down one level to all of the child layers within those frames.
Keep pressing ENTER to drill down to the lowest level. If you need to return to a higher level of the hierarchy, press SHIFT + ENTER to step up a level:
Figma hygiene is important for intermediate designers, but naming and renaming layers can be tedious. Fortunately, there’s a shortcut for renaming layers in bulk.
Let’s return to the bulk drill-down selection example. I might regret that I named my square “Level 3 Square” and copied it over and over, so every layer has the same name. If I select all of those squares and then click CTRL+R (Windows) or CMD+R (Mac), a modal will appear. This modal will allow me to choose a new name and even add variables to number each layer sequentially:
If you didn’t already know, any time you’re editing the size or dimension of a shape in Figma, you can hold SHIFT while you use the arrow keys UP and DOWN to step by 10 instead of by 1.
Figma calls this a “nudge.” A small nudge is the increment for the arrow keys on their own. A big nudge is the increment for SHIFT + ARROW:
Sometimes a tenfold increase isn’t very helpful to your workflow. If you’re working in a 4px grid system, maybe it’s more useful to work with those increments instead.
In the Figma file menu, navigate to Preferences > Nudge Amount. This opens a dialog where you can set a custom small nudge and big nudge amount:
Back in earlier days of Figma, if you needed a component with several variants (e.g., a button with or without an icon), then your library needed to contain one of each of those variants. As components get more complex, this could turn into dozens of variants as you try to account for every combination.
Fortunately, Figma now offers Boolean properties. Any variant that amounts to showing or hiding a layer (like a button with or without an icon) can be given a Boolean property and only one version of the component is necessary:
To create a Boolean property, select the layer that will be hidden in some variants, and then in the Layer panel, select Create boolean property. You will be asked to name the property (it will default to Show Icon if the selected layer is named “Icon”).
By default, that property will be set to True. When you use an instance of this button in your design, you will have a toggle to show or hide that layer:
You may have noticed that in that last example, the resulting button variants don’t actually look that great. Because the Boolean properties simply show or hide the layer and otherwise maintain the auto layout properties, you might find yourself with less control over the padding that’s left after you remove each piece.
In the above example, the text sits too close to the edge of the button. But if I simply added padding to the sides of the button, then it would no longer be round when only the icon remains.
To resolve this, use SHIFT + A to create an additional auto layout frame around the icon, and another around the text. Call these layers “Icon Wrapper” and “Text Wrapper” respectively.
This allows you to set custom padding around each side of the wrapper, and then you can play around with the auto layout spacing of the button until it looks more balanced. There are many ways you can get to the same result, but I found a better balance by adding 4px of padding to the text wrapper and then removing 4px of space between the two wrappers:
By wrapping your icon and text in an additional container, you have more control over the padding for each element. By experimenting with the numbers for each, you can strike a better spatial balance for each variant.
If you’ve learned to build components using Atomic Design, then you are likely to end up with some atom and molecule components that are critical building blocks for your main components, but those atoms and molecules will never be used on their own.
If you’re publishing a component library that other designers will consume, you can hide those building blocks by prepending a period to the front of its name. For example, if you name the building block “.atom” and you later use it to build a component called “Organism,” then a designer using your library will be able to find Organism in the list but they will not see the atom.
Figma is easy to use but difficult to master. However, it is full of hidden features and shortcuts that significantly improve the experience for more advanced users. By adding the ten tricks above into your everyday workflow, you can set yourself apart from the crowd as a quicker, more efficient designer.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Subscription pages are meant for users and businesses, and they should work well for both parties. This blog is a thorough discussion of what’s best and what’s not when it comes to designing subscription pages.
Call it what it is. Product designers and UX designers have unique roles, even if their titles often get swapped. In this blog, know the difference and own your expertise.
Search bars are more than icons and inputs — they can be a retention magnet or a churn trigger. Sharing my tried-and-tested search bar design principles in this blog!
Are your colors clashing or cohesive? In this blog, I talk about clashing colors, their impact, and how you strike the perfect balance with colors in your designs.
Learn more →
