Successfully reported this slideshow.

Universal Design Tokens

2

Share

Loading in …3
×
1 of 20
1 of 20

Universal Design Tokens

2

Share

Download to read offline

A proposal for creating a standardised file format for storing design token data. More info at: https://udt.design/

The hope is that, by standardising the file format, new and existing tools that operate on design tokens will become more interoperable than they are today.

A proposal for creating a standardised file format for storing design token data. More info at: https://udt.design/

The hope is that, by standardising the file format, new and existing tools that operate on design tokens will become more interoperable than they are today.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Universal Design Tokens

  1. 1. Universal Design Tokens Design System Exchange, London 6th December 2018 James Nash ( @c1rrus )
  2. 2. Design Tokens today
  3. 3. Design Token Tools SalesForce Theo Amazon Style Dictionary Dragoman InVision DSM
  4. 4. Bespoke tokens Firefox Photon Blackbaud Sky UX
  5. 5. What they do Token data Token tool Output files
  6. 6. Duplication Theo YAML / JSON DSM JSON Style Dictionary JSON
  7. 7. Complex examples Conversion script URL generator script EightShapes Contrast Grid
  8. 8. What if...
  9. 9. One file format Native support Manipulation
  10. 10. UNIX philosophy • Write programs that do one thing and do it well. • Write programs to work together. • Write programs to handle text streams, because that is a universal interface.
  11. 11. Imagine...Lyft ColorBox EightShapes TextCrop Modular Scale Google Fonts
  12. 12. Beyond exports for code
  13. 13. The plan
  14. 14. 3 main tasks • Write human-readable specs and docs • Intro / tutorial • Examples, recipes, FAQs, etc. • Create schema for validation • JSON Schema? • Help tool developers maintain interoperability • Build reference implementation of parser / serialiser • Prove that things work • Potential basis for other tools to use
  15. 15. A rough draft
  16. 16. Risky live demo
  17. 17. Next steps • Get initial thoughts and feedback from community • Open it up to a wider audience (#design-tokens ?) • Find collaborators
  18. 18. Don’t want this...
  19. 19. ...so: • Engage with maintainers of Theo, Style Dictionary, etc. • Do we (continue to) make something new? • Pro: Can try new things. No politics. • Con: Reinventing the wheel. Yet another token tool. • Do we evolve Theo or SD’s format? • Pro: Probably quicker. Existing user base. • Con: Who gets to be the basis and why? Would there be politics?
  20. 20. Thanks! Questions?

Editor's Notes

  • Various design token tools exist already.

    SalesForce Theo: https://github.com/salesforce-ux/theo
    Amazon Style Dictionary: https://amzn.github.io/style-dictionary/
    Dragoman: https://natebaldwindesign.github.io/dragoman/
    InVision DSM: https://www.invisionapp.com/design-system-manager/
  • Some design systems have created their own, bespoke token file formats and tools.

    Firefox Photon tokens: https://design.firefox.com/photon/resources/design-tokens.html
    Blackbaud Sky UX tokens: https://github.com/blackbaud/skyux-design-tokens
  • What all these design token tools have in common is that they read design token data (i.e. a “single source of truth”) from somewhere (usually a file) and convert the tokens into a variety of output formats.
  • While each design token tool has slightly different capabilities, ultimately, they all do the same job.
    They also all use JSON and/or YAML to store design token data. The problem is, they each structure those file very differently. (Note that DSM is web-based and stores its design token data internally. However, it can output it as JSON)
  • Shopify’s Polaris team stitched together DSM and Theo. They manage colours in DSM (via Sketch + Craft plug-in), but then have scripts that fetch the token data from DSM and feed it into Theo for further conversion. See: https://github.com/Shopify/polaris-tokens/blob/master/.github/CONTRIBUTING.md#editing-design-tokens

    ---
    I made a little Node script that generates a URL to view all colours from DSM / Brand.ai in the EightShapes Contrast Grid tool, to check which pairings have accessible contrast ratios.
    https://gist.github.com/james-nash/39bd715d57a31c3de4cb96b58ca0d627
  • What if we had one, universal file format for design tokens?
    Tools could read that format and directly export it (nothing new)
    Or, we could convert into another token format and then use existing tools
    The conversion could be two-way, enabling easy migration between tools
    Tools could read it and feed it into other tools (e.g. a11y tests)
    Existing tools could natively export this format
    Or import it
    And we could make tools to simply manipulate design token data directly (e.g. merging files, filtering values, combining colours into pairings and gradients, etc.)
    That’s what Universal Design Tokens aims to achieve!
  • Standardising around a common file format, could give rise to a vibrant eco-system of little tools and utilities that can be easily stitched together in myriad ways.
  • We’ve already got wonderful tools for manipulating colours, typographic scale, font pairings, spacing, etc. Imagine if they could all read and write UDT files. They’d become specialised token editor tools we could all use!

    https://www.colorbox.io/
    https://www.modularscale.com/
    https://fonts.google.com/
    http://text-crop.eightshapes.com/
  • In a similar vein, design and prototyping tools could add built-in support to import and export UDT files.

    Design tokens can also be useful elsewhere. E.g. to be used within templates for Office documents (Mozilla already did something similar for Photon - it exports colours to a Keynote template). Or for design linting / checking tools like Toybox (https://www.toyboxsystems.com/). That could either be via intermediate tools that read UDT and export something else, or via direct support. Either way, having a common format will make it easier to create and maintain such tools.
  • https://github.com/universal-design-tokens
    https://udt.design/
  • https://xkcd.com/927/
  • ×