In Giza Design Lab, we use Figma as our main User Interface Design tool. After almost a year using this amazing software for the majority of our projects, we noted there some key points that you might need to understand when you decide to use this tool.
First, What Is Figma?
The collaborative interface design tool
As they stated on their official website, Figma is a cloud-based design tool that allows you to, literally, working together on the same file in real-time. Yes, you read that right. With this definition, it brings us to the main points of this article. Check them out!
So, How Is It?
Some points below might subjective. To be frank, we are not a hard-die fan of it, yet we use it for 98% of our projects. We still use other software to reach our goals. Meaning, if we can’t afford it with Figma, we’ll check it with Sketch App, Adobe XD, Invision App, etc.
The PROs & CONs
It is more of two sides of coin if we talk about this topic. They give you some handy features at one side but there’s a catch on the other. Vice versa. You can think in the opposite way.
1. Real-time Collaboration
Think about this:
You are a member of three-person designers in a company. You could edit one design file together at the same time. Transparently. You could watch your team-mates working on a screen while you are working on another one!
Can you imagine how many hours can be saved? Yup, plenty!
But there is a catch; you need to be always (almost) online to be working like this.
But in the end, even though this connectivity thing seems like an issue, it’s actually worth it. Think about another thing: When you are working, many companies demand you to turn on your messenger app (Slack, WhatsApp, Skype, you name it), which means, you need to be online as long as you are working. Especially when you are in a remote mode.
2. Quick and Easy File Sharing
Once, after some months passing and we have finished a design project, a developer from the client-side asked us, which one is the newest version?
I quickly press some key and open the file he mentioned, I can see that he is wandering around some design screens (or Artboards, that is how Figma call it). He added, ”Which one is actually the latest homepage design?” … Aaah, I said to myself. We actually left this one on our last conversation with their Design Lead and we thought, the Design Lead would change something again. But he didn’t.
Then, just with some clicks, I remove the unnecessary screens and that’s it. Finished. It only takes 5 minutes.
Imagine, if I first need to sync or download the latest file from the client, and then re-upload them again, it could take 30 to 60 minutes, depending on the internet connection.
The Cons is: you must be aware of who did the last edit. Even though there is a Version Control Function on Figma, but it would change the entire version. While maybe, you just want to revert one or two small elements.
3. All in One Tool from Design, Prototyping, and Hand-offs to the Software Developer[s].
It’s like you are subscribed Sketch App, Invision App & Zeplin in one price. If you are not familiar with these tools, please google them to understand their main functions :).
PROS: You can open the files on different computers without the need to download or copy the file manually.
Platform Agnostic is the term they use. Since it can be accessed through modern web browsers, meaning it can be open and operate in all major Operating System such as Windows, Mac OS & Linux that can run, well… browsers. Or you can download the stand-alone app, which is essentially a browser dedicated to run Figma.
CONS: No Internet No Figma
5. Provides A Free Plan
If you are a team of two designers working on a digital product, you can use Figma freely. Here is how it goes:
a. Set two accounts as The Editors. Only these two accounts can alter and edit the files. Spoiler: You can access the accounts from multiple devices.
b. Invite unlimited Viewers, including your supervisor, tech persons, marketing and etc. to the files. They can comment as much as they need on the files.
c. For the Free Plan, put all your design file in Draft. You can add as much Editors as you please.
CONS: When you put your file in The Draft, everyone can Claim your file as the owner. So be wise.
6. Need A Decent RAM & Graphic Cards To Run Smoothly
PROS: None. This point is about the cons.
Well, actually it needs 4GB of RAM and an Intel HD 3000 (or similar) Graphic Card. It may sound like an easy setup for a graphic designer’s computer, but if we want to pass it on to a non-design person, it may not be a good experience for them.
Since we, a design agency working with many kinds of client, some of them are business persons.
They won’t be always in front of their laptops or computer. Even if they do, their laptop might be under the required specs.
We even once had a client who uses Android as her laptop OS! Imagine that it took forever to open the Figma link. So, we ended up creating a Marvel App or Invision App Prototype just to accommodate this kind of client.
CONS: Since it’s browser-based, sometimes you couldn’t see your partner’s design right away. Not because of the connection, but rather, browser caches.
PROS: To fix this, just refresh your Figma files a few times.
9. Figma Mirror
PROS: Figma provides an app to help the designer do self-check. So they can see how the design looks and interact right on the phone.
CONS: As it is stated, it acts as a mirror for the designer to do the self-check for their design. Figma Mirror Prototype is NOT the same as the Marvel App or Invision prototype. (Bear this in mind!). You can not share the Figma link and expect it will open on the Figma Mirror on the other person’s. Because you need to interact with both your computer and the smartphone.
10. Different Selecting Method
PROS: Figma provides a feature to select and measure the distance between elements in the design file.
CONS: This is might be the hardest Cons among all. I hope you will get what I am trying to explain here.
One day, you created an icon in Figma and then you cover it up with a group or Frame to achieve the Material Design Standard. You know, 24 * 24px with 2px as inner padding. Something like this
After that, you notify the developer so she can use the icon on her works. Five minutes later, she complains that your icon size doesn’t match the standard, it is only 20px * 20px. So you check it again just to find that you did the right thing. Then, you tell her again… and the cycle continues.
We actually had this problem and cost us 5 days to realize this problem.
So, what is happening here?
Apparently, the way an Editor selects an element on the file is different than the Viewer (Developer).
On the Editor side, when you hover on an object, by default it will select the outer part of the object.
But, when you are a Viewer, Figma lets you select the most inner part of the object by default.
The Viewer thinks they are selecting the right element, while it’s not.
Is there any workaround? For now, we just contacted the developer and show her the right Group she needs to Exports.
So, that’s it. Do you agree or disagree? Let us know your thinking. Let’s discuss it!
Giza Design Lab is an Indonesian design agency with Human-Centered Design approaches. We help companies to level up their product experiences to get more love from their users and customer. Want us to work on your design project? Send email to email@example.com | Follow us on Instagram