📖 Notes LESSON 7 OF 26

Figma Interface & Basic Tools

⏱️ 25 min
🖥️ Figma

A Complete Tour

Frames, layers, shapes, text, pen tool, boolean operations, and the inspect panel — a complete tour of the Figma interface.

The Building Blocks

🖼️
Frames
Figma's version of an artboard — the container for a screen or section.
📚
Layers
Every shape, text, and frame stacks in a layer list, nested like folders.
✒️
Pen Tool
Draws custom vector paths and shapes point by point.
➕➖
Boolean Operations
Union, subtract, intersect, and exclude combine shapes into new ones.

Inspect Panel

The right-hand Inspect panel shows exact spacing, colors, font details, and even generates CSS for any selected element — useful for handing designs off to developers.

💡
Get comfortable before moving on
Everything in later lessons — components, auto layout, prototyping — builds on top of frames, layers, and shapes. Spend time in Figma's free tier before Lesson 8.
🗒 Cheat Sheet 📝 Worksheet