Figma is a design tool that runs right in your web browser. Think of it as a digital whiteboard where you can create designs for websites, mobile apps, and other digital products. It’s built for collaboration, meaning multiple people can work on the same file at the same time, just like in Google Docs.

This makes it incredibly popular with teams. Designers, developers, and project managers can all jump into a project to leave comments, grab code snippets, or see the latest updates in real-time. You don't need to worry about saving constantly or sending files back and forth; it all happens in the cloud.

When you first open a Figma file, the interface might seem busy, but it’s organized into four main areas. Getting familiar with them is the first step to feeling comfortable.

1. The Toolbar (Top): This is where you'll find all your primary tools. You can create shapes, draw with the pen, add text, and leave comments. The center of the toolbar shows the name of your file.

2. Layers & Assets Panel (Left): Every object you add to your design—whether it's a shape, a piece of text, or an imported image—appears as a layer here. This panel helps you organize and select specific elements. You'll also find your library of reusable components in the 'Assets' tab.

3. The Canvas (Center): This is your main workspace. It’s an infinite area where you'll do all your designing. You can pan around and zoom in and out to focus on different parts of your project.

4. Properties Panel (Right): When you select an object on the canvas, this panel comes to life. It shows all the properties you can change, like color, size, font, and effects. It's context-sensitive, so it only shows you the options relevant to what you’ve selected.

When you log into Figma, you’ll see your dashboard. To start a new project, just click the + Design file button. This opens a blank canvas ready for your ideas.

But before you start adding shapes and text, you need to create a container for your design. In Figma, this is called a Frame.

To create one, select the Frame tool from the top toolbar (it looks like a hash symbol) or simply press the F key. Once the tool is active, the Properties Panel on the right will show a list of popular preset sizes for phones, tablets, and desktops. Just click one, like iPhone 14, and a perfectly sized frame will appear on your canvas. Any element you place inside this frame becomes part of that screen.

Figma has a handful of essential tools for creating basic designs. You can draw shapes like rectangles (R) and ellipses (O), or add text (T). Once you add an object, you can select it and change its properties—like fill color, stroke (outline), or font—in the panel on the right.

You'll also need to bring in existing assets like logos, icons, or photos. The easiest way is to simply drag and drop image files from your computer directly onto the Figma canvas.

Alternatively, you can go to the main menu (the Figma logo in the top-left corner), then select File > Place image.... This opens a file browser so you can select one or more images to add to your project.