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 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 digi.me"
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
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
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
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
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
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
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
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
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
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
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
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
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