Level 1: The Figma Interface, Files and Pages

Before you start: about this course

This course is independent of Figma. It is not made, sponsored or endorsed by Figma, Inc. "Figma" is used only to name the product being taught.

Figma updates its product often. Buttons move, panels get renamed and plan limits change. Every lesson is written from Figma's help pages as they stood when it was written, but those pages may have changed by the time you read it. Near the end of this lesson you will practise checking a feature yourself.

Across the 18 levels you will design and prototype one small app: a set of mobile and desktop screens. Each level adds one piece and ends with a check. In this level you set up the file the whole project will live in.

Task 1: Create your design file

A design file is one document that holds your work, much like one workbook in a spreadsheet program. New files go into your Drafts. Drafts are private to you: only people you invite can open them, and Figma sets no limit on how many draft files you can create.

Do this:

1. Sign in to Figma in your browser or the desktop app.
2. Open Drafts in the file browser.
3. Click + Create in the top-right corner and choose a Figma Design file from the menu.
4. Shortcut: type figma.new in your browser's address bar to open a new design file straight away.
5. Rename the file: double-click the file name in the left sidebar, or choose Rename from the File menu. Call it Course Project – My App.

Task 2: Learn the four areas of the editor

The Figma Design editor has four main areas. Think of an artist's desk: a tray of tools, a list of what is on the desk, the sheet of paper itself, and a spec card that describes whatever you are holding.

1. Toolbar (at the bottom of the canvas). This holds the tools for moving around, creating layers such as frames, shapes and text, and leaving comments.
2. Left sidebar (navigation panel). This shows the pages and layers in your file and gives you the Main menu and File menu. An Assets tab holds reusable components, which you will meet in a later level.
3. Canvas (the large central area). This is the space where you design. It is effectively endless, so you can pan and zoom across it.
4. Right sidebar (properties panel). This shows the properties of whatever you have selected. The Design tab is for viewing and editing those properties. The Prototype tab is for adding interactive connections.

Do this: point to each of the four areas on screen and say its name out loud. Then try moving around the canvas:

• Pan: hold Space and drag, or press H for the Hand tool.
• Zoom: hold Ctrl (Windows) or Cmd (Mac) and scroll, or pinch on a trackpad.
• More room: press Shift + \ to minimise the UI. Press it again to bring the panels back.

Task 3: Add, rename and reorder pages

Pages split one file into separate canvases, the same way tabs split a spreadsheet. You can use them to separate stages of work, alternative layouts, components, or a scratchpad.

Plan limit to know: in Starter (free) team files you can have at most three pages per file. Professional, Education and Organization teams can have unlimited pages. To keep this course free to follow, the project uses exactly three pages.

Do this:

1. In the left sidebar, find the page list. If it is collapsed, click the current page name to open it.
2. Rename the existing page: double-click its name, or right-click it and choose Rename. Type Mobile screens, then click outside the list to apply.
3. Add a page by clicking the add page (+) button next to the page list. Name it Desktop screens.
4. Add a third page and name it Design system.
5. Reorder the pages: click and hold Design system, drag it to the top of the list, and release. Then drag it back to the bottom so the order is:
   • Mobile screens
   • Desktop screens
   • Design system

Other page actions are on the same right-click menu:

• Duplicate: makes a copy with "Copy of" added to the start of the name.
• Delete: removes the page and everything on it, so use it with care.

Task 4: Check a feature on Figma's help pages

The interface will drift away from any written lesson over time, so get into the habit of checking.

Do this:

1. Go to Figma's official help centre at help.figma.com.
2. Search for the feature by name, for example "Create and manage pages".
3. Open the official article. Avoid third-party blogs, which are often out of date.
4. Compare the steps and any plan limits with what the lesson told you. If they differ, follow the help page.
5. Note which plans the feature is available on. Many articles list this near the top.

Try it now: look up the page limit for Starter plan files and confirm whether it is still three.

Level check

You are done when:

• a file named Course Project – My App exists in your Drafts
• it has three pages, in order: Mobile screens, Desktop screens, Design system
• you can name and point to the toolbar, left sidebar, canvas and right sidebar
• you have opened one official help article and compared it with this lesson

Key takeaways

• This course is independent of Figma and not endorsed by it. Always check features against Figma's own help pages.
• The editor has four areas: the toolbar (bottom), the left sidebar (pages and layers), the canvas (centre) and the right sidebar (properties).
• Create files from + Create in Drafts, or by typing figma.new. Drafts are private to you.
• Add pages with the + button. Rename them by double-clicking or with right-click > Rename. Reorder them by dragging.
• Starter team files allow at most three pages per file, so plan your pages carefully.
• When a lesson and the help centre disagree, the help centre wins.