Mar 13, 2020

Figma is a powerful tool for design, prototyping, and development

Frame 1 1 - Figma is a powerful tool for design, prototyping, and development

Design is an important component of any website and app. This is an entire ecosystem, the creation of which requires convenient tools. When working with our projects, MDM designers use the Figma service for prototyping and development. In this article, you will find out what this service is and what you can do with it.

What is Figma

Figma is a cross-platform service for interface designers and web developers. It is presented with a desktop and online version which allows you to develop the interfaces of programs, websites and mobile apps. The project began to be created back in 2016. The rapid popularity of Figma came through the active development of functionality and social networks. It was advertised by many bloggers, and sites posted dozens of reviews of the new service.

Frame 2 18 1024x341 - Figma is a powerful tool for design, prototyping, and development

Before the release of Figma, it seemed that a cloud-based editor with a comfortable browser experience was just a dream. However, the tool exceeded all expectations. Figma attracts maximum comfort. You only need to create a layout and just send the client a link to it. The tool also gives space for teamwork.

Thanks to the development of Figma, designers from all over the world create millions of UI layouts, share the experience with a large community and actively create new plugins.

Why Figma is a professional tool

At Figma, everything is perfectly thought out for the smooth communication of designers, teams, and customers.

Command

Sometimes two designers need to work at the same time, generating and finalizing ideas, while the developer at that time needs to export design elements. Figma makes it possible to do all tasks simultaneously to several people in real-time. You can forget about colleagues, who verbally make changes to the project.

Each project is created for the team, and you can invite participants to it at any time, delimit the rights by defining the project administrator, allowing editing or simply defining the viewing rights, for example, for the client or the boss.

Frame 2 15 1024x341 - Figma is a powerful tool for design, prototyping, and development
Как проекты отображаются внутри команды

Comments

You can easily give access to the document to clients and colleagues. And it doesn’t matter, to individual pages, to all layouts, or just to drafts. Each participant can leave comments on the design, which are closed as they are completed.

Transfer design for development

A good designer knows that his project must then be transferred to the developer. And, often, there were problems. Only with the advent of Figma designers can give access to the front-end developer, he selects layout elements, immediately seeing the parameters, properties, and indents. You no longer need to make whole guides for the work of front-end developers.

Pros of Figma

Figma is now the most popular service for UI interface design with a huge audience. Why did designers like the new tool so much?

Simple work with the service

Graphic editors are powerful tools that need to be studied for a long time. With Figma, you can easily understand how to work in just a couple of hours. It is created for people, everything here is intuitive. The service gives an excellent start for designers who are just starting their career paths.

Service is free

All functions for full prototyping in the service are free and almost unlimited. The only disadvantages of the free version are the lack of co-editing and the fact that the history of changes is saved for 30 days. Limitations are not significant. For teams, the service offers paid subscriptions with advanced features for multi-user work.

Frame 2 17 1024x341 - Figma is a powerful tool for design, prototyping, and development

Performance

The service is fast enough. You can work on several canvases at the same time, and the program will not lag. A comparison of the speed of Photoshop and Figma shows that with the same number of open canvases, Photoshop heavily loads RAM, while the contents of the project in Figma load longer, but this doesn’t affect the speed of actions.

Automatic saving and version control

In ordinary desktop programs, progress is saved only if you do it yourself. One of the main advantages of Figma is auto-save because it is a cloud service. You can also view the history of saves by day and time, which is certainly very convenient.

Components

Another convenient feature of this service. Buttons, icons, feedback forms — everything can be turned into components and then, you can place them on the pages. And most importantly, the components obey the master components: you change the parameters in it, and all instances change too. However, each copy can be changed independently of the rest.

Frames

Very similar to artboards, but more flexible. They scale well and can easily be used in other frames. Users do not need to remember the frame sizes for the main devices, Figma pre-installed templates for Phones, Tablet, Desktop, Watch, Paper, Social Media.

Frame 2 14 1 1024x341 - Figma is a powerful tool for design, prototyping, and development

Vector graphics

Figma offers a basic yet extremely effective set of tools which could be enough for most manipulations with vector graphics: from simple icon correction to logo design at its peak. The service well pastes vector objects from Adobe Illustrator through the clipboard, opens EPS and SVG files with a simple drag and drop feature.

Elements alignment

Compared to Photoshop or Illustrator, the alignment tools in Figma work exactly as you expect. And with the advent of the Auto Layout function, alignment and further rearrangement of elements became smoother. You can simply select the necessary elements and set the distance between them. The service also offers two unique functions, Pack Horizontal and Pack Vertical, which quickly assemble elements close to each other.

Interactive Prototypes

Figma covers all areas of prototyping thanks to animated transitions between layouts, fixing blocks when scrolling and the ability to view the layout on mobile phones with the app. And with relatively fresh update introducing Smart Animate feature creation of prototypes looking extremely close to the final product became easy and straightforward. So you can receive a lively and interactive layout of the future app or site.

Copy styles

In Figma, you can copy both individual properties and the entire style of the object. The same works for fonts. By the way, users can connect their own fonts or Google Fonts.

Frame 2 16 1024x341 - Figma is a powerful tool for design, prototyping, and development

Plugins

The service has a huge community, which is actively contributing to the development of the tool. Thanks to the open-source, many plug-ins have been created for the most diverse needs of users.

Constant updates

Figma continues to amaze users with new features and capabilities. Moreover, the team not only eliminates the inconvenience in the work, but they also add new unique tools. Of the latest updates, the Auto Layout feature can be highlighted. It simplifies the creation of lists, product cards, menus and other design elements that should be the same, but with different content. When the text of the frame changes, it is automatically stretched to the desired size. Change the position from horizontal to vertical, colors and size of elements, text — all this is done in minutes with Auto Layout.

Cons of Figma

Although the service is infinitely convenient, it has some disadvantages. There are very few of them, and problems rarely arise. The abundance of advantages makes it easy to overlook minor flaws.

Stable internet connection

The fact that the service is represented by an online version is both a plus and a minus. On the one hand, this is convenient and the program doesn’t take up disk space, on the other hand, progress may not be saved with a weak Internet. The main thing, in this case, is not to close the layout, then when the computer connecting, the layout will be saved.

Export problems

Files from Figma can only be exported in four formats: png, jpeg, svg, pdf. Designers have to use additional programs or plugins to export projects to other formats.

Let’s summarize

Figma is a great tool for UI designers made for people. It was a big step forward and gave new opportunities for convenient work. The creators of the service work tirelessly and extend the functions of Figma to make it even more useful. The tool is equally suitable for both beginners and designers with experience. Undoubtedly, if you haven’t work with the service before, you need to try. For many, it has become the main tool for working with prototypes.