Figma Proficiency in Ten Days
Figma Basics
Getting Started in Figma
Figma is a design tool that runs right in your web browser. Think of it as a powerful digital whiteboard where you can create designs for websites, mobile apps, and other digital products. It’s built for collaboration, meaning you can work on designs with your team in real time. We're going to start with the absolute basics to get you comfortable with the workspace.
The Figma Workspace
When you open a Figma file, you’ll see three main areas surrounding your central workspace, which is called the canvas. Understanding these areas is the key to getting around.
- The Toolbar (Top): This is your toolbox. It holds all the essential tools you'll need, like the Move tool, Shape tools (rectangle, ellipse), and the Text tool.
- The Layers Panel (Left): This is an organized list of every single object on your canvas. Think of it like a stack of transparent sheets. Items at the top of the list are visually in front of items lower down.
- The Properties Panel (Right): This is where you make adjustments. When you select an object on the canvas, this panel shows all of its properties, like color, size, font, and effects. It's your control center for changing how things look.
Creating and Navigating
To start a new project, you just need to create a new design file. This gives you a fresh, infinite canvas to work on. The canvas is your playground, and you'll need to know how to move around it efficiently.
Here are the essentials for navigation:
- Zoom: Hold the Command key (on Mac) or Ctrl key (on Windows) and scroll your mouse wheel to zoom in and out. This lets you focus on tiny details or see the big picture.
- Pan: Hold the spacebar, and your cursor will turn into a hand. Click and drag to move your view around the canvas without moving any of the objects themselves.
Mastering zoom and pan is the first step to feeling comfortable in Figma. You'll be using these actions constantly.
Drawing and Editing
Let’s create something. Select the rectangle tool from the toolbar (or just press the 'R' key). Click and drag on the canvas to draw a rectangle. As soon as you let go, you'll see it appear in your Layers Panel on the left, probably named 'Rectangle 1'.
Now, with your rectangle still selected, look over to the Properties Panel on the right. Find the 'Fill' section. Click the color swatch to open the color picker and choose a new color. You can also change the rectangle's size by typing new values into the 'W' (width) and 'H' (height) fields.
Next, try the Text tool. Select it from the toolbar (or press 'T'), click anywhere on the canvas, and start typing. Just like with the shape, you can select your text and use the Properties Panel to change the font, size, and color. Every object you create gets its own layer, making it easy to select and manage everything independently.
What is the main, central workspace in a Figma file where you create your designs called?
You've just drawn a rectangle and want to change its color. In which part of the interface would you find the color controls?

