Figma or Sketch. UKAD experience
Figma or Sketch. UKAD experience
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
Sketch was the first tool we started replacing Adobe products with. Currently, Sketch is the industry standard and still dominates the market. It took some time to get used to the Sketch, but an increase in the work speed was significant. This year we have tried using Figma since we heard a lot of promising comments about it. Adaptation time to Figma after Sketch was almost invisible.
If to look at the workflow and environment required to the tools – it’s a bit different.
Sketch workflow
Utilizing Sketch requires a desktop application installed exclusively on a Mac OS system. To truly harness its potential, integrating plugins is strongly recommended. These plugins play a pivotal role in unlocking Sketch's full capabilities. A design journey without them may not reveal Sketch's true power. When the time comes to share your designs with colleagues or clients, a supplementary step is introduced. You must export mockups to separate tools like Zeplin, InVision, Marvel, Avocode, or rely on compatible plugins for the task.
While a method exists to craft prototypes within Sketch and subsequently upload them to the Sketch Cloud, this path can sometimes be plagued with glitches and complexities. Additionally, an alternative avenue involves sending the .sketch file itself to a developer. However, this route mandates the recipient to possess the Sketch app on a Mac OS machine. The challenge arises since not all developers within our team use Macs.
Figma Workflow
Figma ushers in a new era of convenience. Here, all that's required is a browser on any operating system. Figma stands as a web application, and your design files are securely nestled in the cloud. The elegance of sharing your design echoes simplicity: a link is all it takes. This link empowers viewers to immerse themselves in prototypes, while developers navigate 'red lines' with ease.
In a marked contrast to Sketch, Figma brings forth a free plan, expanding accessibility.
Notably, the onboarding journey into Figma is remarkably smooth, marked by its user-friendly nature.
Of course, like any solution, Figma isn't without its nuances. What aspects would you like to delve into?
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
Collaborative work in Sketch is limited: you have to export the mockups all the time and present it to the team, then you have to apply feedback or updates and then to present it again.
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
For the projects, we worked on – having files stored in the cloud was fine. But when you have to work offline for a long time, or need to have all the files physically on your machine for some reason, Sketch is an obviously better option than Figma.
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
I wish a file organizing system in Figma would be better. If you have many files for different clients or projects – it would be not that easy to sort them and navigate through.
Buggy?
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.
Plugins
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.
Summary
Sketch, although a small company with a diverse workforce spanning the globe, ignited a significant shift in the UX/UI design landscape a few years ago. Undoubtedly, it remains an industry standard, bearing testament to its enduring impact.
On the flip side, Figma emerges as a powerhouse, fueled by an impressive $43 million in investments and a team of exceptional designers hailing from Silicon Valley. Figma's rapid growth is punctuated by a steady influx of new features, cementing its position as the epitome of collaborative design work.
Within our workflow, we maintain a dynamic coexistence with both applications, recognizing and valuing the unique strengths each brings. This dual approach allows us to tailor our choice based on project specifics or tasks at hand. However, if we extend our gaze towards the horizon, Figma appears poised to potentially surpass Sketch in the long run.
Nevertheless, an enthralling battle looms ahead. The design tools arena is richly populated with contenders like Framer, InVision Studio, Adobe XD, among others. This competition fuels an exciting uncertainty, raising the possibility of yet another game-changing tool that could redefine the landscape. The future promises to be an interesting and transformative journey indeed.
- Webdesign
- Figma
- Sketch
- UI/UX