Learn Figma Basics, part 1: Introduction to Figma User Interface
Tags: figma, design, beginners, tutorial
Published: 2020-04-27 19:19:14

It is important to have a general idea about what you can do and what you can’t do with Figma before starting.

**What you can do with Figma:**  
Figma is designed to help you create user interfaces and collaborate.
you can create user interfaces, Graphic design, and illustrations.

**What you can’t do with Figma:**
Figma does not cover photo editing, 3d design, or video editing.

**Create a Figma account:**
Before we start, If you don’t already have an account, please go to figma.com and create an account.

#**Files Browser:**
After you signed in to Figma or open a project’s file, you land up in the files browser :

![Figma File Browser](https://lh3.googleusercontent.com/q-g0uXuBoXWc2Xncxt_apjCjh6Tb-rouzDU7T-WycrffNKByZWQyxqrZaiPfWmjgxnbz6qBMy0BM_wG-_iEXis9G3CwrrulHj5IAqeJy)

“ The File Browser allows you to navigate through your account. You can use it to access Personal Files, Create and Join Teams, and connect with the wider Figma Community.
On the left side of the page is the sidebar. This provides the main method of navigation for getting around Figma.
Your Files, Teams, and Projects - are displayed in the main body of the File Browser. “
Source : [help.figma](https://help.figma.com/hc/en-us/articles/360041543473-Use-the-File-Browser)


#**Figma files structure:**
Figma helps you manage your files better with its four levels files structure: Teams, Projects, Files, and Pages.

![Figma File structure 01](https://lh6.googleusercontent.com/kXtNgzWP5AE7VF57p-J7XpAPqT16zYWpyRWvoJADvJSPXQ0K-F9-K3IKi8i_YRTjPfi8fNDZkkkTodgA7Eo-g7nHtOYOk8hzLgpvTNaB)

![Figma File structure 02](https://lh5.googleusercontent.com/Xipxr9GZc6wjZ1KKSvW0RIRWlbGmB0NnJV6PFEw97FHT7cw9Z53q1PO-y6JPm-fe4kwLcmFloZelSmTca5J-43coYGlWKfiA9x7E3dJl)

###**1 - Teams :** 
Teams are tabs that contain a list of projects that are created by the team members.

####**Create a new team:**
- To create a new team, click the **+ New team** button on the bottom of the sidebar.

![Figma new team](https://lh4.googleusercontent.com/CeIvOQ8AyQVeuVKH-MAuv7TVBHpRqXh6xB59rcMaYQegPHCFj4LCQxJDDQQ1ogWwjqS2XJ7wqRRGS5gK4_xll2oICgL-_1gj-Wk_ENpzgaK0cQz5h3MyiSkQFIB0Rvco_yLgxCPe)

- Add a name to the team and click **New Team.**
- Add team members emails or click **Skip for now**
- Choose a starter plan

You can access your new team in the sidebar.

###**2 - Projects :**
Projects are a group of files assigned to the same project.

####**Create a new project:**
Projects are created inside teams. You are limited to three projects in the free plan.
- Select a team in the sidebar
- Click the **New project** button on the top right side of the files browser

![Figma new project](https://lh5.googleusercontent.com/csoIDLVK32ImyiBq_0XfC9c1OfdGZ-89hbS8sZ_GKM1iG4W_dHfVHIeD13IUzNMoSsWa1_Bb3vkOLVQvscGCUUNtAoWMn2B2Xz2TLmaDMNKzOvGUEuUEScyy2lqGfYCMMIAeDhOo)

- Add a name to the project and click **Create Project.**

###**3 - Files :**
Files contain your design.

####**Create a new file:**
There are two ways to create a new file in Figma. Create a **draft file** or a **team project file**.

####**Draft file:**
- Click on the **+** icon beside the **draft** tab in the sidebar.

![draft](https://lh3.googleusercontent.com/s5r8SWjeBIMAaHr1d4zkCN719SpIj7rZjHgOBHGbQimBFy3aINuZPJhYe9CnQdoVijn8AZX4o_P2i15KVdrI-Rhw42YpNTwbrcTkvoq1wqs-mH3cp159pxq_IrhRRo9RTdKl1Ltk)

Your new file will be assigned to the draft project. 
To access your draft files, select the Draft tab in the sidebar.

Team project file :
- select a team
- open a project
- Click on the **+** icon on the top right side of the files browser

![project](https://lh3.googleusercontent.com/5DN9f88ubqrGLwBY0vAPJ8g5TqqgoZ7bCUDWXz-ogLnQR81yNuoeGq0-SNdgP4CRmy_vnz2V1xCUEyZu3dk98cPfRgwG-WDo0YgLjrIKai28SZXJBjORVurkSvHJGjWkgnD7-vR1)

###**4 - Pages :**
Inside a Figma file, you have the ability to create pages. Each page has it’s canvas, where you can create different artboards for your design. 
Pages are practical to create different versions of the same design inside one file. 

####**Create a new page :**
- Open a project file.
- Go to the tab menu of the sidebar, click on **page 1** to reveal the pages section.

![page](https://lh6.googleusercontent.com/b-48ATCvOZcxQjRSO9cf4nHSdTZHI8a-AjvOHSO2NLiZrPsGNK3dZcF8rHyrFDkevI083tiH-3DciGvkg6cKwaZLXhhek81vwf2djqYVi3FFaLqTgIVwsf-ackrfHFFrcr47aQGc)

- Click the **+** icon in the right of the pages section.

![create new page](https://lh5.googleusercontent.com/9MuCEdtgliSEEXfrRdZOKBs5d9UuUTTOZ9KqZ1t3PT117f1a3jl9b43uV4o6irB1pIZX_KNL35MxqQ0zCr_5Sz9pjeu74ZXQFrIWUi4)

- Add a name to the page.




#**File Editor:**
Figma has a minimal file editor with four main areas: the toolbar, the layers panel, the canvas, and the properties panel.

![File Editor](https://lh5.googleusercontent.com/EvTZsCjJFPiVmLuGlUM5MtRrss5qsQa1Ao2Mq9vXf5lx6JkXsVei5L6AHq1le0KSIzWnQ5XiY0lpeGB9VcDnyrdiLwBbn3OWzsRmE_WE)

###**Toolbar :**
The toolbar contains a set of tools that you can use in your creation process.

![toolbar](https://lh5.googleusercontent.com/V1ipUjBRxymnyADT6Fxnm-BJc1N-P0VdG3_3d2P0iAzaTxh8PKSupN8Piw-gJlNoKIjiO-Ad45soFcUMmNgGxP43-GK4vi6cwcZCMAqCdfoQi0iqNB4qNbWS9m80aNIVFw8BXs9r)

See more on :
https://help.figma.com/hc/en-us/articles/360041064174-Navigate-the-Toolbar-in-the-Editor

###**Canvas :**
the canvas is the container of your artboards and layers.


###**Layers panel:**
The layers panel sidebar allows you to access all your layers, assets and pages included in your file.

See more on:
https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-assets-in-the-Layers-Panel

###**Properties panel :**
The properties panel allows you to access the properties of any selected layer, prototype or inspect the object’s code.

See more on:
https://help.figma.com/hc/en-us/articles/360039832014-Design-Prototype-and-view-Code-in-the-Properties-Panel

That's all about the Basic Figma User interface. In the next post, we will discover the **Frame** feature and how to create design artboards.

This post is a part of a series that cover the basics of designing with Figma.
Please don’t forget to follow and share. See you in the next post ;)