How to work in Figma: we understand the interface and create the first layout in the new part of the guide with the Academy of design professions Pentaschool.
In the previous part of the cycle, we got acquainted with the capabilities of Figma. Today we will analyze how to start using the editor: create documents, work with primitives and text, configure modular grids.
Step one. Introduction to the main menu
To start working with Figma, you need to register. After that, the main editor tools will be available to you. You can use both the browser version (which is convenient if you run Figma from different devices) and the program, which can be downloaded here. On the main screen you will see the latest files (tab Recents). If you are new and haven’t created projects yet, only templates designed by other authors will be available on your desktop. As soon as you save the first layout or open a file created by another user, it will be displayed on this screen.
The main screen of the Figma desktop
You can find files through search (line Search in the top panel). A section deserves special attention Community – in it you will be able to search for templates, icons, illustrations and plugins that you can use when creating layouts.
Examples of templates in the Community section
To return to the home screen from Communityclick on the icon located in the upper left corner.
Button to return to the main screen
Also in the top menu is the account settings panel. Here you can choose a profile photo, view information about installed plugins, download the offline version of the editor, change the user.
Profile settings menu in Figma
Step two. Creating a layout
Click the button to create a layout New design file on the desktop or in the panel Drafts. An empty form will open before you. The new file will be called Untitled, but you can rename it by going to the tab Rename in the menu Drafts or by double-clicking on the name with the left mouse button.
The Drafts panel in the Figma work window
The main objects in Figma are frames. A frame is a working area: a mobile application screen or a website page. If you know what device you will be designing for, you can choose the appropriate frame size. To do this, go to the menu Frame (the grid icon in the top left menu). A list of available formats will open on the right.
Selection of available frames
After choosing any format, create a workspace of the appropriate size. You can create several frames for different media in one file.
Frames for smartphones
One of the advantages of Figma compared to other similar programs is the possibility of joint work. To create a team project, return to the main screen (button Back to files in the upper left corner). Next, click on the icon Create a new team.
Creating a team in Figma
With this action, you create a team that needs to come up with a name. After that, a window will open asking you to invite participants. You can designate them as editors (they will be able to modify files) or restrict their access to view mode. In the free version of Figma, only two people, including you, can have rights. If you do not know who will participate in the design, skip this step – you can change the list of participants later.
Creating a team
A team project is a folder that contains files related to your design. It can store dozens of files. Each team you create can have multiple projects at the same time, but in the free version of Figma you can create up to three shared projects. If you often work in a group with a large number of participants (for example, developers, designers, product managers), you will need a paid subscription, which can be issued on the editor’s website.
If you’re working alone and just want to share your layout with someone else, you don’t need to create a team project. Just select the file and press the button Share in the upper left corner. A window will open where you can invite participants, specify whether they can make changes to the layout, and copy a link to the project.
With the help of the Share button, you can open access to the file to other people
Step three. Working with shapes and text
When developing almost any layout, primitives – geometric shapes are used. They are used to create icons, buttons and other design elements. To add a primitive to the file, select the desired shape from the menu. Then select the area on the layout where you want to place the object.
Selection of primitives in Figma
Placing a primitive on a layout
As in other vector editors, such as Adobe Illustrator, placing a primitive creates a new layer (layer). You can edit the shape – resize it, rotate it, round the corners, change its position on the layout, etc. In order for the object to be of the correct shape, press the Shift key during creation. And if you want to create a complex shape with a lot of anchor points, use the tool Pen.
When you right-click on a layer, its settings menu opens. In it, you can choose the location of the layer, hide/show, group, copy, etc. But to work with layers faster and easier, use hotkeys. It is easy to see the list of hotkeys – click on the icon of the question, which is located in the lower right corner. Select the button in the menu Keyboard shortcuts.
Another feature that makes working with primitives easier is the use of modular grids. With their help, you can quickly align elements on the layout. To enable the grid, select a frame and click the “+” icon next to the button Layout grid. A simple 10px grid will be created automatically, but you can adjust this setting – for example choose Rows (horizontal division) or Columns (Vertical), change step size, combine several grids in one document.
Creating a modular grid
Images from the hard disk can be loaded into the created primitives. To do this, use the function Place image or drag an image from a folder to the selected primitive.
Placing an image inside a primitive
When adding text (button T in the upper left corner) you also create a new layer in the selected area on the layout.
Create a text layer
When you select the text area, the text settings panel opens on the right. You can choose the font (Figma features all fonts from the Google Fonts library, but you can also add other fonts using the Figma Font Helper add-on), image (bold, italic, regular), pin, color, letter spacing, alignment, and other settings .
Text settings panel in Figma
Step four. Work with color
By default, all figures in Figma are colored gray. To change the fill color, select the layer, go to the menu Fill (located on the right) and click on the square with the color. The color wheel will open. You can choose a color model, for example, RGB. You can enter the color code manually, use an eyedropper, or simply click on the appropriate shade. To change the transparency, change the value in the window to the right of the color value (in the example, the indicator is 100%).
Shape fill settings
When working with color, you can also create gradients and various effects. To do this, go to the menu in the upper left corner of the color panel and select the desired mode.
Creating a gradient in Figma
You can also control the stroke of the shapes. To add a stroke, click the “+” sign next to the button Stroke.
Create a stroke (Stroke)
In the settings panel, you can choose the thickness of the line, its color, location, specify what type of line is needed (dashed or continuous).
Additional features of Figma
Figma’s capabilities are not limited to a standard set of tools. With the help of plugins (additional modules), you can significantly expand the functionality of the editor – for example, add the ability to download images directly from streams, create animations, generate diagrams for infographics, and more. You will find a complete list of plugins in the section Community. Also, you can always use templates and design elements that are presented in the editor’s library.
You don’t need to know programming or have an art education to create modern, harmonious and user-friendly sites in Figma. In the Academy of design professions Pentaschool, you will master the editor from scratch on the Figma course, complete your first projects, learn how to create professional website design, receive recommendations from experts and collect a portfolio, thanks to which you will be able to find customers already during your studies. The program is designed specifically for beginners – even if you’ve never been involved in design, you’ll get all the knowledge and skills you need to get started.
And in the next part of our guide, we will talk in more detail about plugins and advanced features of the editor. You will learn how to install Figma add-ons and which plugins can be useful for every designer.