No history yet

Introduction to Figma

What is Figma?

Figma is a design tool that runs right in your web browser. Think of it like Google Docs, but for designing websites, mobile apps, and other digital interfaces. You don't need to install any heavy software, and your work is always saved automatically in the cloud. It’s built for collaboration, allowing multiple people to work on the same design file at the same time.

Lesson image

Getting Started

First things first, you'll need an account. Head over to the Figma website and sign up for a free account. Once you're in, you'll land on your file browser. This is your dashboard where all your projects, called design files, will live. You can organize them into teams and projects to keep everything tidy.

To start a new project, just click the 'New design file' button. This will open a blank canvas, which is your digital workspace.

The Figma Workspace

When you open a new design file, the interface can seem a bit busy, but it's organized logically. The workspace is divided into four main areas.

Here’s a breakdown of each area:

  1. Toolbar (Top): This is where you'll find all your primary tools for creating and editing. This includes tools for creating shapes, text, and frames.
  2. Layers Panel (Left): Every object you add to your design—like a shape, an image, or a piece of text—appears as a separate layer here. Layers are listed from top to bottom, which corresponds to their stacking order on the canvas (front to back).
  3. Canvas (Center): This is your main design area. You'll create and arrange all your visual elements here.
  4. Properties Panel (Right): When you select an object on the canvas, this panel shows all of its properties. You can change things like color, size, font, and effects here.

Basic Tools

Let's look at a few of the essential tools you'll find in the top toolbar. These are the building blocks for any design.

ToolIconFunction
MoveAn arrow cursorSelect, move, and resize objects. It's the default tool.
FrameA hash symbolCreates a container for your design, like an artboard. You can choose preset sizes for phones, tablets, or desktops.
ShapeA square or circleLets you draw basic shapes like rectangles, lines, arrows, ellipses, polygons, and stars.
TextThe letter 'T'Allows you to create and edit text on the canvas.

You'll primarily use these four tools when you're just starting out. Get comfortable selecting them (you can also use keyboard shortcuts) and seeing how they work on the canvas. For example, try creating a Frame, adding a Rectangle shape inside it, and then using the Text tool to write a label.

The Properties Panel is context-aware. If you select a shape, you'll see options for color and borders. If you select text, you'll see options for font, size, and alignment.

As you create these objects, notice how they appear in the Layers Panel on the left. You can click and drag layers to reorder them, which changes which objects appear in front of others on the canvas. This is a fundamental concept in digital design.

Now that you know the layout and the basic tools, let's check your understanding.

Quiz Questions 1/5

Where in the Figma interface would you find the primary tools to create shapes, text, and frames?

Quiz Questions 2/5

If you want to change the color of a rectangle you have already drawn, which panel would you use?

Getting familiar with the workspace is the first step to mastering any design tool. Spend some time clicking around and exploring these different areas on your own.