Figma VS Sketch
Figma is like Sketch in the browser with real-time collaboration.
With the limited time I had with it, I can already say with confidence that it’s far more polished and production-ready than in my first experience with Adobe XD. It also has three invaluable features that set it apart: real-time collaboration, vector networks and version history. It can handle dozens of designers working on the same document, at the same time without breaking a sweat. Last but not least, this tool is really fast, easily handling 20+ Artboards in a single document.
People will inevitably compare Figma to Sketch, so as a long-time user of Sketch, I’d like to share my experience, following a tradition that I started 3 years ago.
Browser VS Native
I was skeptical at first because Figma is a browser-based user interface design tool, but now I’m convinced that there is a future in this area. Everything is extremely responsive, works as expected and the software is almost every bit as powerful as its native counterpart Sketch, minus features like Symbols, Overrides and Plugins. Every document and version exist on their server, making the task of iterating effortless and worry-free. You can still save your document as .fig to make it downloadable. Like this, you can share your Figma files with others.
By default, Figma uses Google fonts (a free library of 800+ fonts), but you can also add your own by installing an add-on. They even included the hugely popular FontAwesome. I think this is an incredibly smart move, since collaborators won’t need to download extra fonts when they jump in.
Real-time collaboration
For many teams, this is a game-changer. Being able to design with a fellow designer, engineer or client in real-time will save a ton of time in both execution and communication. Although not every project needs collaboration, it’s good that the possibility is there.
You can quickly work alone, then invite others whether they’re signed up or not to edit or view-only your design in progress. The advantage of a browser-based tool is that the recipients won’t need to install anything at all, or even own a Mac to participate. Figma works on Mac, Windows, Linux and on mobile devices (viewing only). I can’t overstate how this will completely change team dynamics and allow true collaboration between designers and developers. Anyone can just come in and check all the specs: fonts, colors, sizes, distances, etc. Developers can benefit from inspecting the constraints and how the layouts adapt to multiple screens.
Version History
The versioning is much more visual in Figma, allowing you to quickly compare between versions. It’s a lot more pleasing to use than Sketch’s macOS native versioning, which feels slow and over-the-top. While they both have Autosave and version history, their execution is completely different.
In Sketch, it’s slow to navigate between each version. Often times, designers disable this feature because it eats too much of their disk space.
Comments System
The comments feature is built-in. Team members can pin comments to your designs and you’ll receive notifications when there are new comments or replies. Once you’re done, you can click “Resolve” to hide the thread.
In Sketch, you can add comments by downloading a plugin or use the excellent Zeplin for a more interactive solution that includes specs and assets delivery.
Zeplin is also browser-based, so it works for Mac/Windows.
Another Sketch plugin worth noting is Craft from InVision, which allows you to design with real data. You can quickly generate names and photos from presets, Websites or APIs.
If you put Sketch together with Craft, InVision and Zeplin, the package suddenly becomes a lot more attractive for comments and prototyping.
Vector Networks
Vector Networks is groundbreaking. You can move the lines instead of the vector points, and all the connected points will automatically follow. That’s because instead of having just a beginning and an end point, you can connect multiple vector lines in Figma, creating a web of vector points. It’s incredibly intuitive once you start using it.
Vector Networks introduced by Figma.
Sure, it’s still missing things like Scissors or Rotate Copies, but for most vectors, I believe that Figma is easier to use and Vector Networks can lead to interesting results.
Import from Sketch
Figma was able to import Sketch files extremely accurately. Every Artboard, Groups and layers were left intact with their exact names, grouping and properties, including multiple borders, shadows and effects like Blending modes and Background Blur. Because of this, I’m inclined to say that using Figma as an extension of Sketch or vice versa is not a far off idea. You can basically import any existing Sketch work, resource or vector and start from there. The fact that they don’t support Photoshop files (yet) speak volumes of the level of compatibility that it has with Sketch versus Photoshop.
Strangely, I couldn’t copy and paste vectors from Sketch to Figma, but I could drag and drop an SVG file directly into an open document.
I was even able to import the extremely detailed vectors from Angle and got a fairly impressive result. Sure, the gradients and shadows aren’t as good-looking (sometimes even missing), but all the shapes were there. This is a big deal because you can use virtually any Sketch UI Kit in Figma.
There’s a Desktop-ish app
You can download the desktop version, but don’t expect a native experience. It’s basically just a Web wrapper. Still, unlike the browser version, the keyboard shortcuts won’t interfere with browser’s. For example, CMD + 1–9 switches between browser tabs, but in the Desktop app, it switches between documents. You also get rid of the extra browser chrome.
Constraints
Adaptive layout is an indispensable feature for modern design tools. Designers have to deal with an increasing amount of device resolutions. It would be silly not to be able to adapt a design from the iPhone 7 to 7 Plus just by resizing the Artboard.
In Figma, you set up the constraints by pinning against the borders, or setting the element to center. It’s essentially like Sketch’s Pin to corner and Resize object. I have to admit that Figma’s version is more visual and intuitive to use while Sketch has more options like Float in place.
Is Float in place any good? Yes, if you want the elements to keep the same proportional distance and size between each other.
Performance
Handling dozens of Artboards is a breeze in Figma (but your fan may start kicking though). Those who complain about Sketch’s performance may find better luck here. Seeing that it’s browser-based, the entry point is much lower for practically anyone owning a desktop, laptop or mobile phone. As a matter of fact, those who long wished for Sketch to come out in Windows finally have their answer.
The User Interface
The user interface is almost an exact replica of Sketch, down to the tiniest details like the names of the tools, keyboard shortcuts, the Artboards and Groups, or the Export tool. Don’t get me wrong, this is a GOOD thing for users. It just means that Sketch has set such a powerful standard that both Adobe XD and Figma have no hesitation following.
Sketch is like the “iPhone” of design tools, in that most new tools will copy its standards, add a few twists, but years down the line, they’ll mature enough to be truly unique on their own. In the end, users win the most as they get more choices at the highest standard. In other words, they’re no longer stuck with Photoshop for UI design, the same way they were stuck with dumb smart phones with clunky keyboards. Of course, I don’t mean this as an insult to Figma or Adobe. They’re smart to answer the modern designers’ needs in a way that don’t confuse them, making their transition as smoothly as possible. To be fair, a lot of these standards came from the Mac and Adobe’s own Illustrator and Fireworks (RIP).
Should you use Figma?
I think the answer is a resounding yes. You don’t need to learn a new tool, because it feels and works like Sketch. For me, switching between these tools felt completely natural.
Both tools can reinforce each other, meaning that they can fulfill different needs as you switch between Mac and Windows, iOS and Android, home and office. I’d choose Figma for its real-time collaboration, multi-platform support (Windows, Mac, Linux) and Sketch for its platform maturity, true native experience, and its excellent plugins and resources. In term of features, I think both will eventually catch up to each other (Real-time Collaboration, Vector Networks, Comments versus Symbols, Overrides, Plugins).
Figma is totally free until the end of the year, so give it a try.
from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fmedium.com%2F%40mengto%2Ffigma-vs-sketch-c01e5e74eddd%23.93f977tz3