🎉 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!

Time to open Figma in parallel.

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

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

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

Figma basis

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

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

🔤