4

Usually when I have worked on design systems in the past, a clear and robust IA helps to create a convention and vocabulary to describe all the abstract and concrete elements contained within. And this is done in an implementation agnostic manner so that developers are free to choose how they implement the designs as long as it follows the logic and consistency outlined in the design language used to create the design system.

There is a lot of talk about design tokens among the design and development community, which I see as the lack of clarity in the communication or understanding between designers and developers, and therefore the need to 'codify' at least some of the visual design aspects as it is applied to the UI components. Design tokens appears to be the currently accepted (or trending) solution to this problem, although I am wondering if it is worth looking at the root cause of the issue a bit further instead of looking at putting a band-aid on the problem instead.

For teams that have worked on design systems where design tokens are included (examples include Adobe Spectrum, Salesforce Lightning and Invision DSM just to name a couple), do the designers work with the developers when it comes to design tokens, or is this just something that the development team does separately to designers?

3
  • My understanding of design tokens is that it allows for a single place to update things such as colours, fonts or more complex things that affect multiple systems implented in different languages. It's a way to keep things flexible should you want to change them with less effort required, a design system is never finished after all. I don't see it as a fix for clarity or lack of communication as it has other benefits.
    – Martyn
    Feb 19 at 7:33
  • Can you clarify why you see design tokens as a band-aid for the miscommunication between designers and developers? Design tokens are especially useful when it comes to white label design systems. Fill in the needed values for a particular brand and you are good to go.
    – jazZRo
    Feb 19 at 8:32
  • @jazZRo my experience with design tokens is when there are no designers who are dedicated or involved in the research and IA of the design system, and they are used to codify the rules further beyond having the same code of the same components to also using the components in a similar way (which can be done using things like patterns and templates). Often there's no need to white label design systems unless you publish APIs and want to have the same look & feel across the application ecosystem, or if it is an open-source design system. Hence I am asking the question :)
    – Michael Lai
    Feb 20 at 1:55
2
+50

As a developer who now leads the UX at my current company and is responsible for a the design aspects I think you've hit the nail on the head referring to design tokens as a method of clarifying communication.

Broadly speaking, I see the following points worth raising.

  • Design tokens are a method of abstracting the design process, they move developers away from using hardcoded values which are then hard to change (in volume), thereby making change easier
  • Design tokens are a method of making decision making quicker, for example, it's easier to decide between large or medium than it is to step pixel by pixel
  • Design tokens give you a right answer for decisions, linked to the previous point, it's hard to know whether 14px, 15px, 16px, 17px or 18px is the "right" answer to a question? Having fewer options and those options being more obviously right or wrong builds consistency.

To your question about who does this, it needs to be a group conversation it's less efficient to have a design team working in systems and development not, or vice versa. The tokens become the language you cross communicate with.

From your comment, yes, you could argue that if appropriate templates are defined and implemented then tokens may not be strictly speaking necessary, they may end up being an implementation detail, but even those components may want to leverage the advantage of using tokens in their definitions to accommodate change more easily.

EDIT: Well, thing is, I'm leading the design aspects at the moment as well, so in a way I've answered as a designer with a developers background!

Whilst it's possible a pure graphic designer might have differing opinions, I see a lot of UI designers (at least those as part of a team rather than agency) understand the benefit of reduced handover costs. Whether you design with a grid system, type scale or brand colour palette the design team has its own rules and as part of their work they need to communicate those.

I would suggest the original three points stand up for design work as well as development, both as an individual and as part of providing guidance, boundaries and workflow to a design team.

I'm fortunate enough to work in a team that is familiar enough with tools like Figma to interrogate designs and work out sizings, colours etc, but if I wasn't I would need to find some other way to communicate the design intent in some way that makes it easy to develop and achieve a consistent output.

1
  • +1 I think you've answered it perfectly (at least from the developer's point of view), so I am interested to see if any designers in your team want to have a go at answering this from their perspective :) Well done for being a developer who is leading the UX (if that's what you want to do :D)!
    – Michael Lai
    Feb 22 at 22:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.