Why it is important to understand Figma
There has been a lot of chatter about Figma, the new talk-of-the-town web based design tool lately, and I want to share my experiences with them from the viewpoint of how they can fit into our design ecosystem. As a designer at Hipo, where we service all aspects of the product from design to development to strategy, I usually look at a design product from the perspective of not just how good it is for designing, but also on how it affects my relationship with the other parts of the production line — sharing with developers, showing it to clients etc.
The most outspoken opinions about Figma were leaning more towards a ‘not yet’. Our curiosity led us to dig a little deeper, so we’ve decided to switch to it as a team for a while to see it for ourselves. This post is about our experience using Figma over the past three weeks. Here is the short version:
Figma is not perfect. It does have some missing elements when compared to Sketch. However, it is an easy-to-use, beautifully made, universally accessible web app, and using it solved some critical problems that I’ve faced working within a team, and some features even helped me improve the way I design.
And now, for some details:
🗄 Syncing & Version Control
The biggest problem I usually face while working with other designers and developers is not having a real version control system. The combination of Sketch + Dropbox is the way many people try to solve this problem, but this flow creates a few issues of its own. Namely, when we work on the same Dropbox file and save at different times, these two files conflict with each other. To work around this problem, I need to be aware of who is working on what part and when. If I know someone else is working on the file, I can copy it to my local drive and work on the file there. When my teammate updates the Dropbox file, I can then open that file, add the changes I’ve completed on my local file, and re-upload…
It doesn’t take a genius to realize that this process is error-prone, not to mention laborious.
Enter Figma, which allows multiple people to work simultaneously on the same file. It doesn’t matter who else is working on the design file at the same time. You have the freedom to start working without letting the team know when or on which part of the project you’ll be working on. Designers know that creativity comes when it comes, so removing this barrier at those crucial times is actually very important for me. More so, since our office recently turned remote-first, and there are now timezone differences between me and my team, making constant communication more difficult.
I also think a version control system that is embedded into the app is a great way to go back and see how the project has evolved. Sure, it can be done now through Dropbox’s history feature, but anyone who has ever used it will tell you that it is a primitive method which takes time and patience. Kudos to Figma for figuring this one out!
🌎 Compatibility & Accessibility
This was really hard for me to believe at first, but Figma works on a goddamn web browser!
Take a minute to let that sink in.
Until I saw Figma, I did not realize web development had come this far. The speed and smoothness is simply amazing. I can’t really tell that this is a web app. Ditto for the desktop client.
The one real problem is that you cannot open a new file on the desktop client when you are offline — though if you have a file open on the Figma app, you can go offline and still make changes on that file, which get synced later when you are back online. Although this is a deal-breaker if you spend part of your time without internet, this is not a major issue for me. It’s a given that we are growing more dependent on the internet, and that is not a bad thing. It is part of the change, I have to be online to speak to my team, to hold meetings, to work. When I am not online, I’m taking a moment to enjoy life and not working for a while.
There’s another issue to talk about here. As a UI designer, you are working with developers and probably have ran into the issue of “Oh, I don’t have PS / AI / Sketch installed. Can you send me the PNG’s / SVG’s?”. I used to have a very harsh view on this, until I realized that it is not the developer’s job to install the tools we use. I don’t have Xcode or the Django framework installed on my computer. From their point of view, why would they spend any money on a tool that they don’t use themselves? Lately, a couple of third-party apps came out, and one of them does a very decent job of solving this problem. Zeplin really saves the day for designers who use Sketch, AI or PS. It is a well thought-out tool, negating the need for devs to install bulky designer apps.
Figma, on the other hand, is a web app. Any developer can open Figma files over the web browser without installing anything. With a little more work, I think Figma can outmatch what Zeplin does, without requiring a third-party app. When Figma rolls out a paid version, I would expect them to think about a Zeplin-like tool, focusing on the needs of developers (showing sizes, fonts, margins in an easy to use, view-only interface) and making it free for devs to use that version to look at designs. By creating a tool that caters to the whole production line, Figma can definitely tap into a bigger market and have more people migrating to it. Another opportunity for them to evolve and get ahead of the curve. Let’s see if they’ll take it.
ℬ Fonts
For me, the definition of hell is constantly getting error messages for missing fonts while opening design files. The font world is a mess right now and I can’t seem to find a solution for this, other than having a fonts folder that requires its own search feature.
Figma’s solution is interesting. It uses Google Fonts. They are all there, no need to install them into your system. And when someone else wants to view your work, they see it the way you’ve designed it, not replacing your well crafted Aileron title with Arial.
Let me give you an example. I’m working on a project and I give a Dropbox link with the Sketch files to our iOS developer. He enters the folder and opens the file. Error — these fonts cannot be found. The developer thinks “no problem, let me just open this to see the interface. I’ll get the fonts later and it’ll all fit”. So he opens the Sketch file and all the fonts are a mess. He gets what he needs and closes the file. But the developer has auto-save turned on for Sketch, so when I go back to the file, I have 35 pages of altered fonts and a small heart attack. I sigh, go back to Dropbox, recover the last version I did, have a 20-minute talk with the developer about how to turn off auto-save, saving all design files locally before opening, and about how to sync more fonts.
Why would I waste this time on such a stupid problem?
Using Google Fonts actually helped me out in the end. It has constraints on the amount of fonts I can use, but I can always install system fonts on Figma, so when I have to, the option is there. But the font world has too many options already. Limiting myself to Google Fonts, unless there’s a serious hole in the available fonts that prevents me from getting the interface I want, has actually helped me focus on other aspects of design that I have more control over. Try it out for yourself.
✍🏼 Illustration & Drawing Objects
Illustration has never been my strong suit. I have not put in the time required to be really good at it, and the interface of vector-based apps scared me off. Until I played around with Figma, the way objects, lines and dots related with each other never really made that much sense to me. I could draw things, sure, but could not really understand the mechanics behind all those lines. Figma’s interface is really intuitive and somehow I found myself digging it. I’m really excited to see how more experienced illustrators feel about Figma’s approach, but I think I’ve finally found a tool that will make me put in the time to become a better illustrator.
To get a better understanding on how Figma handles illustrations, you can check out this post.
🛠 UI
Figma’s UI is simple, elegant, and does not try to reinvent the wheel. I really appreciate change when it’s really needed, and when it’s not just for the sake of change (I’m looking at you, Adobe). Figma essentially uses what Sketch has been building on in terms of functionality. It replicates Sketch in a lot of ways and it must, since Sketch solved those problems so perfectly. It adds its own touch when needed, and the end result is really good. I had to adjust a bit at first on minor functions like not being able to change number inputs with my mouse, but I survived.
One major difference is the page & artboard system. There are no “pages” in Figma, just artboards that are called groups. When you want a new page, you open a new file. The disadvantage here is that I can’t keep everything in one neat Sketch file. The advantage of it is that I don’t keep everything in one huge Sketch file. I changed my workflow into this system, and haven’t looked back since.
A minor thing I liked with Figma’s UI is the fact that I can edit the background color of the interface where my art boards are. This helps me create contrast between my work and the app I’m designing it on. Helps me put things into perspective. It’s minor, but i like it anyway.
I know what you are thinking, “dude what about my awesome plugins for Sketch?!” and you are absolutely right.
Plugins are developed by everyone, which is great, but then again creates clutter. Only when a product becomes established (like Sketch) do you get big names creating consistently good plugins that you can use without worrying about if it actually works. Here I have to thank Invision+Craft for becoming that solution for Sketch. Is it perfect? No. But it does solve a lot of problems.
With just a bit of time, I think Figma has enough potential follow a similar pattern and becoming an established product, and I don’t think it’s too hard to survive the stormy plugin-free days for now. Hell it might actually be nice to write my own placeholder names for a while. The excitement of a new interface, and the amazing features that allow me to become a better team member is enough for me to see beyond the missing elements.
🚨 So should I switch to Figma or not?
Well the short answer is yes! I’ve made the switch and I feel it’s pretty much ready.
I’ve been reading a lot of blog posts about how Figma is still not there yet. Well I think no tool will ever be “there”, especially when it is first rolled out. There are two things we have to agree on.
1) There will never be a perfect tool that incorporates everything everyone wants.
2) Whatever new tool comes out, there will be a part of our community that will resist the change.
Keeping these two rules in mind, I want to be the one to explore this new world; a web app that has so much potential. I want to talk about it so that it can evolve in a way that benefits all of us. To make our ecosystem work, we need to talk about the future of products as well as their potential to become better. I think as designers/thinkers we need to give better feedback if we want better tools. Not just saying what tools can do and can’t do, but also what we want them to do in the future. That is how people who make these products listen to us.
At Hipo, we decided to switch to Figma, and I do not see this as jumping off a cliff into a platform that “nobody uses”. I see it as a first step in a series of transitions. Having a tool that works on the web simply has too many benefits to ignore. We’re looking forward to share more of our Figma experience as we move on, but it’s looking like pretty smooth sailing for now.
For more articles like this follow Kaan Eryılmaz and Hipo, we’ll try to share as much as we can. Peace :)
