Why your design team should consider switching to Figma
16 reasons to drop using Sketch and start working in Figma
Over the last 4 months, Figma fully swept out Sketch and Zeplin from the work process of the Statsbot team.
I will tell you why Figma is so good and why the history of designers’ mass migration from Photoshop could soon repeat. Only this time, Bohemian Coding, not Adobe, will abandon ship.
Enlightenment
I really love Sketch. In 2014, master class by Dmitriy Novikov from MacPaw introduced me to its miracles and since then 90% of my processes, from drawing icons and presentations to grinding in-depth layouts of web and mobile interfaces smoothly migrated to Sketch. Adobe’s Authority began to show signs of strain and started to crumble, while its legitimate territories were squeezed out slowly but steadily by the right of the strongest.
The release of Zeplin raised a new mass of enthusiastic voices. As soon as the frontend developer was shown how much better his life would be without going to layouts and saying such phrases as, “John, how many blurs do you need for your hipsters’ shadows?” and “Cut icons, and don’t forget about the retina,” they shed tears.
The ability to work jointly in Zeplin+Sketch became a standard requirement for the interface designer.
In the following years, the UI-tools market squared one’s shoulders and began to offer one product after another. Even Adobe started fussing and released raw Adobe XD (nee Comet). However, by the time of the release, it had already lagged behind the existing solutions and raptures from Adobe fans like “Well, now we will show you” scaled back.
UPD: I am not really familiar with the latest version of Adobe XD. However, people speak highly about it.
None of those products offered anything drastically new, shifting the same variables. Potential users themselves were not eager to rush headlong into an untested tool and rebuild all processes under it.
And then I met Her.
Figma united the best of everything in the world of UI- design tools in the last few years.
Figma is the superior, having the best features from Sketch, Zeplin, and InVision, in one cool product.
Availability
Figma works in browser and is available on any platform (if you worked in page designer such as Webflow or Tilda, you will have no problems in terms of adaptation).
No installation package or applications required — all you must do is visit figma.com, log in, and start working.
Designers are accustomed to the fact that everything that works through the browser is exclusively intermediate parts of the process, but not the main “big and serious” environment for work. You have to get used to this.
File organization
All work files are stored in the cloud and organized as a single-inheritance tree “command / project / file.” Therefore, no more copy conflicts, “Upload to Dropbox,” “Not attached,” “Layouts in the folder Company / Design / Web / New / 3.0 / Current/ New folder (5).” Any new files that are not explicitly saved are automatically dumped into the Drafts folder.
Teamwork
The idea of a collaborative workflow has been infecting one product after another and successfully demonstrated that it’s fun, fervent, and useful for processes.
In Figma, you can work on a single file simultaneously with other team members in real-time. As I already mentioned, they only need a browser to connect to the work.
Each user who is working on the same file, at the same time as you, makes himself/herself present by a flickering cursor with a name. You know who it is and what he/she is busy with.
Work with layouts for frontend
You let the developers into your Sketch-file, and they change something there. “It’s not cool!” thought three guys from Turkey, who released Zeplin, where the frontend could poke on everything that can be seen without fear of making changes.
What remained was only to upload fresh layout versions, put tags, and respond to the comments.
… And I have successfully forgotten to do all this, for which I received the rays of hatred.
Figma was my salvation in which the whole Zeplin has been replaced by an individual setting of rights: you invite the developer to the project, assign him a “read-only” and release him into freewheeling, he happily sweats in layouts, looks at colors, sizes, margins, picks out assets and abandons himself in pleasures.
Alpine freshness of versions is provided by an inconspicuous synchronization process. All layouts in the hands of the frontend are at the stage you left them last time, when closing your laptop.
Comments
There is no need to “run off” anywhere to discuss the layouts, all the feedback is collected on the spot and discussed here.
Version control
Uploading to Dropbox has always been imperfect and often caused problems with copying conflicts and confusion when searching for current versions. For Sketch, there are always git options for designers, i.e. Abstract.
In Figma, version control is naive and simple: you see who made the changes and when, and roll back to the version in a couple of clicks, overwriting or creating a copy of the layout.
UPD: Ha! “Git for designers will be released in Sketch.” Those guys are catching up.
Curve editor
Figma has the best curve editor.
What Sketch bought me was a nice way to work with curves. After Photoshop, with its clumsy Pen Tool, drawing vector icons in Sketch was an exceptional pleasure.
But even here, Figma surprises.
The Pen Tool is so good and literate here that I have never had any annoyance from an uncaught point or confusion from an unexpectedly working function. The following are just a few features from which tears of joy sprang up:
· Points can be infinitely connected with others, which makes it possible to create complex shapes.
· Removing a point on a curve does not break the shape and cause the fill to disappear. Neighboring points will compensate for the previous shape (at least they will try very hard).
· You can change the fill of individual parts of the shape formed by the intersections of the curves.
· Lines. Can. Be. Moved!
· Points and their positions will affect neighboring ones.
You can read a description of all the amazing things about “Vector Networks” in the post by Figma CTO Evan Wallace here. It’s breathtaking how much thoughtful work was done when creating this tool.
Grid, layout and “rubber”
The principles of resizing (Sizing in Sketch) can be set separately for the width and height of the group, which was previously lacking.
There is a dropdown list in Sketch: Stretch / Pin to Corner / Resize Object / Float in Place. It is difficult for me to readily determine what to choose, so that the resize works as I require it to work.
In Figma, it works and looks more intuitive.
Binding the descendant to the side or size of the parent (a place for jokes about the “author’s mum”) occurs in one click.
Important: The dependencies for an object / group can only be set from the size of the Frame, not the parent group.
Frame is not the same as Artboard in Sketch. Frame can be created inside another Frame, so it should be perceived simply as a “pumped” group, not a separate screen. You should get used to this.
Due to the fact that the nesting level of the Frame is not limited, it is possible to make fiddly grids, which are scaled by the trickiest conditions.
Layout Grid. Grid settings are always in front of you, unlike in Sketch, where you need to go to the menu, call a modal window, and while you are adjusting the columns the layout is not editable. By the way, the frames “stick” to the edges of the columns and scale together with them, observing the grid and indents. You can read more about grid layout, constraints, and other occultism here.
Components
They are called Symbols in Sketch but they are not really. There are a couple of significant differences:
Parent
When creating a new component, it is not placed on a separate artboard, like in Sketch, but co-exists with descendants in one space.
Kids
As the creators of Figma say, by copying the parent, you create not a copy, but an “instance.”
When adjusting the parameters of the parent, the same parameters will be adjusted in all of its descendants — everything is as usual. But if you decided to adjust the style of the descendant, it becomes its unique independent property.
Unlike Sketch, where the editing of text and images in a symbol occurs in a separate form, in Figma you can do this as if you are managing a regular group of objects. It seems to me that such mechanics should be more obvious.
Google Fonts
1. Someone opened your Sketch-layout and saw an error about missing fonts.
2. Despite the warning, this someone opens the file.
3. All fonts go off to default. Auto save is triggered.
4. You spend time reassigning font styles to each text object.
5. You feel that your love for mankind is withering.
In Figma, fonts are drawn from Google Fonts. Those fonts that are used locally are spooled to the project. This is awesome.
What else is there in Figma?
Sketch-like interface
Figma’s interface is pretty much similar to Sketch’s, which is convenient. It has been about 40 minutes from the start to the complete work, thanks to the preservation of almost all the usual patterns and shortcuts.
However, there have been many improvements to familiar tools, such as vertical alignment of the text box within itself and the indent of the first line, the option to auto-resize the text block along the length of the line (horizontally) or the number of rows (vertically), etc.
Integration with Framer
It was added in December. You can read more about it here.
Import from Sketch
All your projects can simply be transferred from Sketch without a single loss. In any case, I did not notice any fallen off fonts, no drooping curves and no bad images.
Suitable export SVG
Which feels better than Sketch. I’m not sure what the secret is, but SVG icons have become less likely to suffer from popular diseases like gradient curves, missing fills, and partially rasterized elements.
First line support
Live chat with an average response time in 2–3 hours. The guys are very attentive and even write screencasts when they want to explain something. It is pleasant.
It is free
For certain users. For teams, Figma unveiled the pricing, which will be effective from the beginning of July.
Several weaknesses
Dependence on internet
Obviously, you cannot work in the browser without an active connection. There is an offline client that unloads all the changes if you connect to the network, but if you closed the program, the last file you worked on will become unavailable.
No rounding of half pixels
This drives you a little bit mad.
Few resources and a small community
I could not find any relevant alternatives to sketchappsources, but the import from Sketch works fine, so that solves part of the problem.
No plug-ins
There is a lack of Craft and plug-ins for unloading screens to Marvel or InVision. When it appears in Figma is just a matter of time.
Conclusions
Sketch prepared the ground so that products like Figma materialized, but in the competition, it lagged behind. It’s a great time to take a break and slowly consider other options.
Team Statsbot quickly and imperceptibly switched to Figma, and after a month everyone began to understand what was happening with the design in the company and at what stage their task is. I started to spend less time discussing and communicating; everything migrated to the comments.
Frontend developers no longer face irrelevant versions of layouts. I, myself, no longer experience phantom déjà vu when completing work on the screen. There is no need to configure the export and unload the screens to Zeplin.
Yes, there are a couple of troubles in Figma, but compared to the advantages that I get from using it every day, it’s a trifle.
Is it worth a try? Absolutely. All the advantages of Figma speak about the very laborious work of developers over the product and paying a close heed to the community, which guarantees a pleasant experience.
Thank you for your attention! Advices, recommendations, and the rays of hatred are welcome in comments.
Vladislav Ponomarenko, Product Designer @Statsbot: drbbbl, fcbk.
