Coding Design Systems - ep22 - Specify Tokens in a Design System

Every Tuesday at 4:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about design systems, on Backlight.dev!

⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

00:00 - Intro: Welcome Jonas Ulrich from kickstartDS 05:38 - kickstartDS, a themable design system foundation to boostrap you very own one 18:10 - Implementing a kickstartDS-based component in your design system 25:52 - Using pre-defined stories from kickstartDS 41:48 - Defining and using tokens in a kickstartDS-based app 56:57 - Outro: discover the kickstartDS ecosystem

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

An episode dedicated to Design Tokens communication between design files and components libraries, from a development perspective. By using kickstartDS, we follow Jonas in the path of building a white-labelled design system for flexibility.

⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

• JSON Schema: https://json-schema.org/

• Block Protocol: https://blockprotocol.org/

• Project Cambria: https://www.inkandswitch.com/cambria/

• Max Cooper: https://www.youtube.com/watch?v=G55lrhUIezk, https://www.youtube.com/watch?v=tNYfqklRehM

• Varun Vachar: https://varun.ca/

• kickstartDS Design Tokens Figma file: https://www.figma.com/file/H7F4P2fsDgEkIcc7U1alk1/kickstartDS-Design-Tokens

• 🐥 @kickstartDS: https://twitter.com/kickstartDS

• https://www.kickstartds.com/

• 🐥 @tsnmp: https://twitter.com/tsnmp

• https://github.com/julrich: https://github.com/julrich

• 🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds

• 🐥 m4dz: https://twitter.com/m4d_z