What is Figma and how to use it

figma review figma vs sketch

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

Therefore 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 sign up 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.

How to use figma

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 in Figma

If you click on the “+” 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:

In the black bar, 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.

Layers in Figma

On the left, 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:

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

In the right area 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, refers to the Canvas. That is, where we design.

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:

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:

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.

Final thoughts
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.