Component Design
Everyone is looking for ways to deliver more, faster. In an effort to provide greater value, many leaders choose to implement design systems. Kelly Rader shares a quick primer on component design and the use of tokens.
Everyone is looking for ways to deliver more, faster. In an effort to provide greater value, many leaders choose to implement design systems. Kelly Rader shares a quick primer on component design and the use of tokens.
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.
It is a named value pair that stores design information with context.
Typically a designer and UI developer collaborate on tokens, adhering of course to agreed token naming governance.
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.
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.
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.
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 Sarah Falcon directly at sarah.falcon@objectedge.com.