No history yet

Introduction to Figma

Getting Started in Figma

Figma is a design tool that runs right in your web browser. Think of it as a shared digital whiteboard where you can create anything from simple wireframes for a website to polished graphics for a presentation. Because it's web-based, you don't need to install any software, and your work is always saved and accessible from any computer.

Lesson image

First things first, you'll need an account. Head over to Figma's website and sign up for a free account. The process is straightforward and only takes a minute. Once you're signed in, you'll land on your dashboard, which is your home base for all your projects.

Your First Figma File

From the dashboard, creating a new design file is simple. Look for a button that says "New design file." Clicking this opens a blank canvas, which is your workspace. The interface might look busy at first, but it's organized into a few key areas.

Let's break down what you're seeing:

  • The Canvas: This is the big, empty space in the middle. It’s where all your design work happens.
  • The Toolbar: At the very top, you'll find your main tools. This is where you can select shapes, text, and other elements to add to your canvas.
  • The Layers Panel: On the left, this panel lists every object you add to your canvas. As you add more shapes and text, you'll see them appear here, which helps you keep things organized.
  • The Properties Panel: On the right, this panel is context-sensitive. When you select an object on your canvas, this panel shows all the options you can change, like color, size, and font.

Basic Design Tools

Let's try creating a few simple things. The toolbar at the top is your starting point.

Look for the square icon in the toolbar. Clicking it reveals a dropdown with several shapes like Rectangle, Line, and Ellipse. The 'T' icon is for adding text.

Select the Rectangle tool and click and drag on the canvas to draw a square or rectangle. Once you've drawn it, make sure it's selected. You'll see a blue box around it.

Now, look at the Properties Panel on the right. You should see a section called "Fill." This controls the color of your shape. Click the color swatch to open the color picker and choose a new color. You can also change the shape's dimensions (W for width, H for height) or its position on the canvas (X and Y coordinates) in this panel.

Next, try the Text tool. Select it, 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. Play around by adding a few different shapes and text boxes. This is the core workflow of Figma: create an object, then select it and modify its properties.

Quiz Questions 1/4

What is the primary advantage of Figma being a web-based design tool?

Quiz Questions 2/4

If you want to change the color of a shape you've drawn, you should select the shape and look for the 'Fill' option in the __________.

That's it for your first look at Figma. You've learned how to create a file, navigate the interface, and use the most fundamental tools. The next step is simply to practice.