One tool to bring them all, one tool to find them…
One designer’s search for the ultimate product design tool for a small team
What brought this on?
Like every product designer & UX/UI designer out there (especially the ones in small teams), I use several tools to create and share the wide range of deliverables we are expected to make in any product design cycle.
Be it a wireframe, a banner, an interaction GIF or a pixel-perfect UI design with exportable assets…each one comes from a different tool.
Bilbo Baggins expressed the feeling quite nicely:
“I feel thin, sort of stretched, like butter scraped over too much bread.”
I’m tired of jumping to try every new tool with high hopes only to find that it’s missing an important feature, and giving up on it two days later.
Action: I told my boss that I’m going to find the perfect design tool for our team.
**this obviously does not include every tool in existence. These tools/combos are only the most reasonable for our team.
The One ✨
“One Ring to rule them all,
One Ring to find them,”
And so it begins.
What I mean by the ultimate product design tool for a designer in a small team:
- Simple, comprehensive yet light and unbloated UI design interface.
- Comes packed with UX wireframing kits. Drag & drop elements for quick prototyping.
- Ability to create style libraries and design systems.
- Basic vector & Bitmap editing capabilities.
- Integration with content generation tools.
- Interactions based on logic; when screen is in state “a” and “condition1” and “condition2” are met, transform element “c” in a certain way.
- lo-fi to hi-fi prototyping capabilities.
- Version control.
- Easy documentation.
- Has a simple way to share assets & specs with developers.
- has no OS limitations.
- No outrageous pricing.
For this dream tool, I started looking left, right and center.
Currently: my team uses a combination of papers & markers+Sketch + Invision + Photoshop + Illustrator + NinjaMock + Proto.io (occasionally) + Google Docs + Slack for design collaboration.
The Quest
“All that is gold does not glitter,
Not all those who wander are lost.”
Sketch + Invision 💪🏼
- A power-combo; many design teams big and small use bohemian code’s Sketchapp + invision to create simple, click through prototypes. Because Sketch’s lightness and vast number of plugins make it the best UI design tool on the market, in my humble opinion.
- comes with many strong positives like the famous Craft plugin which not only simplifies designer-developer design handoff (Craft sync), but also offers the option to create & import design libraries.
- Craft has more than just that; with content generation, duplication and freehand drawing all wrapped into one neat sidebar.
- pricing for this combo is ($99 for first year of Sketch + $22/month for Invision Pro) which is reasonable for a team of 5.
- together they feel like one tool, Craft fits right into the workspace.
- there is an OS limitation, as Sketchapp is only available for MacOS😒😒.
let’s keep looking.
Invision Studio ⚡️
there’s a new kid on the block. You must have heard about Invision Studio or seen some of the Invision Studio Jams spread all over social media. I got my early access about 3 weeks ago. I’ve been playing around with it since.
- Studio seems promising, but for someone used to Sketch in combination with it’s ever-growing list of plugins, I got frustrated when I had to do some mundane tasks manually. Making the move from Adobe Photoshop to Sketch was easy, but this…I don’t think I’m prepared to lose my handy set of tools so quickly. Don’t forget that we’re a small team; meaning that we have more to do per person, so anything that saves time wins.
- The lightning quick animation ability is amazing. Too bad it’s not made for more complex, or logic-based interactions.
- No designer/developer friction whatsoever. 😍😍 that.
- MacOS & Windows 🕺🕺.
- Pricing is still unknown.
It was nice to meet you, Studio.
Sketch/Photoshop + Marvelapp 😻
If you can’t afford invision, Marvel is the prototyping tool for you. Plus it has the most fun interface ever 🎉
- You can design right in there; design + prototype! Amen to that🙏
- Web based. Huge ++.
- Light and very easy to use.
- You can simply drag & drop your screens (design using your own favorite tool) to create quick prototypes.
- Again, no logic-based interactions😞. Do you understand how hard it is to make time to animate things in Photoshop & After Effects?? I am NOT going there.
- There is Handoff, which is a tool exactly like invision inspect for generating CSS and sharing design assets & specs.
- Pricing $12/month for Marvel Pro.
Cute Marvel, I see you in my future. Will you add animation? Please and thank you.
Sketch/PS + Zeplin 👩🏻🎤
coolest combo, a personal favorite. Zeplin is a tool made for the most enjoyable designer/developer collaboration. It’s very easy to export designs from Photoshop/sketch/figma into Zeplin, and even easier for the developer to find element specs.
- MacOS, Windows & Web. I’m in love💕💕
- Lightweight.
- Perfect for Designer/developer collaboration.⬆️
- easy to learn.
- But it stops at that 😭. I mean, it’s a collaboration tool, why oh why don’t you consider poor interaction designers? why can’t I make prototypes or any interaction on Zeplin??
- And then you have to pay $26/month for 12 active projects. I know I said we’re a small team, but 12 …come on!
Adobe XD 🏃🏻
now this one is pretty great. Adobe XD is probably one of the most thought out interface design tools when it comes to speed. Adobe tried to give interface designers everything they need to whip up a wireframe or a screen design in about 2 minutes.
- quick as lightning.
- lightweight. Not bloated with photo-editing features like PS.
- comes packed with wireframing & UI kits.
- screen linking for simple click-through prototypes.
- developers will have to go old school and search design files for element specs & design assets.
- MacOS & Windows.🤘🏻🤘🏻
- I’m tired of saying this. No interactions.
- pricing is $9.99/month for CC version if you buy it as a part of creative cloud.
“The world was fair, the mountains tall
In Elder Days before the fall…”
XD, you’re beautiful. But you’re not our type.
Figma🚀
here’s to the revolutionary Figma. I won’t say anything, look at it in action.
- Web-based + Windows, Mac & Linux. Cool 🔥
- Beautiful, smooth designer/developer collaboration.
- light & quick.
- prototyping.
- Integration with Framer. Which is like THE app for interaction design.
- Costs $12/month for Figma, another $12/month for Framer.
- But it will definitely take us some time to learn Figma & Framer. A luxury we can’t afford at the moment.
Conclusion
And so my quest ended. For now, my team can continue using Sketch + Invision for design & prototyping and I will keep doing my interactions in the stone-age way…making GIFs. Then try somehow to communicate my ideas verbally.
Later when we have the time to learn new tools, I will certainly be making an effort to move the flow to Figma. Less tools, more value. Less is more.
What works for your team?
Every team is different. This is us, this is what works for us.
what works for you? what tool combo do you use? I’d love to hear all about it.
When I’m not looking for the next great idea to design, I work as a UX/UI designer for UX Labs.
