About a year ago, Colm Tuite reviewed the state of UI design tools and found them wanting: Design Tools Are Running Out of Track. If anything, his critique feels even more relevant a year later. Our most popular design tools are fundamentally disconnected from the realities and constraints of working software:
- They generate static images in an era of voice, video, motion, and complex interactions. (“Our design tools should manipulate the actual product, not a picture of it.”)
- They have no awareness of the layout conventions of the web, so they don’t help designers work with the grain of CSS grid and flexbox.
- They’re tuned for infinite flexibility instead of usefully embracing the constraints of a design system or code base.
As I’ve worked with more and more companies struggling to design at scale, this last point has proven to be especially troublesome when maintaining or evolving existing software. Most design tools are not well tuned to support designer-developer collaboration within design systems (though some are beginning to innovate here). Tuite writes:
Your design tool is never going to tell you that you can’t do something. It’s never going to pull you up for using an off-brand color. It’s never going to prevent you from using a whitespace value which doesn’t belong in your spacing scale. It’s never going to warn you that 20% of the population literally cannot see that light gray text you’ve just designed.
And why not…? Because design tools don’t care.
Design tools are so waywardly enamoured with a vision for unlimited creativity that they have lost sight of what it means to design sensibly, to design inclusively, to design systematically.
Put simply, design tools allow us to do whatever the hell we want. To some extent, this level of boundless creativity is useful, especially in the ideation phases. As UI designers though, the majority of our workflow doesn’t call for much creativity. Rather, our workflow calls for reuse, repetition, familiarity and standardisation; needs that our tools do little to satisfy.
Developer culture and workflow have a strong bias toward consistency and reuse. That’s less true of design, and the tools are part of the problem. When there are no guardrails, it’s easy to wander off the road. Our systems don’t help us stay the path within established design systems.
This causes a disconnect between designers and developers because design comps drift from the realities of the established patterns in the code base. A Sketch library—or any collected drawings of software—can be a canonical UI reference only when the design is first conceived. Once the design gets into code, the product itself should be the reference, and fresh design should work on top of that foundation. It’s more important that our design libraries reflect what’s in the code than the reverse. Production code—and the UI it generates—has to be the single source of truth, or madness ensues.
That doesn’t mean that developers exclusively run the show or that we as designers have no agency in the design system. We can and should offer changes to the design and interaction of established patterns. But we also have to respect the norms that we’ve already helped to establish, and our tools should, too.
That’s the promise of design-token systems like InVision’s Design System Manager. Tokens help to establish baseline palettes and styles across code and design tools. The system gets embedded in whatever environment where designers or developers prefer to work. Designers and developers alike can edit those rules at the source—within the system itself.
This approach is a step forward in helping designers and developers stay in sync by contributing to the same environment: the actual product and the pattern library that feeds it. We’ve seen a lot of success helping client teams to make this transition, but it requires adopting a (sometimes challenging) new perspective on how to work—and where design authority lies. Big rewards come with that change in worldview.
Is your organization wrestling with inconsistent interfaces and duplicative design work? Big Medium helps companies scale great design and improve collaboration through design systems. Get in touch for a workshop, executive session, or design engagement.
