# 🇯🇵 Schema by Figma: Tokyo Recap Source: https://www.youtube.com/watch?v=U-Ag-fRvq3g Recap page: https://rapidrecap.app/video/U-Ag-fRvq3g Generated: 2025-12-07T23:33:00.747+00:00 --- ## Quick Overview Figma presented highlights from the Schema 2025 event, focusing on design system evolution and three key initiatives: designing for agility, incorporating code-based context, and designing for all product stakeholders, while demonstrating new features like Extended Collections for variables and Slots for component composition. **Key Points:** - Figma is pursuing three key initiatives to evolve design systems: designing for agility, incorporating code-based context, and designing for all product stakeholders including PMs and researchers. - The new Extended Collections feature allows users to create derived variable collections by inheriting from a parent collection, enabling efficient theme expansion across multiple brands, as demonstrated with the Astra video, board, and audio brands. - The demonstration showed that overriding a property in a child collection (e.g., changing a color in 'Astra Board') only affects that child, while changing the parent ('Astra Video') propagates unless overridden in the child. - The upcoming 'Slots' feature resolves the pain point of needing to detach instances to place other instances inside, allowing users to convert a layer to a Slot and accept other instances, enabling flexible layout component creation. - The 'Check' feature, similar to third-party design linters, allows users to validate designs against variable application, hardcoded values, and contrast issues, with suggestions learned internally based on usage frequency. - Variable collection mode limits are expanding: Pro plans get 4 modes, Organization plans get 20 modes, and Enterprise plans get 40 modes. - Other updates include native export/import for variables (JS file export) and the ability to import NPM packages (React components only, currently) directly into Figma Make via a feature coming soon this month. **Context:** This session recap focused on the 'Schema by Figma' event, specifically highlighting updates related to design systems. The hosts, including a designer from Figma and Honda-kun from CyberAgent who co-created the 'Spindle' design system four to five years prior, discussed the changing environment around design systems and Figma's strategy to support them beyond mere efficiency, aiming for design systems to power new creation, especially with the rise of AI. ## Detailed Analysis The recap covered Figma's vision for design systems as the backbone of product quality, emphasizing consistency, alignment, and clarity in decision-making, moving beyond efficiency towards powering novel creation, particularly integrated with AI. Figma's strategy involves three initiatives: designing for agility through flexible design systems, incorporating code-based context to unify design and engineering, and designing for all product contributors. The presentation showcased the 'Extended Collections' feature, which allows creating child variable collections that inherit from a parent, facilitating multi-brand theme management by allowing partial overrides, addressing the pain point of exponential mode creation for multiple brands. Next, the 'Slots' feature was introduced, allowing designers to define areas within a component (converted from a layer) that can accept other instances, solving the issue of needing to detach components to embed variable layouts, which Honda-kun noted was highly anticipated for managing complex UI patterns. Furthermore, Figma introduced the 'Check' feature, a native solution for design validation that suggests appropriate variables, checks for hardcoded values, and verifies accessibility compliance like contrast ratios based on internal learning models. Other updates included expanded variable mode limits (up to 40 for Enterprise), native variable export/import, and upcoming support for importing NPM packages into Figma Make. Both Extended Collections (Enterprise required) and Check (Organization/Enterprise, early access) are rolling out, while Slots are currently in early access. ### Schema Event Context - The session recapped announcements from Schema 2025, held in San Francisco, focusing on design system highlights - The event series has previously been held in locations including Tokyo in 2022 - Figma's goal is to raise product quality across all manufacturing touchpoints. ### Design System Evolution - Figma aims for design systems to be the driving force for entirely new creation, supported by AI - Key initiatives include designing for agility, incorporating code context, and designing for all stakeholders (PMs, researchers, etc.) - Performance improvements were achieved after a year-long design system remodel, resulting in up to 60% faster editing and 3x faster prototype interactions. ### New Feature - Extended Collections: This feature enables creating child variable collections that inherit from a parent, solving complex multi-brand theme management - Overrides in the child collection are respected, while un-overridden properties inherit from the parent, similar to component instance overrides. ### New Feature - Slots: Slots allow a layer within a component to accept other instances, eliminating the need to detach to embed content or other components - Slots enable the creation of reusable layout patterns and containers, with optional suggestion lists for preferred instances. ### New Feature - Check Design: A native linting tool that checks frames for unapplied variables, hardcoded values, and poor contrast ratios, suggesting applicable variables based on learned usage patterns - This feature reduces communication overhead during design review, especially regarding accessibility compliance. ### Variable Updates & Access - Variable mode limits increased across plans (Pro: 4, Org: 20, Enterprise: 40) - Variables now support native export/import via JS files - Extended Collections is available to most Enterprise customers; Slots and Check are currently in early access registration. ### Figma Make Integration - Figma is connecting design systems with AI-driven creation via Figma Make - 'Make Kit' (early access) allows importing Figma design system components into Make outputs - Support for importing NPM packages (React components) into Make is scheduled for release this month.