🎉 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 vocabulary
How that we've made the overview, here is a few technical vocabulary to understand.
| Symbol | Name | Definition | Keyboard 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.
| Category | Keyboard shortcut | Name |
|---|---|---|
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
