I was intimidated the first time I had to use Figma. Before Figma, my UI design world existed within Sketch, Adobe XD, even sometimes Adobe Illustrator.
Figma was a completely different way of doing things; all the panels and tools were in different places, it almost felt empty in a way, not to mention all of the sudden I was designing collaboratively live with other people.
Over time, I've learned a lot of the hidden and nuanced functionality built into Figma that makes design a lot easier. Almost exclusively because of all the little things, I went from being a skeptical adopter to a strong advocate.
These are some of my favorite hidden or semi-hidden functionalities that I use all the time:
- Use an 8 point grid
- Change the nudge size to match your grid
- Use the special Paste tools
- Quick-select an object within a group
- Use Selection Colors to change all instances of a color
- Copy and paste layer effects
Use a grid or layout system
The basic principle of using a grid is to use a multiple of a single number to dictate all sizing, spacing, padding, margins.
I'm a big fan of 8pt grid - it's very commonly used and friendly to many common screen sizes.
This means all of your sizes, spacing, padding, and margins will be multiples of 8: (8, 16, 24, 32, 40, 48, and so on.)
I'll spare you the snobby lecture and hot-take on why true designers do or don't use grids. This is a turtleneck-free zone.
In reality, the reasons why you should use a grid aren't actually that complicated. The benefits of using a grid come down to this:
- Less time spent measuring
- Less guessing and remembering how much padding or spacing to use in new scenarios
- Less time and energy spent "feeling out" what looks good
- Fewer "design typo" type mistakes
- More time spent confidently designing
Have you ever spent time trying to split a bill up amongst friends in your head, missed something or realized you weren't able to hold one of the numbers in your head, and then had to go back and do it all over again? No one enjoys this process. Not you, not the other people at the table. This is what calculators are for.
Grids are like calculators for design. They make it easier for you to be consistent when doing common, repetitive, and BORING, but important, stuff — like making your padding and sizing consistent.
Who wants to spend more time making sure their padding is consistent? No one ever.
Who messes it up or misses things when they try to do repetitive and focus-intensive tasks manually? Everyone always.
Here's the thing: you shouldn't feel bad about being inconsistent in the first place, but you should strive to be consistent.
We are not calculators — we're human beings; we're fleshy, squishy, messy creatures. We use calculators. And we also didn't evolve in symmetrical, digital spaces.
Our brains just weren't made to accurately create dozens, hundreds, or even thousands of perfectly-spaced objects. When you think about it, it's pretty weird.
Unless you're some kind of strange and questionable personality, it's hard and it's uninteresting to do this kind of work while maintaining your accuracy, which is a great combo if you want to get less done and hate the time you spent doing it and end up with a lot of mistakes.
Not to mention if you're the one building what you or someone else designed, you also don't want to be spending your time guessing, measuring, or having to ask the designer every time something isn't clear.
And this kind of spacing isn't a good look or helpful for anyone:
13.73 pixels. Nice.
On the other hand, this is very clean, consistent, and reliable:
When you design with a system, there's less guesswork in the process for everyone. That means less time spent doing the type of work that your brain is terrible at not messing up.
So, use a grid. I recommend using an 8 point grid. You'll be happier for it now and in the future when you come back to your designs, engineers will be happier for it, and your designs will be better.
Change your nudge and big nudge size to match your grid system
In Figma, nudging allows you to move selected elements in predictable intervals by selecting an element and pressing an arrow key.
A big nudge lets you move things in larger intervals by pressing Shift + any of the arrow keys ← → ↑ ↓.
The default big nudge size is 10px. You can change that, to, say, match your grid size! I set mine to 8px because I use an 8pt grid, and it makes my life so much easier.
To change your nudge size:
- Click the
Figma menu icon - Select
Preferences - All the way at the bottom, select
Nudge Amount
Once you do this and adopt an 8pt grid system, you will be absolutely flying on your padding and sizing.
Paste tools in Figma
Figma has some nifty and useful pasting functionality that were brought in from other tools. They're a nice little speed boost to your workflow, especially if you or your team aren't using a design system.
Paste here
Paste here lets you paste an object directly where your cursor is, like this:
I use this all the time when I want to tell Figma exactly where to paste something, without it following another higher-level rule (for example, pasting in the center of the screen.)
Paste to replace
This is my absolute favorite. It's both simple and incredibly flexible, and therefore, powerful. Paste to replace allows you to replace selected elements, with elements you copied to the clipboard.
Here's how you do it:
- Copy the element
- Select element(s) you want to replace
- Past to replace:
Mac: CMD Option Shift V
Windows: Ctrl Alt Shift V
You can do this to replace one element:
Or several ungrouped elements at once, which is a massive time-saver:
The more you use this one, the more you'll find creative ways to save you time. It's great.
Select Objects Within a Group
When you have a lot of grouped objects, it can be tiresome to double-click your way into selecting the element you want. Fortunately, there's a shortcut.
All you have to do is hold Cmd if you're on Mac, or Ctrl if you're on Windows.
Check it out:
Use Selection Colors to speed-run mass color changes
I love this one. Especially if you're not using a design system, the ability to quickly change colors of multiple ungrouped elements on the fly is huge. This means you can adjust multiple elements at the same time, without having to select each one individually:
On a larger scale, it means you can select a frame and change every instance of that color on the whole screen:
So much time saved by not going into each element and changing its color. The next major level up of this boost is to use a design system, which I'll cover in another lesson.
And that brings me to the final tip for this list:
Copy and Paste Layer Effects
Layer effects are things like drop shadows, background blurs, layer blurs, and so on. They're useful and common in UI design, so it's valuable to know how to reproduce them quickly without having to remake them or remember your custom values.
Once again, you can actually save and reuse layer styles by creating a Figma library (aka reusable design system,) but for the purpose of this post I'll show you how to quickly copy and paste them across elements.
All you have to do to paste layer effects is is:
- Select the layer whose styles you want to copy
- Click the space just to the left of the effect you want to copy (you can use
Shift+clickto select multiple) - Use
Cmd/Ctrl+Cto copy the effect - Select the new layer, and use
Cmd/Ctrl+Vto paste the effect onto it
Which looks like this:
You can also copy and paste layer effects via the right click menu or by using Cmd/Ctrl + Option/Alt + C and Cmd/Ctrl + Option/Alt + V. It's worth noting, however, that this will also copy other properties like corner radius:
I use all of these almost every single day doing design work. Figma is loaded with a ton of optimizations like this, so dig around, try things, and you may discover even more little powerups to your workflow.
For now, I hope this has been helpful to you in your UI design journey!
⚡
Was this article helpful? You can support me by buying me a coffee! (I love coffee.)
