💖

Designing in Figma

🎉 Congratulations!

You've reached the second part of this Masterclass.

At this point you should have enough theory to start putting your hands at work effectively!

Ready to start Designing?

In Figma there are a few things to learn by heart.

This list is short thanks to the very intuitive UI/UX of the product. Let's start with the basis of it.

  • Figma is a visual collaboration space — a blank canvas that can take the form of an interface design tool, a space to create, share, prototype, the bridge with developers for implementation, and much more.
  • Download the Figma desktop app for a more native experience!
    • Quick access
    • Keyboard shortcuts
    • Avoid your browser UI to get more space
  • Download the Figma mirror app on your smartphone
    • Live device preview and interaction tests

Product Overview

Time to open Figma in parallel.

Figma home screen (accessible by clicking on the Figma logo on the top left)
Figma home screen (accessible by clicking on the Figma logo on the top left)

Figma file viewer (opened as tabs, like in your browser)
Figma file viewer (opened as tabs, like in your browser)

Press "C" to see comments. "V" to come back to the design cursor
Press "C" to see comments. "V" to come back to the design cursor

Figma basis
Figma basis

Figma vocabulary

How that we've made the overview, here is a few technical vocabulary to understand.

Things to know

SymbolNameDefinitionKeyboard shortcut
T
Text layer
T
⬚
Group
By default, groups take on the combined dimensions of their children.
⌘G
⌗
Frame
A frame is the packaging that houses almost everything built in Figma — designs, presentation decks, games... the sky’s the limit! Press F to select the Frame Tool, then choose your desired frame size in the right sidebar and click the canvas to create it.
⌥⌘G
▯▯
Auto-layout
Shift A
❖
Component (Master)
⌥⌘K
⃟
Component (Instance)
Copy paste any Master component
Page

Speed up your workflow with keyboard shortcuts

Keyboard shortcuts allow you to speed up your workflow. I honestly think that by using them, I've been able to speed up my velocity by x5.

  • All keyboard shortcuts listed are mapped to a Mac machine. Click the ? icon in the bottom-right corner of the canvas to find the desired shortcut on alternate setups.
  • You don't need to learn everything by heart at first but remember that every time you're doing something with your trackpad or mouse, there's probably a keyboard shortcut for it.

image

♥️ My Favorite shortcuts while using Figma

CategoryKeyboard shortcutName
Navigation
⌥1
Show layer panel
Navigation
⌥2
Show assets panel
Navigation
⌥⌘→ or ⌥⌘←
Like in your favorite browser, change tab easily
Navigation
⌥⌘↑ or ⌥⌘↓
Bring element Forward / Backward
Navigation
⌘ Click
Deep select and avoid all your frames and groups above
Navigation
⇧⏎
Select parent
Navigation
⏎
Select child
Align
⌥A
Align left your selected elements
Align
⌥D
Align right your selected elements
Align
⌥W
Align top your selected elements
Align
⌥S
Align bottom your selected elements
Essentials
i
Color Picker
Essentials
⌘R
Rename layer
Essentials
⌘D
Duplicate an element
Essentials
⌥⌘C
Copy properties of an element (color, font family, size, margins, ...)
Essentials
⌥⌘V
Paste properties of an element (color, font family, size, margins, ...)
Essentials
C
Show comments
Essentials
V
Return to Design mode

Take a moment to get familiar with the product and make sure you've understand those essentials before digging into the other pages!

Next up

🔤
Text styles