Figma is a design tool that lives in your browser. Think of it like Google Docs, but for creating visuals instead of writing documents. It's used to design what websites and apps look like, from the layout of the buttons to the color of the text. Because it's web-based, you can access your work from any computer, and you never have to worry about saving.

It's built for teamwork, but it's just as powerful when you're working alone. Let's get familiar with the basic layout and tools.

When you create a new design file in Figma, you're greeted by a clean, open space called the canvas. This is where all your design work happens. The interface is organized into three main sections.

On the left is the Layers Panel. Every object you create—a shape, a piece of text, a frame—will appear here as a layer. This panel helps you organize and select items.

In the middle is the Canvas. This is your infinite workspace. You can pan around and zoom in and out as much as you need.

On the right is the Properties Panel. When you select an object on the canvas, this panel shows you all its properties, like color, size, and font. This is where you'll make all your edits.

In Figma, you don't just draw on a blank canvas. You design inside Frames. A Frame is a container for your design. You can think of it as an artboard or a specific screen size, like a phone screen or a webpage.

Once you have a frame, you can start adding elements to it. Every element you add, whether it's a rectangle, a circle, or a line of text, becomes its own layer. These layers are listed in the Layers Panel.

The order of layers matters. Layers at the top of the list appear in front of layers at the bottom. You can drag layers up and down in the panel to reorder them.

Figma has many tools, but you'll use a handful of them constantly. You can find them in the toolbar at the top of the screen.

To use a tool, just select it and click or drag on the canvas. For example, to draw a rectangle, press R, then click and drag. After creating an object, you can select it with the Move tool (V) and change its properties—like its fill color or stroke thickness—in the Properties Panel on the right.

These simple tools are the building blocks of every design. By combining shapes and text within frames, you can create anything from a simple button to a complex webpage layout.