• 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
    • AI/ML
    • Backend
    • Frontend
    • Dev Life
    • DevOps
    • Soft Skills
  • Talent
  • Partners
  • For Companies
Home » Frontend » Design/UX » Design Tokens and Cross Platform Coherence – Part 1
Design/UX

Design Tokens and Cross Platform Coherence – Part 1

To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design tokens.

Last update February 6, 2020 by Luca Ferretti

danny banks amazon

You did it! You have exceeded one million users and your team has grown. Now there are enough teammates to directly and dedicatedly pursue the development of the web platform, smartphone and tablet apps, and smart TV apps, but also to reorganise the workflows to proceed independently for individual features.

When teams grow, it is not uncommon for single units to take small steps independently. Over the long haul, those steps might end up invalidating the initial cohesion. Developers know how easy it is to yield to the temptation of copy-and-paste from one codebase to another just to discover, months later, that the original code has changed and it wasn’t updated in any occurrences. Like single pieces of code, the style elements that contribute to defining brand identity end up fraying.

The digital world has contributed to multiplying possible touchpoints with users and customers, without offering the chance of managing the basic elements of the style in a unified way for all those touchpoints. For example, just think about the diverse ways in which the three main digital “platforms” (web, iOS, and Android) allow you to define the same colour:

Fortunately, there are several tools that allow you to keep this potential uncontrolled evolution under direction. It is, therefore, possible to define a coherent and common set of design decisions and rules upstream (the design system) and use these tools to export these rules to all the platforms you need.

Design Systems and Design Tokens

Brand identity is not just a notion for marketing but is also the starting point for consistent user experience across different channels. In fact, in addition to more immediate benefits such as confidence and learnability, consistency in UX also affects the trust and credibility of the brand. Customers can recognise as robust and good a company that offers them consistent UX across channels.

To facilitate the definition and communication to the various stakeholders of UX and visual guidelines, in recent years designers and UX experts have relied on a tool that takes the name of “design system”.

A design system is a collection of reusable components that can be assembled together to build any number of applications. Examples of design systems include Material Design from Google, ADG from Atlassian and Lightning Design System from Salesforce. Design systems may help to enhance brand coherence, to fit user experience and to work on a shared library of patterns.

Each element of the design system can be broken down into increasingly independent elements until it reaches the “atomic” elements. In this attempt to engineer visual components and UX, those entities that store visual design attributes are defined as “design tokens“. Those tokens can and must be defined in a platform-independent format that is readable by both humans and machines.

Design tokens should be able to store all the characters that distinguish the UX: colours, typographic elements, iconographic elements, movements and animations, dimensions and elevation. So a good design token tool should offer a system that can be agnostic, structured and relational.

At Codemotion Rome 2019, Danny Banks shared some cues about how to effectively define and manage design tokens to build consistent cross-platform interfaces. We’ll show some in the next article of this series. Stay tuned!

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Codemotion Rome User Experience

Change to the most in-demand job of 2020: Blockchain Developer
Previous Post
Peter Todd: Helping people to solve their problem with Cryptography
Next Post

Related articles

  • 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
  • How to Bring UX Designers and Developers Together
  • Inclusive Design and the Value of Emerging Tech in UX
  • Why you should care about inclusive design
  • The ultimate UI design guide
  • How a mouse and keyboard can improve your life as a coder (discount inside)
  • Design Tokens and Cross Platform Coherence – Part 3

Primary Sidebar

The IT Industry in Italy: Trending Positions, Salaries, and Main Skills for 2022

Codemotion and Adecco’s guide to understanding the IT working environment in Italy. Download here:

Adecco Whitepaper IT Report

Latest

grpc, http, rest

GRPC Approach for Improved Software Development

Web Developer

Using the Twelve-Factor Methodology in Cloud-Native Microservices

Microservices

svelte, javascript frameworks, vue.js, angular

Svelte: Why Is It an Innovation to Javascript Frameworks?

JavaScript

blockchain, avascan, avalanche, defikingdom, subnet

How to Deploy a Subnet on Avalanche Blockchain: The Case of DeFi Kingdom

Blockchain

automation, security, cybersecurity

How to Implement a Security Testing Program For Web Applications

Cybersecurity

Related articles

  • 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
  • How to Bring UX Designers and Developers Together
  • Inclusive Design and the Value of Emerging Tech in UX
  • Why you should care about inclusive design
  • The ultimate UI design guide
  • How a mouse and keyboard can improve your life as a coder (discount inside)
  • Design Tokens and Cross Platform Coherence – Part 3

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

DOWNLOAD APP

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

  • 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

DOWNLOAD APP

CONFERENCE CHECK-IN