SlideShare a Scribd company logo
Universal
Design
Tokens
Design System Exchange, London
6th December 2018
James Nash ( @c1rrus )
Design Tokens today
Design Token Tools
SalesForce Theo
Amazon Style Dictionary Dragoman
InVision DSM
Bespoke tokens
Firefox Photon
Blackbaud Sky UX
What they do
Token data
Token tool
Output files
Duplication
Theo YAML / JSON
DSM JSON
Style Dictionary JSON
Complex examples
Conversion script
URL generator script EightShapes Contrast Grid
What if...
One file format
Native
support
Manipulation
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.
Imagine...Lyft ColorBox
EightShapes TextCrop
Modular Scale
Google Fonts
Beyond exports for code
The plan
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
A rough draft
Risky live demo
Next steps
• Get initial thoughts and feedback from community
• Open it up to a wider audience (#design-tokens ?)
• Find collaborators
Don’t want this...
...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?
Thanks!
Questions?

More Related Content

What's hot

Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
Vani Jain
 
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany SonefeldCreating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
uxpin
 
Design System 101
Design System 101Design System 101
Design System 101
Mayank Dhawan
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
uxpin
 
Website Usability
Website UsabilityWebsite Usability
Website Usability
Vincci Kwong
 
An introduction to fundamental architecture concepts
An introduction to fundamental architecture conceptsAn introduction to fundamental architecture concepts
An introduction to fundamental architecture concepts
wweinmeyer79
 
Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Study
uxpin
 
The taxonomy of blockchain and cryptocurrency
The taxonomy of blockchain and cryptocurrencyThe taxonomy of blockchain and cryptocurrency
The taxonomy of blockchain and cryptocurrency
Blockchain and CryptoAsset (K) Ltd.
 
Solution design & procurement approach v1
Solution design & procurement approach v1Solution design & procurement approach v1
Solution design & procurement approach v1
Doug Walters
 
A design system. A year in review.
A design system. A year in review.A design system. A year in review.
A design system. A year in review.
James Ferguson
 
Business Analyst Training
Business  Analyst  TrainingBusiness  Analyst  Training
Business Analyst Training
Craig Brown
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at Scale
Sarah Federman
 
Feature store: Solving anti-patterns in ML-systems
Feature store: Solving anti-patterns in ML-systemsFeature store: Solving anti-patterns in ML-systems
Feature store: Solving anti-patterns in ML-systems
Andrzej Michałowski
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
Drew Burdick
 
Odoo Sales Strategy 2020
Odoo Sales Strategy 2020Odoo Sales Strategy 2020
Odoo Sales Strategy 2020
Odoo
 
Design System
Design SystemDesign System
Design System
Charlie Weston
 
UXPA 2021: Journey Mapping Tools and Techniques: Research, Design and Action ...
UXPA 2021: Journey Mapping Tools and Techniques: Research, Design and Action ...UXPA 2021: Journey Mapping Tools and Techniques: Research, Design and Action ...
UXPA 2021: Journey Mapping Tools and Techniques: Research, Design and Action ...
UXPA International
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Anne Grundhoefer
 
Business Process Management PowerPoint Presentation Slides
Business Process Management PowerPoint Presentation Slides Business Process Management PowerPoint Presentation Slides
Business Process Management PowerPoint Presentation Slides
SlideTeam
 
DesignOps 101
DesignOps 101DesignOps 101
DesignOps 101
Macy Fontaine
 

What's hot (20)

Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany SonefeldCreating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
 
Design System 101
Design System 101Design System 101
Design System 101
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
 
Website Usability
Website UsabilityWebsite Usability
Website Usability
 
An introduction to fundamental architecture concepts
An introduction to fundamental architecture conceptsAn introduction to fundamental architecture concepts
An introduction to fundamental architecture concepts
 
Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Study
 
The taxonomy of blockchain and cryptocurrency
The taxonomy of blockchain and cryptocurrencyThe taxonomy of blockchain and cryptocurrency
The taxonomy of blockchain and cryptocurrency
 
Solution design & procurement approach v1
Solution design & procurement approach v1Solution design & procurement approach v1
Solution design & procurement approach v1
 
A design system. A year in review.
A design system. A year in review.A design system. A year in review.
A design system. A year in review.
 
Business Analyst Training
Business  Analyst  TrainingBusiness  Analyst  Training
Business Analyst Training
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at Scale
 
Feature store: Solving anti-patterns in ML-systems
Feature store: Solving anti-patterns in ML-systemsFeature store: Solving anti-patterns in ML-systems
Feature store: Solving anti-patterns in ML-systems
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
 
Odoo Sales Strategy 2020
Odoo Sales Strategy 2020Odoo Sales Strategy 2020
Odoo Sales Strategy 2020
 
Design System
Design SystemDesign System
Design System
 
UXPA 2021: Journey Mapping Tools and Techniques: Research, Design and Action ...
UXPA 2021: Journey Mapping Tools and Techniques: Research, Design and Action ...UXPA 2021: Journey Mapping Tools and Techniques: Research, Design and Action ...
UXPA 2021: Journey Mapping Tools and Techniques: Research, Design and Action ...
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
 
Business Process Management PowerPoint Presentation Slides
Business Process Management PowerPoint Presentation Slides Business Process Management PowerPoint Presentation Slides
Business Process Management PowerPoint Presentation Slides
 
DesignOps 101
DesignOps 101DesignOps 101
DesignOps 101
 

Similar to Universal Design Tokens

OpenMockup - Presentation apr/2016
OpenMockup - Presentation apr/2016OpenMockup - Presentation apr/2016
OpenMockup - Presentation apr/2016
Xavi Montero
 
Sudipta_Mukherjee_Resume_APR_2023.pdf
Sudipta_Mukherjee_Resume_APR_2023.pdfSudipta_Mukherjee_Resume_APR_2023.pdf
Sudipta_Mukherjee_Resume_APR_2023.pdf
sudipto801
 
P1 2017 python
P1 2017 pythonP1 2017 python
P1 2017 python
Prof. Wim Van Criekinge
 
2015 bioinformatics python_introduction_wim_vancriekinge_vfinal
2015 bioinformatics python_introduction_wim_vancriekinge_vfinal2015 bioinformatics python_introduction_wim_vancriekinge_vfinal
2015 bioinformatics python_introduction_wim_vancriekinge_vfinal
Prof. Wim Van Criekinge
 
2016 bioinformatics i_python_part_1_wim_vancriekinge
2016 bioinformatics i_python_part_1_wim_vancriekinge2016 bioinformatics i_python_part_1_wim_vancriekinge
2016 bioinformatics i_python_part_1_wim_vancriekinge
Prof. Wim Van Criekinge
 
Hcplphx920
Hcplphx920Hcplphx920
Hcplphx920
Thinkful
 
Sudipta_Mukherjee_Resume-Nov_2022.pdf
Sudipta_Mukherjee_Resume-Nov_2022.pdfSudipta_Mukherjee_Resume-Nov_2022.pdf
Sudipta_Mukherjee_Resume-Nov_2022.pdf
Sudipta Mukherjee
 
After the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANAfter the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEAN
Jeff Fox
 
P1 2018 python
P1 2018 pythonP1 2018 python
P1 2018 python
Prof. Wim Van Criekinge
 
.NET per la Data Science e oltre
.NET per la Data Science e oltre.NET per la Data Science e oltre
.NET per la Data Science e oltre
Marco Parenzan
 
Building A Platform From Open Source At Yahoo
Building A Platform From Open Source At YahooBuilding A Platform From Open Source At Yahoo
Building A Platform From Open Source At Yahoo
Dustin Whittle
 
Three's Company - Writing for the Desktop, Browser, and Phone
Three's Company - Writing for the Desktop, Browser, and PhoneThree's Company - Writing for the Desktop, Browser, and Phone
Three's Company - Writing for the Desktop, Browser, and Phone
Sarah Dutkiewicz
 
Markdown - friend or foe?
Markdown - friend or foe?Markdown - friend or foe?
Markdown - friend or foe?
Ellis Pratt
 
Reaktive Programmierung mit den Reactive Extensions (Rx)
Reaktive Programmierung mit den Reactive Extensions (Rx)Reaktive Programmierung mit den Reactive Extensions (Rx)
Reaktive Programmierung mit den Reactive Extensions (Rx)
NETUserGroupBern
 
Generative AI in CSharp with Semantic Kernel.pptx
Generative AI in CSharp with Semantic Kernel.pptxGenerative AI in CSharp with Semantic Kernel.pptx
Generative AI in CSharp with Semantic Kernel.pptx
Alon Fliess
 
Key Features Of The Pseudo Code
Key Features Of The Pseudo CodeKey Features Of The Pseudo Code
Key Features Of The Pseudo Code
Angilina Jones
 
Build your own Language - Why and How?
Build your own Language - Why and How?Build your own Language - Why and How?
Build your own Language - Why and How?
Markus Voelter
 
CLR_via_CSharp_(Jeffrey_Richter_4th_Edition).pdf
CLR_via_CSharp_(Jeffrey_Richter_4th_Edition).pdfCLR_via_CSharp_(Jeffrey_Richter_4th_Edition).pdf
CLR_via_CSharp_(Jeffrey_Richter_4th_Edition).pdf
ssuserbe139c
 
Open Writing ! - Collaborative Authoring on Apache’s First Open-Source Cloud ...
Open Writing ! -	Collaborative Authoring on Apache’s First Open-Source Cloud ...Open Writing ! -	Collaborative Authoring on Apache’s First Open-Source Cloud ...
Open Writing ! - Collaborative Authoring on Apache’s First Open-Source Cloud ...
Radhika Puthiyetath
 
A Brief Intro to Adobe Flex
A Brief Intro to Adobe FlexA Brief Intro to Adobe Flex
A Brief Intro to Adobe Flex
Chad Udell
 

Similar to Universal Design Tokens (20)

OpenMockup - Presentation apr/2016
OpenMockup - Presentation apr/2016OpenMockup - Presentation apr/2016
OpenMockup - Presentation apr/2016
 
Sudipta_Mukherjee_Resume_APR_2023.pdf
Sudipta_Mukherjee_Resume_APR_2023.pdfSudipta_Mukherjee_Resume_APR_2023.pdf
Sudipta_Mukherjee_Resume_APR_2023.pdf
 
P1 2017 python
P1 2017 pythonP1 2017 python
P1 2017 python
 
2015 bioinformatics python_introduction_wim_vancriekinge_vfinal
2015 bioinformatics python_introduction_wim_vancriekinge_vfinal2015 bioinformatics python_introduction_wim_vancriekinge_vfinal
2015 bioinformatics python_introduction_wim_vancriekinge_vfinal
 
2016 bioinformatics i_python_part_1_wim_vancriekinge
2016 bioinformatics i_python_part_1_wim_vancriekinge2016 bioinformatics i_python_part_1_wim_vancriekinge
2016 bioinformatics i_python_part_1_wim_vancriekinge
 
Hcplphx920
Hcplphx920Hcplphx920
Hcplphx920
 
Sudipta_Mukherjee_Resume-Nov_2022.pdf
Sudipta_Mukherjee_Resume-Nov_2022.pdfSudipta_Mukherjee_Resume-Nov_2022.pdf
Sudipta_Mukherjee_Resume-Nov_2022.pdf
 
After the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANAfter the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEAN
 
P1 2018 python
P1 2018 pythonP1 2018 python
P1 2018 python
 
.NET per la Data Science e oltre
.NET per la Data Science e oltre.NET per la Data Science e oltre
.NET per la Data Science e oltre
 
Building A Platform From Open Source At Yahoo
Building A Platform From Open Source At YahooBuilding A Platform From Open Source At Yahoo
Building A Platform From Open Source At Yahoo
 
Three's Company - Writing for the Desktop, Browser, and Phone
Three's Company - Writing for the Desktop, Browser, and PhoneThree's Company - Writing for the Desktop, Browser, and Phone
Three's Company - Writing for the Desktop, Browser, and Phone
 
Markdown - friend or foe?
Markdown - friend or foe?Markdown - friend or foe?
Markdown - friend or foe?
 
Reaktive Programmierung mit den Reactive Extensions (Rx)
Reaktive Programmierung mit den Reactive Extensions (Rx)Reaktive Programmierung mit den Reactive Extensions (Rx)
Reaktive Programmierung mit den Reactive Extensions (Rx)
 
Generative AI in CSharp with Semantic Kernel.pptx
Generative AI in CSharp with Semantic Kernel.pptxGenerative AI in CSharp with Semantic Kernel.pptx
Generative AI in CSharp with Semantic Kernel.pptx
 
Key Features Of The Pseudo Code
Key Features Of The Pseudo CodeKey Features Of The Pseudo Code
Key Features Of The Pseudo Code
 
Build your own Language - Why and How?
Build your own Language - Why and How?Build your own Language - Why and How?
Build your own Language - Why and How?
 
CLR_via_CSharp_(Jeffrey_Richter_4th_Edition).pdf
CLR_via_CSharp_(Jeffrey_Richter_4th_Edition).pdfCLR_via_CSharp_(Jeffrey_Richter_4th_Edition).pdf
CLR_via_CSharp_(Jeffrey_Richter_4th_Edition).pdf
 
Open Writing ! - Collaborative Authoring on Apache’s First Open-Source Cloud ...
Open Writing ! -	Collaborative Authoring on Apache’s First Open-Source Cloud ...Open Writing ! -	Collaborative Authoring on Apache’s First Open-Source Cloud ...
Open Writing ! - Collaborative Authoring on Apache’s First Open-Source Cloud ...
 
A Brief Intro to Adobe Flex
A Brief Intro to Adobe FlexA Brief Intro to Adobe Flex
A Brief Intro to Adobe Flex
 

Recently uploaded

[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 

Recently uploaded (20)

[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 

Universal Design Tokens

Editor's Notes

  1. 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/
  2. 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
  3. 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.
  4. 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)
  5. 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
  6. 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!
  7. 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.
  8. 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/
  9. 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.
  10. https://github.com/universal-design-tokens https://udt.design/
  11. https://xkcd.com/927/