Sign in

First of all, this article doesn’t aim to be a comprehensive overview either of the Sketch nor of Figma. There is plenty of articles on the internet that does it great. We just want to consider important points of our workflow in UKAD.

Starting with New Tools

If to look at the workflow and environment required to the tools — it’s a bit different.

Sketch workflow

If you want to send the design to colleagues or clients — you have to export mockups into separate tools like Zeplin, InVision, Marvel, Avocode, or with help of some plugins.

Although there is a way to build a prototype inside the Sketch and upload it to the Sketch Cloud — it seems to be a bit buggy and complicated. Also, you can send to the developer the .sketch file itself. But to open the file it required the Sketch app installed on a Mac OS machine. Most of our developers don’t use Macs though.

Figma Workflow

And also, unlike Sketch Figma has a free plan.

There a very important aspect — how easy it is to start working in Figma.

But, there are some cons I want to point out.

Easy access and hand-off to developers

Working on the mockup in Sketch require any changes, updates, export assets to be made within a designer’s help. Obviously, it’s better to have a responsible person(s) for the specific task or field. But when you simply need to change the text or replace images — it’s handy when it could be done by anyone in the team (without a designer and the access to his machine). This is where Figma helps in a great way.

Regarding hand-off in Figma — it worked well for us. Although some of the developers still prefer Zeplin or similar redlining tools. We believe it’s more about the habits than Figma functionality lacks.

Collaboration

This way is a little complicated.

We’ve tested collaborative work in Figma from the very beginning of the project with no defined structure, no finished text, and no a website page design.

We created a couple of wireframes drafts, where everyone — designer, marketing manager, project manager — could make changes at the same time. After a series of iterative updates, we came up with a solution.

We don’t say — before Figma it was impossible to work in collaboration and iteratively. That’s a question more of your workflow. But Figma let you make it easier, with less friction. We didn’t check comments functionality in Figma yet. But it seems promising to our workflow.

Files organizing and performance

It seems amazing not to bother with ‘where to upload the mockups?’, ‘is it the last version?’, ‘which way to deliver the mockup to the developer?’. The fascinating advantage of Figma is access to the last version from any machine on any OS, without installing the application.

Sketch — good when you go offline

Yes, you can save the Figma file at your hard-drive and work on it. But access to the Internet is obligatory to update changes.

Figma file system seems a little messy

We didn’t face any significant bugs or crashes neither in Figma nor Sketch. But the performance of the Figma looked faster.

Design System and Editing

Figma was created as a solution to simplify the building and maintaining a design system. Although, Sketch functionality let you create a style guide or design system: text styles, shared styles, layout grids, and other required settings, implementation of all these functionalities in Figma are more flexible and easy to access.

Components in Figma are easier to manage and access as well. Opposite from Sketch, in Figma components, are listed at the separate interface panel and sorted by groups and pages. Besides that, Figma lets you change component instances styling. For us, components implementation in Figma looks more intuitive and flexible for updates.

Although by many points Figma surpasses Sketch, here is where Sketch takes the revenge. Yes, plugins could affect the app performance or could stop working after the next Sketch update. But, for now, some of the plugins are so much useful that it could be crucial when you choose: Sketch or Figma. Plugins which highly improves our work are — content and photos auto-filling plugins; Auto-layout by Anima; plugins for button auto-resize, and others.

There is no any similar functionality in Figma yet.

The Sketch — is a small company, which consists of workers mostly from different parts of the world. Sketch has brought the significant change into UX/UI design tools a few years ago. And Sketch is still the industry standard.

Figma — is a company that raised 43 millions of investments, and consists of great designers from Silicon Valley. Figma grows in really huge tempo and adds new features all the time. And as for design collaborative work — Figma is the best tool in the moment.

In our workflow, we still use both apps. And we appreciate both for its strength. So, we make a choice up to the project or task. But from a long-term perspective — Figma would likely outscore Sketch. Anyway, it seems to be an interesting battle ahead. Since there are a lot of other tools at the market like Framer, InVision Studio, Adobe XD, etc. So, who knows what tool will change the game again.

Originally published at https://www.ukad-group.com.

We are a Software Development team based in Ukraine. Here we are sharing some insights, tips and inspiration. More about us at ukad-group.com