10 Reasons For Designers To Choose Figma For UI/UX Design

During the time when I was still using Sketch, a UX designer in London emailed me, saying he wanted me to check out a new tool, see if it was good.

 

I immediately checked what he said. It was my first encounter with Figma.

 

Initially, I thought they had stolen a lot from Sketch.

 

Then, I realized they had improved the user interface.

 

Now I'm wondering, Does it work on any platform?

 

 

Questions kept going through my mind. There is a CSS presentation.

 

I love this tool! Amazing prototyping! My opinion has changed over the past two years, and I don't see myself switching to another tool soon.

 

So here are my top ten reasons why I love Figma!

 

1. Simple to Understand

 

There are three main UI design tools out there: Sketch, Figma, and Adobe XD, each with its pros and cons.

 

Figma is my go-to tool and is probably known to everyone who reads my articles.

 

Figma is my favorite tool so I try to get everyone to use it.

 

Although Figma is my favorite, I can't be unfair if I say this 8th point applies to them all. 

 

They are all very similar in their learning curves.

 

Knowing Photoshop well makes you familiar with Figma, Sketch, or XD in no time.

 

Even if you do not know anything about photoshop, you can open any of the three programs and check out everything there on the canvas.

 

You can experiment with all of the tools, and I'm sure after a few hours of playing around you will already know how to use them.

 

Trying it once will convince you that it is easy to learn. This leads us to the next point.

 

2. Excellent online tutorials

 

If not all, then most of Figma's features are covered in its free online video tutorial.

 

The website explains how grids work, how components work, what colors are available, etc.

 

The best part is that it also provides UX design tutorials (Videos and Articles).

 

You can learn most of the basics about UI/UX design from their tutorials, regardless of whether you are familiar with Figma or not.

 

The design tutorials are available in Figma even if you don't want to use it and go to Sketch or XD instead.

 

3. Community

 

 

There is an amazing community of designers and engineers at Figma that create plugins for the designers and share their work for people to use.

 

Simply copy what you need and paste it into your design, change the color and size as needed, and you're done. 

 

4. Collaboration in real-time

 

Real-time collaboration means the designer can work live on everything he or she creates.

 

Everyone who has a link and permission to view it can see it, including developers, stakeholders, project managers, etc.

 

They can even leave comments for each other while the developer codes the next page.

 

In this case, there is only one con: there may be a miscommunication, most likely in larger companies; when the designer makes changes and forgets to update developers, later confusion is likely.

 

The developers might be accused of neglecting the update when they aren't even aware of the change.  

 

The new file is a kind of documentation by itself when being published with Sketch and XD. 

 

5. Browser-Based

 

 

With Figma, you only need a decent browser and access to the internet in order to be able to design.

 

Despite the lack of an internet connection, you can still work, and it will automatically save when the connection is restored.

 

By working within the browser, Figma becomes platform-independent automatically.

 

The desktop tool is available for both Windows and Mac, but you can always stick with the browser if you prefer.

 

For your local fonts to be used in the browser, you will need the Figma font helper, but the fonts are already there on your desktop if you have downloaded the desktop version. 

 

6. Excellent Prototyping

 

Figma is also known for its prototyping functionality.

 

This product has a very short learning curve, is easy to use, and includes many features such as overlays, move-in, and move-out animations, smart animate properties, click interactions, hover interactions, after delay interactions, and scrolling interactions. 

 

There are also lots of screen presets that you can use to present your prototype.

 

Again, you only need to provide a link to show your prototype.

 

You can present your prototype with your mobile device if you have the Figma Mirror app. 

 

It's a great prototype tool, but there's still room for improvement.

 

Prototyping tools like ProtoPie, inVision, and Origami offer more advanced capabilities and timelines. 

 

7. Simple Handoff

 

As a designer when I used Windows, XD and/or Figma hadn't been released yet, so we relied mainly on Photoshop and/or Illustrator.

 

And for engineers, third-party tools such as Zeplin provided CSS.

 

At the time, CSS code was viewed in the 1x and 2x versions (no super retina yet, so 3x was not available).

 

The inspect tool in Figma is different from Sketch and XD.

 

So, you don't need another tool to complete the handoff.

 

It presents not only CSS codes, but also iOS and Android ones. 

 

8. Grid Layout

 

There is a layout grid (a visual guide that helps you to keep your design consistent) that most of you are already familiar with.

 

But Figma takes this to the next level. Layout grids can be broken down into three types: a simple grid, where you can easily select the size you want (I usually use 8pt). 

 

There are two types of grids: column and row. Each is vertical, the other horizontal.

 

For the Tose grids, you can adjust margins, gutters, the number of columns (rows), and column widths. 

 

Alignment options are available for other tools too.

 

What makes Figma unique is that it has not three, but four alignment options: left, right, center, and stretch.

 

9. Components

 

In Sketch (or in React JS, if I remember correctly, but we're talking about design tools now), components were first introduced.

 

The component system is a lifesaver for large projects.

 

If you have no idea what components are, they are basically templates of your own UI elements.

 

I'll give an example to explain.

 

 

I will create a 128x48 pixel button that will do some activities such as logging in or adding to the cart, let's call it X.

 

Let's imagine you need to copy-paste that X button in many different places, so you copy-paste it on every page that needs it.

 

Research shows that the X button should be changed one day, or a stakeholder suggests that the color should be changed.

 

In the past, we either went back and changed the colors of each copy of X, or we deleted them all and duplicated a new one.

 

Your X button will now have the same effect as a parent button when it is turned into a component. 

 

The children’s buttons will now be linked to the parent button when you copy-paste from that parent button.

 

The colors of all the child buttons will also be automatically changed when the parent button is changed.

 

It's possible to add properties to a child that won't be messed up by a parent.

 

I hope I explained myself clearly, but I'll write a larger article on components someday.

 

In other words, you no longer need the "/" symbol to separate a parent from a child.

 

Simply click the plus icon to add a variant, and it will be added to your assets library automatically.

 

You only need to change the property you need.

 

That variant also comes with a property, which you can use when creating three variants, each with a different property. 

 

10. It is absolutely free

 

 

This is a strange one, but if you're the only designer on your team or if you're the only two on your team, it's completely free.

 

Using Figma costs money if more than two editors are needed.

 

I am the only editor on my team (the one who can edit stuff), and anyone with the link can see everything in that folder.

 

Approximately 12 dollars per editor, if I recall correctly.

 

You can have as many viewers as you like with this tool, so sign up, open your browser, and start designing like crazy.