[Figma] 30 Time-saving Tricks from Figma Experts

Aspyn Lim’s Blog Post #1

©️ Figma

[Figma]
  🌱 Figma - 30 Time-saving Tricks from Figma Experts (CURRENT)

Table of Contents

[Menu]
   1) Open Quick Menu 0:25
   2) Layers Panel & Assets Panel 1:23
   3) Design Panel & Prototype Panel & Code Panel 2:05
   4) Switch Browser Tabs 3:12
[Canvas]
   1) Next Frame & Previous Frame 3:54
   2) Zoom to Selection & Zoom to "Area" 4:34
   3) Resize without Constraints 5:53
   4) Outline Mode 7:26
[Layers/Frames]
   1) Next Layer & Previous Layer 9:00
   2) Select Child Layers & Select Parent Layer 9:53
   3) Copy Layer Styles & Paste Layer Styles 11:29
   4) Reset a Text Layer Name 17:29
   5) Frame Selection & Remove Frame 18:45
[Images/Files]
   1) Place Images 22:34
   2) Paste as Fill 25:05
   3) Quick Mask Image 27:31
   4) Swap Stroke & Fill 28:19
   5) Save Image Fills as Styles 28:40
   6) Copy as CSS/SVG & Copy as PNG : 31:47
[Color]
   1) Quickly Select/Set Fill Color 33:34
   2) Live Preview Colors 33:47
   3) Nudge Color Values 34:12
[Vector]
   1) Flatten Selection 36:08
   2) Outline Stroke 37:17
   3) Set Arc in 15 Degree Increments 40:46
[Components]
   1) Add Keywords/Tags to Component Descriptions 41:38
   2) Swap Component Instance & Swap Nested Instance 42:45
   3) Quickly Swap Selected Instance 44:28
[Prototypes]
   1) Show/Hide Hot-spots from the Options Drop-down 45:50
   2) Show/Hide Toolbar & Footer 46:09
[OS + Browser Level] 46:43
   1) Emoji Menu
   2) Resize in Both Directions
   3) Resize Proportionally in Both Directions
   4) Move Selection while in Resize Mode

[ Menu ]

1. Open Quick Menu : Ctrl + /
2. Layers Panel : Alt + 1
   Assets Panel : Alt + 2
3. Design Panel : Alt + 8
Prototype Panel : Alt + 9
Code Panel : Alt + 0
4. Switch Browser Tabs : Ctrl + 1 ~ 9

[ Canvas ]

1. Next Frame : N
   Previous Frame : Shift + N
2. Zoom to Selection : Shift + 2
   Zoom into “Area” : Z + Drag a rectangle
   Zoom out of “Area” : Alt + Z + Drag a rectangle
3. Resize without Constraints : Ctrl + Resize frame
4. Outline Mode : Ctrl + Y ☺️

[ Layers / Frames ]

1. Next Layer : Tab
   Previous Layer : Shift + Tab
2. Select Child Layers : Enter
   Select Parent Layer : Shift+ Enter
3. Copy Layer Styles : Alt + Ctrl + C
   Paste Layer Styles : Alt + Ctrl + V
4. Reset a Text Layer Name
   : Double click or Ctrl + R the layer name → Delete it → Enter
5. Frame Selection : Ctrl + Alt +G
Remove Frame : Ctrl + Shift +G

When to use groups versus frames in Figma

[ Images / Files ]

1. Place Image(s) : Ctrl + Shift + K → Click shapes that were already created → Images will be placed on the shapes.
2. Paste as Fill : Images copied to your clipboard can be pasted on shapes as fills.
3. Quick Mask Image : Alt + Double click image fill
4. Swap Stroke & Fill : Shift + X
5. Save Image Fills as Styles
6. Copy as CSS/SVG : Right click → Copy/Paste → Copy as CSS/SVG
   Copy as PNG (desktop ONLY) : Right click → Copy/Paste → Copy as PNG

[ Color ]

1. Quickly Select/Set Fill Color : i + Click
2. Live Preview Colors : i + Press & Hold
3. Nudge Color Values : Shift + 🔼 / 🔽 ☺️

[ Vector ]

1. Flatten Selection : Ctrl + E
2. Outline Stroke : Ctrl + Shift + O
3. Set Arc in 15 degree increments : Shift + Arc Tool

[ Components ]

1. Add Keywords/Tags to Component Descriptions
2. Swap Component Instance : Alt + Drag over Instance
   Swap Nested Instance : Alt + Ctrl + Drag over Nested Instance
3. Quickly Swap Selected Instance : Select an instance → Right Click → Swap Instance (* Instance must be grouped!)

[Prototypes]

1. Show/Hide Hot-spots from the Options Drop-down

Preview designs and prototypes in Presentation View

2. Show/Hide Toolbar & Footer : Control + \ or Control + .

[OS + Browser Level]

1. Emoji Menu
   - Mac : Ctrl + ⌘ + Space
   - Windows : Windows + .
2. Resize in Both Directions : Alt + Resize ☺️
3. Resize Proportionally in Both Directions : Shift +Alt + Resize ☺️
4. Move Selection while in Resize Mode : Resize + Space ☺️

Extra Tips

• Show/Hide Multiplayer cursors : Alt + Ctrl + \
• Search : Ctrl + /
• Keyboard Shortcuts on Figma Screen : Ctrl + Shift + ?

Thanks for reading! 🎵 If you like this blog post, please clap👏