Figma Interface Tour

The Figma editor has five main areas. Each area serves a specific purpose. Once you understand where everything lives, you can design faster and with more confidence.

The Five Areas of Figma

Interface Diagram

+----------------------------------------------------------+
|  [Menu]        TOOLBAR          [Share] [Present] [Zoom] |
+------------+-------------------------------+-------------+
|            |                               |             |
|   LAYERS   |                               |  DESIGN     |
|   PANEL    |         CANVAS                |  PANEL      |
|  (Left)    |        (Center)               |  (Right)    |
|            |                               |             |
+------------+-------------------------------+-------------+
|                     PROPERTIES BAR                       |
+----------------------------------------------------------+

• Toolbar – The top bar with tools for selecting, drawing, and creating.
• Canvas – The large center area where you build your designs.
• Layers Panel – The left sidebar that lists every element in your file.
• Design Panel – The right sidebar that shows settings for a selected object.
• Properties Bar – A quick-access bar at the bottom (in newer Figma versions).

The Toolbar in Detail

The toolbar runs across the top of the screen. Each icon is a tool you click to activate.

Toolbar Map

[F] [V] [R] [O] [L] [P] [T] [Hand] [Comment]
 |   |   |   |   |   |   |    |        |
 |   |   |   |   |   |   |    |        +-- Add a comment
 |   |   |   |   |   |   |    +----------- Pan (move around canvas)
 |   |   |   |   |   |   +---------------- Type tool
 |   |   |   |   |   +-------------------- Pen tool (draw paths)
 |   |   |   |   +------------------------ Line tool
 |   |   |   +---------------------------- Ellipse (circle/oval)
 |   |   +-------------------------------- Rectangle
 |   +------------------------------------ Select/Move tool
 +-----------------------------------------Figma Menu

The Most Used Tools

• Select Tool (V) – Click any object to select it. Drag to move it.
• Frame Tool (F) – Draw a frame to hold your design. Think of a frame as a phone screen or browser window.
• Rectangle (R) – Draw a rectangle or square.
• Ellipse (O) – Draw a circle or oval.
• Text Tool (T) – Click anywhere on the canvas and type text.
• Hand Tool (H) – Hold and drag to move around the canvas without selecting anything.

The Canvas

The canvas is your infinite workspace. It never runs out of space. You can zoom in to work on small details and zoom out to see the full picture.

Canvas Navigation Shortcuts

• Zoom in – Press + or scroll up with the mouse wheel while holding Ctrl (or Cmd on Mac).
• Zoom out – Press - or scroll down while holding Ctrl/Cmd.
• Fit frame on screen – Press Shift + 1.
• Pan (move around) – Hold Space and drag, or use the Hand Tool (H).

The Layers Panel (Left Sidebar)

Every shape, text, image, and frame you add creates a layer. The Layers Panel shows all your layers as a list. Layers at the top of the list appear in front on the canvas. Layers at the bottom appear behind.

Layer Stack Diagram

  LAYERS PANEL          WHAT YOU SEE ON CANVAS
  +--------------+
  | Text         |  <-- Appears ON TOP of everything
  | Rectangle    |  <-- Appears behind the text
  | Background   |  <-- Appears at the very back
  +--------------+

Click the arrow next to any layer to expand it and see what is inside. This is especially useful for frames that contain multiple elements.

The Design Panel (Right Sidebar)

Select any object on the canvas, and the Design Panel on the right shows its properties. This is where you change size, position, color, corner radius, and more.

Design Panel Sections

• Alignment – Align objects to the left, right, center, top, or bottom.
• W and H – Width and height of the selected object in pixels.
• X and Y – Position of the object on the canvas.
• Rotation – Rotate the object by degrees.
• Fill – The background color of the object.
• Stroke – The border color and thickness around the object.
• Effects – Add shadows, blurs, and other visual effects.

The Pages Panel

A single Figma file can have multiple pages. Think of pages like tabs in a spreadsheet. You might have one page for the home screen, another for the settings screen, and another for design documentation.

You find the Pages Panel at the top of the left sidebar. Click the + icon to add a new page. Double-click a page name to rename it.

The Figma Menu

Click the Figma logo (F) in the top-left corner to open the main menu. This menu contains options for:

• Creating new files and pages
• Importing images or other files
• Exporting your designs
• Accessing preferences and keyboard shortcuts

Keyboard Shortcuts Worth Learning Now

How to Create Your First File

1. Go to the Figma home screen (File Browser).
2. Click New Design File.
3. A blank canvas opens. You see the toolbar at the top, the Layers Panel on the left, and the Design Panel on the right.
4. Press F to activate the Frame tool.
5. Look at the right panel — it shows frame presets like iPhone, iPad, Desktop, and more. Click iPhone 14 to insert a phone-sized frame.
6. Your first frame appears on the canvas, ready for design.