The design tools that we work with. Figma.
Nowadays there exist enough design tools. Our designers choose for themselves the tools with they feel comfortable to work with. Someone prefers Photoshop, others like Sketch or Abstract.
Today we will talk about Figma. Our designer Julia, a star of design and an expert in Figma, will share with us her experience working with Figma, possibilities, and features of this tool and its main advantages and disadvantages.
Julia: I have been working with Figma since the first version. After switching from Adobe Photoshop and Adobe Illustrator, it was a real discovery for me.
For me, Figma is a great competitor of Sketch and in my opinion, it is even better than Sketch.
The main advantages of Figma
First acquaintance with the tool is simple and rather “painless”.
When you work on large projects or you have many tasks at the same time, you start to appreciate your time, the time of your team and client. Figma has become a real breath of fresh air for me as a tool for work. When you work with Adobe or Sketch, you don’t notice a high workload of the Adobe program or an inconvenience of the Sketch interface. You realize it only once you need to work with a very big project or you need to finish some task in a short time, learn something new or repeat some trick or decision.
Figma saves you time and takes care of your nerves in this aspect:)
It took me a couple of hours to get acquainted with Figma and feel comfortable with this tool. Within a few days, I fully understood all the features of the interface. Moreover, I would like to highlight the fact that when Figma makes new releases or updates or adds a new feature, it does it very softly and it doesn’t make you feel stressed.
Additionally, any project manager, developer or a client can easily learn how to work with Figma. For them it will be simple and it’s not necessary to download the app from the Internet.
Web version of the product.
In addition to the desktop version, there is also a web version of the program.
It is an irreplaceable thing for the team members who are not designers. It is not necessary to download the application from the Internet and export separately png files in order to demonstrate design solutions to the team. You just need to share the link to the project and your work in online mode will be seen by other team members whom you indicated in the “Export by link” section.
A great feature that allows you not to think about whether you saved your layout or some incidents happen and nothing will be saved.
Figma will do everything for you, you don’t have to ask for it, it just saves all your changes without any questions and pop-ups.
The only thing you need is connection to the Internet.
It is an ideal solution for designers who develop mobile applications or mobile versions of web sites. At any time, being near your computer, you turn on this application on your phone and it transfers data via wifi from the computer to your phone. You can see all your changes in real-time, on a real device and decide whether it looks fine or not what you designed on mobile phones.
No more saved png, airdrop, and third-party applications, everything is done in one click using the application icon in the phone.
The app is free.
By the way, there is a free version of Figma.
There are no trial versions and usage of the program for free only for the first 30 days. You can use Figma even if you do not have money to pay for software, for example, if you are a student.
Using Figma is much easier and more enjoyable when you know that you are not limited in time.
The only thing is there will be small difficulties with teamwork, but it can be solved by buying a version for the whole company or for a team.
Figma has a feature for teamwork. In other words, several people can work in it at the same time, for example, a manager can leave comments, a developer can coding and designers design in different parts of the layout. And what is most important, nobody at this moment will disturb the work of other people. As a result, a working process is 10 times faster than at a usual pace.
Comments inside the layout.
If you are tired of writing comments in separate emails and in task managers, or you are afraid that a designer will not see your comments in time and it will cause a delay in work, don’t worry this is not a problem anymore with Figma.
Figma layout has a feature to leave comments at any place where you want to do it. You no longer need to point out with your finger at the monitor or draw ugly red circles on the screenshots. Now your comments will be beautifully designed exactly in the place of the layout where you need them to appear.
Integration with two platforms: Mac, Windows.
Figma is not limited to one platform and as we have mentioned above, it also works in a web version that is very convenient for the companies that work only with Windows or Mac, Linux, etc.
Convenient intuitive alignment.
The guys from Figma tried very hard to make this function as useful as possible and what is the most important, it does not disturb the work as it happens in other tools, but on the contrary, helps a lot.
Moreover, an alignment can be done in one click that is convenient. In Photoshop and Illustrator, there was always a problem with alignment. I had to do it manually or use third-party scripts. You take the elements, press the button and that’s it – the objects are placed at a given distance that can be changed. Moreover, you can take and swap aligned blocks by simply dragging and dropping saving the intervals.
And there are excellent Pack Horizontal and Pack Vertical functions. I haven’t seen it in any editor, before. It allows you to arrange quickly the elements close to each other.
Components and command library.
One way to speed up product creation is unification and standardization.
It leads to a logical decision to implement a system of components: atomic, on a BEM or some other. Figma encourages it in the design phase with the Components, Constraints, Library and Team Library tools. These features appeared a few months later and every time they accelerated our work. Sketch has something similar but only with the help of external tools.
Built-in Google fonts.
Figma also has a built-in font library from Google (in addition to your installed fonts), which incredibly simplifies the work with the selection of fonts in the design. The necessary fonts are always at hand, which is very convenient. You no longer need to download fonts, install them for a long time, you can simply select any of the libraries, which, by the way, is rather big.
Figma is not the first to implement it.
In Figma, work with styles is quick and convenient. You just need to write down the typography and within a few seconds, all the changes will be applied immediately on all layouts and objects.
Copy Object Styles.
In Figma, you can copy both individual properties (fill, stroke) and the entire style. You can even create predefined styles (as well as text styles) and apply them to any object. Next, you should change the style itself so that this change can be applied all related objects.
These little things leave a pleasant aftertaste from work.
Bindings is another feature that has been promoted since the first versions. The thing is to bind any element to the borders of the frame and maintain its relative position when changing these boundaries. For example, you can put the footer of a site to the bottom of the page and it will always be there, no matter how tall are the canvas. Or leave a logo in the upper left corner and a phone in the upper right, make the sidebar stretch to the entire height of the layout, the text in the button should always be centered (both by width and by height). In the case of adaptive layout, it gives greater freedom, simplifying many routine actions to change the position and size of blocks.
Interactive prototypes and animated transitions.
Prototyping in Figma means animated transitions between layouts, and fixing blocks when scrolling. It is possible to add a variety of animated transitions in order to make complex prototypes. In the “View” mode it is also possible to insert the mock-up into a device and watch how it will really look in the device. P.S. very convenient for clients.
Also, I can not ignore another Figma feature – the export of the layout to Zeplin, Avocode and Dribbble. Despite the fact that Figma has a “Code” tab for developers so that they can see the parameters inside the layout in a convenient way for themselves, there is also an integration with Zeplin, Avocode and Dribbble. All this can be done in Figma in a couple of clicks.
But, not everything is perfect and Figma, like any product, has its drawbacks, but there are not so many of them:
Internet is required for work.
Since Figma is a web application in a browser, it does not work without the Internet because virtual files are stored in the cloud.
It breaks a complex vector during import-export.
Sometimes there are situations when a complex and loaded SVG is imported incorrectly into Figma. In order to do it, you should import it as png. However, this also happens in other tools, such as Sketch and Adobe Illustrator.
Inadequate file hierarchy.
Unfortunately, within one team, only dividing into projects is available. One project can store as many files as you like. But it is not enough for us because there are a lot of files – a folder and tag system would be convenient here.
The low cost per month is compensated by the need to pay regularly. Not everyone may like this approach.
No integration with Craft and Abstract.
For some developers and designers, these are indispensable and convenient tools, but Figma does not allow working with such tools yet.