Nowadays, design tools are not in short supply. Our designers choose the ones they are most comfortable to work with. Some favor Photoshop, some like Sketch, others switch to Abstract.
But today we will talk about Figma. Our designer Julia is a genuine master of design and a Figma wizard will tell us about her experience in working with the tool, possibilities, features she adores as well as the main advantages and drawbacks.
Julia: I have been using Figma since the very first version. Having converted from Adobe Photoshop and Adobe Illustrator, this software was an eye-opener for me. I think it is an excellent rival to Sketch – and in some aspects it is even better than Sketch!
When you are working on major projects or simply multi-tasking, you value time – yours, your team’s and your client’s. Figma became a breath of fresh air for me – in terms of mastering the tool quickly. When working with Adobe or Sketch, you are not paying attention to how overloaded Adobe is or how inconvenient Sketch’s interface is. You only realize it once you are working with a major project, need to complete a task within a short timeframe, learn something new or recall a solution. Figma saves your time and nerves 🙂
It only took me a couple of hours to get myself acquainted with Figma and start using it. After only a few days, I knew all about the possibilities of its interface. Have to point out as well that when Figma installs an update or adds a feature – it does that smoothly, not giving you any inconvenience at all.
On top of that, a team manager, developers or a client can quickly learn what Figma is – it would be very easy, with no need to install the app.
Desktop version aside, there is a web version of the software.
It is indispensable for those members of your team who are not dealing in design. You don’t have to download the app and export .png files separately in order to show your designer solutions to your team. You only need to share a link to your project – and those who are included into the “export with a link” list will see your work online.
A wonderful function which relieves you of any stress thinking about whether you saved your project or not – or whether the software would crash and your work would be lost.
Figma would do everything for you. You do not need to ask for it, there would be no pop-up windows or questions – it will just save all your work.
You would only require an internet connection.
Ideal solution for designers working on mobile apps and mobile website versions. In any moment in time, while sitting at your computer, you can switch on your mobile phone app – and all the data from your PC will be transferred on it through Wi-Fi. You will be able to see all the real-time changes on your handheld device and also determine whether a design solution would look good on the screen of a phone.
No more saved .png’s, airdrops and other third-party apps! All is done in one click – on your mobile phone app.
Yeah, the app is free as well!
No trial versions and free usage of the software for the first month. You can now use Figma even if you are short of money to pay for the software – if you are a student, for example.
Learning Figma and getting to know it better is much easier and pleasant when you know that you are not limited in time.
There could be complications with team work though, which could be resolved by buying a corporate and team versions.
Figma enables team work. Meaning that several people can work on one project. For instance, a manager would leave comments, a developer would build the project, designers would generate designs in several parts of the project. And, importantly, nobody would interfere with other team members’ work. This would make the work pace 10 times faster than usual.
If you are tired of writing commentaries in separate emails and tasks, or just worried that a designer would not see your comments in time thus prolonging the project’s completion time – Figma would solve that problem.
You can leave comments inside the project – at any place you deem necessary. You would no longer need to walk over and point into a display or draw bizarre red circles on a screen. Your commentaries would be written in a pretty way – just in the parts of a project where you need to comment on.
Figma is not restricted to a single platform. And, as we mentioned before, works as a web-version too. Which is very convenient for corporations operating exclusively on Windows, Mac, Linux etc.
That is where the creators of Figma put an extra effort – to make this function very useful. And unlike many other tools, in this case it does not interfere with your work – but actually helps with it. There is also a very convenient one-button aligning function. Photoshop and Illustrator have always had a problem with aligning. You had to either do it manually or use third-party scripts. You take elements, push the button – and it’s done! Objects are located at a set distance between each other, which changes as you proceed. Moreover, you can change the position of aligned blocks through a simple drag-and-drop – keeping margins intact.
There are also excellent functions – Pack Horizontal and Pack Vertical. I haven’t seen those in any other editing tool. Those help to quickly stack elements together.
One of the ways to speed up a product’s creation – unification and standardization. This brings to a logical step in implementing a components system – atomic, BEM or others. Figma endorses that at designing stage with tools like Components, Сonstraints, Library and Team Library. These features were added several months ago and have sped up our work significantly. Sketch has a few things like that – but those are either third-party plug-ins or simply not effective enough.
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. Working with styles in Figma is quick and convenient. Write all typography and then all changes are applied at once – in multiple projects and objects.
In Figma, you can copy-paste particular properties (filling or opacity) as well as the entire style pattern. You can even create style templates (similar to font styles) and apply those to any object. You would only have to alter the style template itself – and those changes would be applied to all the objects this template has been used on.
These are the small things which leave a nice aftertaste when the work is done.
Bindings is yet another function which has been developed since the early versions of the software. It is about binding a certain element to the frame’s boundaries and retain its relative position in case these boundaries are altered. For example, you can bind the website’s lower part to the low boundary of a webpage – and it will always be there, irrespective of the canvass’ size. Or keep the logo in the upper left corner, phone number in the top right, make sidebar stretch along the entire project while text within a button would always remain in the middle (both in width and height). In case of adaptive layout, this enables a larger degree of freedom and simplifies many routine actions like changing position and size of blocs.
Prototyping in Figma – that is both animated transitions between projects and fixing blocs while scrolling. There is an option of adding various animated transitions – to create complex prototypes. There is also an option of inserting mock-up projects into a device – as a “view” regime – to see what it would look like on a device screen. P.S This is a very convenient option to present to a client.
I also have to mention another one of Figma’s functions – exporting a project into Zeplin, Avocode and Dribbble. Aside from the fact that Figma has a “Code” tab for developers, which allows them to see the parameters of a project in a convenient way, it also has integration with Zeplin, Avocode и Dribbble. All this is done in just a few clicks with Figma.
But not everything is ideal when it comes to Figma. Just like any other product, it has a few drawbacks:
Figma is a web software running in a browser, so it will not work without internet connection. That is because virtual files are stored and saved on a cloud.
There are occasional situations when a complex and overloaded SVG is imported into Figma with errors. You would then have to import it as a .png. This, however, happens also with different other tools like Sketch and Adobe Illustrator.
Unfortunately, there is only partition into projects within one team. One project would store as many files as needed. But that is not enough, because there are always too many files. The system of folders and tags would’ve come in handy!
Relatively small usage fee is negated by the need to pay regularly. Not everyone likes this kind of approach.
For some developers – these are indispensable and convenient tools to work with, but Figma does not allow operating with those for now.
Figma is a very convenient design tool. The team behind Figma listens to us, users, which means we have every reason to believe it might become the ideal tool in the future!
sent
We’ll get back to you shortly
