Getting Started with Figma: Home Screen & Interface Overview

If you’re just starting your journey into UI/UX design with Figma, understanding the workspace is your first step. From organizing your files to navigating the interface, this beginner-to-advanced guide walks you through the Figma Home Screen, Projects, Pages, and the entire Design Interface.

Let’s dive in!

Home Screen Overview

When you log into Figma, you’ll land on the Home Screen, your central hub for managing files and collaborating with others.

1. Create a Team

A Team in Figma acts as a shared workspace, ideal for collaborating with other designers, developers, or stakeholders.

• Organize your work by departments, clients, or projects.
• Share files easily across team members.
• In the Free Plan, you can create and join teams with limited features.

2. Projects (Inside a Team)

Inside each team, you can create Projects to keep related files grouped together.

• The Free Plan allows up to 3 projects per team.
• Helps you maintain a clean, organized workflow.
• Each project can contain multiple files for screens, components, or variations.

3. Pages (Inside a Project)

Each design file in a project can contain multiple Pages, which work like artboards or different sections of a larger project.

• You can create up to 3 pages per file in the Free Plan.
• Ideal for managing different flows, screens, or wireframes within a single project file.

Working on a Page: Figma Interface Breakdown

Once you open a design file, Figma loads the full design interface. Here’s how it’s structured:

Toolbar:

The Toolbar is where you’ll find the most essential tools:

• Main Menu: Access settings, file options, and account preferences.
• Move/Selection Tool (V): Select and move objects.
• Frame Tool (F): Create frames (like artboards or containers).
• Shape Tools: Draw rectangles, circles, lines, etc.
• Pen Tool (P): Draw custom shapes and paths.
• Text Tool (T): Add text elements to your design.
• Hand Tool (H): Pan around the canvas.
• Comments: Add feedback or notes directly on the design.
• Zoom: Adjust the view of your canvas.

Left Sidebar

1. Layers Panel

• Displays all objects (text, shapes, images) on the current page.
• Every element is listed as a layer in a structured hierarchy.
• Features:
  • Lock or hide layers with icons.
  • Rename by double-clicking.
  • Right-click for grouping, deleting, or duplicating.

2. Assets Panel

• Access Components, Local Styles, and Team Libraries.
• Useful for reusing buttons, icons, and layout blocks.
• Toggle between Layers and Assets at the top of the sidebar.

3. Page Switcher

• Found at the bottom-left of the sidebar.
• Easily switch between pages in your file.
• Click the + icon to create a new page.
• Right-click pages to rename, duplicate, or delete them.

Right Sidebar (Inspector Panel)

This context-sensitive panel shows properties based on your selection.

When selecting a shape:

• Position (X, Y), Size (Width, Height)
• Fill color, Stroke, Opacity
• Corner radius, Effects (Shadow, Blur)

When selecting text:

• Font family, Size, Weight
• Line height, Letter spacing
• Text alignment and paragraph spacing

Advanced tools available:

• Constraints: For responsive resizing.
• Auto Layout: To build dynamic components (covered in another lesson).
• Prototyping: To create interactive flows.

Understanding Figma’s interface from the Home Screen to the design canvas sets the foundation for a smooth design workflow. Whether you're organizing projects, collaborating with a team, or preparing high-fidelity mockups, knowing where everything is will save you time and confusion.

Go to next lessons on: Figma Frame Tool & Auto Layout