Figma Interface Tour
The Figma editor has four main zones. Each zone has a specific job. Learning where each control lives saves you from hunting for tools while you design.
The Four Main Zones
+------------------+------------------------------+------------------+ | Left Panel | Canvas | Right Panel | | (Layers & | (Your design lives here) | (Design props | | Assets) | | & Prototype) | +------------------+------------------------------+------------------+ | Toolbar (top) | +--------------------------------------------------------------------+
The Toolbar sits at the top. The Left Panel shows layers and assets. The Canvas fills the center. The Right Panel shows design properties for whatever you select.
The Toolbar
The toolbar runs across the top of the screen. It holds the most commonly used tools.
- Move tool (V) – Selects and moves objects on the canvas.
- Frame tool (F) – Draws frames (artboards) to hold your designs.
- Shape tools (R, O, L) – Draw rectangles (R), ellipses (O), and lines (L).
- Pen tool (P) – Draws custom vector paths.
- Text tool (T) – Adds text to the canvas.
- Hand tool (H) – Pans around the canvas without selecting anything.
- Comment tool (C) – Leaves sticky-note comments for teammates.
The Figma logo (top left) opens the main menu, which contains commands for file management, editing, and view options.
The Left Panel
The left panel switches between two tabs: Layers and Assets.
Layers Tab
Every object on your canvas appears as a row in the layers tab. Objects stack from top to bottom — items at the top of the list appear in front of items at the bottom. You can rename, reorder, hide, or lock any layer by clicking on it.
Layers Panel Canvas
----------------------- ------------------------------
Frame "Home Screen" +----------------------------+
├── Button (front) | [Button on top] |
├── Image | [Image behind button] |
└── Background Rect | [Background at the back] |
+----------------------------+
Assets Tab
The assets tab stores all your reusable components, styles, and plugins. When you create a component (a reusable design piece), it shows up here so you can drag it into any frame.
The Canvas
The canvas is the infinite workspace in the center of the screen. You can zoom in with Ctrl + scroll (or Cmd + scroll on Mac) and pan by holding Space and dragging. Press Shift + 1 to fit everything on screen, or Shift + 2 to zoom to your current selection.
The Right Panel
The right panel changes depending on what you select and which mode you are in.
- Design tab – Shows dimensions, position, fill color, stroke, and effects for the selected object.
- Prototype tab – Lets you add click interactions and transitions between frames.
- Inspect tab – Shows developers exact values: dimensions in pixels, hex colors, font names and sizes, and CSS code snippets.
The Properties Panel in Detail
When you click a rectangle, the right panel shows these sections:
Right Panel – Rectangle selected ------------------------------------ Alignment buttons (align left, center, etc.) ------------------------------------ X: 120 Y: 80 (position on canvas) W: 200 H: 50 (width and height) ------------------------------------ Rotation: 0° Corner radius: 8 ------------------------------------ Fill: [blue color swatch] Stroke: [none] Effects: [none] ------------------------------------
Keyboard Shortcuts for Navigation
- Ctrl/Cmd + Z – Undo
- Ctrl/Cmd + D – Duplicate selected object
- Ctrl/Cmd + G – Group selected objects
- Ctrl/Cmd + Shift + H – Hide or show the left panel
- Ctrl/Cmd + \ – Hide all panels for a clean canvas view
- Ctrl/Cmd + / – Quick search for any Figma command
The Quick Actions Menu
Press Ctrl/Cmd + / to open the Quick Actions menu. Type any tool name or command and Figma finds it instantly. This is faster than clicking through menus, especially for commands you do not use every day.
Context Menu
Right-clicking any object on the canvas opens a context menu with shortcuts for grouping, framing, copying properties, and more. You will find yourself using right-click constantly as you get comfortable with Figma.