How-to
Figma Shapes and the Frame Tool (beginner guide)
Draw your first shapes and understand why Frames are the foundation of every Figma design. — step-by-step on Mac.
Draw your first shapes and understand why Frames are the foundation of every Figma design. Here’s how to do it in Figma on macOS, step by step — part of the free Figma beginner curriculum.
Lesson 2 of the Figma curriculum. Before this: Canvas and Navigation. Next up: Layers Panel and Selection.
What you’ll do
- Draw a Rectangle (
R), Ellipse (O), and Line (L) - Switch to the Move tool (
V) to select and reposition - Create a Frame with the Frame tool (
ForA) - Understand that a Frame is a container — you can nest layers inside it
- Recognize a Frame vs a Group by its outline and label on the canvas
- Use
Option Command Gto wrap selected layers in a Frame - Use
Command GandShift Command Gfor Group and Ungroup - Know which of fill, stroke, effects, constraints, auto layout, and prototyping only work on Frames
Do it hands-free with Skilly
Reading steps is one thing; doing them while the menus are in front of you is another. Skilly is a voice-first tutor for macOS: you ask out loud — “where’s the shapes panel?” — and it answers while pointing at the exact button, watching your actual Figma window. It’s the same Figma curriculum these lessons come from, taught live instead of read. 15-minute trial, no card.
Keep going
This is one stage of the full Figma beginner curriculum. Previous: Canvas and Navigation. Continue with Layers Panel and Selection.
FAQ
Frequently asked questions
What's the fastest way to learn shapes and the frame tool in Figma?
Do I need the paid version of Figma?
Keep learning
Related guides
Figma Canvas and Navigation (beginner guide)
Learn to move around the Figma canvas — the foundation for everything that follows. — step-by-step on Mac.
How-toFigma Layers Panel and Selection (beginner guide)
Navigate the hierarchy and develop confident selection habits. — step-by-step on Mac.
How-toFigma Auto Layout (beginner guide)
Learn Figma's flexbox-like system for responsive design. This is the single most important skill for modern Figma work. — step-by-step on Mac.
How-toFigma Components and Instances (beginner guide)
Build your first reusable component and understand the main-vs-instance relationship. — step-by-step on Mac.