What is Figma and how to use it

I’ve been using Sketch for several years now, but this doesn’t stop me from continuing to research UI design software to find the one that can best meet my needs.

As I did with Framer X a few months ago, in this article I have prepared a review of Figma for you, comparing it to Sketch and explaining its strengths and weaknesses.

How to get started with Figma


I must admit that the first contact with Figma is quite special. The usual with almost any software is that you have to download a compressed file of several MB, wait for it to download, install and start the program.

With Figma, since it is browser-based, all you have to do is register and you can start designing. Just like that.

If you are like me and “need” to have an application installed, you can also download it. And the best thing is that it is also compatible with Windows.

On the left there is a small menu, which serves to sort the projects into recent, drafts and deleted. In this last section, Deleted Files, we will find everything that we delete, as if it were a history.

To start a new project, just click on the “+” button at the top left.

Figma Features


Everything is in the cloud
As I told you in the introduction, Figma is browser-based. This means that your files are always accessible and you can avoid wasting time (and money) on storage services like Google Drive and Dropbox.

You also have a history of changes to each file, so you can always go back to some previous point. And everything you delete is accessible in the Deleted Files I told you about in the previous step.

Creating a file: the interface
If you click on the “+” I told you about and create a new file, you will see the Figma interface. At first glance it is not very different from Sketch (that’s the thing about being the first to arrive and the one that led the way), although it is extremely minimalist:

Sketch UI

Figma UI

In the black bar (1) you will find the basic tools: insert a frame (artboard in Sketch), geometric shapes, free vector drawing, text and comments. Further to the right are the sharing, prototype view and zoom functionalities, among others.

The center area, where there is now the name, varies depending on what you have selected in a frame. For example, if you select a rectangle you will see the following:

Selected shape in Figma

On the left (2) you will see the list of layers that the project has, all in tree list. If you add a frame with different geometric shapes, it will change:

Layers in tree in Figma

The two icons below allow you to switch between Layers and Components (the Sketch Symbols).

In the right area (3) is what we could call Inspector. It will change depending on the layer you have selected, showing its characteristics and modifiers. The Prototype tab lets you start prototyping (a no-brainer) and the Code tab shows you the CSS and code for iOS or Android.

Finally, (4) refers to the Canvas. That is, where we design 🙂

The components in Figma
Creating a component with Figma is just as easy as doing it with Sketch: it is enough to select what will compose it and click on the “rhombus made of rhombuses”.

The layer will change from blue to purple and the icon on its left will change:

Components in Figma

If you need to edit it, just click on it (i.e. select it) and add the necessary layers or modifications you want to make to it.

Like Sketch, all components can be overwritten. To do this, just click on it and modify the colors, texts, etc.

Sharing the project with Figma
This is a plus point for Figma. If you want to share a project with Sketch you will have to use Sketch Cloud or another third-party tool.

With Figma we have a system very similar to Google Drive: if you click on the Share button in the top horizontal menu you will get a small pop-up with the link settings:

Share a project in Figma.

This is a good way to share files without actually sending the original file or without showing the components (which is what happens with Sketch Cloud and symbols).

If shared as a prototype, whoever receives the link can add comments if they have a Figma user.

Figma vs Sketch


In general I always defend Sketch, but admittedly there are some cases where the other programs are superior.

Tree Layers in Figma

The two icons below allow you to switch between Layers and Components (the Sketch Symbols).

In the right area (3) is what we could call Inspector. It will change depending on the layer you have selected, showing its characteristics and modifiers. The Prototype tab lets you start prototyping (a no-brainer) and the Code tab shows you the CSS and code for iOS or Android.

Finally, (4) refers to the Canvas. That is, where we design 🙂

The components in Figma
Creating a component with Figma is just as easy as doing it with Sketch: it is enough to select what will compose it and click on the “rhombus made of rhombuses”.

The layer will change from blue to purple and the icon on its left will change:

Components in Figma

If you need to edit it, just click on it (i.e. select it) and add the necessary layers or modifications you want to make to it.

Like Sketch, all components can be overwritten. To do this, just click on it and modify the colors, texts, etc.

Sharing the project with Figma
This is a plus point for Figma. If you want to share a project with Sketch you will have to use Sketch Cloud or another third-party tool.

With Figma we have a system very similar to Google Drive: if you click on the Share button in the top horizontal menu you will get a small pop-up with the link settings:

Share a project in Figma.

This is a good way to share files without actually sending the original file or without showing the components (which is what happens with Sketch Cloud and symbols).

If shared as a prototype, whoever receives the link can add comments if they have a Figma user.

Figma vs Sketch
In general I always defend Sketch, but admittedly there are some cases where the other programs are superior.

What I like about Figma
It allows you to work collaboratively on a file. This solves some problems that occur in design teams when two designers want to work on a single Sketch file at the same time. There is only one option left, duplicate it and then “join” it all together (or leave it in two files and risk losing part of the project).
It can be used on Windows (and any other operating system). Honestly, I still use Mac because Sketch is only available on that operating system. And Figma is making me rethink some things I thought would never change: I’m considering going back to Windows.
Agile and available everywhere. Figma files are accessible from any computer and, even better, you don’t need to download anything. You just log in and it’s all there.
It reduces the amount of third-party software. With Sketch, whether you want to or not, you end up using Zeplin, Dropbox and other software that you save with Figma.


What I love about Sketch
The symbols. As much as Figma has the components, I find them much more complicated to manage and edit than Sketch’s symbols.


Clear interface. I’ve already explained it above: Figma’s UI is so simple that in some cases it confuses and makes you have to look more than once what kind of layer you are selecting or which one is inside which one.


Plugins. Sketch’s capabilities are greatly expanded by using plugins. With Figma I can’t buy accessibility themes, rename layers all at once, distribute elements with a shortcut, and so on. I know pluginitis is bad, but there are some that really save time (or clicks).


The Sketch community is huge. There are plenty of resources to download files, templates, plugins and even easily solve your doubts.


Conclusions and opinion
At first glance Figma can solve some of the problems that I start to have when working in a team: with Sketch we end up duplicating files and it is very easy to lose progress or “step on” the work of other colleagues.

On the other hand, Sketch continues to be a reference for me in terms of stability and good release cadence: every time they release a new version it is to improve performance and add new features… while adapting the existing ones.

Another plus point is that the Sketch community is very large and makes it easy for the software to expand (there are hundreds of plugins) and to learn tricks and ways of working from others.

And finally, its UI is much clearer and has good compatibility with Adobe products that, whether I want to or not, I end up using from time to time.

I find it very positive that different alternatives to the programs we use are appearing, because it means that there is more competition and everyone is pushed to innovate and improve their product little by little. It is a way to avoid what happened with Adobe, which took over the market for many years and its products stopped offering innovation.