Learn Figma: The future of design tools (Part 1)

Figma is one of the most interesting design tools and these articles will help to start designing immediately.

Hello everyone! I’m back. First, I must say “Thank you” for your messages about my previous article which was published for Figma:

Read this article to learn prototype design

Second, I update my portfolio and you can check my latest designs here:

my portfolio is waiting for you :)

Without any delay, let’s start to learn more Figma. Just to remember, the first part just talks about Figma and its features to make this article short.

What’s Figma?

it’s simple: Figma is a cloud-based design tool and you can use it for UI design and also UX design. The latest update brought “Smart Animate” feature to this app which lets you design better prototypes.

What makes Figma different?

Sketch was very popular a few years ago but when Adobe announced Adobe XD as a special design tool for UI and UX designers, many thought Adobe will kill Sketch and will take its place but suddenly, Figma entered and stole its storm!

Image credits: Figma

But what makes Figma different? Unlike Sketch, you can run Figma across different operating systems like Windows and macOS. Figma is a cloud-based design tool and lets you design something in collaboration with other designers I mean you and other designers in your team, can work on a design system at the same time. It’s amazing? Isn’t it?

Unlike Sketch which is heavy and most of the time laggy, Figma runs very well even on low-end devices.

If you want to create a design-system, Figma still works very well. However, Sketch is still a better option and make the process much easier! Unfortunately, Adobe XD doesn’t work very well yet in comparison to Sketch and Figma.

To design more advanced prototypes, Figma is still powerful. You can rely on its native feature: Smart Animate or use this plugin: Figmotion. If you’re interested to learn how to use this plugin, read my article which was published a few months ago.

Import your designs into After Effects using AEUX.io

Want to design something more complex? You can import your designs into Protopie without any plugins or After Effects (visit https://figma.aeux.io/).

If you want to use real-data, you must rely on the 3rd-party plugins which were published for Figma. We will talk more about them very soon. The official account of Figma recently announced they will add a feature to this popular design tool which lets you design more complex resizable components.

In overall:

Figma is a cloud-based design tool which works very well for UI and UX designers.

Pros:

1- Cloud-based app. So it’s light and doesn’t need a powerful computer. Also, it runs across different operating systems.

2- Figma lets you to design (resizable and flexible) components which is necessary to design systems.

3- Figma provides a native feature for prototyping design which is called Smart Animate (However, you can’t compare it to Auto Animate which Adobe XD provides). At the moment, this feature is very simple but hopefully, it will be better in the future.

4- Figma supports plugins if you want to import your designs into Adobe After Effects or Protopie. Also, you can import real data into your projects which makes this app better. At the moment, the number of plugins for Figma is Impressive and most of them are useful. Unlike other tools, Unsplash published its official plugin for Figma which is very useful.

5- Figma supports Sketch files. So you only need to import your files into Figma. However, if you want to migrate from Adobe XD to Sketch, you need to re-create everything completely or use a simple trick which we will learn more about it in the upcoming articles.

We will learn about it in the upcoming articles

6- In the future, we will expect to run Figma on iPad OS which was introduced last month for Apple iPads. And maybe, you can run it on Samsung DeX and Huawei Easy Projection which means you can use your mobile devices to design interfaces for mobile apps or websites. At the moment, someone claims he’s working on Dimensions which lets designers to run Figma on iPad devices and this customized version of Figma, supports Apple Pencil.

7- It’s free! Unlike Sketch which is expensive, Figma is completely free and competes with Adobe XD. However, for teams or managing them better, you need to pay some money which is not too much.

8- Team collaboration! The members of a design team can work on a design at the same time and it’s interesting. However, Sketch released Sketch For Teams a few months ago and Adobe will release a new update very soon for Adobe XD to make this app better for team collaborating.

9- Version history! You can document your designs based on their version which is very helpful for a design team.

10- Figma supports .gif files. So you can import them and make powerful prototypes.

11- Export your designs as the ready codes for developers (Web, Android and iOS).

Cons:

1- Figma relies on the internet. Without having access to the internet, you can even open your previous designs or create something new.

2- The desktop app is not a real app like Adobe XD and Sketch and needs to have access to the internet. So, Without having access to the internet, you will have some serious problems.

3- Adobe XD is still a better app for prototyping design since Auto Animate works better if you compare it to Smart Animate which was introduced recently for Figma.

Please share this article with others if you find it useful. Also, please check my portfolio:

A passionate designer who designs digital experiences for mobile phones and websites. — — — — — — — — — — — — — PORTFOLIO: emportfolio.webflow.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store