Before going on, I want to assure you that this article is not a commercial. I just love Figma this much.

Three years ago, in times when I still worked with Sketch, my friend, a UX designer located in Moscow, texted me, saying, “Check this new tool out, see if you like it”. He was a lot more experienced than I, and each time he told me about something new, I checked that instantly.

It was the first time I saw Figma.

My first reaction was Ok, they ripped off many things from the Sketch. Then I thought, Oh, the interface is more intuitive. The next thought was, It doesn’t depend on a platform? And one thought after another flashed in my mind with wondering. It presents the CSS. This tool is awesome! Wow, prototyping! Three years have passed and now I think, I don’t see myself switching to another tool anytime soon.

So here are the 10 reasons why I think Figma is awesome!

1. Real-time collaboration

Let’s start with the obvious one. It has real-time collaboration, which basically means that whatever the designer creates, it’s happening in LIVE mode. Developers can see it, stakeholders can see it, project managers, basically everyone who has the link and the permission can see it. Developers can code while the designer creates the next page on the same canvas. They can even leave comments for each other.

Unlike other tools, such as Sketch or Adobe XD, you don’t need to publish the latest version of the design for the team to see. One link is everything you need.

There is only one con here: a miscommunication can occur, usually in bigger companies; when the designer changes something and forgets or delays updating developers about it, later it could become confusing.

Developers might be accused of not updating the new changes when they don’t even know that there was a change. In the case of publishing each change like with Sketch and XD, the new update is a new file and thus it is a kind of documentation by itself.

2. Browser-Based

Another obvious one. Unlike other design tools, Figma is browser-based which means you only need internet and a decent browser, and you are free to design. And even if your internet is gone, you can continue to work, and it will autosave when the connection returns.

And because you work within the browser, it automatically makes Figma platform-independent. So it doesn’t matter you have Mac or Windows. There is also a desktop tool for both, but you can easily stick to the browser. Though if you want to use your local fonts and work in the browser, you need to download and install Figma font helper, and there you go! For the desktop version, your local fonts are already there.

3. Awesome Prototyping

Figma’s Prototyping is the second main functionality. It has a very fast learning curve, easy to use, and provides a big number of functionalities such as overlays, move-in and move out animations, smart animate property, interactions with a long press, hover, after delay, clicks, recently they even added scrolling animation.

And the durations of most of the animations are adjustable. There are also lots of screen presets, and again, all you need is a link to present your prototype. If you have the Figma Mirror app you can present the prototype with your mobile device.

Though Figma’s prototype is really great and easy to use, there is still a lot to improve. Prototyping tools like ProtoPie, inVision, Origami provide more functionalities and more advanced animations with timelines.

But for presenting the interactions Figma is more than enough.

4. Easy Handoff

The third main functionality of Figma is the Inspect tool. In times when I still worked on windows, and nor XD neither Figma yet came out, designers mainly worked with Photoshop and/or Illustrator. And third-party tools such as Zeplin were essential to provide the CSS for engineers.

They could see the CSS code in 1x and 2x versions (back then there was no super retina yet, so neither was 3x). Unlike Sketch and XD, Figma has its own inspect tool. So there is no necessity to use another tool to handoff. And except for CSS codes, Figma’s handoff also presents codes of iOS and Android.

5. Layout Grid

I think most of you are already familiar with the layout grid (visual guides that help you to stay consistent in your design). Figma brings it to another level. There are three main types of layout grids: a simple grid, where you can easily set the size you want (I mostly use 8pt). A column and a row grid. Row and column grids are similar, only one is vertical and the other is horizontal.

Tose grids have the option to set margins, gutters, number of columns (rows), and widths of that columns. There are also alignment options. The same goes for other tools as well, so what Figma does better? Unlike other tools, it has not three but four alignment options — left, right, center and stretch.

Stretch is an option that automatically changes the width of your columns based on their number and the sizes of gutters and margins.

And another awesome feature of the grid is when the frame size changes, an object within it (if constraints are set) automatically stretches accordingly to the grid columns.

6. Components

We are familiar with components. They were first introduced in Sketch (actually if I know it correctly in React JS but we’re talking about design tools now). And the component system is really the savior of big projects.

For those who don’t know what the component is, it is basically a template of UI elements you create yourself. Ok, let me explain by bringing an example.

Say we create a button, size 128x48pt, and it does some action like Log in or Add to Cart, anything, let’s name it X. Now imagine you need that button in many pages, so you copy-paste that X button everywhere it’s needed. But one day, research shows or stakeholder says that the color of the X button should be changed.

Before components, we either would go back and change the colors of each copy of X, or delete them all and copy-paste the new one. Now when you turn your X button into a component it becomes like a parent button. Now when you copy-paste from that parent button all the children buttons will be linked to the parent.

And when you change the color of the parent, the colors of all its children buttons will automatically change. You can give unique properties to a child, it will not mess with a parent. I hope I explained it clearly, anyway someday I will write a bigger article about components and all their capabilities.

So what Figma did differently? If you name the components by putting “/” after their parent’s name, all the children of certain parent will automatically go into the assets and a dropdown menu where you can easily select whichever you want. Lately, they even updated by creating this new feature — Variants.

https://rojcyk.com/blog/figma-variants-intro

Long story short — now you don’t need to separate a parent from a child with the “/” symbol. All you need to do is click add variant, and new variation will be automatically copied and added to your assets library.

You only have to change the property you need. With that variants there is also a Property, it is used when you want to create, say three variants each having its different properties. For example, there states of input box (default, hover, focus) each having three properties (error, success, default).

After those variants appear in the assets, and dropdown on the right, you can easily swap between components without copy-pasting anything.

7. It’s Free

https://www.drupal.org/project/commerce_free_price_formatter

I know it’s weird right? If you’re the only designer on your team or there are only two of you, it’s completely free. Figma charges when more than 2 editors are needed in the project. In small teams such as the team where I work, I am the only editor (one who can edit stuff), and whoever has the link can see everything there.

If I remember right it was something like 12 bucks per editor. And viewers can be as many people as you like. So yeah, just open your browser, sign up and go crazy with this awesome design tool.

8. Easy To Learn

Sketch, Figma, and Adobe XD are the main three UI design tools out there and all three are great, each having its pros and cons. Everyone who reads my articles probably already knows that I am a fan of Figma and it’s my go-to tool. I try to convince everyone to use Figma (swear don’t have any bonuses there, just love the tool). And even though I love Figma the most, I can’t be unfair; this 8th point relates to all three of them.

Their learning curves are almost the same. I always say that if you know photoshop well, it’s a matter of days to know Figma, Sketch, or XD. But even if you don’t know photoshop at all, just open up any of the three software, check out everything there on the canvas, try out all the tools there, and I’m sure after a couple of hours of just playing around you will already know the tools better. It’s really easy to learn, trust me, just try and you’ll see. For more advanced knowledge comes the next point.

9. Awesome online tutorials.

https://www.figma.com/resources/learn-design/#lessons

Figma has its online video and text tutorial (completely free) about, if not all then most of its features. They explain everything out there. They explain how grids work, they explain components, they explain all the tools, colors, etc. And the best part is that they also have UX design tutorials (Videos and Articles) on their website.

Not only Figma but generally UX design. So, even if you don’t know anything about UI/UX design, their tutorials give you most of the basics you need. Even if you don’t want to use Figma, you can learn the design tutorials there and go to Sketch or XD.

10. Community

Figma has a great community of great designers and engineers. They create plugins for the designers, they share their works for people to use. You just grab what you need and copy it to your design, change the color and size if needed according to your guides, and voila.

I won’t list all of them, but note some of those that I use the most.

The Files I mostly use:

•iOS 14 Design Templates — As the name suggests, here you can find most of the iOS UI elements. Most helpful when designing an iOS app.

•Different types of screen mockups (like MacBook, iPhone, etc.) — Mostly for presenting the designs to stakeholders, potential clients, or even portfolio.

•Google Material Design — Elements of Google’s Material design.

•Android UI Kit — Same as the name suggests, UI elements of Android.

And many others.

As for plugins, I think they are an essential part of UI design. Many plugins make it just so easy for us that we can’t not use them.

https://blog.prototypr.io/12-super-helpful-figma-plugins-you-can-start-using-now-9ecdf43fcf1

Some of the Plugins ones I use the most are.

•Unsplash — A huge library of great looking wallpapers, all free to use. So you can drag and drop the wallpaper you need without leaving Figma at all. It’s not in vain that 315k people use it, and that’s just as Figma plugin.

•Iconify — Another savior. In the times before Figma, I used to create my own icons, I even wanted to create my own library. Now every time I need an icon, I just type the name, and BOOM — countless icons I can drag and drop into my project.

•Mapsicle — Generates a map for your design. Just enter coordinates, choose a style of the map, like in google maps, and then just click Create map.

•Charts — This plugin is exactly what it sounds like. It generates charts. I use them a lot when designing reporting pages, some stats, infographics.

And another best thing about Figma is that it's constantly updating, improving, adding new key features that we didn’t even know how much we needed them.