In Figma you can create website prototypes, vector illustrations, buttons, strips and other interface elements. We tell you how to use Figma, the advantages and disadvantages of the service and who it is suitable for.
What is Figma
“Figma” is an online service for web design. In it you can draw illustrations and interface elements, create an interactive website layout, application prototype or vector graphics.
In the past, it was difficult for a team of designers to work on one project at the same time, to show finished variants to clients and to give mockups to developers. To open a mockup, you had to download, install and configure separate programs like Adobe Photoshop.
Work in Figma is based on a different principle. All you need to access the service is the Internet and a browser. All edits can be made simultaneously in one layout by setting up shared access.
Figma capabilities
The service allows you to solve a large number of design tasks. Let’s tell you about the main projects that can be done in Figma.
Prototyping
In Figma you can draw a model of a website or application. Such prototypes designers usually demonstrate to customers to show how the project will look like in the future. In the service you can not only draw the necessary screens, but also customize the links between them.
Drawing interface elements
In Figma, designers can create icons, bars, buttons, feedback forms, etc. The program also allows you to customize the effects on each element: make buttons clickable, expand lists, hide bars, create animations for blocks and pop-ups.
Working with vector objects
In Figma you can create vector graphics, import vector objects from Adobe Illustrator and Sketch editors, and export your design in svg format.
Creating flowcharts
In Figma you can quickly create charts, graphs and diagrams. Thanks to the service’s built-in online flowchart builder and a large library of components, you can simply drag and drop elements onto the canvas and create your flowchart in minutes. The finished version can be exported in png, svg or other convenient format, and Figma also has integrations with project and document management programs: Asana and Dropbox Paper.
Figma’s main tools
Figma has a lot of tools for working on projects, let’s tell you about the main ones.
Frames
A frame is the main design element in Figma. It is a workspace that can be a website page or an application screen. Frames scale well, you can set the frame size yourself or choose a ready-made size designed for popular devices and formats.
Modular grid
Grids are lines and cells that allow you to align and organize all design objects in a frame. Grids are created through the Grid Layout panel. In the service you can change the grid color, stretch it or adjust its size, and you can use an unlimited number of grids in one layout.
Components
Components are user interface objects that can be given common styles and can be quickly changed if necessary. Let’s say you have created a layout of 30 pages, and the customer asked you to change the font in the headings, so you can use components and change the font in only one heading, the rest will be changed automatically.
Vector forms
There are basic vector objects in the online service: rectangle, line, triangle, arrow, circle and star. They allow you to draw buttons, bars and other interface elements. You can create vector objects with the Shape Tool.
Images
You can add any image to the layout and start working with it. To do this, open the File panel and use the Place Image tool or just drag and drop the necessary images from the desktop.
Version History
All changes made to a document are automatically saved in the cloud. With shared access, you can track the history of each employee’s actions, view and restore previous versions of a document. You can also assign names to all versions.