30 days deep into Figma — Full review
From a Sketch user
Design tools are plenteous nowadays. I still remember using Adobe Photoshop to create User Interfaces. I switched to Sketch almost 3 years ago, with no regrets and still enjoying it. But competition is here and you can’t help but start to look for better alternatives. With Adobe XD, Figma and new players like InVision Studio, as a designer, there are far too many options and you can’t really get your head around to knowing which one would be the best and most suited for the way you work.
I stumbled across Figma a month ago and was very impressed. I knew it was around for a year or so, but wasn’t really interested in looking for a new design tool.
So I decided to delve down into Figma and try it out for 30 days, Test out every feature and see if it was good enough for me to make the switch.
I will be comparing with the current workflow that I have, which is Sketch + InVision + many plugins.
Setup/On boarding
What really impressed me with Figma was the fastness and smoothness of the on boarding. Usually with design tools, you have to download a heavy app and then try it out for 30 days before putting out your credit card. With Figma, no setup, no trial period. Since it’s all web-based, you can just login with your browser and start designing. They also have a Mac/Window app if you like to have an app like me.
Since it’s web-based, there is also no need to save your files anymore, no need to update your app, no more plugins to install and to update. Everything is seamless and you are able to just focus on your work.
Moreover, you can import your sketch file. So you don’t have to start again, making it very easy to continue designing your project.
Cloud based
At first, it felt unusual to have all your files in the cloud and not as a file in your folders. Like most of the designers, you’re using a cloud system (Dropbox/Google Drive/others) to organise your files, assets and inspirations.
With Figma, you pretty much have to forget all this. Everything is in the cloud, no need to check for storage. You have a version history for each file, and every deleted files are still saved on a Deleted files directory, just to be sure…
Interface
In the overall sense, the interface is very similar to Sketch, with some differentiations.
If you’re familiar with Sketch, you’ll be alright. The designing interface is very similar. The tools are well organised, and I didn’t feel lost when transitioning, so it’s a good point for me.
However, I found the layers panel too simple and not super clear.
Like shown in this image, Groups are displayed with a dotted square and Frames are displayed with a rectangle with some crop marks on each corner, which it’s not very distinctive. I prefer how sketch does it with coloured icons.
The dashboard is easy to take in hand. But the lack of list display or folders make it a bit hard to find files sometimes. You can separate your files into projects but you’ll have to upgrade to a Professional plan.
Frames & Groups
As a Sketch user, you’re surely familiar with Artboards. Frames is basically the same, the only difference in Figma is that you can have Frames inside a Frame. Interesting isn’t it?
So what is the difference between Frames and Groups? I also didn’t get it at first. So I asked the support, and this is what they came back with:
Hey Philippe,
Thanks for your patience on this one. That’s a great question. One way to think about it is:
- A “Group” is merely a group of things — a group is not an object itself, meaning that a group doesn’t affect constraints or has explicit bounds.
- A “Frame” is a container — it has its own size, it manages constraints and can clip (or mask) its contents.
- An “Artboard” is a specific way of working — you can simply draw a rectangle and call it an “artboard”, or you can make a frame and call that an “artboard”
If you’re coming from Sketch, then I’d recommend thinking: Sketch Artboard = Figma Frame.
Hope that helps clarify a bit of the confusion around this. Cheers!
—
Topher from Figma
So in summary, a Group is just a way to group layers, to make your document less messy, while a Frame is a container which can manage constraints (Resizing in Sketch), so useful for buttons, headers, anything that you know is going to require changing its size in a future.
Constraints
Talking about Constraints, Constraints is very similar to Resizing in Sketch.
I didn’t find it really hard to master, and you can do pretty much everything you usually do in Sketch.
Team Library
One of the features I was really looking forward to try, is the Team Library. Only Available for Professional Account, it allows users to have a shared library of components (symbols) that you can share with anyone in your team.
Similar to the new Sketch Libraries, you can update a component in the Library, and everyone get the update.
Very powerful to be consistent in your design.
Publishing and reviewing component on the Library is easy. You can also search in your list of components so it’s very useful when you have a lot of components.
Components/Instances
What I like about Components/Instances is that you are able to override the style/text without changing the master component. While in Sketch you can only change the text in a Symbol, in Figma you can change the Background, Text colours, Borders etc, without having to detach the Instances from the Master Component.
More information here: https://blog.figma.com/components-in-figma-e7e80fcf6fd2
Real-time design
I was a bit sceptical about using this feature, asking myself if I would really design with someone else in real time. But actually I’ve been using it mostly when working remote with my team at Vyte. Being able to share the file in real time and get feedback on Slack call is pretty efficient. My friend editing the copy and myself editing the design was pretty impressive.
I haven’t tried designing in real time with another designer, but I think it could be very efficient for rush hours or hackathon.
Prototyping
One other thing I like about Figma is its in-house Prototyping feature. Simply switch to Prototype and you can start creating interactions. No need to upload your designs on another platform to make a simple prototype. I hope they will add animation soon but it’s not a deal breaker.
Getting feedback
Receiving feedback has also become far more practical as everything is under one place, eliminating the time wasted on switching from Sketch to InVision. The comment section however is quite basic: allowing commenting and resolving comments. But this is just what I need.
Editing tool
I always found the path editing in Sketch very rigid and I always go back in Illustrator to do icons or illustrations. Fortunately, Figma’s editing is very similar to Illustrator’s one. The only downside for me so far is that copying from Illustrator isn’t fully compatible.
Another editing tool that I like is the photo editing. Quick and efficient, no need to be fancy as photoshop but it has the basic of photo editing.
Developer Handoff
From Zeplin, Avocode, InVision Inspect, I’ve always struggled to find the best tool to handoff my design to developers. I’ve tried everything and there was always something that wasn’t good enough. InVision Inspect was easy to use but developers couldn’t export any assets they want as I had to add the export from Sketch. With Figma, I think I finally found something suitable for what I need:
- Developers can see my design without the ability to edit it and can export any assets from the design.
- I don’t need to upload my screens to a third party app anymore.
- Ability to export in CSS/iOS/Android.
Verdict: Huge point on this one 👍.
Customer Support
I was also pleasantly surprised about the reactivity of the Support team. Always here to improve the tool and fix bugs as soon as they can.
No problem and thank you for the support! I’ll pass that along. Also — in regards to the apple emoji issue, our engineering team is patching this up in today’s weekly release. They recommended re-importing the Sketch file after the release to allow the emoji’s to be rendered inside of the file.
From the Customer Support
Pricing
In terms of pricing, you can use Figma for free if you don’t need the Pro features such as Unlimited projects,Team component library… However, if you compare the Pro account, Figma is a bit more pricier ($144/year vs $99/year for Sketch). But if you count your InVision or Zeplin subscription that adds up, you definitely win on the change.
One thing you have to be careful in Figma though is when you share a Figma file to someone with Editing, it automatically adds a user in your team (so +$15).
To summarise:
TL;DR? For the lazy ones, here’s a quick summary of what I like/dislike about Figma/Sketch.
What I like about Figma:
- Super fast Web-based application
- Cloud based
- Real-time collaboration
- Prototyping and feedback all in one app
- Easy developer handoff
- Proper Editing tool
- Editable Components (symbols)
- Team Library
- No updates or plugins to install
- Continue my design even if I don’t have my computer with me
What I miss about Sketch
- Clear Interface
- Compatibility with Illustrator and most apps
- Most people are still on Sketch
- Huge community
- My precious Sketch files
- Export by dragging out
Conclusion
My 30 days of trialling Figma was definitely worth the time I spent. I now use Figma for all my projects, without having to subscribe to third party apps for my design process. There are definitely things to improve but in an overall sense, Figma for me is a really good alternative to Sketch that is definitely worth looking at. I like to compare Figma as Google Docs and Sketch, as Microsoft Word.
I deeply think that the future of design is collaborative and being able to have just only one design file makes it really easy and efficient not only for designers, but also for collaborative team working .
Hope you like this review, have a lovely week!
Philippe
This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
