Scribd
Upload
109 views

2 The Editor in Figma - Figma Handbook - Design+Code

Uploaded by

Sunil Talekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
109 views

2 The Editor in Figma - Figma Handbook - Design+Code

Uploaded by

Sunil Talekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

The Editor in Figma

This tutorial describes the Figma interface. It divides it into


4 sections and then gives a brief description of each
section.

1/22
Getting Started
Once you've created an account, you'll be redirected to the Figma dashboard
which contains the details as well as different tabs. This is where you can create
new files, import files, go through your recent files or search through the existing
ones.

The Editor
Most of the modern design tools, especially the UI design tools look almost the
same. This is so that the user doesn't feel overwhelmed while working on different
tools or while migrating from one tool to another. The editor is where you end up
once you create a new file.

2/22
Toolbar
The first section we'll talk about is the toolbar. It has tons of options. Let's go
through those options one by one. Starting from the left:

1. The hamburger menu gives you access to a lot of different options such as
Preferences, Plugins, Libraries, Account settings, Different Options, and
Customizations.

3/22
2. Next up is the select tool which gives you two options - Move and Scale.

4/22
3. The frame tool allows you to create new artboards. You can either create a
custom or select from one of the default options on the right panel. This tool
also gives you access to the slice tool, which allows you to specify the region
you'd like to export.

4. The shape tools give you the ability to create basic pre-defined shapes.

5/22
5. The pen tool allows you to create custom shapes using vector anchor points.
The pencil tool is also available in the Pen tool dropdown.

6/22
6. The type tool is what you'll use to add text elements to your design.

7. Hand tool comes in handy when you want to move around in your design file
without activating hover lines, selecting elements, or accidentally moving the
same.

8. Now, let's move on to the Comment tool which gives the user the ability to
add comments throughout the design file, view said comments, and reply to
the same.

7/22
9. On the right side, we've user profile avatars which allow you to see who is
viewing the file at any point in time.

8/22
10. Right next to it is the Share button which provides you with a link or an
embed code that you can share. It also opens up share settings.

9/22
11. The play button allows you to view the prototype, if you've any.

12. Lastly, you've the zoom settings as well as other options such as grids, rulers,
outlines, etc.

10/22
File & Project Names
The middle of the Toolbar contains the name of the file, which is 'Untitled' by
default. Simply click on it to edit.

The project name, which is 'Draft' by default contains the particular file. You
can change the project name to move the file to another project.

11/22
Panel
There are two panels located on either side of the editor.

Layers Panel: the panel to the left is the Layers panel. It contains Layers, Assets
and Pages that have been added to the file.

Properties Panel: the one on the right side is the Properties panel. Here, you
can customize the Frame Size, Positions, Colors, Strokes, and Effects. You can
also view the code of an element here.

15

Pages
When you're working on a huge design project you may need to put different
design elements in different places, not just in a single page. You can create
multiple pages in Figma and put similar elements in a single page.

12/22
16

Assets
On the left side of the Figma editor, there's the Assets panel. Assets are the
elements you save as Components. It can include buttons, forms, navigations,
cards, cells, and overlays. Assets are extremely handy when it comes to re-using
design elements.

17

13/22

You might also like