# DTCG W3C release and adapting design systems for multiple brands | Schema by Figma 2025 Source: https://www.youtube.com/watch?v=XI8cjfw8rt8 Recap page: https://rapidrecap.app/video/XI8cjfw8rt8 Generated: 2025-11-10T13:16:09.67+00:00 --- ## Quick Overview The W3C Design Tokens Community Group (DTCG) released Version 1 (V1) of its specification, which provides a production-ready JSON specification, a stable API for tool makers, and ensures interoperability across design tools like Figma and FigJam, addressing previous fragmentation where every company had its own incompatible implementation. **Key Points:** - The W3C Design Tokens Community Group (DTCG) released the V1 specification for Design Tokens, aiming to standardize how tokens are defined and exchanged across the industry. - The specification offers a production-ready JSON format and a stable API for tool and plugin developers, resolving past issues where implementations did not work together. - The presentation highlighted three import options for consuming files: importing into a blank collection, an existing node, or an extended collection, with extended collections allowing overrides. - Extended Collections (FCs) enable managing multiple brands by inheriting modes and structure from a root collection (like 'Figma Colors'), allowing brand-specific overrides (like changing colors to purple for the 'FigJam' brand). - The migration process involves six steps: exporting color values, deleting brand-specific modes, creating new extended collections, importing values as overrides, updating consuming files, and re-applying modes. - Variable support for the Swap Library is announced as coming in November, which will further aid in managing these multi-brand setups. ![Screenshot at 0:13: The slide showing logos of companies involved in design systems \(Adobe, Airbnb, Salesforce, Google, Microsoft, Spotify, etc.\) emphasizes the broad industry adoption and relevance of the DTCG's work.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-00-13.png) **Context:** Kaellig Deloumeau-Prigent, Co-chair of the DTCG, presents the V1 release of the Design Tokens specification, marking a significant milestone after 15 years of working on design systems at companies like Financial Times, Salesforce, and Shopify. The context is the industry's need to move beyond fragmented, proprietary token implementations towards a standardized, interoperable format, facilitated by the W3C group. ## Detailed Analysis Kaelig Deloumeau-Prigent announced the V1 stable release of the W3C Design Tokens Community Group specification, which establishes a standard JSON format and stable API for design tokens, promoting interoperability across tools. He noted that previously, large companies maintained siloed, incompatible token systems. The new specification allows tokens to be defined centrally and exchanged effectively. The process for migrating from brand-specific modes to extended collections involves six key steps: exporting color values, deleting old brand-specific modes, creating new extended collections for each brand, importing values as overrides, updating consuming files, and finally, reapplying modes. The presentation also demonstrated how extended collections handle light/dark modes and how overrides work by selectively updating values (e.g., changing brand colors from blue to purple in the FigJam extended collection). A 'Rule of Ten' heuristic was introduced: use local collections for 10 or fewer brands for easier updates, and subscribed/extended collections for more than 10 brands for better distribution of maintenance. Finally, the speaker announced that Variable Support for the Swap Library is coming in November, which will further streamline the handling of these complex, multi-brand setups, allowing designers to manage modes and overrides more intuitively. ### DTCG V1 Release Significance - Production-ready JSON specification - Stable API for tool/plugin makers - Interoperability across tools (Figma, FigJam) - Solves fragmentation of proprietary implementations ### Import Modes - Importing into a blank collection (creates new variables) - Importing into an existing node (updates existing variables) - Importing into an extended collection (maps differences as overrides) ### Extended Collections (FCs) for Multi-Brand Management - Inherit modes and structure from a parent collection (e.g., Figma Colors) - Allow brand-specific overrides (e.g., changing colors to purple for FigJam) - Scales better for many brands (>10) ### Migration Walkthrough Steps - 1. Export color values - 2. Delete brand-specific modes - 3. Create new extended collection (one per brand) - 4. Import values as overrides - 5. Update consuming files - 6. Re-apply modes ### Future Outlook - Variable Support for Swap Library coming in November - This will allow better management of modes and experimentation with different file setups. ![Screenshot at 0:05: Title slide announcing the W3C Design Tokens DTCG V1 Release, featuring Kaellig Deloumeau-Prigent.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-00-05.png) ![Screenshot at 0:13: Slide showcasing logos of major companies using design systems \(Adobe, Google, Microsoft, Shopify, etc.\), illustrating the need for standardization.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-00-13.png) ![Screenshot at 0:24: Visual representation of scaling design tokens, where values decrease in size along a dashed line.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-00-24.png) ![Screenshot at 1:04: Slide stating the problem: "Everyone had their own implementation, none of which have worked together."](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-01-04.png) ![Screenshot at 1:36: Golden slide with the DTCG logo, symbolizing the V1 release milestone.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-01-36.png) ![Screenshot at 2:14: Slide announcing the immediate outcome: "Stable Release" of the Design Tokens Specification V1.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-02-14.png) ![Screenshot at 3:57: Slide highlighting the feature "Import/Export for variables," which was a highly requested feature.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-03-57.png) ![Screenshot at 6:07: Slide detailing the three import options for extended collections: blank collection, existing node, and extended collection, outlining their behaviors.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-06-07.png) ![Screenshot at 8:30: Slide explaining Extended Collections for managing multiple brands at scale, showing mode swapping between Design and FigJam light/dark modes.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-08-30.png) ![Screenshot at 10:19: Slide showing the final 'Thanks!' screen with the Schema by Figma logo.](https://ss.rapidrecap.app/screens/XI8cjfw8rt8/00-10-19.png)