The award for the best UI editor goes to…September 28, 2020
To begin with, I have to disappoint you. In my opinion, there is no single best app. The internet is full of articles telling people which app is the best. Some say that Sketch is the one, others praise Adobe XD. My perspective is that everyone and every team is a little different and can benefit from a different set of tools.
John, who works as a freelancer, can choose Adobe XD because he is already using Creative Cloud.
A small design studio can choose Figma because they only need to buy a license for two designers and save a lot of money
And Vaclav, the Office master, can use his years of experience in Microsoft Word.
That's why I won't force you my favorite app. I will help you find the one that will work for you.
How to find the app that will work for me (or us)
Be curious and explore everything. Download apps that you haven't used yet, and try them for a while. Write down the pros and cons and evaluate which app suits you best.
You can start your search on Google
Don't be afraid to explore and try new things. Even if you already found your dream app. You never know when you discover something better.
Do what you would do (or should do) in any other case. Be curious and explore everything.
And what about others?
Keep in mind that you are not alone in a team. Developers, managers, and maybe even clients will probably use the app at some point. Take into account even their needs.
- Developers need to skim through attributes like dimensions and colors.
- Managers and clients may want to see the current state of work.
The goal should be that everyone works effectively—That's why you should invite them to the vetting process and ask them what they think.
Don't forget to prepare arguments about why and how the app will help everyone in the team. Thanks to this, you will clarify everything yourself and will be ready to persuade others.
The goal should be that everyone works effectively.
How we, at Dactyl Group, have searched for an ideal app
I'm leading the creative team at Dactyl Group. Part of my daily work is to collaborate with developers and improve internal processes.
Trying and testing everything is a big part of it. And it's something I love. Apart from the well-known trio (Adobe XD, Sketch, and Figma), I've also tried InVision Studio and Framer. And even Marvel, Avocode, and Origami.
And how each app worked for us?
Let's start with Photoshop
I don't know anyone who doesn't begin his UI designer career by working in Photoshop. And it was the same for me.
You won't find some handy tools in Photoshop, but you still can design UI in it.
At the beginnings of Dactyl Group, we worked on UI for websites and mobile apps in Photoshop. I can remember it was very slow, crashing all the time, and files were hundreds of megabytes large. Everything took a lot of time, and I won't even talk about developer handoff. Photoshop just wasn't the right tool for us.
Switching to Sketch
My curiosity brought me to Sketch. After the first couple of hours playing with it, I was on fire—features like artboards and style support, and unbelievable speed. These three things made me switch from Photoshop. I have to confess that I hadn't asked others for their opinion this time. That change of mindset came a little bit later.
The difference between Photoshop and Sketch is a different arrangement of controls and tools and, by the first look, fewer functions.
Luckily, everyone was satisfied with the change. Designers improved their effectiveness. Moreover, by connecting Sketch with Zeplin, developers got quick access to everything they needed.
After some time, we have found some shortcomings of Zeplin. But, we have discovered InVision. It let us create interactive prototypes and displayed a structure and layers of the design
Sadly, even InVision didn't last for a long time. Because of the continually increasing complexity of the projects, the speed started to limit us. And because it was annoying, we began to look for yet another app.
Figma: One tool rules them all
We've used Sketch for a long three years. And just at the right time, I've discovered Figma. First of all, I tried it thoroughly myself. I was pleased by quite a few functions that I hoped Sketch would get someday. I liked the connection between designer and developer interface, the possibility of adding comments, and that the whole app works in a browser.
I've decided to introduce Figma to the rest of the team and show them that it's worth it.
All three apps look the same by the first look. The only difference is that Figma has no dark mode :(
We've tested Figma on a real project. That showed us some limitations, but the results were overall positive. So we've decided to make the change.
Fine-tuning Figma for our needs
We're satisfied with the current solution, but we still see a big space for improvement. Fortunately, Figma has a public API we use to make our extensions.
The first one we've made allows us to export styles, text strings for translations, and icons for iOS, Android, and websites in just a few clicks. Thanks to this extension, developers can easily style apps and websites and quickly reflect changes in the design
Our next step is to add the option to import the styles back to Figma. The goal of this is to move style management to our app. We strive to create a tool with better flexibility and improve the process of applying styles to components of our design system, not only in Figma but also right in the apps and websites.
You'll get insights about our design system soon.