Is there a best "all-in-one" tool for UX design, prototyping, handoff, project management and design systems?

Question

I work at a company that operates as e-commerce, and we use Shopify as our platform. I'm a product designer at said company, in a two-person team that includes myself and my boss, and we rarely work on the same designs at the same time.

Currently, our tool kit includes:

• Sketch: Used to build & update a working style guide & component library, as well as design wireframes and hi-fidelity mocks
• Zeplin: 1) Dev Handoff, i.e. visual specs, assets, etc. 2) Sharing mocks & commenting 3) To house projects 4) To house our style guide/component library.
• InVision Cloud: We use this for its basic prototyping tools and to share prototypes with stakeholders or user test participants. We use Favro for tickets & project management (not great), google docs for documents and decks

However, we're running into a myriad of issues. I'll outline some of the primary ones below, in order of most to least important.

1. Design System Manager: Overall design system portal that does style guides & component libraries, rules & definitions, and also does version control to manage updates (that’s really tough to keep track of now)
2. Advanced prototyping: Ability to add more advanced things like animations, component states, interactive elements, conditions/logic, etc. to better present functionality to developers/stakeholders. Overall stronger developer handoff with more advanced features that allow designers to design more accurately to code and gives devs more to work with (Seems FramerX is leading this charge: https://www.framer.com/development)
3. Responsive design: Setting component constraints and responsive resize to design faster and more strategically
4. Project management: Ability to track project status, assign tasks to team members, nest various prototypes & design files within one project, and has version control
5. Annotations & documentation - Seamless, easy way to create annotations for specifications & documentation for developer handoff (UXpin seems to be leading this charge https://www.uxpin.com/studio/user-guide/the-uxpin-editor/)
6. User Flow/Site Map generator - would be amazing to have a tool that generates these vs. having to manually do them (OverFlow seems to do this)

Obviously one tool won’t have EVERYTHING, but I’m trying to wrap my brain around all of the tools out there and which tool, or small collection of tools, make the most sense for my team. Any advice?

Answer 1

There is no correct answer to this questions. My "educated" preference those days is always Figma plus task management tool such as Asana or Jira.

TL;DR version of benefits of Figma: same or better then Sketch, but available on all platforms and in browsers, replaces InVision for prototyping and comments, and Zeplin because you can onboard devs to Figma and they can grab latest version of whatever they need themselves.

*Lengthy versions

Design System Manager

I think Figma is equipped quite well to create and maintain Design System. You can define font styles and color scheme, and components system and implementation IMO is much more powerful then Sketch's.

Advanced prototyping Figma's prototyping improved quit a bunch during last 2 years and now comparable with InVision. You can easily emulate hover states, sticky elements, vertical and horizontal scrolling and so on.

Responsive design You can design responsive, scalable components but in reality you will still need to have at-least 2 versions of layout and in many cases 2 versions of each component. If you want html/css-like flexibility, you need to design in html and css.

Collaboration "To-the-point" comments and replies are nothing to get excited about, it is the same as in InVision and Marvel, but having it directly in the tool helps cut back on iteration time.

Single source of truth Unlike file-based Sketch, Figma files are hosted in the cloud and live updated: no file versions and conflict. This is huge if there is more then one designer in the team. It is a pain in the neck to try to sync sketch files at the end of the day. If needed Figma file can be taken offline.

Plus, Developer handoff eliminates the need for Zeplin or waiting for designer to extract assets.

Components and Libraries Components are similar to Sketch’s symbols, but I think that Figma’s implementation is mush better, because it offers more control over what you can override in instances (not just scale, text and internal symbols). In the sense, Figma implantation is closer to OOP classes and instances. Add libraries to the mix and you have perfect tool to create design libraries.

I have build my design process so that I have everything design related in Figma, plus thin layer of "Definition of Done" and related links in Jira or Asana ticket.