Learn

Now that you have your free Figma account set up, our tour is officially up and running!

Opening Figma brings us to the dashboard. This is where we create new files and access files we have already created. If we’re collaborating with a team, we’ll also be able to access any files that have been shared with us.

Another feature we can access from the dashboard is the Community, a hub of free resources created by Figma users.

To get started with designing, we’ll select the “New design file” button, which opens the Figma editor.

Screenshot of the “New design file” button on the Figma dashboard.

The Figma editor is divided into four areas: the toolbar at the top, the layers panel on the left, the properties panel on the right, and the canvas in the middle.

On the top right of the editor, note the Design and Prototype tabs. We will start our project in Design mode, which provides the tools needed to create designs. As promised, you will be creating a prototype in this lesson, so we’ll get into Prototype mode later in the tour. For now, make sure you are in Design mode.

A screenshot of the Design and Prototype tabs, which are located in the top right of the Figma editor. The Design tab is bolded, indicating that the editor is in Design mode.

While exploring Figma, we will build habits that keep us organized. To achieve this on our tour, we will consistently emphasize the importance of naming everything. Our first opportunity to name something happens right away!

We’ll give this design file a descriptive name, so we can easily find it later. Note that this file name can be updated at any time.

Instructions

Task: Set up a new design file in Figma.

  1. Open Figma and log in to your account.

  2. After logging in, you’ll land at the Figma dashboard. From here, select the “New design file” button at the top.

  3. Opening a design file brings you to the Figma editor. To finish setting up this design file, give it a name that will make it easy for you to find. Select the “Untitled” text, which is near the top middle of the editor, and type in a descriptive name, such as “Codecademy App.”

You will use this design file for the rest of our Figma tour, so keep it open as you move through this lesson.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?