logo_figma

Figma 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’m glad if I can help other designers to make the switch. Two years working with this tool, I got familiar with it and now I’d like to share with you twenty tips that I'm using every day and which help me work a bit faster and be more effective.

1
CHAPTER 01.

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

Explore
1
CHAPTER 02.

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

explore
1
1
CHAPTER 03.

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

explore
1
CHAPTER 04.

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

explore
1
1
CHAPTER 05.

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

explore
1
CHAPTER 06.

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

explore
1
1
CHAPTER 07.

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

explore

Brainstorming
UI Style Kit

Pixel perfect UI Kit to easily start your next project. All elements used in tutorials you can find here. Download for free.
1
CHAPTER 08.

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

explore
1
1
CHAPTER 09.

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⁣⁣

explore
1
CHAPTEr 10.

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

explore
1
1
CHAPTEr 11.

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

explore
1
CHAPTEr 12.

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

explore
1
1
CHAPTEr 13.

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

explore
EXPLORE WORK

SAY HELLO

Hire Me Today