Tips and Tricks

Figma is fast becoming one of the industry’s favorite design and prototype tools. 

In this series of tutorials (13 chapters) you will walk through an extensive collection of tips and tricks, so you’ll be working with Figma like a pro in no time!


I made the switch to Figma three years ago and I have no regrets so far.

I’m glad if I can help other designers to make the switch. Three years working with this tool, I got familiar witch it and now I’d like to share with you tips that I'm using every day and which help me work a bit faster and be more effective.

“Rusmir Arnautović - Senior UI/UX by"

Layers Panel Tips

Layers Panel Tips

This is the first in a series of thirteen chapters, each one a small collection of Figma tips and tricks to help you learn something specific.

So let’s begin with some tips to speed up working with the layers panel.

1. Layer Groups Auto-Delete When Empty
2. Unlock or Unhide All Objects
3. Super-Fast Layer Renaming
4. Collapse and Expand Multiple Layers
5. Quickly Toggle Visibility and Locking

Object Selection Tips

Object Selection Tips

Welcome to this, the second post in a series of Figma tips.

In this one we’ll be covering three tips to do with object selection, so let’s get started!

1. Select All Objects With the Same Characteristics
2. Quickly Select a Sibling Layer
3. Enter/Exit Groups and Frames

Object Selection Tips
Layer Stacking Tips

Layer Stacking Tips

In this episode of a series on Figma tips and tricks we’ll look at ways to speed up your layer stacking.

Let’s dive in!

1. Move Layers Up and Down
2. Move Layers to Top or Bottom of Stack
3. Paste Object Directly Above a Layer

On Canvas Tips

On Canvas Tips

Welcome to more Figma tips and tricks!

This time we’ll be looking at five things to help you when you’re working directly on Figma’s canvas.

1. Navigate Nested Layers
2. Move the Selection Box During Selection
3. Precision Zooming
4. Zoom Directly Into an Object
5. “Nudge” Pan Around Canvas

On Canvas Tips
Frame Tips

Frame Tips

Frames allow you to combine layers together under a single parent.

Unlike groups, frames in Figma have explicitly set dimensions (much like an HTML iframe). Here are some great tips and tricks for when you’re working with frames.

1. Nest Objects by Drawing Frames Around Them
2. Resize to Fit Frames Instantly
3. How to Scale Frames and Their Contents
4. Use Constraints on Frame Contents
5. Selecting Multiple Constraints

Project, Page & Artboard Tips

Project, Page & Artboard Tips

Welcome to the next in our series of Figma tips and tricks!

This time we’ll be improving the way you work with Figma projects, pages, and artboards.

1. Customize Project Thumbnails
2. Keyboard Shortcuts to Navigate Between Pages
3. Keyboard Shortcuts to Navigate Between Artboards
4. Navigate and Zoom Between Artboards
5. Enhance Artboard Boundary Visibility

Project, Page & Artboard Tips
Properties Tips

Properties Tips

Objects in Figma can have a range of properties applied to them.

In this part of our Figma tips and tricks series we’ll look at ways to work with properties, better and faster!

1. Copy Single or Multiple Properties Between Objects
2. Smooth Out Corners With “Squircles”
3. Toggle Italic, Underline, and Bold
4. Scrub Values
5. Nudge Color Values

Image Tips

Image Tips

Figma offers a range of shortcuts and controls for importing images, placing them on the canvas, and modifying them once they’re in position.

Let’s take a look!

1. Use Fill Settings on Images to Control Size
2. Import Whole Sets of Images
3. Import and Place Multiple Images

Image Tips
Vector Tips

Vector Tips

Vectors are an important part of any UI or prototyping design application, and Figma has its own powerful and unique set of vector tools.

Here are some quick tips and tricks to help you use them more efficiently.

1. Use Vector Networks for Complex Shapes⁣⁣
2. Paste SVG Code Directly⁣⁣
3. Copy Vectors as SVG Code⁣⁣

Component Tips

Component Tips

Figma allows us to design with components  repeatable objects which behave according to sets of rules which we define.

Let’s run through some tips and tricks to help you make the most of components.  

1. Combine Components to Propagate Changes Easily
2. Create Symmetry by Flipping Components
3. Create Repeating Patterns by Tiling Components

Component Tips
Layout Tips

Layout Tips

When working with layouts in Figma (which will be often) you’ll need to be comfortable with resizing, measurements, spacing, alignment, and masking.

Here are five tips to help you out!

1. Skew Shapes For Easy Isometric Resizing
2. Quick Column Layouts
3. Remove Space Between Items
4. Make Alignment Extra Precise
5. Create Masks Quickly

Handoff and Testing Tips

Handoff and Testing Tips

Smooth collaboration with developers is a huge part of what Figma offers designers, so in this collection of tips and tricks we’ll be looking at handoff and testing!

1. Output Via the Code Tab
2. Generate Code Ready For Pasting
3. Test on Mobile With Figma’s Mirror App
4. Use Figma’s Mirror App in the Browser
5. Turn on “Pixel Preview” to Check Raster Output

Handoff and Testing Tips
General and VariousTips

General and VariousTips

To wrap up our series of Figma tips and tricks, here are three quick tips which fall into the “miscellaneous” category.

1. Quickly Switch to Outline Mode
2. Access the Shortcuts Cheatsheet
3. Customize Your “Nudge” Amount