• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • Backend
    • Frontend
    • AI/ML
    • DevOps
    • Dev Life
    • Soft Skills
    • Infographics
  • Talent
    • Discover Talent
    • Jobs
  • Partners
  • For Companies
  • IT
  • ES
Home » Frontend » Design/UX » Design Tokens and Cross Platform Coherence – Part 3
Design/UX

Design Tokens and Cross Platform Coherence – Part 3

What are design tokens and what role do they play in cross-platform coherence? Let's check it out in this guide.

March 19, 2020 by Luca Ferretti

Table Of Contents
  1. Design Tokens
  2. Using pre-defined transforms and formats
  3. Building custom transforms and formats

Design Tokens

In the previous issue of this series of articles dedicated to “Style Dictionary” we have seen the ways in which token designs are managed and stored. The implicit use of the CTI structure (Category / Type / Item) still allows to organize the definitions and the values of the various design tokens, distributing them in various JSON files, in the most appropriate way for each project.

In this article, we will see how Style Dictionary converts this set of design tokens into assets that can then be used in various platforms (web, Android, iOS, Sketch, …) and how this process can be customized or refined.

The transition from JSON files to assets goes through 3 distinct phases:

  • Deep Merge
  • Transform functions
  • Format functions

The “Deep Merge” phase takes all files within path defined by “source” attribute in configuration and performs, literally, a merge of all tokens in a single object. Any property value collisions (i.e. the same token defined in multiple places) are detected, warning when the value of an existing token is replaced by a new value found in another source JSON file.

When the single object is ready, the Style Dictionary build system iterates over any “platform” declared in configuration and performs all transforms defined for the given platform and formats the transformed tokens, saving into files.

Representation of Style Dictionary build chain, from tokens to assets

Obviously, Style Dictionary provides pre-defined transform and format functions for common styles and platforms but allows to define custom functions too.

Using pre-defined transforms and formats

Let’s see a simple but concrete example of how Style Dictionary build system works.

First of all, we start from a single JSON file that stores a single “color” token:

Now, if we want to build a CSS file from this token we need at least:

  • something to transform the token name to valid and meaningful “css variable”
  • something to transform the token value to a valid CSS value for the color
  • something to save a valid CSS file

Using predefined transform and format functions we can write the following Style Dictionary build configuration:

With this configuration and simply launching style-dictionary build we can generate the following CSS file:

Style Dictionary provides many pre-defined functions, at least all the functions you need to transform and format your tokens safely and quickly for all common platforms. For example, the value transform function “color/css” used in the previous example, converts a design token value that stores a color data into hex or rgb string depending on if it has transparency.

Building custom transforms and formats

What if you want or need some custom function? With a little JavaScript, it’s a breeze to provide your own transform or format.

Let’s see an example. In a perfect world, CSS selectors can use any UTF-8 character, but by now you are limited to a-z, numbers, hyphens, and underscores. We can proudly declare this is boring with a custom Style Dictionary transform function!

In order to use custom functions, you need to write and execute through NodeJS some specific tasks.

If you save the following file as build.js and execute it with node build.js, everything goes as before (in fact, we are building the same tokens with the same configuration, just using a different “launcher”).

To apply a custom transform function we have to use it in “transforms” key of Style Dictionary configuration. So, replace “name/cti/kebab” with our (unimplemented by now) “name/bored“.

then modify our build.js file as following:

Voilà! A bored CSS variable:

This ends our introductory journey in Style Dictionary and design tokens, any additional follow-up may depend on actual styles and need of a real life project. But fear not: just head your browser to Style Dictionary website for more info and … start to bridge your gap between design and development 😉

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Codemotion Rome User Experience

Creating the interface of a smart contract
Previous Post
IBM 2020 Global Climate Change Challenge is calling YOU: do you care about your world enough to answer the call?
Next Post

Related articles

  • Web Animation: How to Create Engaging and Interactive User Experiences
  • OptiFine for Minecraft? You Should Definitely Try It
  • React Component Libraries for Boosting Your UI Design
  • Deceptive Patterns In UX Design – How To Avoid Them?
  • Metaverse: A Hitchhiker’s Guide to the Future of Immersive Experiences
  • Scroll-Triggered Animations: Do’s and Don’ts
  • 7 Ways to Use UX Design to Enhance User Data Security
  • Move Over DevOps! Time for DesignOps and UX Engineers
  • What Are the Main Areas of Development for Web Designers to Land Their Dream Job?
  • 10 Tips for Your Next eCommerce Web Design Project

Primary Sidebar

Free Whitepaper: The Ultimate Azure Cybersecurity Handbook.

Codemotion Talent · Remote Jobs

Flutter Developer

3Bee
Full remote · Android · Flutter · Dart

Python Back-end Developer

h-trips.com
Full remote · Django · Pandas · PostgreSQL · Python

AWS Cloud Architect

Kirey Group
Full remote · Amazon-Web-Services · Ansible · Hibernate · Kubernetes · Linux

AWS SysOps Administrator

S2E | Solutions2Enterprises
Full remote · Amazon-Web-Services · Terraform · Linux · Windows · SQL · Docker · Kubernetes

Latest Articles

scalable vue.js application

Best Practices for Building a Scalable Vue.js Application

Frontend

microservices digital transformation. From monolith to microservices concept.

Why You Need Application Mapping for Your Microservices Applications

Microservices

cross-platform development, frameworks

Ionic Framework: Why It’s Still Relevant

Mobile Developer

Linux: The Open Source Revolution and Its Impact on the Lives of Developers

Dev Life

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a Contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • RSS