Figma is a powerful tool for designing websites, apps, and other digital experiences. Think of it as a digital whiteboard where you can bring your ideas to life. Since it runs in your web browser, you can access your work from anywhere and collaborate with others in real time. Let's get familiar with the workspace.

When you open a new Figma file, you’ll see three main areas. In the center is the Canvas, which is your infinite workspace. This is where you'll do all your creating.

On the left is the Layers Panel. Every object you add to the canvas—shapes, text, images—will appear here as a layer. This helps you keep track of all your design elements.

On the right, you'll find the Properties Panel. This is where you control the look and feel of any selected object. You can change colors, sizes, borders, and more.

In Figma, you don't just draw on a blank canvas. You work within Frames. A frame is a container for your design, like an artboard in other design software. You can think of it as the screen of a phone, a tablet, or a desktop computer.

To create a frame, select the Frame tool from the toolbar at the top of the screen (it looks like a hash symbol) or simply press the F key. Once selected, the Properties Panel on the right will show you a list of preset frame sizes for popular devices, from iPhones to MacBooks. You can also click and drag on the canvas to create a custom-sized frame.

Frames are essential because they define the boundaries of your design. When you export your work, Figma will only export what's inside a frame. You can have multiple frames on one canvas, which is perfect for designing different screens of an app side-by-side.

Shapes are the building blocks of any design. Figma makes it easy to create and modify them. In the top toolbar, next to the Frame tool, you'll find the Shape tools. You can create rectangles, lines, arrows, ellipses, polygons, and stars.

Let's add a rectangle. Select the Rectangle tool (or press R) and click and drag on your canvas. A new rectangle will appear. Notice that as soon as you select it, the Properties Panel on the right updates to show its attributes.

Every object you create also appears in the Layers Panel on the left. This brings us to a crucial part of keeping your designs tidy.

Think of layers as a stack of transparent sheets. Each sheet has one of your design elements on it. The order of the layers in the Layers Panel determines how they appear on the canvas. A layer at the top of the list will be in front of layers below it.

You can reorder layers by simply dragging them up or down in the panel. This is how you control which elements overlap others. It's a good practice to name your layers to keep things organized. Just double-click on a layer's name to rename it, like "Header Background" or "Login Button."

As your designs get more complex, you can group layers together. Select multiple layers by holding the Shift key and clicking them, then right-click and choose "Group Selection" (or use the shortcut Ctrl+G / Cmd+G). This puts them into a folder, making your Layers Panel clean and easy to navigate.

Getting comfortable with frames, shapes, and layers is the first big step in mastering Figma. From here, you can start building simple wireframes and layouts.