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
Time to open Figma in parallel.
How that we've made the overview, here is a few technical vocabulary to understand.
By default, groups take on the combined dimensions of their children.
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.
Copy paste any Master component
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.
Show layer panel
Show assets panel
⌥⌘→ or ⌥⌘←
Like in your favorite browser, change tab easily
⌥⌘↑ or ⌥⌘↓
Bring element Forward / Backward
Deep select and avoid all your frames and groups above
Align left your selected elements
Align right your selected elements
Align top your selected elements
Align bottom your selected elements
Duplicate an element
Copy properties of an element (color, font family, size, margins, ...)
Paste properties of an element (color, font family, size, margins, ...)
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!