Coding Design Systems | ep07 | Custom Personal Design System with Kaelig

1h Link to video
Tags Design tokens Coding Design Systems
Speakers Georges Gomes m4dz Kaelig Deloumeau-Prigent
Edit on GitHub

Every Tuesday at 5: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:00 - Intro 00:00:58 - W3C Design Tokens Community Group 00:03:02 - Design Tokens Colors and Animations Modules Specification 00:04:18 - Understanding the Design Tokens Specification 00:05:35 - Using a Design System for a personal project 00:09:42 - Starting a new project in Backlight 00:11:18 - Creating tokens with CSS Custom Properties 00:15:00 - Documenting Tokens using the dockit framework 00:25:47 - Creating a React Component consuming Design Tokens 00:45:00 - Using stories.preview file to configure Stories globally 00:48:53 - Publishing your Design System to the npm registry 00:54:59 - Using your Design System Components in a Next.js app 01:00:56 - What did we learn? Collaborating on the Design System 01:03:45 - Outro

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

A new episode dedicated to Custom Design System to build your personal brand! We’re please to welcome Kaelig (@kaelig), co-chairman of the W3C Design Token Community Group!

Based on the project of reshaping his personal website, we go through the process to start from scratch his very own Design System based on the dedicated Figma files. We cover the Tokens declaration and their use in a component. Then we publish the Design System to the npm registry, to finally import it as a dependency in a Next.js app.

This episode is also an occasion to cover the W3C Design Tokens Community Group activity, and the expectations of the incoming specifiation.

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