Hey guys, this article is for you to help understand the pros & cons of Figma in comparison to Sketch & Adobe XD, and not only through listing them, but also by giving you a clear idea of how and why they matter to you. At the end of this, I’ll promise you that you’ll have clarity with how Figma differentiates from others and whether it’s the right tool for you!
YouTube : https://youtu.be/IrzCL85E-4Y
Figma in One Word
Figma came out back in 2012, but today, it’s probably the most trending prototype tool. In one word, Figma to me is a “Team-player” tool that really helps you, designers, to work smoothly with your teams and also any stakeholders. Figma helps throughout the whole journey of your project, and you can do almost all of that work just within the same platform. So how exactly is Figma collaborative?
Imo, Figma = Super “Team-player” prototyping tool
PRO#1 — Better Collaboration with Your Team
One of Figma’s strengths is the ability to seamlessly collaborate with your designer peers.
As a designer working on a project, I would make backups of the progress I made, and I may create multiple versions and perhaps, copy-pasted each other's updates.
But, if I’m out sick, my peer may easily grab the wrong file to continue working on. Even worse, even if I made sure to direct to the correct file, we will separately make updates and deviate from where we started. What’s the best way to reflect each others’ updates from here? IDK. Exactly. There wasn’t just the right way for us to seamlessly keep ourselves updated with the right design file.
Working on the same design file with your peers took extra caution and manual labors to stay aligned.
Figma solved this problem elegantly in these two ways.
1 ) It’s a cloud app —
So it runs on your browser, and all files live on the cloud. You can open or share them using URL links. Just like how we do with Google drive, Dropbox… Url is obviously the most mainstream way of sharing digital content, so I love the ease of this. This allows team members to reference the same url and keep track of the same file, wherever and whenever.
“Do I still need to make duplicates for versions?” If you have a free plan then unfortunately, as of today, yes. You may do so if you. can afford to use your 3 projects limit. However, if you’re on a paid plan, you will get access to their version control feature that lets you restore history up to 30 days. So the team and you can always reference the project file and its updates just from the url.
2 ) Figma editor allows co-edit —
You and your peers can simultaneously work on the same design file remotely. It’s again like Google Doc, but now it’s on your design tool! With this ability, you don’t have to merge your changes with your team, but you simply manage the design file together.
Figma as a cloud app allows the team to manage & edit the same design file together.
Other Apps? : Adobe XD now supports cloud documents & co-editing. Sketch does not yet support co-editing, but there’s a plan to support in the near future.
PRO#2— Better Collaboration with Stakeholders.
The mainstream way of sharing prototypes and designs to project stakeholders are probably using Invision. Invision allows design presentations to be shared as URL, and comments can be posted inline to start a discussion. While Invision is an amazing service, designers needed to upload and manage slides on Invision separately.
In Figma, the preview & commenting is inherently supported. The “preview” or the play button at the top generates a separate URL which becomes the sharable link, and here, you can comment to start a discussion without uploading any slides. It’s all 1-to-1 with your design files.
In addition to this, Figma also brought the same inline commenting feature to their editor. Again, it’s a similar feature seen in apps like Google Docs, but it just makes so much sense for prototype editors to have this capability.
Figma allows inline comments & discussions with peers and any stakeholders all in a single platform.
So how exactly is Figma’s editor so great?
We talked a lot about Collaboration, but Figma’s usability also shines hard in its editor UI. Here, I want to highlight the two features of Figma that differentiates itself from other prototyping apps.
PRO#3 — Frame. Not Artboard
Figma uses “Frames” instead of “Artboard” used in apps like Sketch, Adobe Xd. What’s cool about Frame is that it’s a lot like real UI in its structure.
Artboard is basically your canvas or the viewport. It’s regarded as a different element from the actual UI elements, and the artboard is a single flat layer panel.
Frame, on the other hand, is just like a <div> element or a container. It can be nested, and it doesn’t distinguish the artboard(viewport) from the UI elements. Any frame (container) at the very parent level is immediately regarded as the viewport.
The reason Frame is an advantage is because, with Frame, designers no longer need to group elements into a folder or nest them. The moment an element goes inside a frame, the element is immediately a part of that parent frame without grouping into folders.
Imagine frames are like building blocks. You can lay them next to each other, or you can stack one on top of another. When you grab and move the bottom (parent) block, then any blocks stacked on top (children) will move together. If it’s easier, you can also think of it as a nestable container instead of blocks. When you grab a parent frame, everything inside will be regarded as parts.
Frames are useful because, in UI architecture, most components are a group of elements, so by putting the relevant elements together into a frame, it can self-contain the inner constraints within the frame. So, when you work on layouts or spacing, you can arrange how to separate components and isolate the concerns between them.
Frames are just like containers that can nest frames or elements within. This helps us manage layouts and spacings by the container.
Other Apps? : Neither Sketch nor Adobe XD supports “Frame”
PRO#4 — AutoLayout
Even in the happiest path, designers cannot avoid the great amount of time spent on the fixing of paddings & margins. Sketch wasn’t so good at keeping spacings consistent. Anima tool plug-in for Sketch was great at first but turned out to be quite buggy and unintuitive.
Figma’s auto layout helps you create dynamic relationships between frames or elements. This means when the content size changes, the spacings will adjust itself accordingly. By nesting auto-layout relationships and locking up the spacing rules between frames & elements, you can let the rules handle the spacing and you now have your full time to invest in the contents.
Auto-layout takes care of the “spacing” and let’s you worry about the “content”
Other apps? : Adobe XD has an equivalent feature called “Smart Layout”. Sketch does not natively support, but only has a simple aligment feature called “Tidy”.
CON #1 — Lack of Responsiveness
While auto layout is no doubt an amazing tool, it locks up your comp and there isn’t much room for responsiveness. While you are still able to constrain individual elements by locking both ends (like Left + Right), this won’t work if combined with auto-layout. This means when contents grow, they overlap instead of pushing contents to respect spacing.
To be extra picky, there’s no flexbox support nor ability to set max/min dimensions, so Figma isn’t yet optimized to design responsive components. This ultimately means that your viewport size for your comp must generally stay static, and you’ll have to create a separate comp for different breakpoints.
Auto-layout overrides your Constraints setting. This means components cannot be fully responsive, and designers are forced to work to create static comp in a fixed viewport.
Other Apps? : Both Sketch & Adobe XD utilizes “constraints” to support similar behaviors, but neither supports breakpoints or pushing-contents.
CON #2— No way to create interactive components
While Figma offers a useful & intuitive prototyping tool inside the editor, the interaction options are only useful to navigate between pages.
Even if I create an interactive component by adding interactivity to switch between states, when I place the button on a page, the button interactivity no longer works. This means the interactivity cannot be nested.
At a glance, it’s exciting to see cool interaction options like “onClick”, “whileHover”, but disappointing to find out you can’t apply them to the component level and make those interactions reusable. The only scalable option to switch states is by manually switching on the canvas, just like in Sketch.
Interactions can’t be embedded within a component. Designer will still have to manually update states.
Other Apps? : Neither Sketch or Adobe XD supports interactive components.
CON #3 — Not so Design Systems
Figma aggressively markets its ability to help establish design systems as if it’s something Sketch and other competitors couldn’t do. However, this is a bit of an overstatement.
Design Systems is not a feature but a methodology
Building an atomic design structure is crucial to building design systems, but this is a methodology and not a feature. Also, modulating components and managing them separately is vital to maintain design systems, but again, this is a practice and not a feature.
Figma is a cloud app, and there is definitely ease for teams to quickly access components or update them as needed, compared to desktop apps. However, today, many prototype tools like Sketch, Adobe Xd now support Cloud library, so the quality of your design systems will most likely depend not on the choice of the app but on how you build and maintain them.
Single source of truth?
Figma really likes to use this word as if it enables you to truly rely on a single source of truth, but it’s not exactly the single source in the sense true design systems would expect. What do I mean by this?
True design systems rely on a single source of truth, and the single source of truth has to be the production code. If the production code isn’t hooked to your UI library to design with, then the design isn’t referencing the source of truth. Designers may be managing their own source-of-truth for designs, but engineers will be managing their source-of-truth which is their codes. This defeats the whole purpose of unity and consistency.
Some teams may have found their ways around to resolve this gap, but as far as Figma goes, their “source of truth” only refers to the design library. So you’d still have to figure your way out to make sure the production code is indeed 1-to-1 with your designs.
Figma’s “single-source-of-truth” only refers to the design assets for designers. Designers & Engineers will still have to work together to keep their source consistent.
Other Apps? : Neither Sketch nor Adobe XD supports hooking production code to your design kits.
Summary
We talked about these points.
Pros:
- Cloud-app enables the design team to smoothly co-work on design projects
- Share design to any stakeholders with url, discuss inline by commenting.
- Frame mimics real UI structure and helps isolate concerns of each component.
- Autolayout makes notorious spacing adjustments drastically easier and more time-saving
Cons:
- Lack of responsiveness forces designers to work on a fixed viewport.
- Components can’t preserve interaction definitions, so states still have to be manually switched.
- To build true design systems, it requires a lot of thinking & working outside of the app.
Conclusion
The cons I listed are all addressing the nice-to-have functions, but they are definitely not detrimental to designers’ productivity. Today, Figma overall is definitely an amazing tool with so many features loaded that we all wished to have in the past.
Did you know there’s another prototyping app that’s capable of doing all the things I listed Figma can’t? It’s called Framer X.
Check out this article below I wrote about “Sketch vs Framer X”
Thanks for reading!
