Figma: application overview for web design
Everybody who has worked with Google Docs realizes that it is so advantageous to store and alter archives on the web. You can cooperate on articles, open them from any PC, make guidelines and introductions with shared access.
For website specialists, there is a comparative apparatus – Figma. In this article, we will disclose to you what Figma is, what are its primary highlights and confinements.
What is Figma
This is a graphic editor for web design. With the help of Figma, you can create:
interactive prototypes of sites and mobile applications;
interface elements – icons, buttons, menus, windows, feedback forms;
In Figma, all documents are stored in the cloud. Thanks to this, in the editor you can collectively work on layouts and open them by reference, without downloading.
You can enter Figma via a browser or download the program to your computer. It is suitable for both Windows and Mac. In the desktop version, you can work offline, and when there is access to the Internet, the changes are synchronized.
Figma benefits for work
Document sources are stored in the cloud.
No need to send layouts, upload them to the cloud and control versions. Just log into Figma account and see the original. If an employee is not at work, you do not have to look for the layout on his computer – all in team access.
Teamwork on mockups
As in Google Docs, in Figma, you can work on a document together: to give access to view and edit, to work in parallel on a layout — cursors of different colors will be visible on the screen.
Thanks to this, all project participants understand the context better. For example, the designer develops a prototype of the application, and the UX copywriter writes texts for the interface directly to Figma.
The tool is free for individual users.
If you work in an account yourself, all features are free. Just register and start working. You can give access to view the document – it is also free.
How much does Figma cost
The subscription price at Figma depends on the opportunities for teamwork. There are practically no restrictions on functionality in the free plan. Below we take a closer look at what can be done in different versions of the Figma program.
$ 12 per user with editing rights/month
$ 45 per user with editing rights/month
The plan gives you the basic features:
Extended opportunities for teamwork:
This is a plan for large organizations.
Instructions to begin working with Figma
After registration, a welcome letter comes to the post office with a link to the Help section, video tutorials, a forum and other resources:
The interface is clear – on the left is a panel with layers, which includes project elements, on top of the toolbar, on the right, the properties panel.
When you start working with the editor, notifications appear with tips:
Tips to help navigate the service. But in order to explore the possibilities more deeply and use them to the maximum, additional training materials will be needed.
How to start working with Figma
To get acquainted with the editor and learn the basics offer in the online university “Netology”.
Practical lessons on working with Figma in Russian are on YouTube channels:
“Design Science”, 15 exercises;
“UX Mind School Design School”, 12 exercises;
“Moscow Digital Academy Design and Practice“, 6 exercises.
The e-book “Guide to Figma” released by interface designer Alexander Okunev. The book covers 23 topics: an overview of the interface, shape, pen and vector networks, gradients with examples in Figma, framing and color correction, components, overrides and others.
Figma allows you to make a clickable version of the site or mobile application, creating multiple screens. You can test and customize any function: buttons, pop-up menus, animated and modal windows.
All screens are placed on one page. Switch between windows is not necessary. You create connections and see how the interface works in reality:
When the prototype is ready, turn on presentation mode. In the presentation, you can click on the buttons, navigate between sections of the site, click on menu items.
In working on large projects, the Figma Components feature is very useful. Components are duplicate UI elements in projects. You can create components from buttons, icons, fields, menus, headers, forms, and blocks.
Components in Figma can be made basic (Master components) and dependent (Instances). If you have drawn a button, made it a component, and then copied it, then the first button will be the main component, and the second one will be dependent. Changes that you make to the main component will be applied to the dependent.
To make an element a component, select the “Create Component” option on the top panel or right-click on the layer and select “Create Component” from the menu.
You can create a dependent component in several ways: hold Alt while dragging, use the Duplicate command or a regular copy-paste:
Changes to dependent components in one project are applied automatically. If the dependent component is used in another file, Figma offers to change it, but you can not.
This feature allows you to create complex vector shapes. In Figma, the line does not have to go out from one point and close. You can fork a line, draw from anywhere:
In addition, vector meshes make working with HTML easier: you can copy SVG code from an external source and paste it as a vector layer directly into the editor. Or save the vector object from Figma as SVG code. To do this, right-click on the element, select “Copy as SVG” and paste the code into HTML or another web project you are working with.
Integrated commenting, editions and access
In Figma, you can work on a project collectively. You create a team and set access settings for each of the participants: who can only view the project and who can edit. You can see how team members work together on a document:
Team members can leave comments or discuss any element in the project. To add a comment, select the comment icon in the top menu, click on the element and write a comment:
In Figma, you can track the history of actions of each employee, view and restore previous versions of the document. The service automatically saves versions when the project tab is closed, or if the user has not made changes in the last 30 minutes.
To view version history, select the “Version History” option from the drop-down menu on top. A panel with a history of changes will appear on the right of the page. Versions can be assigned names, restore, duplicate.
The free version shows changes over the past 30 days. In paid maintains history of all changes since the inception of the project.
How to work with Figma: creating an e-book mockup
Having studied the main features of the program, we tried to test them in practice. To create a simple e-book page, do the following:
1. Sign in and create a new document.
2. Click on the panel at the top of the “+” and create a frame (Frame) to place the object on the canvas.
3. Fill the project with layers: text blocks, rectangles and drawings.
Here’s what we got:
The editor was created primarily for web design. Therefore, it is inconvenient to work with printing. In Figma, there is no CMYK palette and grid dimension switching per cm / mm. To prepare a layout for a banner, leaflet or roll-up for printing, you need to load the file created in Figma into another program that is intended for printing. And only then give it to print.
Another limitation of Figma is that layouts from Photoshop cannot be imported directly. One option is to translate them into Sketch format, and then transfer them to Figma.
Figma looks like a well thought out tool made by designers for designers. The main advantages of the editor:
Allows you to work together on documents – create and edit team in real time.
Stores documents in the cloud – layouts do not take up disk space; they do not need to be uploaded to show colleagues or customers.
Cross-platform – the ability to work with the editor on Windows, Mac, Linux.
Ability to create interactive prototypes, vector grids, main and dependent components..