+1 (925) 943-5558

Component Design

May 9, 2019

by

Kelly Rader

Product leaders focused on ROI understand design is a fundamental part of the total cost of ownership (TCO) of any product. Everyone is looking for ways to deliver more, faster. In an effort to provide greater value, many leaders choose to implement design systems. The natural next step is to componentize design further into something called tokens —bits of platform agnostic code that makes it easier to deliver continuous product value.

While the topic of tokens span well more than design, I primarily have the pleasure of working with clients to put token repositories in place to help them scale their brand’s design language. Here’s a quick primer.

First, what is a design token exactly?

It is a named value pair that stores design information with context.

Who creates tokens?

Typically a designer and UI developer collaborate on tokens, adhering of course to agreed token naming governance.

Is naming governance really necessary?

Yes, it important to agree on a taxonomy for token names. This makes it much easier for a shared group of people using the repo to find specific tokens once there are thousands or more in the set.

So who uses the tokens?

UI developers use design tokens in lieu of hard-coding values store in the token. This streamlines development and maintenance, speeding delivery and lowering costs along the way.

What are the benefits of tokens?

The benefits for using design tokens are probably best illustrated through a simple example. Let’s say a brand has a public website, a commerce platform and two native apps — one iOS and the other Android. And let’s say that brand wants to update the color of a design system element. To make that happen, a UI developer needs to update the color uniquely for each platform.

  • RGB values formatted in a .css or SASS file for the website
  • 6 digit Hex value for the commerce platform
  • RGBA values formatted as .json format for iOS
  • 8 digit Hex (AARRGGBB) values formatted as .xml for Android

With a token repo, UI developers pull the token from the repo and implement it across a technology ecosystem of different platforms seamlessly. The designer updates the design. The developer updates the code. Everyone respects each other’s primary product contributions.

Of course token repos (like design systems) are living, breathing systems, too. Product teams must continuously update token repos, add new tokens, edit existing token and retire some as needed.

If you are looking to craft a design system or build a token repo for your brand, reach out to Object Edge or Kelly Rader directly at kelly.rader@objectedge.com.


About the Author

Kelly Rader, CUA and VP of Digital Experience

Digital pioneer with 20+ years of experience bringing innovative digital products and services to market successfully for many industries and within a variety of challenging environments ranging from start-up to Fortune 100 companies. Effective in gaining organizational alignment on strategy and delivering creative solutions that solve real business problems.


Download White Paper

DOWNLOAD

Related Posts

Ready to start your project?

Start by doing what's necessary, then do what's possible.

Schedule a Consultation Call