{ "schema_version": 1, "generated_at": "2026-09-26T12:41:32.472Z", "courses": [ { "id": "ai-design-systems", "title": "AI and Design Systems", "lesson_count": 291 }, { "id": "subatomic", "title": "Subatomic: The Complete Guide To Design Tokens", "lesson_count": 371 }, { "id": "atomic-design-cert", "title": "Atomic Design Certification Course", "lesson_count": 181 } ], "lessons": [ { "id": "72570994", "course": "ai-design-systems", "position": 1, "chapter": { "position": 0, "title": "Introduction" }, "title": "Welcome!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72570994-welcome", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72571108", "course": "ai-design-systems", "position": 2, "chapter": { "position": 0, "title": "Introduction" }, "title": "AI & Design Systems Benefits Infomercial", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72571108-ai-design-systems-benefits-infomercial", "free": false, "summary": "Punchy trailer‑style voiceover listing what wielding AI and design systems together can unlock for an organization: analyzing and improving design system foundations, generating designs from system infrastructure, design↔code translation, doc sync, faster DS adoption, accelerated product development, and inventing the next generation of UX — including radically adaptive generative UI.", "tags": [ "course", "ai", "generative ui", "advocacy" ], "presenters": [ "TJ Pitre" ] }, { "id": "72571447", "course": "ai-design-systems", "position": 3, "chapter": { "position": 0, "title": "Introduction" }, "title": "Course Goals & Outcomes", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72571447-course-goals-outcomes", "free": false, "summary": "Lays out what this course is here to do: help teams navigate a fast‑moving digital landscape full of hype and snake oil; give practitioners solid ground to stand on; teach how to use design systems and AI together to work with the grain of organizational standards (not generate off‑the‑cuff); unlock new levels of efficiency; show real, hands‑on, practical implementations from basic to advanced; and establish more collaborative workflows across design, development, product, and all the other stakeholders involved in digital success.", "tags": [ "course", "strategy", "workflow", "concepts" ], "presenters": [ "Brad Frost" ] }, { "id": "72571808", "course": "ai-design-systems", "position": 4, "chapter": { "position": 0, "title": "Introduction" }, "title": "Who This Course Is For", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72571808-who-this-course-is-for", "free": false, "summary": "Scopes the audience. Short answer: everyone invested in the success of digital products at your organization — design systems are the 'watering hole' where these silos come together. Course leans hard into shared understanding, alignment, and empathy across design/dev/product/non‑technical stakeholders, with special attention to the designer–developer relationship. Meets people where they are on both their DS journey and their AI journey, helping teams crawl, walk, and ultimately run.", "tags": [ "course", "culture", "community" ], "presenters": [ "Brad Frost" ] }, { "id": "72575089", "course": "ai-design-systems", "position": 5, "chapter": { "position": 0, "title": "Introduction" }, "title": "Meet Your Teachers", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72575089-meet-your-teachers", "free": false, "summary": "Multi‑speaker segment introducing the three teachers behind the course — TJ Pitre (founder/CEO of Southleft), Brad Frost (web designer/developer in Pittsburgh, teaching for 13+ years), and Ian Frost (front‑end architect, working alongside Brad for a decade+) — collectively 50+ years of professional web experience. Covers industry contributions (Atomic Design), in‑house tools (Figma Lint, Story UI), and the breadth of major DS work they've shipped: Helix (Pfizer), NASDAQ Experience Framework, Atmos (United Airlines), Sparky (Pitre Sparks), Blocks (Caterpillar), Novartis, Rally, and more.", "tags": [ "course", "southleft", "figmalint", "community" ], "presenters": [ "Brad Frost", "TJ Pitre", "Ian Frost" ] }, { "id": "72575227", "course": "ai-design-systems", "position": 6, "chapter": { "position": 0, "title": "Introduction" }, "title": "Our Collective AI Experience", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72575227-our-collective-ai-experience", "free": false, "summary": "Reflects on how the team got into AI through their deep design systems experience. Frames the 3 years since ChatGPT's launch as a long, messy exploration — lots of hype and dead‑ends — during which they helped clients find the AI integrations that actually work for real teams maintaining large‑scale design systems. Closes on a vivid metaphor: we're still in the Big Bang of AI, a primordial stage, but some 'clouds of gas and rock and dust' are starting to take shape into the practices that now inform how they integrate AI into DS workflows.", "tags": [ "course", "ai", "history", "strategy" ], "presenters": [ "Brad Frost" ] }, { "id": "72577755", "course": "ai-design-systems", "position": 7, "chapter": { "position": 0, "title": "Introduction" }, "title": "Principles & Our Approach to AI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72577755-principles-our-approach-to-ai", "free": false, "summary": "The philosophical spine of the course — the principles that frame every decision the team makes when wielding AI + design systems. Walks through 11 interconnected principles: humanity (tech enhances, never replaces, human potential; automate drudgery, not creativity), safety (eyes‑wide‑open about harms — environmental impact, stolen IP, baked‑in bias), intentionality (deliberate choices, not autopilot), responsibility (ownership over what we ship), nuance (Melvin Kranzberg: 'technology is neither good nor bad, nor is it neutral'), quality ('is it good?' as the defining question of the era; humans as taste‑makers), accessibility (both UI a11y AND humans staying in the driver's seat), foundations (the crux: marry AI's generativity to the sturdy foundations of design systems), context (setting up TJ's context‑based DS workflow — AI without persistent context is like a goldfish), collaboration (omnidirectional, cross‑silo creativity), curiosity (simultaneously curious and skeptical; get comfortable being uncomfortable), multiplicity (no one right way — fuzzy reality, bring it back to organizational context), practicality (real tactical/pragmatic moves, not hand‑wavy), and durability (durable foundations that outlast the hype cycle). Closes by inviting teams to do this same exercise themselves.", "tags": [ "course", "ethics", "environment", "context-based design systems", "strategy" ], "presenters": [ "Brad Frost" ] }, { "id": "72577751", "course": "ai-design-systems", "position": 8, "chapter": { "position": 0, "title": "Introduction" }, "title": "What To Expect", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72577751-what-to-expect", "free": false, "summary": "Sets practical expectations for the course experience: self‑paced video, choose‑your‑own‑adventure; demos, exercises, and a course FigJam; a resources hub (resources.ai and design systems); a Slack workspace community of fellow travelers; a certificate of completion for LinkedIn/resume; lifetime access with change notifications; and a warning about weird jokes and dated pop culture references ('sorry, not sorry').", "tags": [ "course", "community" ], "presenters": [ "Brad Frost" ] }, { "id": "73787333", "course": "ai-design-systems", "position": 9, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Chapter 1 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/73787333-chapter-1-introduction", "free": false, "summary": "Introduces the foundational concepts of Chapter 1: AI & Design Systems. Covers the plan to tour history of tech/DS/AI, define design systems, discuss AI benefits and pain points, explore the AI+DS combo, and introduce key terminology and tools.", "tags": [ "course", "concepts", "terminology", "history" ], "presenters": [ "Brad Frost" ] }, { "id": "73788345", "course": "ai-design-systems", "position": 10, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "How did we get here? A brief history of technology & computing", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/73788345-how-did-we-get-here-a-brief-history-of-technology-computing", "free": false, "summary": "Zooms all the way out to frame the current moment: humans as a conscious, social, and advancing species that wields tools and 'general purpose technologies' (à la Mustafa Suleyman's The Coming Wave) to transform the world. Traces the arc from early thinking machines and user interfaces to networked devices, billions of screens, and now AI that thinks for itself — setting up design systems as the response to that complexity.", "tags": [ "history", "technology", "concepts" ], "presenters": [ "Brad Frost" ] }, { "id": "74085190", "course": "ai-design-systems", "position": 11, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "History of design systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74085190-history-of-design-systems", "free": false, "summary": "Walks through the evolutionary arc of design systems alongside the web itself — from CERN and GeoCities through Photoshop-to-HTML slicing, Web 2.0, mobile, responsive design, the modular CSS movement (BEM, OOCSS, SMACSS), Atomic Design and Pattern Lab, React and ES modules, Figma's component libraries, design tokens, Web Components, and layered 'recipes.' Shows how dotted copy‑paste relationships between design, code, and docs have gradually hardened into solid, connected lines.", "tags": [ "history", "architecture", "components", "design tokens" ], "presenters": [ "Brad Frost" ] }, { "id": "74085197", "course": "ai-design-systems", "position": 12, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "AI as mortar for design system foundations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74085197-ai-as-mortar-for-design-system-foundations", "free": false, "summary": "Frames the course's central thesis: after decades of hard‑won infrastructure connecting design, code, and documentation, AI isn't here to replace any of it — it's the mortar that oozes into the cracks and sturdies the foundations we've already built. Argues that UI management at scale is fragile and laborious, and that this sophisticated architecture is worth building on rather than around.", "tags": [ "concepts", "ai", "architecture", "strategy" ], "presenters": [ "Brad Frost" ] }, { "id": "74085207", "course": "ai-design-systems", "position": 13, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Design system definition", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74085207-design-system-definition", "free": false, "summary": "Surveys how others define design systems — Salesforce, the Interaction Design Foundation, Nielsen Norman Group, Figma — then offers Brad's own: a design system is critical UI infrastructure, 'the story of how your organization designs and builds digital interfaces.' Argues that with LLMs now handling many of the mechanical bits, the shared narrative and language of a design system matter more than ever.", "tags": [ "concepts", "vocabulary", "terminology" ], "presenters": [ "Brad Frost" ] }, { "id": "74085221", "course": "ai-design-systems", "position": 14, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "A design system's ingredients", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74085221-a-design-system-s-ingredients", "free": false, "summary": "Breaks down what actually makes up a design system: UI standards, the three‑legged stool of design/code/docs assets, and — most importantly — people wielding those assets through well‑defined processes. Uses the City of Helsinki's design system as a concrete example of how all these ingredients combine to deliver reusable UI components across government digital products.", "tags": [ "concepts", "components", "documentation", "process" ], "presenters": [ "Brad Frost" ] }, { "id": "74085247", "course": "ai-design-systems", "position": 15, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "The value of design systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74085247-the-value-of-design-systems", "free": false, "summary": "Makes the case for why design systems are worth the investment. Without them: inconsistent, inaccessible, low‑quality experiences, a maintenance nightmare, and a very expensive problem that everyone pays for. With a central source of truth: higher‑quality, more cohesive UX for users; teams freed from rebuilding the button for the 70th time; and faster big initiatives like rebrands — especially valuable as we enter the agentic age.", "tags": [ "concepts", "strategy", "advocacy" ], "presenters": [ "Brad Frost" ] }, { "id": "75961808", "course": "ai-design-systems", "position": 16, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "What's Hard About Design Systems?", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75961808-what-s-hard-about-design-systems", "free": false, "summary": "Inventories the persistent pain points across every layer of a design system: ever‑changing standards and the gap between ideal and product reality; the grind of keeping design, code, and docs in sync; quality, accessibility, and API‑consistency issues; the political and human terrain of ROI, team relationships, shared language, and 'nobody reads the manual'; and process hurdles around adoption, governance, versioning, breaking changes, and contribution. Sets up the question the course exists to answer: how can AI help with all this?", "tags": [ "concepts", "governance", "culture", "synchronization" ], "presenters": [ "Brad Frost" ] }, { "id": "74925327", "course": "ai-design-systems", "position": 17, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "A Brief History of AI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74925327-a-brief-history-of-ai", "free": false, "summary": "Brad's quick‑tour history of AI to ground the rest of the course: Alan Turing's 1950 imitation‑game paper, the Dartmouth coining of 'artificial intelligence' in 1956, the AI winters, the 1986 backpropagation paper that revived neural networks, AlexNet's 2012 deep‑learning breakthrough, OpenAI's founding, the 2017 transformer paper ('Attention is all you need') that every modern LLM descends from, GPT‑3's surprising emergent abilities, the safety/commercialization split that birthed Anthropic, and the agentic 2024–25 wave (Copilot, ChatGPT, Claude, Gemini, MCP, Claude Code/Cursor/Windsurf) leading to the present moment. Closes with book recommendations and a pointer to the resources hub.", "tags": [ "history", "ai", "technology", "claude" ], "presenters": [ "Brad Frost" ] }, { "id": "74519161", "course": "ai-design-systems", "position": 18, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "LLM Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74519161-llm-overview", "free": false, "summary": "Brad narrows the lens: when this course says 'AI,' it really means large language models. Quick framing of an LLM as a large neural network trained on text/code/images/audio — a prediction machine that generates one token at a time based on the input — with a hat tip that TJ will go deeper on the AI tooling side later in the chapter. Closes on the magic trick: type words, get back the thing you asked for, a demo that would have blown minds just a few years ago.", "tags": [ "ai", "concepts", "terminology" ], "presenters": [ "Brad Frost" ] }, { "id": "74964390", "course": "ai-design-systems", "position": 19, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "LLMs in Action", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74964390-llms-in-action", "free": false, "summary": "Brad runs a wild LLM lightning tour: Wispr Flow → Claude poem ('medieval poem about atomic design') → ChatGPT image → Suno rock opera → Da Vinci video clip → Warp + Claude Code + Figma + TJ's Figma Console MCP to design and ship a working interactive website with the audio/video wired up — then duplicates everything for a space‑ballet sequel set in 3087. Lands the course's central thesis ('is it good?') and frames why design systems matter more, not less, in an LLM‑powered world: organizational standards are the bar of quality that turn LLM speed into real value, not just stuff lobbed onto the internet.", "tags": [ "ai", "claude", "figma console mcp", "vibe coding", "figma" ], "presenters": [ "Brad Frost" ] }, { "id": "74995494", "course": "ai-design-systems", "position": 20, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "AI for Digital Product Work", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74995494-ai-for-digital-product-work", "free": false, "summary": "Brad pivots from the LLM demo's wow‑factor into the practical question: how does AI actually plug into digital product work? Maps the capabilities into five buckets — generate (design, code, images, prototypes, copy, data), iterate (refine, fix, ideate), translate (between environments and modalities), analyze (thinking, research, code, design, content), and plan/execute (break work into actionable steps and run them autonomously or semi‑autonomously through agents). Frames why leadership keeps yelling 'use AI' — there really is value here.", "tags": [ "ai", "concepts", "workflow", "agents" ], "presenters": [ "Brad Frost" ] }, { "id": "74995837", "course": "ai-design-systems", "position": 21, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "The Value of AI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74995837-the-value-of-ai", "free": false, "summary": "Brad makes the case for AI's real value in digital product work. AI acts as a highlighter for pain points teams used to accept as inevitable: slow/tedious/manual workflows, siloed teams, narrow perspectives, and feedback loops that never make it back to the start of the process. The boring upside is speed/automation, but the real value is broadening perspectives, augmenting work, helping teams learn from each other, and finally closing the feedback loop — turning real‑world usage and analytics into ongoing improvements to both the products and the way the team works.", "tags": [ "ai", "strategy", "workflow", "culture" ], "presenters": [ "Brad Frost" ] }, { "id": "75002391", "course": "ai-design-systems", "position": 22, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "What's Hard About AI?", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75002391-what-s-hard-about-ai", "free": false, "summary": "Counter‑weight to 1.12: a thorough inventory of why AI is genuinely hard. Technical hards — non‑determinism (same input, different output), hallucinations delivered with confident certitude, sycophancy, monetary cost, and the carbon/water footprint of the data centers. Quality hards — uneven, hard‑to‑verify outputs across branding/UX/visual/a11y/front‑end/backend/security/privacy, plus durability and resilience concerns. People hards — hard to comprehend, breakneck pace, job‑market disruption, and a wellbeing toll Brad asks the audience not to underestimate ('be kind to yourself, be kind to others'). Closes with org‑level hards (buy‑in, adoption, scale, governance) and the Sustainable UX Network line: 'there's no good UX on a dead planet.'", "tags": [ "ai", "ethics", "environment", "culture", "governance" ], "presenters": [ "Brad Frost" ] }, { "id": "74519173", "course": "ai-design-systems", "position": 23, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Design systems + AI Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74519173-design-systems-ai-overview", "free": false, "summary": "Brad lands the course's title thesis: design systems can't solve all of AI's hard, but they deliver quality at scale, and AI in turn delivers the speed and generative, connective superpowers that design systems' orchestration work demands. The agreed-upon standards and assets rein in AI's chaos while AI absorbs the labor — a one-two punch, peanut butter and jelly. Sets up the rest of the course as the how-to for using the two together.", "tags": [ "concepts", "ai", "strategy", "advocacy" ], "presenters": [ "Brad Frost" ] }, { "id": "74519203", "course": "ai-design-systems", "position": 24, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "DS+AI Use Cases", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74519203-ds-ai-use-cases", "free": false, "summary": "Brad lays out the three broad categories of AI + design system use the course is organized around: using AI to address the design system's check engine light and sturdy up its foundations in design, code, and documentation so it's AI-ready; using AI and the system together to deliver quality products at scale faster than ever; and using the combination to invent the next generation of user experience. Notes the first category is the required groundwork for the other two.", "tags": [ "concepts", "course", "ai", "strategy" ], "presenters": [ "Brad Frost" ] }, { "id": "74519198", "course": "ai-design-systems", "position": 25, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "🚧 DS+AI ROI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74519198-ds-ai-roi", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74519208", "course": "ai-design-systems", "position": 26, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Redefining Digital Process", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74519208-redefining-digital-process", "free": false, "summary": "Brad argues it's not just digital products changing but the entire process by which they're made, and that AI has the opportunity to transform all of it. Previews why the course spends time on operationalizing AI and design systems at an organization — evolving from the present state into an AI-and-design-system-powered future — and notes the constant: success still requires coordinating people, tools, technologies, and processes.", "tags": [ "process", "workflow", "culture", "strategy" ], "presenters": [ "Brad Frost" ] }, { "id": "74519222", "course": "ai-design-systems", "position": 27, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Tools Orientation Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74519222-tools-orientation-intro", "free": false, "summary": "Brad introduces the tooling orientation that follows: a walkthrough of the design system tooling and AI tooling used throughout the rest of the course. Frames it as a refresher for whichever area is already your wheelhouse and a primer for the others, since the design, code, and AI worlds are converging and understanding the whole terrain matters.", "tags": [ "tools", "course", "concepts" ], "presenters": [ "Brad Frost" ] }, { "id": "74155545", "course": "ai-design-systems", "position": 28, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Design System Tools Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74155545-design-system-tools-intro", "free": false, "summary": "Quick orientation for viewers less familiar with design system tooling. Frames the upcoming walkthroughs around the three‑legged stool of assets — design library/libraries, code library/libraries, and documentation — that serves both the makers and users of the system.", "tags": [ "tools", "concepts", "documentation" ], "presenters": [ "Ian Frost" ] }, { "id": "74155847", "course": "ai-design-systems", "position": 29, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Figma Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74155847-figma-intro", "free": false, "summary": "Introduces the design leg of the stool. Positions Figma as the most widely used collaborative vector design tool for UI/UX, prototyping, and graphic design, and notes that for design systems specifically it's where design assets — a design token library and a component library — are explored and managed.", "tags": [ "figma", "tools", "design tokens", "components" ], "presenters": [ "Ian Frost" ] }, { "id": "74155915", "course": "ai-design-systems", "position": 30, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Figma Component Walkthrough", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74155915-figma-component-walkthrough", "free": false, "summary": "Hands‑on walkthrough of building a simple button component in Figma from scratch. Covers naming the file, using the text tool, 'Frame selection,' auto layout with padding, fills and strokes, creating a component, dragging instances, and adding variants (default vs. primary) so the button can be swapped in the right sidebar — showing the general gist of how component libraries work in Figma.", "tags": [ "figma", "components", "tools" ], "presenters": [ "Ian Frost" ] }, { "id": "74156161", "course": "ai-design-systems", "position": 31, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Figma Variables Walkthrough", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74156161-figma-variables-walkthrough", "free": false, "summary": "Walks through mapping the button component's hard‑coded red value to a Figma variable (i.e. design token), showing how renaming/retheming cascades across the library, and then publishing the component + variable library. Tours real‑world examples — Subatomic (multi‑theme: vanilla/strawberry/chocolate/dark chocolate), Brad Frost Web's Eddie design system, Southleft's Altitude, IBM Carbon, Porsche, and GOV.UK — to show the same variables‑to‑components pattern at every scale.", "tags": [ "figma", "design tokens", "eddie", "altitude", "components" ], "presenters": [ "Ian Frost" ] }, { "id": "74156167", "course": "ai-design-systems", "position": 32, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Code and Storybook Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74156167-code-and-storybook-intro", "free": false, "summary": "Transitions from design to code. Positions Storybook as the most widely used front‑end workshop for building and maintaining components, recipes, pages, and flows isolated from complex product environments — containing both a design tokens library and a component library. Flags the key stake: in the AI era, alignment between design and code libraries has become essential.", "tags": [ "storybook", "code", "tools", "components" ], "presenters": [ "Ian Frost" ] }, { "id": "74156255", "course": "ai-design-systems", "position": 33, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Code and Storybook Walkthrough", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74156255-code-and-storybook-walkthrough", "free": false, "summary": "Hands‑on tour of Storybook: the UI, component navigation, component preview, show/hide code, props (label, onClick, primary), controls and variants, button.stories files, authoring a new story, and the add‑ons panel (actions, interaction testing, visual tests, accessibility checks). Then explains how design tokens are layered in via Style Dictionary and JSON (platform‑agnostic output to web CSS custom properties, iOS, Android, etc.), shown in the Subatomic token system and Eddie / Altitude / Carbon / GOV.UK Storybooks. Sets up the next step: packaging the library for downstream teams.", "tags": [ "storybook", "code", "design tokens", "props", "testing" ], "presenters": [ "Ian Frost" ] }, { "id": "74156274", "course": "ai-design-systems", "position": 34, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Publishing a Component Library in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74156274-publishing-a-component-library-in-code", "free": false, "summary": "How design system assets actually get from a repo into downstream product teams' hands. Walks through running a build command to produce a transpiled distribution folder, then publishing that folder as a package via NPM — illustrated with Brad Frost's Eddie web components and IBM Carbon's web components install commands.", "tags": [ "code", "components", "eddie", "tools" ], "presenters": [ "Ian Frost" ] }, { "id": "74156294", "course": "ai-design-systems", "position": 35, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Documentation Tools", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74156294-documentation-tools", "free": false, "summary": "The third leg of the asset stool. Uses a 'shelving unit without instructions' metaphor to argue documentation is the set of instructions that lets both makers and users wield the system's materials. Tours documentation as it lives in‑line in Figma, as code comments surfaced through Storybook auto‑docs, and — because those tend to silo — on consolidated reference sites (Zero Height, Mintlify with AI, IBM Carbon) that bring design + dev + usage + a11y docs into one place for technical and non‑technical consumers alike.", "tags": [ "documentation", "zeroheight", "storybook", "figma", "tools" ], "presenters": [ "Ian Frost" ] }, { "id": "74156308", "course": "ai-design-systems", "position": 36, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Design System Tools Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74156308-design-system-tools-summary", "free": false, "summary": "Closes the design‑system tooling tour: Figma components + variables + library publishing, Storybook components + tokens, and reference sites as the connective tissue. Acknowledges that in reality the tools don't line up cleanly — people sitting between them create gaps — and frames AI as the way to fill those gaps with more accurate, sturdier connections. Hands off to TJ for the AI tooling section.", "tags": [ "tools", "figma", "storybook", "documentation", "synchronization" ], "presenters": [ "Ian Frost" ] }, { "id": "74013967", "course": "ai-design-systems", "position": 37, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "AI Tooling Overview Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74013967-ai-tooling-overview-introduction", "free": false, "summary": "TJ opens the AI tooling section and previews what's ahead: what large language models are and how they work, the major players (ChatGPT, Claude, Gemini), how we actually use LLMs day‑to‑day, and the supporting stack that makes them transformative — agents, subagents, MCPs, and skills. Frames the section as essential grounding before later chapters go deeper.", "tags": [ "ai", "tools", "southleft", "agents", "mcp" ], "presenters": [ "TJ Pitre" ] }, { "id": "74426931", "course": "ai-design-systems", "position": 38, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "What are LLMs and how do they work?", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74426931-what-are-llms-and-how-do-they-work", "free": false, "summary": "Defines large language models as AI trained on massive amounts of text to understand and generate language, and unpacks how they actually work: trained on the open web (blogs, news, Stack Overflow, Reddit, images), learning patterns in language rather than facts — a predictive engine picking the most likely next word, encoded across billions of parameters. Surveys what they're genuinely good at: writing/summarizing/translating, Q&A, generating and reviewing code, and reasoning through multi‑step problems.", "tags": [ "ai", "concepts", "terminology", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74426993", "course": "ai-design-systems", "position": 39, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "What LLMs are not", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74426993-what-llms-are-not", "free": false, "summary": "Short, sharp list of common misconceptions to correct up front. LLMs are not databases (no fact lookup), not SEO/crawlers, not deterministic (same prompt can yield different results, especially across providers), not infallible (they hallucinate confidently — e.g. swearing 'strawberry' has two Rs), and not agents on their own (they need tools to take action). Teed up to set up why the supporting stack matters.", "tags": [ "ai", "concepts", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427090", "course": "ai-design-systems", "position": 40, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Major LLM players, overview, and features", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427090-major-llm-players-overview-and-features", "free": false, "summary": "Tour of the major LLM providers and how they differ. OpenAI's ChatGPT (the one that opened the gates, with DALL·E for images), Anthropic's Claude (reasoning, long context windows, safety — 'we are big fans'), Google's Gemini (deep Workspace ecosystem integration for enterprise), plus Perplexity, Grok, and Meta. Argues they're more alike than different under the hood (all transformer‑based, Chromium analogy) and that the real differentiation is in personality, strengths, and integrations — Claude's deep local/connector/MCP/skills integration vs. ChatGPT's emerging MCP connectors. Notes Claude doesn't do raw image generation at time of recording (though it can make SVG icons and is strong with files).", "tags": [ "ai", "claude", "tools", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427291", "course": "ai-design-systems", "position": 41, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "How we actually use LLMs", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427291-how-we-actually-use-llms", "free": false, "summary": "The chat interface is just the beginning. Walks through the four main day‑to‑day usage patterns: (1) chat for quick answers, brainstorming, drafting, copy editing, outlines; (2) API access for building AI into your own tools/workflows — from early chatbots to today's API‑powered apps; (3) IDE integration like Cursor for code gen/review/edit with full codebase awareness; and (4) specialized apps that wrap an LLM under the hood. Closes with the core metaphor: the language model is the engine, but an engine by itself doesn't drive anywhere — setting up the supporting‑tools section.", "tags": [ "ai", "workflow", "api", "cursor", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427417", "course": "ai-design-systems", "position": 42, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "AI Supporting Tools Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427417-ai-supporting-tools-introduction", "free": false, "summary": "Short bridge into the supporting‑tools section. Argues that LLMs on their own are powerful but become transformative only when paired with the right supporting tools — setting up agents, subagents, MCPs, and skills as the next topics.", "tags": [ "ai", "tools", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427427", "course": "ai-design-systems", "position": 43, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Agents", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427427-agents", "free": false, "summary": "Defines an agent as an AI that can take action — not just respond, but do things. Contrasts with the early ChatGPT chat‑only interface and frames agents as the shift to systems that can read files, run code, search the web, and call APIs. The signature metaphor: 'an LLM with hands.' Uses Claude Code as the canonical example (edits code, runs tests, commits changes, interacts with APIs/CLIs/MCPs, full system awareness) and notes Cursor's built‑in agents as another common flavor.", "tags": [ "agents", "claude", "cursor", "terminology", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427462", "course": "ai-design-systems", "position": 44, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Subagents", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427462-subagents", "free": false, "summary": "Subagents are agents spun up by another agent. A parent agent receives a prompt, splits the work into discrete tasks, and delegates each to subagents running independently in the background; their responses flow back to the parent. TJ ties this to the multi‑step, milestone‑driven checklists familiar from spec‑driven, large‑scale AI‑generated projects — with subagents specialized for code review, accessibility, QA, full‑stack engineering, UX/UI design, etc., deployed based on the task at hand.", "tags": [ "agents", "terminology", "ai-architecture", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427610", "course": "ai-design-systems", "position": 45, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "MCPs", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427610-mcps", "free": false, "summary": "Introduces MCPs (Model Context Protocol) — originally invented by Anthropic — as a standard way to connect AI tools to external data and services. Leans on TJ's favorite analogy: 'like a USB port' — a universal interface for AI integrations, loosely comparable to APIs. Walks through how an AI communicates with an app via an MCP (tools, API bridges, return values or errors) and previews examples the course will use heavily: Slack, Figma (the big one), Google Drive, and GitHub MCPs.", "tags": [ "mcp", "terminology", "figma", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427618", "course": "ai-design-systems", "position": 46, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Why MCPs matter", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427618-why-mcps-matter", "free": false, "summary": "Makes the case for why MCPs change the game. Before MCPs, every AI integration was custom glue code through tools like Make.com or n8n. MCPs let you plug the client directly into the target platform — no dependencies, no third parties — so the AI gets real‑time access to your actual work, not stale paste‑ins or static databases. Uses a Gmail example to show live, always‑fresh context, which dramatically lowers hallucination risk.", "tags": [ "mcp", "concepts", "context engineering", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427623", "course": "ai-design-systems", "position": 47, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Skills", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427623-skills", "free": false, "summary": "Defines skills as reusable instruction sets that teach an AI how to do a specific, repeatable task. Skills encode best practices, templates, and domain expertise — typically a markdown file, sometimes paired with Python/JS tools. TJ's example: a 'create a proposal' skill that knows your brand, colors, format, and tone. Closing thesis: skills turn general‑purpose AI into a specialized collaborator — especially powerful for the menial, repetitive, tedious work.", "tags": [ "skills", "terminology", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427654", "course": "ai-design-systems", "position": 48, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "How it all connects", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427654-how-it-all-connects", "free": false, "summary": "Stitches the stack together: LLM → agents (the hands) → MCPs (connections to external platforms and real‑time data) → skills (repeatable, templated task knowledge). The through‑line: the whole point is that an AI understands your context and can act on it.", "tags": [ "agents", "mcp", "skills", "ai-architecture", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74427656", "course": "ai-design-systems", "position": 49, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "AI Tools Recap", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74427656-ai-tools-recap", "free": false, "summary": "Clean recap of the whole AI tool stack in one breath: the LLM is the brain (reasoning, generation — e.g. Claude Opus 4.6); agents give it the ability to take action; subagents let it parallelize and delegate; MCPs connect to your real tools and data (the USB‑port analogy); and skills teach it how to do your specific work well. TJ closes by previewing that this is the stack that powers AI‑assisted design systems work throughout the rest of the course.", "tags": [ "agents", "mcp", "skills", "claude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74523057", "course": "ai-design-systems", "position": 50, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Chapter 1 Review", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74523057-chapter-1-review", "free": false, "summary": "Brad recaps Chapter 1's arc: the history of general-purpose technologies and the paradigms they introduced, from computing and user interfaces to AI; what design systems are, where they came from, their value, and what's hard about them; the same treatment for large language models; the central thesis of combining AI and design systems; and the tooling and terminology the rest of the course relies on. Positions the chapter as the foundational bed for everything that follows.", "tags": [ "course", "concepts", "history", "terminology" ], "presenters": [ "Brad Frost" ] }, { "id": "75071653", "course": "ai-design-systems", "position": 51, "chapter": { "position": 1, "title": "Chapter 1: AI & Design Systems Core Concepts" }, "title": "Chapter 1 Homework & Next Steps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75071653-chapter-1-homework-next-steps", "free": false, "summary": "Brad closes Chapter 1 with three homework prompts before the course gets hands-on. Identify the hard: name your team's biggest pain points with both the design system and the organization's AI efforts. Take stock of current tooling — what's worth preserving, what needs sturdying, what no longer serves — since the landscape is in flux. And bookmark the course resource site at resources.aianddesign.systems for the glossary, links, and case studies. Points ahead to Chapter 2's tool and environment setup.", "tags": [ "course", "tools", "terminology", "vocabulary" ], "presenters": [ "Brad Frost" ] }, { "id": "74284435", "course": "ai-design-systems", "position": 52, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Chapter 2 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74284435-chapter-2-introduction", "free": false, "summary": "Introduces Chapter 2: Environments and Tools Setup. Covers installing AI tooling, demystifying API keys and the terminal, configuring MCPs and command line tools, and setting up a sturdy AI dev environment — for all skill levels, not just developers.", "tags": [ "course", "tools", "api", "mcp" ], "presenters": [ "Brad Frost" ] }, { "id": "74521414", "course": "ai-design-systems", "position": 53, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Installing Claude Desktop", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74521414-installing-claude-desktop", "free": false, "summary": "TJ opens the tool-installation run by previewing the three main platforms the course leans on — Claude Desktop, Cursor, and Claude Code — then installs Claude Desktop. Downloads the Mac DMG, logs in, and tours the sidebar that puts Claude Chat, Claude Cowork, and Claude Code in one app. Notes Cowork gets the least use in the course and Claude Code gets a lot.", "tags": [ "claude", "tools", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75184641", "course": "ai-design-systems", "position": 54, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Installing Cursor", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75184641-installing-cursor", "free": false, "summary": "TJ installs Cursor, the VS Code-like IDE, and walks through its three flavors: the traditional desktop editor (a DMG download), a terminal-based CLI that behaves like Claude Code, and a browser-only web version the course won't use. Inside the desktop app he shows the classic file-editor view alongside the newer agent view, which pushes the chat forward and de-emphasizes files; the course toggles between both.", "tags": [ "cursor", "tools", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75184644", "course": "ai-design-systems", "position": 55, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Claude Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75184644-claude-code", "free": false, "summary": "TJ rounds out the core platforms with Claude Code, which he uses mostly from the terminal but which the course will mostly drive from the Claude desktop app. Points to code.claude.com/docs/en/setup for the install instructions and tees up the next lessons on API keys, since many of these applications need keys to reach the language model providers.", "tags": [ "claude", "tools", "southleft", "ai-coding" ], "presenters": [ "TJ Pitre" ] }, { "id": "75184652", "course": "ai-design-systems", "position": 56, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Other Tools", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75184652-other-tools", "free": false, "summary": "TJ surveys the secondary tools students may encounter: Warp, the terminal-meets-IDE he personally uses to run Claude Code; Codex, OpenAI's agent editor; Antigravity, Google's Cursor-like environment shipping with Gemini; and Windsurf, another Cursor-style IDE. Observes that the UIs of these platforms are converging on a common pattern, and confirms the course itself will center on Claude Desktop with some Cursor.", "tags": [ "tools", "ai-coding", "southleft", "cursor" ], "presenters": [ "TJ Pitre" ] }, { "id": "75184653", "course": "ai-design-systems", "position": 57, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "API Keys Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75184653-api-keys-introduction", "free": false, "summary": "TJ introduces API keys: what they are — essentially a password that lets an application authenticate against your account with a language model provider, usually entered once — and where to find them. Notes they sometimes go by \"personal access token\" instead, and previews the per-provider walkthroughs that follow.", "tags": [ "api", "tools", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75184654", "course": "ai-design-systems", "position": 58, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Claude API Keys", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75184654-claude-api-keys", "free": false, "summary": "TJ creates a Claude API key in the Claude console: Get API key, pick a workspace, name it, copy the generated key, and stash it somewhere secure like 1Password. Recommends minting a separate key for each application that needs one rather than sharing a single universal key, so access can be scoped and revoked per app.", "tags": [ "api", "claude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75184656", "course": "ai-design-systems", "position": 59, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "OpenAI API Keys", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75184656-openai-api-keys", "free": false, "summary": "TJ creates an OpenAI API key from platform.openai.com/settings: Create new key, name it, choose a project, set permissions, then copy the key from the one-time modal and store it safely. Same shape as the Claude flow, and he deletes the demo key on camera as a security habit.", "tags": [ "api", "tools", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75184659", "course": "ai-design-systems", "position": 60, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Gemini API Keys", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75184659-gemini-api-keys", "free": false, "summary": "TJ creates a Gemini API key in Google AI Studio (aistudio.google.com): Get API key, Create API key, name it and note its purpose, then copy and store it securely for any software that needs Gemini access. Mirrors the Claude and OpenAI flows, and he removes the demo key afterward.", "tags": [ "api", "tools", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75184661", "course": "ai-design-systems", "position": 61, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Figma Personal Access Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75184661-figma-personal-access-tokens", "free": false, "summary": "TJ generates a Figma personal access token, the API-key equivalent some Figma tooling requires: Settings, then the Security section, then Generate new token. Names the token, sets an expiration, and chooses which scopes the application may access — only the needed ones or all of them — before generating it. Wraps the API keys segment and hands off to configuration.", "tags": [ "api", "figma", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75202661", "course": "ai-design-systems", "position": 62, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Configuration Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75202661-configuration-introduction", "free": false, "summary": "TJ previews the configuration segment: how to pick among language models inside Cursor, and how to install an MCP — specifically the Figma MCP — in both Cursor and Claude Desktop.", "tags": [ "tools", "mcp", "cursor", "claude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75202662", "course": "ai-design-systems", "position": 63, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Configuring Cursor", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75202662-configuring-cursor", "free": false, "summary": "TJ configures Cursor's model selection with the Altitude design system open. Explains the Auto setting, which routes each prompt to a lighter or heavier model based on the task, then unchecks it to reveal the full model list, the custom-model option, and the bring-your-own-key slots for OpenAI, Anthropic, and Gemini keys from the previous lessons. Opens a model's per-model settings (Opus 4.7) to show throttles for token consumption and thinking effort, and encourages experimenting with them.", "tags": [ "cursor", "tools", "api", "altitude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75202665", "course": "ai-design-systems", "position": 64, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Installing Figma MCP in Cursor", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75202665-installing-figma-mcp-in-cursor", "free": false, "summary": "TJ installs the Figma MCP in Cursor. Points to Figma's MCP server guide, which covers every client, then uses Cursor's agent-mode marketplace: filter to Figma, click Get, authenticate through Figma's OAuth flow, and land back in Cursor ready to go. Demonstrates the payoff by asking the agent for all the data on a Figma component via its URL.", "tags": [ "mcp", "figma", "cursor", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75202669", "course": "ai-design-systems", "position": 65, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Installing Figma MCP in Claude Desktop", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75202669-installing-figma-mcp-in-claude-desktop", "free": false, "summary": "TJ installs the Figma MCP in Claude Desktop via Customize, then Connectors (Claude's name for MCPs; skills wait for a later lesson). Browses the connector marketplace, picks the current Figma connector over the older Dev Mode one, and authenticates through the same OAuth bounce as Cursor. Shows both ways to use it — pull a component's data from its URL, or point Claude at a code directory and have it translate Figma components into code — and closes the environment-configuration segment.", "tags": [ "mcp", "figma", "claude", "skills", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75501255", "course": "ai-design-systems", "position": 66, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Figma MCP Connectors, Plugins, and Skills", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75501255-figma-mcp-connectors-plugins-and-skills", "free": false, "summary": "TJ untangles three things Anthropic doesn't explain well: connectors are MCPs (URL-based, authenticated against a platform), plugins bundle a connector with extras like markdown files and skills, and skills are slash-command instructions that shape how the AI behaves. Shows the Figma plugin's skills (figma-generate-design, and a community prototype-to-Figma skill he co-authored), explains why plugins and skills only work in local surfaces like Claude Code and Cowork while chat gets the connector alone, and suggests custom skills for tasks like renaming variables. Traces the Figma MCP's evolution from read-only Dev Mode to bidirectional writes, and recommends setting tool permissions to always allow so approvals don't stall the workflow.", "tags": [ "mcp", "figma", "skills", "claude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74967391", "course": "ai-design-systems", "position": 67, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Why Git Matters in the AI Age", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74967391-why-git-matters-in-the-ai-age", "free": false, "summary": "Brad makes the case for Git and GitHub in the AI age. Version control is the safety net when AI makes a mess of a codebase — explore, refine, roll back, merge, and never accidentally ship to production. It also enables a new generation of handoff: designers, BAs, and other non-developers can prototype in code, and Git-powered process carries those prototypes responsibly into real feature work blessed by professionals. Frames Git plus AI as the mortar connecting products and design systems, with issues filed from product context and a paper trail that's more grown-up than vibe coding in a chat window.", "tags": [ "code", "workflow", "handoff", "governance" ], "presenters": [ "Brad Frost" ] }, { "id": "74763921", "course": "ai-design-systems", "position": 68, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Git Definition", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74763921-git-definition", "free": false, "summary": "Brad defines Git: free, open-source, distributed version control software that's been tracking code changes on developers' machines for about twenty years. Separates the technology from the services built around it — GitHub, GitLab, Bitbucket, Azure Repos, Codeberg — which host Git repositories in the cloud as a project's source of truth, where code from humans and agents alike ultimately lands, and layer on sharing, review, and collaboration features.", "tags": [ "code", "tools", "terminology", "open-source" ], "presenters": [ "Brad Frost" ] }, { "id": "75135422", "course": "ai-design-systems", "position": 69, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Installing Git", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75135422-installing-git", "free": false, "summary": "Brad installs Git on a Mac from git-scm.com. Notes the Windows, Mac, and Linux paths and that Apple's Xcode command line tools bundle Git, then goes with Homebrew: copy the command, paste it into a terminal, let it pull Git down. Confirms the install in a fresh terminal tab with git --version.", "tags": [ "code", "tools" ], "presenters": [ "Brad Frost" ] }, { "id": "75162556", "course": "ai-design-systems", "position": 70, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "A Quick Note About Access and Security", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162556-a-quick-note-about-access-and-security", "free": false, "summary": "Brad sets expectations before the GitHub signup. Teams may use other platforms, so sign up for whatever yours uses or find the IT person who can grant access — and expect some red tape, because designers and other disciplines asking for product repository access is exactly the new reality organizations are adapting to. Recommends a personal GitHub account regardless, since it's the industry standard for open-source work and what the course uses.", "tags": [ "governance", "code", "tools", "culture" ], "presenters": [ "Brad Frost" ] }, { "id": "75162562", "course": "ai-design-systems", "position": 71, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Creating a GitHub Account", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162562-creating-a-github-account", "free": false, "summary": "Brad creates a fresh GitHub account on camera (\"Brad Frost's evil twin\") and tours the start screen: repositories, starred projects, the profile. Downloads GitHub Desktop — a standalone GUI he's found invaluable for folks who don't want to fumble around a terminal — signs in with the new account, and authorizes it. Explains why the association matters: tying local activity to a named account lets teams see who wrote what and tag each other in issues.", "tags": [ "code", "tools", "workflow" ], "presenters": [ "Brad Frost" ] }, { "id": "75162574", "course": "ai-design-systems", "position": 72, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Installing GitHub CLI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162574-installing-github-cli", "free": false, "summary": "Brad installs GitHub CLI with brew install gh and calls it a game changer: it's what lets agents like Claude Code act on GitHub from natural language — create a branch, open a pull request, file an issue for a bug. Verifies the install, points to the README for troubleshooting, and recaps the GitHub setup trio: a user account, the GitHub Desktop GUI, and the CLI that unlocks agent-driven workflows.", "tags": [ "code", "tools", "claude", "agents" ], "presenters": [ "Brad Frost" ] }, { "id": "75162584", "course": "ai-design-systems", "position": 73, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Git Core Concepts Cheat Sheet", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162584-git-core-concepts-cheat-sheet", "free": false, "summary": "Brad delivers the Git and GitHub cheat sheet, reassuring students that a handful of core concepts is enough to be effective. Defines repository, clone, branch (a safe parallel timeline where you can turn everything purple without touching main), commit, push and pull, diffs (red for removed lines, green for added), merge and rebase, merge conflicts, pull requests, and issues. Advises checking your team's preferred merge style with a friendly developer, and sets up the hands-on demo that puts the vocabulary to work.", "tags": [ "code", "terminology", "workflow", "vocabulary" ], "presenters": [ "Brad Frost" ] }, { "id": "75162598", "course": "ai-design-systems", "position": 74, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Git Demo: Making A New Website", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162598-git-demo-making-a-new-website", "free": false, "summary": "Brad starts the Git demo from scratch: a new empty Learning Git folder on the desktop, dragged into Cursor. Creates index.html, scaffolds the page with the Emmet shortcut (exclamation mark, Tab), adds an H1 and a paragraph, and opens it in the browser. Not beautiful, but a functioning website — which is all Git needs to start tracking changes over time.", "tags": [ "code", "cursor", "tools" ], "presenters": [ "Brad Frost" ] }, { "id": "75162649", "course": "ai-design-systems", "position": 75, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Git Init & Interacting With Git", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162649-git-init-interacting-with-git", "free": false, "summary": "Brad initializes Git in the new project — cd into the folder, git init, a one-time step that creates the hidden .git directory — then shows the three ways to talk to Git from here on. The terminal (git status reveals the untracked index.html), the source-control panel built into IDEs like Cursor and VS Code, and GitHub Desktop, where he adds the existing local repository and admires the green lines of a first diff. Same Git underneath; pick the surface that suits you.", "tags": [ "code", "tools", "workflow" ], "presenters": [ "Brad Frost" ] }, { "id": "75162673", "course": "ai-design-systems", "position": 76, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Git Commit & History", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162673-git-commit-history", "free": false, "summary": "Brad makes the first commit in GitHub Desktop (\"Create index.html\"), admits he's historically bad at commit messages and that AI helps there, then edits the page's description and watches the diff appear: line ten, old words removed in red, new words added in green. Commits again and opens the History tab to step through both snapshots. That's the heart of Git — tracking files and their changes over time so you can undo, roll back, and revert.", "tags": [ "code", "workflow", "tools" ], "presenters": [ "Brad Frost" ] }, { "id": "75162811", "course": "ai-design-systems", "position": 77, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "AI-Generated Code & Git Commits", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162811-ai-generated-code-git-commits", "free": false, "summary": "Brad hands the humble site to Cursor's agent: drops in a screenshot of the Git cheat-sheet slide and asks Claude Opus for a vanilla HTML/CSS/JS site that explains each Git concept with GSAP-animated SVGs and resources. It delivers — bouncy animations for branch, push, pull, rebase, merge conflicts, and the rest. Back in GitHub Desktop he reviews the damage: hundreds of new lines, a new stylesheet with custom properties, an app.js loading GSAP, and the original content wiped. Commits it from inside Cursor as \"initial AI-generated website\" and shows the terminal, IDE, and desktop app all updating from the same .git folder.", "tags": [ "ai-coding", "cursor", "claude", "code", "vibe coding" ], "presenters": [ "Brad Frost" ] }, { "id": "75162818", "course": "ai-design-systems", "position": 78, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Publishing Repository To GitHub", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162818-publishing-repository-to-github", "free": false, "summary": "Brad publishes the repository to GitHub the agentic way. Instead of clicking New repository on github.com, he opens Claude Code in the project directory and asks it to create a repo in the Brad Frost Web organization and push the code. Claude drives GitHub CLI: checks gh auth status, asks for a name and public/private, then creates and pushes github.com/bradfrostweb/learning-git in seconds. An agent writing commands against the CLI, on his behalf, in his account.", "tags": [ "code", "claude", "agents", "workflow" ], "presenters": [ "Brad Frost" ] }, { "id": "75162822", "course": "ai-design-systems", "position": 79, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Adding GitHub Collaborators", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162822-adding-github-collaborators", "free": false, "summary": "Brad explains what publishing unlocks: the repository now lives in the cloud as a backup and source of truth, so if the laptop goes into the ocean the project can be cloned onto a new machine. Then adds collaborators — his brother Ian is already in the organization, and he invites TJ with write access — to show how GitHub and its peers manage the people working on a project.", "tags": [ "code", "governance", "workflow" ], "presenters": [ "Brad Frost" ] }, { "id": "75162829", "course": "ai-design-systems", "position": 80, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Creating A New Branch", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162829-creating-a-new-branch", "free": false, "summary": "Brad puts branching to work. The AI-generated animations feel cramped, so he drops a screenshot into Claude Code and asks it to create an illustration-animation branch and make the demos full width. Claude does both; the refreshed page is far more legible, and GitHub Desktop confirms a single changed stylesheet on the new branch, main untouched. Notes that branching is what makes it safe to experiment while main could be auto-deploying via a tool like Netlify, then commits the styles.", "tags": [ "code", "claude", "workflow", "ai-coding" ], "presenters": [ "Brad Frost" ] }, { "id": "75162832", "course": "ai-design-systems", "position": 81, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Publishing A New Branch", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162832-publishing-a-new-branch", "free": false, "summary": "Brad hits Publish branch in GitHub Desktop and hits a wall he decides to keep in: the evil-twin account has no write access to a repo owned by his main organization — a good thing, since random accounts shouldn't be able to push to company codebases. Fixes it the legitimate way, adding the twin as a collaborator under Settings, then publishes successfully and shows both branches on GitHub. Explains feature branches as the mechanism for unlimited experiments while main stays stable, merged only when reviewed and ready.", "tags": [ "code", "workflow", "governance" ], "presenters": [ "Brad Frost" ] }, { "id": "75162838", "course": "ai-design-systems", "position": 82, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Merging & Pull Requests", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162838-merging-pull-requests", "free": false, "summary": "Brad opens a pull request the old-fashioned way on github.com: illustration-animation into main, reviews the diff, writes a title and description, and requests a review from the evil-twin account. Switches to that account to show the reviewer's side — the notification, the file-level view, an inline comment, and a \"looks good to me\" approval — then merges, confirms, and deletes the spent branch. Frames review gates and checks as optional but essential quality practice in an AI-powered age.", "tags": [ "code", "workflow", "governance", "process" ], "presenters": [ "Brad Frost" ] }, { "id": "75162841", "course": "ai-design-systems", "position": 83, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Syncing Changes From GitHub", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162841-syncing-changes-from-github", "free": false, "summary": "Brad brings the merged work back down to the local machine. Notes the options — Fetch origin in GitHub Desktop, a pull in the terminal, or the IDE — then closes the loop by asking Claude Code to switch to main and pull the latest via GitHub CLI. The IDE's history graph now shows the branch splitting off and merging back, the X-ray view of every commit and branch that Git gives a team over time.", "tags": [ "code", "claude", "workflow", "synchronization" ], "presenters": [ "Brad Frost" ] }, { "id": "75162844", "course": "ai-design-systems", "position": 84, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Git Concepts Recap", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162844-git-concepts-recap", "free": false, "summary": "Brad walks back through the cheat sheet against what the demo actually did: initialize a repo, commit and publish it to GitHub, branch for the animation tweak, commit and push, file a pull request, get it reviewed and merged, and pull main back down. Covers the one concept the demo skipped — git clone, via the green Code button — and invites students to clone the learning-git site as a safe sandbox to branch and break.", "tags": [ "code", "workflow", "terminology" ], "presenters": [ "Brad Frost" ] }, { "id": "75162848", "course": "ai-design-systems", "position": 85, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Creating GitHub Issues", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162848-creating-github-issues", "free": false, "summary": "Brad demonstrates GitHub issues, the last concept on the cheat sheet. From the Issues tab he files a task — check accessibility and confirm the site passes WCAG 2.1 AA before a real launch — labels it, and shows how issues become the project's running task list. Argues this matters more than ever now that non-developers can participate in the code process.", "tags": [ "code", "governance", "workflow", "accessibility" ], "presenters": [ "Brad Frost" ] }, { "id": "75162918", "course": "ai-design-systems", "position": 86, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Supercharging GitHub Issues with AI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75162918-supercharging-github-issues-with-ai", "free": false, "summary": "Brad asks Claude Code to file two issues at once: one in learning-git to adopt the Eddie design system, and one in the Eddie repo asking it to crawl this site and flag gaps that would block adoption. With GitHub CLI, the Eddie Brain MCP, and both repos in reach, Claude files both, cross-linked, with context and acceptance criteria — and the Eddie issue surfaces real gaps (a segmented control, a required hero image, illustration primitives). Contrasts this with the paragraph-long issues of traditional design system workflows, notes non-coders can use the same access to ask questions of a codebase, and confesses this workflow cured his own Git imposter syndrome.", "tags": [ "claude", "agents", "eddie", "mcp", "governance" ], "presenters": [ "Brad Frost" ] }, { "id": "74159564", "course": "ai-design-systems", "position": 87, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "AI & Design Systems Environments & Tools Resources", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/texts/74159564-ai-design-systems-environments-tools-resources", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75098275", "course": "ai-design-systems", "position": 88, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Tool Installation Cheat Sheet", "kind": "pdf", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/pdfs/75098275-tool-installation-cheat-sheet", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75330637", "course": "ai-design-systems", "position": 89, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Chapter 2 Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75330637-chapter-2-summary", "free": false, "summary": "Brad recaps Chapter 2: TJ's walkthrough of installing and configuring AI tools — Claude, ChatGPT, IDEs like Cursor, and terminal tools like Claude Code — plus finding and wiring up API keys; and Brad's tour of Git core concepts for working safely with AI, from cloning and branching to pushing, pulling, and merging. Reiterates the role of services like GitHub and GitLab for issues, pull requests, and code review, and how tools like Claude Code are changing the way we interact with them.", "tags": [ "course", "tools", "code", "api" ], "presenters": [ "Brad Frost" ] }, { "id": "75330694", "course": "ai-design-systems", "position": 90, "chapter": { "position": 2, "title": "Chapter 2: Environments & Tools Setup" }, "title": "Chapter 2 Homework & Next Steps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75330694-chapter-2-homework-next-steps", "free": false, "summary": "Brad assigns Chapter 2 homework: get an AI dev environment installed (and try a second tool if you already have one), wire up API keys so terminal tools like Claude Code can reach your accounts and bookmark where those keys live, create a GitHub account and a fresh sandbox repository, and configure GitHub CLI so agents can act on Git for you — then try filing an issue and opening a pull request. All of it gets used in Chapter 3 to address the design system's check engine light.", "tags": [ "course", "tools", "api", "code" ], "presenters": [ "Brad Frost" ] }, { "id": "74284727", "course": "ai-design-systems", "position": 91, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Chapter 3 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74284727-chapter-3-introduction", "free": false, "summary": "Introduces Chapter 3: Make Better Design Systems with AI. Covers using AI to assess and strengthen existing DS assets (Figma, code, docs), improve quality/accessibility/testing, normalize APIs, translate design↔code, sync design and code, and modernize documentation.", "tags": [ "course", "assessment", "synchronization", "documentation" ], "presenters": [ "Brad Frost" ] }, { "id": "74521449", "course": "ai-design-systems", "position": 92, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Creating Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74521449-creating-design-systems", "free": false, "summary": "Answers the obvious question — can AI just generate a design system from scratch? Technically yes, but don't: a design system is the story of how your organization builds digital products, and a from-scratch generation is devoid of that context, echoing the lookalike problem of adopting Material or Carbon. AI is genuinely useful for pulling together planning and strategy context, but the strategy itself is a human endeavor — the chapter proceeds assuming you have an existing system to improve and evolve.", "tags": [ "strategy", "concepts", "ai", "context engineering" ], "presenters": [ "Brad Frost" ] }, { "id": "76319117", "course": "ai-design-systems", "position": 93, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Demo Design Systems Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76319117-demo-design-systems-introduction", "free": false, "summary": "Brad, Ian, and TJ introduce the demo design systems used throughout the course: Ian's Soul Patrol (a fictitious music nonprofit in deliberate misalignment, spanning Figma, web, and React Native), TJ's Altitude, Eventz, College Town, and CBDS systems in varying states of completeness, and Brad's Eddie — Brad Frost Web's real production, developer-only web component monorepo powering bradfrost.com, the course sites, and internal tools. Eddie deliberately has no design counterpart, and the mix is meant to show different workflows arriving at the same goal: great digital products at scale.", "tags": [ "soul patrol", "altitude", "eddie", "CBDS", "course" ], "presenters": [ "Brad Frost" ] }, { "id": "74521446", "course": "ai-design-systems", "position": 94, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "The Check Engine Light For Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74521446-the-check-engine-light-for-design-systems", "free": false, "summary": "Frames Chapter 3 with a car metaphor: most design systems run fine on the surface, but the check engine light is on. Maps three damage tiers — loose gas cap (cosmetic: layer names, off tokens, components that don't follow the rules), alternator (detached instances, hardcoded values, missing component properties — slowly losing the structure that makes the system useful), and transmission (no semantic structure, no metadata, no connection to code — the kind of damage that makes AI tools generate garbage and cause more harm than good).", "tags": [ "assessment", "concepts", "design tokens", "components" ], "presenters": [ "Brad Frost" ] }, { "id": "76487157", "course": "ai-design-systems", "position": 95, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "How AI Can Help With Assessing A Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76487157-how-ai-can-help-with-assessing-a-design-system", "free": false, "summary": "Opens the assessment arc: manually auditing a design system is slow, tedious, and quickly stale because assets are siloed and expertise is uneven across design, code, and docs. Positions AI as the fix — it can crawl the engine, check assets against organizational standards and industry best practices, surface drift, gaps, and contradictions humans miss, and uniquely evaluate the relationships between assets, then turn the corner and help make improvements.", "tags": [ "assessment", "ai", "concepts" ], "presenters": [ "Brad Frost" ] }, { "id": "76487516", "course": "ai-design-systems", "position": 96, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Design System Inspection Qualities", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76487516-design-system-inspection-qualities", "free": false, "summary": "Walks through the five qualities the multi-point inspection assesses: completeness (all the tokens, components, variants, and docs your org needs), soundness (is what's there actually good, accessible, tested), synchronization (are design, code, and docs orchestrated together), extensibility (governance, measured adoption, the virtuous system-product cycle), and AI readiness — can LLMs actually read and wield the system's ingredients.", "tags": [ "assessment", "concepts", "synchronization", "governance" ], "presenters": [ "Brad Frost" ] }, { "id": "76488028", "course": "ai-design-systems", "position": 97, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Design System Inspection Stations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76488028-design-system-inspection-stations", "free": false, "summary": "Introduces the ten inspection stations that structure the rest of the chapter: coverage & gaps, best practices, accessibility, shared language, testing & validation, orchestration of assets, governance & version control, feedback & adoption, machine-readable documentation, and agent access. Each station maps back to the five qualities and yields tangible actions for turning off the check engine light.", "tags": [ "assessment", "concepts", "documentation", "governance" ], "presenters": [ "Brad Frost" ] }, { "id": "76742000", "course": "ai-design-systems", "position": 98, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Installing & Using The DS Inspection Kit", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76742000-installing-using-the-ds-inspection-kit", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "76494809", "course": "ai-design-systems", "position": 99, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 1: Coverage & Gaps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76494809-station-1-coverage-gaps", "free": false, "summary": "Kicks off Station 1 by cataloguing the usual gap culprits: missing meat-and-potatoes components, uneven coverage across the three-legged stool of design, code, and docs, half-baked token systems, and thin or missing documentation. Shows how feeding system assets into an LLM produces a gap analysis, then goes further — generating a missing pagination component or translating a card from code to design. Closes with a caveat that the demos capture a specific moment in a fast-moving AI tooling landscape.", "tags": [ "assessment", "components", "documentation", "design tokens" ], "presenters": [ "Brad Frost" ] }, { "id": "74879702", "course": "ai-design-systems", "position": 100, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma MCP - Installing into Claude Desktop App", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74879702-figma-mcp-installing-into-claude-desktop-app", "free": false, "summary": "Walks through adding the official Figma MCP connector to the Claude Desktop app — installing it via the in‑chat plus menu → Connectors → Manage connectors → Browse → Figma → Install, enabling the Desktop MCP server inside Figma's dev mode, restarting Claude so the tools load, and verifying with 'what component am I on in Figma?' to get back the slpl‑text‑field metadata in both Claude chat and Claude Code.", "tags": [ "figma", "mcp", "claude", "tools" ], "presenters": [ "Ian Frost" ] }, { "id": "74879752", "course": "ai-design-systems", "position": 101, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma MCP - Installing Into Claude Code in the Terminal", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74879752-figma-mcp-installing-into-claude-code-in-the-terminal", "free": false, "summary": "Sets up the Figma MCP for Claude Code running in a terminal (Warp). Launches Claude with --dangerously-skip-permissions, finds no MCP servers configured, runs the install command from the Figma MCP guide, re‑launches Claude Code, verifies the figma‑builtin MCP is connected, re‑authenticates, and confirms it works by passing a Figma component link via right‑click → Copy → 'Copy link to selection' and asking 'what component am I on in Figma?'", "tags": [ "figma", "mcp", "claude", "tools" ], "presenters": [ "Ian Frost" ] }, { "id": "74879780", "course": "ai-design-systems", "position": 102, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma MCP - Translating Figma Component into Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74879780-figma-mcp-translating-figma-component-into-code", "free": false, "summary": "End‑to‑end demo of translating the AI‑ready Soul Patrol text field component from Figma into code via the Figma MCP and Claude Code. Claude pulls Figma metadata, surveys the existing Lit web component library (text-area, checkbox patterns) to align with house conventions, generates the .ts component file, SCSS, Storybook stories, and a Playwright unit test directory — and even invents an inverted variant by extrapolating from neighboring form fields. Lands a working text field in Storybook using the right design tokens (color/content/utility/error etc.).", "tags": [ "figma", "mcp", "claude", "soul patrol", "code" ], "presenters": [ "Ian Frost" ] }, { "id": "74942444", "course": "ai-design-systems", "position": 103, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma MCP - Translating Component Variant in Code Into Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74942444-figma-mcp-translating-component-variant-in-code-into-figma", "free": false, "summary": "Brad runs the Figma MCP in reverse. Code has an inverted text field variant that Figma lacks, so he asks Claude Code to translate it into the Figma component set, placed to the right of the existing success, error, and disabled states, with a link to the component for context. Claude reads the knockout variables and focus states, clones the non-state variants, and adds a fifth column with a dark background, label and field note bound to the content knockout token. Reflects on MCPs as the tether that finally aligns design, code, and docs, whichever side you start from.", "tags": [ "figma", "mcp", "claude", "soul patrol", "synchronization" ], "presenters": [ "Brad Frost" ] }, { "id": "76655536", "course": "ai-design-systems", "position": 104, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Clarifying Architecture, Finding More Gaps, and Capturing Tickets", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76655536-eddie-clarifying-architecture-finding-more-gaps-and-capturing-tickets", "free": false, "summary": "Live Eddie demo acting on Station 1's inspection report: Brad uses Claude Code in Warp to record that Figma is intentionally not a maintained leg (Eddie is developer-only), then runs TJ's design systems MCP to compare Eddie against popular systems like Material, Carbon, and Nord. The gap analysis clusters findings into interactive overlays and data-dense display, and Brad captures the results as GitHub issues in Eddie's backlog — with button loading state flagged as the gap to tackle first.", "tags": [ "eddie", "assessment", "claude", "mcp", "governance" ], "presenters": [ "Brad Frost" ] }, { "id": "76655671", "course": "ai-design-systems", "position": 105, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Building a Loading State Button", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76655671-eddie-building-a-loading-state-button", "free": false, "summary": "Continues the Eddie demo by building the button loading state the gap analysis flagged: AI adds an isLoading prop following Eddie's documented component API naming conventions, renders the spinner, and — after a follow-up round — matches the disabled state's tokens and cursor treatment since a loading button is disabled. Brad iterates through a bare-variant Storybook story, a Storybook interaction test showing the default-to-loading transition, and exposing the pattern in Eddie Brain's MCP server so humans and agents use it properly downstream.", "tags": [ "eddie", "components", "props", "claude", "ai-coding" ], "presenters": [ "Brad Frost" ] }, { "id": "76502089", "course": "ai-design-systems", "position": 106, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 1: Review & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76502089-station-1-review-considerations", "free": false, "summary": "Wraps Station 1 with key considerations: AI assessments work both across the whole core system and on the relationships between assets (in Figma but not code, missing docs), but humans make the judgment calls — the reports are healthy conversation starters for prioritizing which gaps are most urgent. Defines success as an air-quotes \"complete\" library evenly represented in design, code, and docs that covers the majority of core product needs, not one hundred percent of use cases.", "tags": [ "assessment", "culture", "process" ], "presenters": [ "Brad Frost" ] }, { "id": "76512636", "course": "ai-design-systems", "position": 107, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 2: Best Practices", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76512636-station-2-best-practices", "free": false, "summary": "Brad introduces Station 2 of the design system tune-up: do your design system assets embody best practices, both industry-wide conventions and your organization's own standards? He catalogs common check-engine-light symptoms across Figma libraries (missing auto layout, messy layer names, detached instances), code (hard-coded magic numbers, overstuffed APIs, poor token architecture), and documentation (walls of text, no cross-linking), then explains how feeding assets into an LLM produces a best-practices audit that fuels asset improvements.", "tags": [ "assessment", "figma", "standards", "linting" ], "presenters": [ "Brad Frost" ] }, { "id": "74881193", "course": "ai-design-systems", "position": 108, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Introducing & Configuring FigmaLint", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74881193-introducing-configuring-figmalint", "free": false, "summary": "TJ introduces FigmaLint — a free, open‑source Figma community plugin built by Southleft that audits design system components for AI readiness. Walks through finding it in the Figma community, installing it, and the first‑run setup screen where you pick a model provider (Claude, ChatGPT, or Gemini), paste an API key (with pricing context), and save — using the Altitude design system's button page as the working example.", "tags": [ "figmalint", "figma", "southleft", "altitude", "linting" ], "presenters": [ "TJ Pitre" ] }, { "id": "74881246", "course": "ai-design-systems", "position": 109, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Analyzing a Component with FigmaLint", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74881246-analyzing-a-component-with-figmalint", "free": false, "summary": "TJ runs FigmaLint's Analyze Component on the Altitude design system's button and walks through every section of the audit: overall AI‑readiness score (72%), interactive states, design token usage (37/55, 18 hardcoded values), component readiness with a missing description, accessibility, layer naming issues (frame 22, frame 1234), recipe suggestions sourced from Carbon and Polaris via the Design Systems Assistant MCP, the token analysis breakdown (current/broken/border/border‑radius/spacing), the AI interpretation panel, and developer handoff via Markdown or JSON spec.", "tags": [ "figmalint", "figma", "assessment", "altitude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74881525", "course": "ai-design-systems", "position": 110, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Fixing Component Issues with FigmaLint", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74881525-fixing-component-issues-with-figmalint", "free": false, "summary": "TJ uses FigmaLint's auto‑fix capabilities to remediate the issues it found in the Altitude button: bulk‑renaming default frame layers to descriptive names, mapping hardcoded color/border‑radius/spacing values to existing variables (with a fallback prompt when no semantic match is found), and adding a component description. Re‑runs the analysis and lands a perfect 100% score, making the component ready for MCP‑powered design‑to‑code workflows.", "tags": [ "figmalint", "figma", "design tokens", "altitude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74845090", "course": "ai-design-systems", "position": 111, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Improving Soul Patrol components with FigmaLint", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74845090-improving-soul-patrol-components-with-figmalint", "free": false, "summary": "Hands‑on walkthrough of installing FigmaLint into the Soul Patrol component library and analyzing the slpl-text-field component. Shows the initial 74% score, fixes the 14 hardcoded color values to design tokens (utility/error etc.), swaps a 2px hardcoded border for the small border‑radius token, lets AI generate a component description (purpose, behavior, composition, usage, code‑gen notes), re‑runs the analysis, and lands at 100% — making the text field AI‑ready.", "tags": [ "figmalint", "soul patrol", "design tokens", "figma" ], "presenters": [ "Ian Frost" ] }, { "id": "74979165", "course": "ai-design-systems", "position": 112, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma Console MCP - Install into Claude Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74979165-figma-console-mcp-install-into-claude-code", "free": false, "summary": "TJ installs the Figma Console MCP into Claude Code, choosing the npx local setup for the fullest feature set. Walks the prerequisites (Node, Figma desktop, an MCP client), pastes the install command with a Figma personal access token, then imports the generated manifest.json as a development plugin to enable the Figma Desktop bridge and confirms the green MCP-ready dot. Verifies the wiring from Claude Code by asking which Figma file is open and getting back the Soul Patrol component library, text field page.", "tags": [ "figma console mcp", "claude", "soul patrol", "southleft", "mcp" ], "presenters": [ "TJ Pitre" ] }, { "id": "74979195", "course": "ai-design-systems", "position": 113, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma Console MCP - Assessing Component Synchronization in Design and Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74979195-figma-console-mcp-assessing-component-synchronization-in-design-and-code", "free": false, "summary": "TJ asks Claude Code, via Figma Console MCP, to analyze the Soul Patrol text field in both Figma and code and flag misalignments before the library is published. The audit lists what lines up cleanly, then the blockers: error and success styles never reach the input in code, the Figma component set has inconsistent property combinations across variants, the inverted variant lacks a focus ring override, and the disabled label selector targets the wrong tree. Explains why Figma inspection runs slower than code, and argues for catching this upstream rather than after downstream teams find it, with the findings ready to become GitHub issues or to be fixed directly in the next lesson.", "tags": [ "figma console mcp", "synchronization", "assessment", "soul patrol", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "74979217", "course": "ai-design-systems", "position": 114, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma Console MCP - Bidirectional Figma and Code Component Changes From Assessment", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74979217-figma-console-mcp-bidirectional-figma-and-code-component-changes-from-assessment", "free": false, "summary": "TJ feeds the first two audit findings back to Claude Code and Figma Console MCP and asks it to fix them in both places. In code it corrects a stale class name in the input mixin so success and error backgrounds and borders finally render; in Figma it repairs the property errors and adds the missing inverted and disabled combinations as new variants to the right of the set. Watches the variants appear (and briefly vanish) on the canvas, and marvels at editing design and code in one pass after a decade of doing it by hand, noting Storybook stories for the new states are one more prompt away.", "tags": [ "figma console mcp", "synchronization", "soul patrol", "claude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75335585", "course": "ai-design-systems", "position": 115, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma Console MCP - Create New Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75335585-figma-console-mcp-create-new-tokens", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75335441", "course": "ai-design-systems", "position": 116, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma Console MCP - Implement New Tokens Into Figma Component Library", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75335441-figma-console-mcp-implement-new-tokens-into-figma-component-library", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75335530", "course": "ai-design-systems", "position": 117, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Figma Console MCP - Translate New Tokens Into Code and Storybook", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75335530-figma-console-mcp-translate-new-tokens-into-code-and-storybook", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "76655958", "course": "ai-design-systems", "position": 118, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Fixing the Danger Button Dead Prop", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76655958-eddie-fixing-the-danger-button-dead-prop", "free": false, "summary": "Brad tackles Eddie's biggest Station 2 fix: the ed-button's variant=\"danger\" dead prop, declared in TypeScript but with no styles or Storybook presence — the kind of paper cut that erodes trust in a design system. Using Claude in Warp, he wires up the danger variant with button-specific tier-three tokens that fall back to tier-two semantic error tokens via CSS custom properties, catches Claude improperly reaching for knockout tokens, corrects it to the default error tokens, and files follow-up issues for a strong utility token variant.", "tags": [ "eddie", "props", "design tokens", "claude", "storybook" ], "presenters": [ "Brad Frost" ] }, { "id": "76512654", "course": "ai-design-systems", "position": 119, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 2: Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76512654-station-2-recap-considerations", "free": false, "summary": "Brad wraps up Station 2 by unpacking what \"best practices\" actually means: industry-wide de facto conventions, tool-specific conventions like Figma's, and your organization's own brand, UX, and front-end standards. He recommends feeding all design system assets into the AI assessment for full context, but narrowing to one asset (Figma library, code library, or docs) when making improvements so downstream users get those best practices for free.", "tags": [ "assessment", "standards", "process" ], "presenters": [ "Brad Frost" ] }, { "id": "76519781", "course": "ai-design-systems", "position": 120, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 3: Accessibility", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76519781-station-3-accessibility", "free": false, "summary": "Brad introduces Station 3, giving accessibility its own station in the tune-up because it's so critical to a sound design system foundation. He covers the warning signs — failing Lighthouse/axe-core audits, no accessibility testing in the workflow, contrast violations, missing keyboard controls, undocumented considerations — traces them back to cultural contexts that deprioritize accessibility, and previews how LLM-driven audits and remediation (like tweaking token systems to pass WCAG) can sturdy up accessibility foundations.", "tags": [ "accessibility", "assessment", "testing" ], "presenters": [ "Brad Frost" ] }, { "id": "76656769", "course": "ai-design-systems", "position": 121, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Fixing Modal Focus Trap", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76656769-eddie-fixing-modal-focus-trap", "free": false, "summary": "Brad fixes the highest-priority issue from Eddie's inspection: the modal and drawer lack real focus management. After demonstrating the broken keyboard behavior against the W3C's no-keyboard-trap guidance, he has Claude Code run a discovery pass on writing from accessibility experts (Sara Soueidan, Hidde de Vries, Marcy Sutton, Eric Bailey, Scott O'Hara, Heydon Pickering), which lands on \"don't build a focus trap — use the platform\": migrating from div role=\"dialog\" to the native dialog element with a dialog controller handling initial focus placement and focus return, plus Lit/shadow DOM wrinkles, all verified in Storybook.", "tags": [ "eddie", "accessibility", "claude", "components" ], "presenters": [ "Brad Frost" ] }, { "id": "76519818", "course": "ai-design-systems", "position": 122, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 3: Accessibility Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76519818-station-3-accessibility-recap-considerations", "free": false, "summary": "Brad closes Station 3 with the key caveats: automated checks are only part of the game (tab through experiences, run VoiceOver, do the manual verification), an accessible design system doesn't automatically produce accessible products since much happens at the composition and page level, and accessibility checks belong in the workflow and definition of done. He argues accessibility is an increasingly powerful way to pitch and position design systems in the age of vibe coding and AI-generated UI.", "tags": [ "accessibility", "assessment", "testing" ], "presenters": [ "Brad Frost" ] }, { "id": "76519839", "course": "ai-design-systems", "position": 123, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 4: Shared Language", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76519839-station-4-shared-language", "free": false, "summary": "Brad introduces Station 4: is language used consistently within and across design system assets? He runs through the most common offenders — size=\"large\" in one component vs size=\"lg\" in the next, competing token naming algorithms, docs that disagree with design and code — traces them to undocumented naming standards, and shows how LLMs can generate a consistency report and then align language across all assets in one fell swoop, something that wasn't possible before LLMs hit the scene.", "tags": [ "vocabulary", "terminology", "assessment", "design tokens" ], "presenters": [ "Brad Frost" ] }, { "id": "76661427", "course": "ai-design-systems", "position": 124, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Normalizing Shared Language with Knockout", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76661427-eddie-normalizing-shared-language-with-knockout", "free": false, "summary": "Brad normalizes Eddie's shared language by migrating the \"inverted\" prop to \"knockout\" across the library — the term for components sitting against dark backgrounds. He sets a three-month deprecation window, has the AI add knockout props with a backwards-compatible knockout-or-inverted fallback (complete with deprecated strikethrough signals in the editor), and confirms knockout is now the canonical term exposed via the Eddie Brain MCP while inverted still catches as a deprecated fallback.", "tags": [ "eddie", "vocabulary", "props", "governance", "claude" ], "presenters": [ "Brad Frost" ] }, { "id": "76552051", "course": "ai-design-systems", "position": 125, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 4: Shared Language Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76552051-station-4-shared-language-recap-considerations", "free": false, "summary": "Brad recaps Station 4: consistent language is the glue and the contract that lets both humans and AI reason about a design system, making it more maintainable and easier to use for downstream consumers and AI agents alike. He warns against bull-in-a-china-shop renaming that upends hard-earned conventions in production, pointing to version control, codemods, and good communication hygiene as the safety net.", "tags": [ "vocabulary", "terminology", "assessment", "agents" ], "presenters": [ "Brad Frost" ] }, { "id": "76552059", "course": "ai-design-systems", "position": 126, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 5: Testing & Validation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76552059-station-5-testing-validation", "free": false, "summary": "Introduces Station 5 by walking through common testing gaps in design systems — no CI, no linting, no visual regression testing, hollow test suites with green checkboxes, and no evals judging AI-produced code — and sets up TJ's demos on feeding code libraries into LLMs to generate testing coverage reports and strengthen validation systems.", "tags": [ "testing", "evals", "linting", "assessment" ], "presenters": [ "Brad Frost" ] }, { "id": "76603751", "course": "ai-design-systems", "position": 127, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Deterministic and Agentic testing with FigmaLint", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76603751-deterministic-and-agentic-testing-with-figmalint", "free": false, "summary": "TJ introduces AI-forward ways of testing design systems, using FigmaLint as an example of deterministic testing — checking whether component properties and values are present and correct — plus a language-model-as-a-judge step that makes subjective recommendations, like suggesting a size variant and icon position property for an alert component.", "tags": [ "figmalint", "testing", "evals", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76603841", "course": "ai-design-systems", "position": 128, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Evals Testing", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76603841-evals-testing", "free": false, "summary": "TJ demos a DS component eval skill in Claude Code that runs a repeatable accessibility and design system QA evaluation on a chip component set via the Figma Console MCP, combining deterministic Python-scripted checks with LLM-as-judge feedback from the Design Systems Assistant MCP. The eval scores the component 81.4 out of 100, flagging a missing focus state and state coverage gaps weighed against WCAG.", "tags": [ "evals", "skills", "figma console mcp", "claude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76603849", "course": "ai-design-systems", "position": 129, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Playwright Testing & Self-Healing Loops", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76603849-playwright-testing-self-healing-loops", "free": false, "summary": "TJ has Claude Code develop the chip component as a Storybook component with stories, then invokes the Playwright MCP to enter a self-healing loop that screenshots, reviews, and fixes the component in a background browser — verifying markup, tokens, keyboard focus rings, selectable toggle, and dismiss behavior, running axe accessibility scans (zero violations, 20 passes), and fixing the focus indicator eval blocker for Figma-to-code parity.", "tags": [ "testing", "storybook", "claude", "mcp", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76661429", "course": "ai-design-systems", "position": 130, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Closing Keyboard & Behavioral Testing Gaps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76661429-eddie-closing-keyboard-behavioral-testing-gaps", "free": false, "summary": "Brad addresses the Eddie design system's testing gaps flagged in the work order: he keeps Chromatic visual regression non-blocking by design while the design language matures, then uses Claude Code to write keyboard and behavioral unit tests for the Tooltip trigger component — growing the Vitest suite from 1,363 structural tests to 1,380, with 24 tests organized into behavioral groups covering escape key, click interaction, and focus management.", "tags": [ "eddie", "testing", "claude", "accessibility" ], "presenters": [ "Brad Frost" ] }, { "id": "76552064", "course": "ai-design-systems", "position": 131, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 5: Testing & Validation Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76552064-station-5-testing-validation-recap-considerations", "free": false, "summary": "Recaps Station 5 with key considerations: traditional deterministic testing (unit, visual regression, end-to-end, integration) is still essential and AI can help establish that architecture and DevOps work; AI testing and evals are still young and a moving landscape; and humans need to validate beyond green checkboxes and give the final blessing to promote trust in the design system.", "tags": [ "testing", "evals", "assessment" ], "presenters": [ "Brad Frost" ] }, { "id": "76552067", "course": "ai-design-systems", "position": 132, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 6: Orchestration", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76552067-station-6-orchestration", "free": false, "summary": "Introduces Station 6 on orchestration: drift between Figma libraries, code repos, published packages, and documentation stems largely from siloed, handoff-driven human processes. AI can assess both design system assets and human processes — ingesting Jira/GitHub/Notion boards, emails, and Slack or Teams correspondence — to produce a more synchronized system, setting up TJ's demos on the context-based design system.", "tags": [ "synchronization", "drift", "process", "assessment" ], "presenters": [ "Brad Frost" ] }, { "id": "77363868", "course": "ai-design-systems", "position": 133, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Context-Based Design Systems Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77363868-context-based-design-systems-overview", "free": false, "summary": "TJ defines the full context-based design system lifecycle. Design ideation loads a component with metadata, variants, states, and annotations; design QA lints it with FigmaLint or Check Designs; a design-to-development protocol via an MCP lets the product designer, now a design engineer, draft the code on their own branch; a context engineer reviews the pull request against organizational standards; then testing, versioning and publishing, a prototyping playground like Story UI, and approval and integration close the loop. Zooms into the artifact and human layers to show where designer ownership hands off to engineering, and argues the context lives in Figma descriptions, annotations, and metadata rather than in separate markdown kits.", "tags": [ "context-based design systems", "workflow", "figmalint", "mcp", "southleft" ], "presenters": [ "Brad Frost" ] }, { "id": "76682098", "course": "ai-design-systems", "position": 134, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Fixing Synchronization in Knowledge Graph & CLAUDE.md", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76682098-eddie-fixing-synchronization-in-knowledge-graph-claude-md", "free": false, "summary": "Brad tackles Eddie's 6/10 orchestration score by fixing drift between the actual library source (93 core components, 20 recipes, 13 pages) and what claude.md and Eddie Brain claim (88 components, 12 recipes, 12 pages). Claude Code builds sync checks into the build and CI process, scopes the knowledge graph to the seven core themes (excluding experimental v9 themes), and governs every doc with counts so the artifacts can't silently drift again.", "tags": [ "eddie", "drift", "synchronization", "claude", "documentation" ], "presenters": [ "Brad Frost" ] }, { "id": "76552075", "course": "ai-design-systems", "position": 135, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 6: Orchestration Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76552075-station-6-orchestration-recap-considerations", "free": false, "summary": "Recaps Station 6: orchestration is ultimately a culture and workflow problem that tooling alone can't solve, but AI can analyze human processes, let agents cross-reference assets beyond old-fashioned hyperlinks, and enforce a definition of done spanning design library, code library, and documentation — while avoiding duplicated sources of truth and adopting TJ's context-based design system workflow.", "tags": [ "synchronization", "culture", "workflow", "agents" ], "presenters": [ "Brad Frost" ] }, { "id": "76569362", "course": "ai-design-systems", "position": 136, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 7: Governance & Version Control", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76569362-station-7-governance-version-control", "free": false, "summary": "Introduces Station 7 of the design system tune-up: governance and version control. Covers the warning signs — no formal (or unrealistic) governance process, missing changelogs, issue/PR templates and contribution guidelines, piles of duplicate and stale issues, and no steady release cadence — and how AI can analyze GitHub issues, PRs, contributing docs, and support channels to surface insights and strengthen governance.", "tags": [ "governance", "assessment", "process" ], "presenters": [ "Brad Frost" ] }, { "id": "76682204", "course": "ai-design-systems", "position": 137, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Improving Governance with Branch Protection and PR Template", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76682204-eddie-improving-governance-with-branch-protection-and-pr-template", "free": false, "summary": "Eddie scored 7/10 on governance and version control, and the inspection flagged two easy fixes: no branch protection on main and no PR template. Brad adds a GitHub branch protection rule requiring a pull request plus passing build, test (unit, Storybook, accessibility), and validation status checks — skipping required approvals since GitFlow routes work through develop — then creates a simple PR template wired to the contributing guidelines, branching model, and code guidelines.", "tags": [ "eddie", "governance", "code", "testing" ], "presenters": [ "Brad Frost" ] }, { "id": "76682243", "course": "ai-design-systems", "position": 138, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Using Figma Console MCP to Create Eddie-s Governance Diagram", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76682243-eddie-using-figma-console-mcp-to-create-eddie-s-governance-diagram", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "76569370", "course": "ai-design-systems", "position": 139, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 7: Governance & Version Control Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76569370-station-7-governance-version-control-recap-considerations", "free": false, "summary": "Recaps Station 7 with considerations for pointing AI at governance: a formal process tuned to your org's actual reality is table stakes, and AI can synthesize ephemera — GitHub issues, meeting notes, support communications — to paint a picture of what's really happening. It can then help create governance artifacts like workflow diagrams, better changelogs, and automated release communications, and power feedback loops that turn Slack support questions into governance improvements.", "tags": [ "governance", "process", "assessment" ], "presenters": [ "Brad Frost" ] }, { "id": "76569404", "course": "ai-design-systems", "position": 140, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 8: Feedback & Adoption", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76569404-station-8-feedback-adoption", "free": false, "summary": "Introduces Station 8: feedback and adoption. Warning signs include no adoption or usage analytics, threadbare \"This is broke. Please fix\" support tickets, a design system team detached from product roadmaps, and teams scrapping or hacking the system without the team knowing. AI can monitor product files, repos, backlogs, and roadmaps as intel to inform the design system's backlog and create connective tissue between product and system work.", "tags": [ "assessment", "governance", "culture", "data" ], "presenters": [ "Brad Frost" ] }, { "id": "76682258", "course": "ai-design-systems", "position": 141, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Feedback & Adoption", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76682258-eddie-feedback-adoption", "free": false, "summary": "Eddie scored 6/10 on feedback and adoption because its agentic feedback loop was never switched on — learning.json sat empty. Working from a GitHub issue in a fresh Warp session, Brad has AI diagnose two root causes (the file getting wiped, and no persistence), build a correction flywheel that persists corrections to learning.json, add adoption analytics that scan consumer repos for zero-adoption components, and validate the loop end-to-end by capturing a real isDisabled naming error.", "tags": [ "eddie", "agents", "claude", "workflow" ], "presenters": [ "Brad Frost" ] }, { "id": "76569417", "course": "ai-design-systems", "position": 142, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 8: Feedback & Adoption Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76569417-station-8-feedback-adoption-recap-considerations", "free": false, "summary": "Recaps Station 8: adoption analytics numbers (how many times a button is used and by whom) are only part of the picture. AI plugged into product landscapes can act as eyes in the sky to understand how teams actually use the design system, where they succeed, and what frustrates them, then feed that back to inform the system's priorities and roadmap — bringing the historically distant worlds of product and system closer together.", "tags": [ "assessment", "data", "agents", "culture" ], "presenters": [ "Brad Frost" ] }, { "id": "76569496", "course": "ai-design-systems", "position": 143, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 9: Machine Readable Docs & Context", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76569496-station-9-machine-readable-docs-context", "free": false, "summary": "Introduces Station 9, the first of two AI-readiness stations: machine-readable docs and context. The check engine light is on when documentation, code, and usage guidelines all exist but there's no explicit AI-facing context surface, so agents misuse components. LLMs can evaluate how AI-ready your docs and component metadata are, then help generate machine-readable metadata — with the caveat that these tools and techniques are emerging and changing constantly.", "tags": [ "documentation", "context engineering", "agents", "assessment" ], "presenters": [ "Brad Frost" ] }, { "id": "76168173", "course": "ai-design-systems", "position": 144, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Company Docs and Figma MCP Tools", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76168173-company-docs-and-figma-mcp-tools", "free": false, "summary": "TJ introduces an agentic documentation workflow: generating machine-readable docs straight from Figma using the Figma Console MCP's Generate Docs tool (which captures component descriptions, properties, and annotations into markdown), plus Company Docs, a custom MCP that connects documentation to any MCP client like Claude, Cursor, Slack, Replit, or Lovable. An open skills repository offers the same capabilities for teams limited to Figma's native MCP.", "tags": [ "documentation", "figma console mcp", "mcp", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76168184", "course": "ai-design-systems", "position": 145, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Generating documentation from Figma with Company Docs", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76168184-generating-documentation-from-figma-with-company-docs", "free": false, "summary": "TJ demos generating text area component docs from Figma in Warp using the Generate Docs tool: it pulls the component's 13 variants, annotations, and house-style reference, runs a code parity check against the codebase's text area TypeScript file, and outputs robust markdown with front matter, anatomy, states, token specs, usage guidelines, and accessibility rules. A release command then pushes the docs to both Company Docs (a Supabase vector database) and Mintlify, with Zeroheight also able to consume the markdown.", "tags": [ "documentation", "figma console mcp", "figma", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76682274", "course": "ai-design-systems", "position": 146, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Fix Machine-Readable Docs & Context", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76682274-eddie-fix-machine-readable-docs-context", "free": false, "summary": "Eddie scored 8/10 on machine-readable docs and context, but the Eddie Brain MCP validate-file tool was misinterpreting slots in child components — returning 34 false-positive issues on homepage.ts — and some component metadata marked optional props as required. Brad has AI fix the validator tools and metadata accuracy via a PR, reconnects the MCP, and re-runs Eddie validate file to confirm an issue count of zero end-to-end.", "tags": [ "eddie", "mcp", "documentation", "claude" ], "presenters": [ "Brad Frost" ] }, { "id": "76569510", "course": "ai-design-systems", "position": 147, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 9: Machine Readable Docs & Context Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76569510-station-9-machine-readable-docs-context-recap-considerations", "free": false, "summary": "Recaps Station 9: \"docs exist\" (covered back in Station 1) is not the same as \"a machine can actually pick up those docs and use them properly.\" Getting there requires iteration — having AI generate compositions, recipes, components, and full pages to see where it trips up, then feeding that back to strengthen the machine-readable documentation — while remembering these formats and techniques are still evolving alongside the AI models themselves.", "tags": [ "documentation", "context engineering", "agents", "evals" ], "presenters": [ "Brad Frost" ] }, { "id": "76569538", "course": "ai-design-systems", "position": 148, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 10: Agent Access", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76569538-station-10-agent-access", "free": false, "summary": "Introduces Station 10, the final inspection station: agent access — whether your design system is actually exposed to AI agents via MCP servers, knowledge graphs, and integrations into design tools and code IDEs. AI can assess existing MCP servers, Figma Code Connect, and documentation, then help create the MCP server and skills needed — though the tooling landscape is moving fast, so carry the spirit rather than the specifics.", "tags": [ "agents", "mcp", "code connect", "assessment" ], "presenters": [ "Brad Frost" ] }, { "id": "76168192", "course": "ai-design-systems", "position": 149, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Publishing docs via Mintlify", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76168192-publishing-docs-via-mintlify", "free": false, "summary": "TJ shows the released docs rendered in Mintlify, a free documentation host similar to Docusaurus, running locally from the same repo as the components. The text area page mirrors the generated markdown — Figma and source links, anatomy, states in tabular form, token specs, usage guidelines, and accessibility rules — and can be published to a customizable live URL as the human-readable half of the docs pipeline.", "tags": [ "documentation", "tools", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76168200", "course": "ai-design-systems", "position": 150, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Publishing & Using Company Docs MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76168200-publishing-using-company-docs-mcp", "free": false, "summary": "TJ walks through Company Docs, an open-source custom MCP built on a Cloudflare worker with a Supabase vector database that ingests markdown plus HTML, PDFs, and live URLs. He connects it to Claude as a connector at eventz-docs-mcp.southleft-llc.workers.dev/mcp with four search-and-retrieval tools, queries text area docs and tag token specs, and notes you can plug it into Lovable, Replit, or v0 to generate UI grounded in your design system documentation.", "tags": [ "documentation", "mcp", "claude", "open-source", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76682338", "course": "ai-design-systems", "position": 151, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Publishing Eddie-Brain MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76682338-eddie-publishing-eddie-brain-mcp", "free": false, "summary": "Brad addresses a Station 10 finding (a 7/10 inspection score) by publishing the Eddie Brain MCP server — previously a local stdio server reading the knowledge graph from disk — as a hosted remote MCP on Netlify with a streamable HTTP entry point and bundled knowledge graph. He verifies it by installing it into OpenAI's Codex, which correctly resolves the EdCard component with its props, slots, composition notes, and usage guidance.", "tags": [ "eddie", "mcp", "agents", "claude" ], "presenters": [ "Brad Frost" ] }, { "id": "76569558", "course": "ai-design-systems", "position": 152, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Station 10: Agent Access Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76569558-station-10-agent-access-recap-considerations", "free": false, "summary": "Wraps up Station 10 and the full multi-point inspection: machine-readable docs (Station 9) are only the first step — real success comes from connecting your design system to the actual tooling environments your organization uses. Agent-access tools and techniques are still emerging, so this is not set-it-and-forget-it; expect to revisit how you expose your design system to AI agents as the landscape evolves.", "tags": [ "agents", "mcp", "documentation", "assessment" ], "presenters": [ "Brad Frost" ] }, { "id": "76687246", "course": "ai-design-systems", "position": 153, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Eddie: Drumroll, Please! New DS Inspection Results", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76687246-eddie-drumroll-please-new-ds-inspection-results", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "76687329", "course": "ai-design-systems", "position": 154, "chapter": { "position": 3, "title": "Chapter 3: Make Better Design Systems With AI" }, "title": "Chapter 3 Summary, Homework, and Next Steps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76687329-chapter-3-summary-homework-and-next-steps", "free": false, "summary": "Chapter 3 wrap-up: recaps the five qualities of a healthy design system (complete, sound, synchronized, extensible, AI ready) and the 10 inspection stations. Homework is to run the multi-point inspection on your own design system — using the inspection kit demonstrated with Eddie or your own tools — before chapter four turns to building products with AI and your newly improved design system.", "tags": [ "course", "assessment", "eddie" ], "presenters": [ "Brad Frost" ] }, { "id": "76755568", "course": "ai-design-systems", "position": 155, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Chapter 4 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76755568-chapter-4-introduction", "free": false, "summary": "Introduces Chapter 4: Make Better Products with AI and Design Systems. Covers TJ's context-based design system concept, the cascade of quality across process stages, the connected DS↔product feedback loop, and new cross-disciplinary collaborative superpowers.", "tags": [ "course", "context-based design systems", "workflow", "process" ], "presenters": [ "Brad Frost" ] }, { "id": "77515644", "course": "ai-design-systems", "position": 156, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Types of Product Work & The Redefined Process", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77515644-types-of-product-work-the-redefined-process", "free": false, "summary": "Brad opens Chapter 4 by naming the flavors of product work through car metaphors — ongoing feature work (a new Civic model year), greenfield (a concept car), legacy adoption (the electric VW bus), and rebrands or rethemes (a custom wrap) — because each shapes how a design system gets adopted. Argues there's no longer one right process; the middle is messier and more pluralistic thanks to AI and an endless stream of tools. Introduces TJ's diagram of discovery and strategy, a redefined design phase heavy on prototyping, the engineering and infrastructure line where vibe coding stops cutting it and the design system keeps things on the rails, and an evolution loop feeding back to the start.", "tags": [ "process", "workflow", "concepts", "strategy" ], "presenters": [ "Brad Frost" ] }, { "id": "77517198", "course": "ai-design-systems", "position": 157, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Discovery & Strategy", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77517198-discovery-strategy", "free": false, "summary": "Brad describes why discovery and strategy is both exciting and painful: disparate stakeholders, time and money constraints, and crucial context scattered across heads, decks, wikis, and hallway chats — plus the perennial fight to get the design system a seat at the kickoff table and prove its ROI. Explains how AI eases it: weaving all that context into a cohesive narrative, folding a machine-readable design system into the plan as core infrastructure, evaluating the current product across dimensions like accessibility and adoption to produce a before picture and a selling point, and turning the resulting plan into a living blueprint of project boards and dual-filed issues. Sets up a demonstration of a kickoff with AI and the design system in the mix.", "tags": [ "strategy", "assessment", "process", "context engineering" ], "presenters": [ "Brad Frost" ] }, { "id": "76793195", "course": "ai-design-systems", "position": 158, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Introducing The Redesign Project", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76793195-bradfrost-com-introducing-the-redesign-project", "free": false, "summary": "Brad introduces the chapter-long case study: redesigning bradfrost.com, a legacy product rebuild he's put off for more than a decade. Explains what the site is — his home on the web and the lifeblood of his business since 2013 — why it stagnated on WordPress, and the recent replatform to Eleventy that produced a fast, flat, blank-canvas starting point. Notes the old site predated Atomic Design and any design system, making this both an Eddie adoption exercise and the moment to finally design Eddie's design language for Brad Frost Web, with the product-to-system feedback loop on display throughout.", "tags": [ "eddie", "case-study", "strategy", "process" ], "presenters": [ "Brad Frost" ] }, { "id": "76793208", "course": "ai-design-systems", "position": 159, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Introducing bfw-process and SPEC", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76793208-bradfrost-com-introducing-bfw-process-and-spec", "free": false, "summary": "Brad answers \"where do we start?\" by introducing bfw-process, the Brad Frost Web software creation process encoded as portable, agent-agnostic infrastructure that sits beneath Eddie and captures Git practices, coding standards, preferred stacks, and design conventions. Its first act in any project is writing a SPEC — what the product is, who it's for, goals, non-goals, and flows — that lives in the repo as durable context for humans and agents. Since the spec hasn't been touched since the Eleventy replatform, he asks Claude Code to update bfw-process and rewrite the spec using everything it knows about him and his goals.", "tags": [ "process", "context engineering", "claude", "eddie", "standards" ], "presenters": [ "Brad Frost" ] }, { "id": "76793225", "course": "ai-design-systems", "position": 160, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Reviewing The Project SPEC", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76793225-bradfrost-com-reviewing-the-project-spec", "free": false, "summary": "Brad walks through the SPEC Claude wrote for the bradfrost.com redesign, starting with its draft status — the first human-in-the-loop gate, since nothing gets built until he approves it. The spec nails his mission (make things and help people), four derived truths about courses as North Star, the site as personal voice and permanent record, and \"keep the joy, kill the chore,\" then lays out audiences, business and craft goals including genuine full Eddie adoption, explicit non-goals, core user flows, tech decisions, accessibility requirements, and concrete success criteria like zero orphan CSS classes and Eddie validate-file passing everywhere. Explains that the context came from his bf-brain identity layer and Notion, argues for feeding LLMs as much real context as you're comfortable with, and notes the spec is referenced by agents.md so every generation inherits it.", "tags": [ "process", "context engineering", "strategy", "eddie", "claude" ], "presenters": [ "Brad Frost" ] }, { "id": "76851063", "course": "ai-design-systems", "position": 161, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Installing and Running the Product Inspection", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76851063-bradfrost-com-installing-and-running-the-product-inspection", "free": false, "summary": "Brad approves the SPEC in Claude Code, which flips it from draft to approved and opens the bfw-process gate to the evaluation phase. Claude notices the product inspection skill isn't installed, so he installs the multi-point inspection kit globally from the README (both DS inspection and product inspection), confirms /product-inspection appears in a fresh Claude Code session, and runs it against bradfrost.com. The inspection assesses ten product-facing stations and returns a 42 out of 100 — a score he grins at, since the site has barely been touched beyond the replatform and deliberately hasn't adopted Eddie yet.", "tags": [ "assessment", "skills", "claude", "eddie" ], "presenters": [ "Brad Frost" ] }, { "id": "76851069", "course": "ai-design-systems", "position": 162, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Product Inspection Results & Work Order", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76851069-bradfrost-com-product-inspection-results-work-order", "free": false, "summary": "Brad reads the product inspection artifacts for bradfrost.com: the garage overview, the report (good bones, token discipline, perfect Lighthouse, unmistakable voice — but the site doesn't fit on phones, has no tests or CI, and its archive isn't retrievable), and the station-by-station sheet, from 4% Eddie component coverage to a 2 out of 10 on testing. Savors the \"assembled, not designed\" critique as a stigma to overcome, reviews the prioritized work order, and has Claude file 16 issues on the site repo plus several dual-filed against Eddie. Lays out his three-phase plan: stop the bleeding on the reds, adopt Eddie as it stands, then redesign the site and Eddie's design language together.", "tags": [ "assessment", "eddie", "governance", "accessibility" ], "presenters": [ "Brad Frost" ] }, { "id": "77517214", "course": "ai-design-systems", "position": 163, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Discovery & Strategy Recap and Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77517214-discovery-strategy-recap-and-considerations", "free": false, "summary": "Brad recaps the discovery demo: business context, product context, the product as it stands, and the design system all go into the stew, and AI helps define the work, snapshot the current state, and produce a plan of attack. Highlights AI tearing a product apart across dimensions of quality to expose stones the team didn't know to overturn, the relief for systems people who no longer have to sell the design system on trust alone, and the magic of dual-filing issues against product and system repos from day one. Insists AI facilitates kickoff and strategy rather than replacing human judgment: don't let it decide your strategy for you.", "tags": [ "strategy", "process", "assessment" ], "presenters": [ "Brad Frost" ] }, { "id": "77597244", "course": "ai-design-systems", "position": 164, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Experience Design", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77597244-experience-design", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77597442", "course": "ai-design-systems", "position": 165, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Static Artifacts in the AI Age", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77597442-static-artifacts-in-the-ai-age", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75501133", "course": "ai-design-systems", "position": 166, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Using Figma MCP to Generate a DS-Powered Login Page", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75501133-using-figma-mcp-to-generate-a-ds-powered-login-page", "free": false, "summary": "TJ runs the figma-generate-design skill from Claude Code, pointing it at a blank page in the Eventz demo file and asking for a user login form. While it works (close to ten minutes on Opus 4.7 at high effort), he reads through the open-source skill file: front matter, the mandatory pairing with figma-use as the plugin-API workhorse, hard gates that forbid mutating the canvas before component keys, variables, and styles are collected, and the screenshot round trip it uses to check its own work. The result uses real library components — heading, inputs, checkbox, text link, button — bound to real variables with sensibly named layers, and the skill even spots and investigates a stray label background on its own. Recommends far more specific prompts for real work.", "tags": [ "figma", "mcp", "skills", "claude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75818446", "course": "ai-design-systems", "position": 167, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Building a Soul Patrol Page in Figma Using the Figma MCP and Claude Skill", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75818446-building-a-soul-patrol-page-in-figma-using-the-figma-mcp-and-claude-skill", "free": false, "summary": "Ian builds a Soul Patrol donate page in Figma with Claude Code and the Figma MCPs, after the system's check engine light work (FigmaLint, Console MCP sync) is done. Rather than a bare prompt, he feeds it a URL and screenshot of World Central Kitchen's high-converting donate page plus a custom Claude skill that encodes Soul Patrol conventions, core principles (use the real library components), and speed rules to beat the fifteen-minute generations he'd seen out of the box. Watches the header, footer, hero band, sidebar impact card, and donation form card assemble from actual library components, with FPO slot blocks replaced by real content. Close to the reference in minutes, ready for fine-grain sandpaper before it goes to code.", "tags": [ "figma", "figma console mcp", "skills", "soul patrol", "claude" ], "presenters": [ "Ian Frost" ] }, { "id": "77597701", "course": "ai-design-systems", "position": 168, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Static Artifacts Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77597701-static-artifacts-recap-considerations", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77597722", "course": "ai-design-systems", "position": 169, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Prototyping", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77597722-prototyping", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77597844", "course": "ai-design-systems", "position": 170, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Prototyping Without The Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77597844-prototyping-without-the-design-system", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "76839311", "course": "ai-design-systems", "position": 171, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Head to Head AI Prototyping Showdown", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76839311-head-to-head-ai-prototyping-showdown", "free": false, "summary": "TJ sets up a head-to-head comparison of AI prototyping platforms that can leverage a design system: Figma Make, Bolt, Vercel's v0, Claude Design, and Lovable. To level the field, every tool gets the same prompt — generate only the UI for a newsletter subscription section for a culinary publication, no database or auth — with the caveat that some tools want to add infrastructure by default. Each generation will be walked through for process, interface, and output.", "tags": [ "prototyping", "tools", "altitude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76839323", "course": "ai-design-systems", "position": 172, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Figma Make", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76839323-figma-make", "free": false, "summary": "TJ runs the newsletter prompt through Figma Make using a custom Make Kit that encodes the Altitude design system's tokens and component guidance. Tours the options — model choice (Opus), build or plan mode, attaching designs, connectors including Figma Console Cloud, custom skills — and notes local Make can point directly at real component and token code. The generation comes back quickly and faithfully: Altitude's exact input, button, and badges, compared side by side with the library. Immediately what he expected; grade A.", "tags": [ "figma make", "prototyping", "altitude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76839326", "course": "ai-design-systems", "position": 173, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Bolt", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76839326-bolt", "free": false, "summary": "TJ runs the same prompt in Bolt, a tool built to launch full apps with databases rather than prototypes, which is why the prompt had to say UI only. Shows the interface — Figma frame import, database and connector options, plan mode, GitHub and publishing hooks — and the custom design system upload (a $30-a-month tier) pointed at Altitude's GitHub repo, Storybook, and Figma file. The generation takes fifteen-plus minutes of verbose self-healing, most of it reconciling the codebase and figuring out how to render the web components, with a few minutes quibbling over spacing. The result uses Altitude's real styles and fonts with one misaligned area: a B+ for output, a C- for the chat experience and token burn.", "tags": [ "prototyping", "tools", "altitude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76839332", "course": "ai-design-systems", "position": 174, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "v0", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76839332-v0", "free": false, "summary": "TJ tries Vercel's v0, which now has a Design Systems feature fed by Altitude's GitHub repo and Figma file plus written context. Tours the interface — GitHub import, image generation, custom skills, MCPs, auto-permission for YOLO mode, and a narrower model menu where he picks Opus to stay consistent — then watches it render an image in chat, review its own output, and fix the checkboxes. The result overshoots into a full newsletter one-pager with a sticky header, but it uses Altitude's real inputs, dropdown, icons, and a two-column layout at wider widths, all in three to four minutes. Highest fidelity in the least time so far; grade A.", "tags": [ "prototyping", "tools", "altitude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76840194", "course": "ai-design-systems", "position": 175, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Claude Design", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76840194-claude-design", "free": false, "summary": "TJ runs the prompt in Claude Design with the Altitude design system uploaded and Opus selected. Unlike the others, it asks clarifying questions first — placement, publication name, form fields, which state to build, supporting content, copy tone — and he lets it decide most of them. The output streams in as an editorial-feeling page whose inputs and buttons clearly aren't Altitude's components (no floating labels), despite the uploaded system; the colors and typography are close. Likes the edit mode, tweaks chat, inline comments, and export options to PDF, PowerPoint, HTML, or Claude Code, but the design system fidelity earns a C+.", "tags": [ "prototyping", "claude", "altitude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76840199", "course": "ai-design-systems", "position": 176, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Lovable", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76840199-lovable", "free": false, "summary": "TJ closes the showdown with Lovable, a Bolt-like build-the-whole-app tool whose design system upload is gated behind an enterprise tier. His workaround is Figma Console MCP's cloud mode: get a pairing code from Lovable, paste it into the Figma desktop bridge plugin on the Altitude file, and ask Lovable to use the connector. The first generation is fast and handsome — a moody editorial section for a fictional publication — but ignores the connector entirely and uses neither Altitude's typeface nor its button: a D-. A second, more explicit prompt finally calls Get Design Kit and Figma Export Tokens and pulls some colors and the typeface, but it's still not the system.", "tags": [ "prototyping", "figma console mcp", "altitude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "76841431", "course": "ai-design-systems", "position": 177, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Prototyping Wrap Up & Other Options", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76841431-prototyping-wrap-up-other-options", "free": false, "summary": "TJ wraps the prototyping showdown with where each tool fits: Lovable for building real application logic over aesthetics; Claude Design for high-fidelity designs that export to Claude Code, where you can ask for a rebuild on your design system; v0 for faithful component use plus publishing and sharing; Bolt as a Lovable alternative that actually honored the design system; and Figma Make for speed and the round trip with the Figma canvas. Notes the usual next step is pulling a prototype into your real environment to rebuild it against the actual codebase, and adds Replit and Magic Patterns as other options worth a look.", "tags": [ "prototyping", "tools", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "77598617", "course": "ai-design-systems", "position": 178, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Prototyping Without The Design Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77598617-prototyping-without-the-design-recap-considerations", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77630090", "course": "ai-design-systems", "position": 179, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Prototyping With the Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77630090-prototyping-with-the-design-system", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77064896", "course": "ai-design-systems", "position": 180, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Generating A Footer With And Without System Guardrails", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77064896-bradfrost-com-generating-a-footer-with-and-without-system-guardrails", "free": false, "summary": "Brad sets up what he calls maybe the most important lesson of the course — getting AI to reliably wield the design system — with an A/B test. In a Cursor agent with the Eddie Brain check deliberately skipped, \"add a simple footer that recreates the primary navigation\" yields a hand-rolled homepage-footer component with custom styles that ignores Eddie entirely, the frustration teams everywhere feel. The identical prompt in Claude Code with bfw-process and the guardrails in place produces the Eddie site-footer recipe, built only from Eddie tokens, components, and recipes. Some visual polish is still needed, but the point stands, and the specific tactics come next.", "tags": [ "eddie", "context engineering", "cursor", "claude", "mcp" ], "presenters": [ "Brad Frost" ] }, { "id": "77065460", "course": "ai-design-systems", "position": 181, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Keeping Product On The Eddie Rails: Multi-Phase bfw-process, Settings, Rules, & Validation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77065460-bradfrost-com-keeping-product-on-the-eddie-rails-multi-phase-bfw-process-settings-rules-validation", "free": false, "summary": "Brad asks Claude to diagram every mechanism that keeps it from hallucinating UI, then walks the left-to-right pipeline. bfw-process is the versioned rulebook (full mode's phased gates or quick mode for prototyping); his global Claude settings hard-code the non-negotiables — Eddie is the UI layer, no custom components, no Tailwind or shadcn, tokens only; project rule files and agents.md frame the context; a mandatory preamble forces an Eddie Brain check-health before any markup; the brain answers from the knowledge graph with real props, slots, and tokens; composition starts from page templates; a post-generation hook runs validate-file and a headless-browser visual check; deterministic CI gates guard main; and the new Eddie Reporter package feeds adoption data back upstream. Closes by converting the diagram page itself into an Eddie-powered version as a live demonstration.", "tags": [ "eddie", "context engineering", "process", "mcp", "testing" ], "presenters": [ "Brad Frost" ] }, { "id": "75130748", "course": "ai-design-systems", "position": 182, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Story UI with Soul Patrol Design System Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75130748-story-ui-with-soul-patrol-design-system-introduction", "free": false, "summary": "Brad introduces Story UI, TJ's tool for composing recipes and pages from a design system's actual components rather than an approximation. With the Soul Patrol text field now synchronized between Figma and Storybook, he explains why Story UI matters: it points at your real component directory and tokens, works with React, Vue, Angular, Svelte, or web components, supports Claude, OpenAI, or Gemini, validates the generated code, offers a voice canvas for cross-discipline sessions, and can lean on the Storybook MCP. No lock-in to Material or shadcn; your own system is the input.", "tags": [ "storybook", "soul patrol", "prototyping", "tools", "southleft" ], "presenters": [ "Brad Frost" ] }, { "id": "75130758", "course": "ai-design-systems", "position": 183, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Installing Story UI into Soul Patrol Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75130758-installing-story-ui-into-soul-patrol-design-system", "free": false, "summary": "Brad installs Story UI into Soul Patrol's web components package, where Storybook actually lives. Runs the install and init wizard, which detects a Vite web component Storybook with 58 stories, auto-configures the components path, and asks for the generated-stories location, MCP port, AI provider (Claude), and an API key. Reviews the resulting storyui.config.js, then hits a syntax error the wizard introduced in Storybook's main.ts, fixes the missing and stray commas, and gets Storybook running with the Story UI generator panel visible.", "tags": [ "storybook", "soul patrol", "tools", "claude" ], "presenters": [ "Brad Frost" ] }, { "id": "75130779", "course": "ai-design-systems", "position": 184, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Using Story UI to Create Sign In Page", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75130779-using-story-ui-to-create-sign-in-page", "free": false, "summary": "Brad generates a sign-in page with Story UI: username, password, save-password checkbox, sign-in and clear buttons. The generated story initially fails because the config's import path is set to lit; once fixed, the page renders using real Soul Patrol ingredients — the card, logo, heading, text field, and alert component — with default, error, and prefilled variants from a single pass. Points to Story UI's docs for adding component markdown, code guidelines, and import examples so this doesn't need hand-fixing, and pitches the tool as a way for mixed-discipline groups to iterate on a design together instead of backlogging tweaks.", "tags": [ "storybook", "soul patrol", "prototyping", "components" ], "presenters": [ "Brad Frost" ] }, { "id": "75645048", "course": "ai-design-systems", "position": 185, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Introducing Storybook MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75645048-introducing-storybook-mcp", "free": false, "summary": "TJ introduces the Storybook MCP server, which connects a Storybook instance to an AI agent so it can talk directly to your components: generate UI and stories, pull documentation, preview stories, and run story tests. Notes it's currently limited to React projects on the React flavor of Storybook, and previews installing and using it in the lessons that follow.", "tags": [ "storybook", "mcp", "southleft", "tools" ], "presenters": [ "TJ Pitre" ] }, { "id": "75645070", "course": "ai-design-systems", "position": 186, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Installing & Configuring Storybook MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75645070-installing-configuring-storybook-mcp", "free": false, "summary": "TJ installs the Storybook MCP into the College Town codebase, advising against delegating the install to an agent because the commands are interactive. Runs the npx add-on install, then explains the mcp add command: HTTP transport, the Storybook URL on port 6006 (adjust if you run several instances), and project-level scope rather than global or user. Answers the prompts — a project-specific server name, no HTTP headers, Claude Code as the client, no OAuth client ID — and leaves it ready to run.", "tags": [ "storybook", "mcp", "claude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75645084", "course": "ai-design-systems", "position": 187, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Running Storybook MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75645084-running-storybook-mcp", "free": false, "summary": "TJ starts the College Town Storybook, confirms the MCP is connected in Claude Code via /mcp, and reviews the available tools: story instructions, previews, documentation lookups, and story tests. Completes the last install step by pasting Storybook's recommended agent instructions into the project's claude.md, where teams can also add their own component-selection guidance. Then exercises the tools — list all documentation returns 51 components across seven categories with the taxonomy intact, and get documentation for button returns every variant, property, size, and story.", "tags": [ "storybook", "mcp", "claude", "documentation", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "75645141", "course": "ai-design-systems", "position": 188, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Generating a Login Form with Storybook MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75645141-generating-a-login-form-with-storybook-mcp", "free": false, "summary": "TJ asks Claude Code, through the Storybook MCP, to generate a newsletter signup form for College Town. With the full component inventory, properties, and docs in reach, it writes a TypeScript component and a stories file and files them under a new Patterns section. The one-shot result is a solid, on-system form — heading, description, inputs, subscribe button — complete with loading, error, and subscribed states, and he notes it iterates readily if you want to add a button group or another field.", "tags": [ "storybook", "mcp", "prototyping", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "77508496", "course": "ai-design-systems", "position": 189, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Design System Extraction from Production Application", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77508496-design-system-extraction-from-production-application", "free": false, "summary": "TJ demonstrates design system extraction, the traditional pipeline flipped on its head. RateShare, a post-rate-share app he vibe-coded with Claude Code over a weekend, has no system behind it, so he runs Figma Console MCP's extraction tools — DS analyze, extract tokens into DTCG format, scaffold a Storybook for the detected framework, port components one by one, and verify with Playwright screenshots against the live app. Minutes later: 36 tokens (19 colors), 21 bespoke components sorted into primitives and patterns, Inter wired up, and a browsable Storybook of action bars, breadcrumbs, buttons, avatars, cards, and the full composer. Pitches it for any team that swam too far out into vibe-coded products and needs to reel them back into something scalable.", "tags": [ "figma console mcp", "storybook", "design tokens", "vibe coding", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "77630114", "course": "ai-design-systems", "position": 190, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Prototyping With the Design System Recap", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77630114-prototyping-with-the-design-system-recap", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77630156", "course": "ai-design-systems", "position": 191, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Design Phase Recap", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77630156-design-phase-recap", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77681618", "course": "ai-design-systems", "position": 192, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Engineering & Infrastructure", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77681618-engineering-infrastructure", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77681625", "course": "ai-design-systems", "position": 193, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "The Steel Curtain", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77681625-the-steel-curtain", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77681656", "course": "ai-design-systems", "position": 194, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Engineering Demos", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77681656-engineering-demos", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77681663", "course": "ai-design-systems", "position": 195, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Ongoing Feature Work", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77681663-ongoing-feature-work", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75818496", "course": "ai-design-systems", "position": 196, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Translating Soul Patrol Page from Figma into Code Using the Figma Console MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75818496-translating-soul-patrol-page-from-figma-into-code-using-the-figma-console-mcp", "free": false, "summary": "Ian translates the design-approved Soul Patrol donate page from Figma into code with Figma Console MCP, passing a link to the Figma selection for context and leaning on component, recipe, and token docs the MCP had written earlier. Explains why not Story UI here: the design already exists and has been reviewed, so translating the actual Figma nodes keeps design and development aligned. Claude scaffolds donate.ts, an SCSS file, and a stories file; after a Storybook restart the page matches Figma, using the site header recipe, band, buttons, and the title-large heading, with responsive behavior inherited from the components. Under five minutes versus the copy-paste-from-Storybook manual path, with a full-width button prop as the only obvious tweak.", "tags": [ "figma console mcp", "storybook", "code", "soul patrol", "claude" ], "presenters": [ "Ian Frost" ] }, { "id": "77681666", "course": "ai-design-systems", "position": 197, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Greenfield Work", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77681666-greenfield-work", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77681668", "course": "ai-design-systems", "position": 198, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Legacy Product Work", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77681668-legacy-product-work", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77342876", "course": "ai-design-systems", "position": 199, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Fixing the most urgent inspection issues with Declarative Shadow DOM", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77342876-bradfrost-com-fixing-the-most-urgent-inspection-issues-with-declarative-shadow-dom", "free": false, "summary": "Brad tackles the work order's top red, the site not fitting on phones, and finds it isn't a CSS bug but a flash of unstyled content: Playwright screenshots before JavaScript renders the web components' styles. Rather than the full architectural overhaul, he asks Claude Code for a quick win and lands declarative shadow DOM via an Eleventy plugin, demonstrating before and after with JavaScript disabled — alerts, buttons, and text fields now render without JS. Has Claude validate the fix through bfw-process at 320 and 375 viewports, close the site and Eddie issues, then file issues to bake declarative shadow DOM into bfw-process and every Eddie boilerplate so all future projects get it for free. Systems thinking in action, and the validation gates are now in place for the adoption work ahead.", "tags": [ "eddie", "code", "accessibility", "claude", "architecture" ], "presenters": [ "Brad Frost" ] }, { "id": "77342916", "course": "ai-design-systems", "position": 200, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Adopting the Eddie page shell, header, and footer", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77342916-bradfrost-com-adopting-the-eddie-page-shell-header-and-footer", "free": false, "summary": "Brad starts full Eddie adoption from the outside in with the page shell. Shows Eddie's existing page templates (article, dashboard, form, grid, homepage), then asks Claude Code to adopt the page shell, header, footer, and main while preserving the current positioning. The browser-default nav links become the Eddie primary navigation and header; a second pass rebuilds the footer from sections, a three-up card grid for courses, the newsletter form, link lists, and a media block for the Carbon ad. The process surfaces a link-list rendering bug, filed automatically against Eddie, and a plan to turn the JavaScript-injected Carbon ad into its own recipe. With the shell systematized, the guts of the pages are next.", "tags": [ "eddie", "components", "claude", "code" ], "presenters": [ "Brad Frost" ] }, { "id": "77342952", "course": "ai-design-systems", "position": 201, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Creating an adoption plan and getting quick wins", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77342952-bradfrost-com-creating-an-adoption-plan-and-getting-quick-wins", "free": false, "summary": "Brad installs a new adoption-plan skill, a companion to the product inspection that produces a concrete plan for moving any codebase onto a design system, and runs it on bradfrost.com. It writes four files: a garage, a baseline (381 lines of custom CSS, 28 Eddie components in use, a catalog of orphaned and hand-rolled UI), a mapping of each existing component to its Eddie equivalent with gaps flagged, and a plan chunked into waves. He disagrees with some recommendations — the linked-list suggestion for post lists — and treats that as system-and-product sculpting to come. Has Claude ship wave one's safe swaps: the newsletter recipe, avatar, small buttons for feed links, and cleaned-up contact page, which also files four Eddie bugs including Eddie Brain not surfacing the visually-hidden utility. Progress, not perfection.", "tags": [ "eddie", "skills", "assessment", "claude", "components" ], "presenters": [ "Brad Frost" ] }, { "id": "77342989", "course": "ai-design-systems", "position": 202, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Improving the article template", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77342989-bradfrost-com-improving-the-article-template", "free": false, "summary": "Brad overrides the adoption plan's wave two, arguing from years of publisher work that the article page is the star of the show, and reprioritizes it ahead of the listing pages. Specifies the page header component for title and byline, the large text passage variant for legibility, hardening of embeds (YouTube, SoundCloud, SlideShare, Spotify, CodePen, figures) and old HTTP references, and Eddie tags in place of blue hyperlinks. Claude crawls the archive, defines done as the Atomic Design post and other embed-heavy posts rendering correctly under a verify script, and delivers a far more legible article — shown as a progression from the broken WordPress render to now. Tags surface a real Eddie gap: the tag component only knows dismissible chips, not links.", "tags": [ "eddie", "components", "claude", "code" ], "presenters": [ "Brad Frost" ] }, { "id": "77443725", "course": "ai-design-systems", "position": 203, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Timeline component adoption", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77443725-bradfrost-com-timeline-component-adoption", "free": false, "summary": "Brad takes on wave three, the unstyled listing pages, and reveals the motif of the redesign: an Eddie timeline component. Asks Claude Code to adopt the vertical alternating timeline with article cards in the slot on the blog page, move the subscribe button below the title, and match the article pages' page header treatment; nearly twenty years of posts land on one animated timeline. Then applies it across every collection — 700-plus links, notes, music, podcasts and guest appearances, reading (book covers slotted into nodes, unplanned but fun), and every concert he's attended back to Lynyrd Skynyrd. Calls wave three done and leaves waves four through six as lather-rinse-repeat cleanup.", "tags": [ "eddie", "components", "claude", "code" ], "presenters": [ "Brad Frost" ] }, { "id": "77443999", "course": "ai-design-systems", "position": 204, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "bradfrost.com - Full Eddie Adoption Walkthrough & Recap", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77443999-bradfrost-com-full-eddie-adoption-walkthrough-recap", "free": false, "summary": "Brad walks the fully Eddie-adopted bradfrost.com page by page with before-and-afters: courses, community, podcast, books, the blog timeline, speaking, music, art, about, contact, and a new More page that exposes previously orphaned sections. Four or five Eddie releases were cut along the way and the custom stylesheet is nearly empty. Demonstrates what connection to the system unlocks with a theme switcher — dark mode, TJ's Altitude theme, and a random-font-and-palette customizer — and frames the site as a primed canvas for the design language work ahead. Closes by insisting the process applies to any product and any design system, and leaves both product and system, and the relationship between their teams, stronger.", "tags": [ "eddie", "case-study", "design tokens", "workflow" ], "presenters": [ "Brad Frost" ] }, { "id": "77681673", "course": "ai-design-systems", "position": 205, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Rebrands & Rethemes", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77681673-rebrands-rethemes", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "76048298", "course": "ai-design-systems", "position": 206, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Add Dark Mode To Soul Patrol Across Platforms With Figma Console MCP, Skills, and Scripts", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76048298-add-dark-mode-to-soul-patrol-across-platforms-with-figma-console-mcp-skills-and-scripts", "free": false, "summary": "Ian ships dark mode for Soul Patrol across Figma, Storybook, and a React Native music app in one prompt, powered by a Theme Orchestrator skill and a create-theme script. The skill already knows the tier one, two, and three token architecture, steers toward muted palettes instead of naive inversions, and audits for WCAG AA before output; the script derives a Soul Patrol Dark preset JSON and builds it through the code pipeline. Storybook's theme switcher and the React Native app pick it up immediately; Figma takes longest, gaining a dark tier one collection and dark modes on tiers two and three, applied after publishing the token library and updating the component file. Notes the demo skipped proper SemVer package publishing, and pitches the same flow for rebrands and multi-platform token distribution.", "tags": [ "figma console mcp", "design tokens", "skills", "soul patrol", "storybook" ], "presenters": [ "Ian Frost" ] }, { "id": "77681690", "course": "ai-design-systems", "position": 207, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Engineering Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77681690-engineering-recap-considerations", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77681711", "course": "ai-design-systems", "position": 208, "chapter": { "position": 4, "title": "Chapter 4: Make Better Products with AI & Design Systems" }, "title": "Chapter 4 Summary, Homework, and Next Steps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77681711-chapter-4-summary-homework-and-next-steps", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74285531", "course": "ai-design-systems", "position": 209, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Chapter 5 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74285531-chapter-5-introduction", "free": false, "summary": "Introduces Chapter 5: Inventing the Future with AI and Design Systems. Covers the shift from fixed to fluid/generative UX, generative UI, hyper-personalization, context ecosystems, and 'the Creative Infinite' — grounded in the adjacent possible framework.", "tags": [ "course", "generative ui", "strategy", "concepts" ], "presenters": [ "Brad Frost" ] }, { "id": "77791821", "course": "ai-design-systems", "position": 210, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Agents As Users", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77791821-agents-as-users", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77828337", "course": "ai-design-systems", "position": 211, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Generative UI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77828337-generative-ui", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72505974", "course": "ai-design-systems", "position": 212, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Understanding AI-Generated Interfaces with A2UI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72505974-understanding-ai-generated-interfaces-with-a2ui", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77919293", "course": "ai-design-systems", "position": 213, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Generative UI Demo - DS+AI Course Resources Website", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77919293-generative-ui-demo-ds-ai-course-resources-website", "free": true, "summary": null, "tags": [], "presenters": [] }, { "id": "77828368", "course": "ai-design-systems", "position": 214, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Generative UI Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77828368-generative-ui-recap-considerations", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77856682", "course": "ai-design-systems", "position": 215, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Hyperpersonalization", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77856682-hyperpersonalization", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77895551", "course": "ai-design-systems", "position": 216, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Hyperpersonalized Website Browser Plugin Demo", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77895551-hyperpersonalized-website-browser-plugin-demo", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77856688", "course": "ai-design-systems", "position": 217, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Hyperpersonalization Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77856688-hyperpersonalization-recap-considerations", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77892243", "course": "ai-design-systems", "position": 218, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "The Future is Wide Open", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77892243-the-future-is-wide-open", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77939532", "course": "ai-design-systems", "position": 219, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Speech-To-Text Accounting App Demo", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77939532-speech-to-text-accounting-app-demo", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77947771", "course": "ai-design-systems", "position": 220, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Realtime UI Demo", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77947771-realtime-ui-demo", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77948456", "course": "ai-design-systems", "position": 221, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Exploring The Creative Infinite", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77948456-exploring-the-creative-infinite", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77892246", "course": "ai-design-systems", "position": 222, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "The Future is Wide Open Recap & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77892246-the-future-is-wide-open-recap-considerations", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77892259", "course": "ai-design-systems", "position": 223, "chapter": { "position": 5, "title": "Chapter 5: Inventing the Future with AI & Design Systems" }, "title": "Chapter 5 Summary, Homework, and Next Steps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77892259-chapter-5-summary-homework-and-next-steps", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74285860", "course": "ai-design-systems", "position": 224, "chapter": { "position": 6, "title": "Chapter 6: Operationalizing AI & Design Systems" }, "title": "Chapter 6 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74285860-chapter-6-introduction", "free": false, "summary": "Introduces Chapter 6: Operationalizing AI and Design Systems. Covers navigating organizational buy-in, rolling out AI+DS programs from crawl to walk to run, and the human terrain — relationships, culture, and politics — that determines real-world success.", "tags": [ "course", "culture", "politics", "governance", "strategy" ], "presenters": [ "Brad Frost" ] }, { "id": "77857403", "course": "ai-design-systems", "position": 225, "chapter": { "position": 6, "title": "Chapter 6: Operationalizing AI & Design Systems" }, "title": "Selling AI & Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77857403-selling-ai-design-systems", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77967325", "course": "ai-design-systems", "position": 226, "chapter": { "position": 6, "title": "Chapter 6: Operationalizing AI & Design Systems" }, "title": "Piloting AI & Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77967325-piloting-ai-design-systems", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77967172", "course": "ai-design-systems", "position": 227, "chapter": { "position": 6, "title": "Chapter 6: Operationalizing AI & Design Systems" }, "title": "Rolling Out AI & Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77967172-rolling-out-ai-design-systems", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77974458", "course": "ai-design-systems", "position": 228, "chapter": { "position": 6, "title": "Chapter 6: Operationalizing AI & Design Systems" }, "title": "Governing & Evolving AI & Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77974458-governing-evolving-ai-design-systems", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77975212", "course": "ai-design-systems", "position": 229, "chapter": { "position": 6, "title": "Chapter 6: Operationalizing AI & Design Systems" }, "title": "Chapter 6 Summary, Homework, and Next Steps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77975212-chapter-6-summary-homework-and-next-steps", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77990952", "course": "ai-design-systems", "position": 230, "chapter": { "position": 7, "title": "Course Summary" }, "title": "Course Recap", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77990952-course-recap", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74336673", "course": "ai-design-systems", "position": 231, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "Jam Session #1 - February 12th, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74336673-jam-session-1-february-12th-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74336601", "course": "ai-design-systems", "position": 232, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "Jam Session #2 - February 26th, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74336601-jam-session-2-february-26th-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74336332", "course": "ai-design-systems", "position": 233, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#3 Design Tokens, Into Design Systems recap - March 12th, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74336332-3-design-tokens-into-design-systems-recap-march-12th-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75113300", "course": "ai-design-systems", "position": 234, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#5 Multi-agent orchestration, responsible & ethical AI development - April 7, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75113300-5-multi-agent-orchestration-responsible-ethical-ai-development-april-7-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75104803", "course": "ai-design-systems", "position": 235, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#6 DESIGN.md, Claude Design, and more - May 7, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75104803-6-design-md-claude-design-and-more-may-7-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75396636", "course": "ai-design-systems", "position": 236, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#7 LLMs in Browsers, Localization/Asset Sync, Agent guidance - May 21st, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75396636-7-llms-in-browsers-localization-asset-sync-agent-guidance-may-21st-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "76395916", "course": "ai-design-systems", "position": 237, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#8 Claude Design Deep Dive, Agentic Design Systems, and more... - June 18, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76395916-8-claude-design-deep-dive-agentic-design-systems-and-more-june-18-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "76395915", "course": "ai-design-systems", "position": 238, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#9 Post-Config Deep Dive: v0, Figma Motion, and AI-Ready Design Systems - July 2, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76395915-9-post-config-deep-dive-v0-figma-motion-and-ai-ready-design-systems-july-2-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "76777211", "course": "ai-design-systems", "position": 239, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#10 Component Contracts, Chapter 3 complete, Building Products - July 16, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/76777211-10-component-contracts-chapter-3-complete-building-products-july-16-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77226603", "course": "ai-design-systems", "position": 240, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#11 Figma Console MCP, Story UI, Generating Components in Figma - July 30, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77226603-11-figma-console-mcp-story-ui-generating-components-in-figma-july-30-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77451588", "course": "ai-design-systems", "position": 241, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#12 Documenting Decisions, MCP + Notion, bradfrost.com Rebuild, Chapter 4 Update - August 13, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77451588-12-documenting-decisions-mcp-notion-bradfrost-com-rebuild-chapter-4-update-august-13-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "77788608", "course": "ai-design-systems", "position": 242, "chapter": { "position": 8, "title": "AI and Design Systems Jam Sessions" }, "title": "#13 AI Guardrails, Eddie, Personalized Accessibility & Chapters 5-6 Preview - August 27, 2026", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/77788608-13-ai-guardrails-eddie-personalized-accessibility-chapters-5-6-preview-august-27-2026", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74966906", "course": "ai-design-systems", "position": 243, "chapter": { "position": 9, "title": "📖 Appendix" }, "title": "LLMs in Action - Full Session", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74966906-llms-in-action-full-session", "free": false, "summary": "The full extended cut of the 1.10 LLM Demo — same medieval-poem-to-rock-opera-to-space-ballet pipeline (Wispr Flow → fresh Claude account → ChatGPT image → Suno → Da Vinci video → Warp + Claude Code + Figma Console MCP), but with all the deeper context Brad cuts in the lesson version: full song lyrics, an aside about Will Smith eating spaghetti as the AI-video progress benchmark, the JSON-under-Figma framing, watching the neural network rack tokens in real time, opening the generated site in Cursor to inspect CSS custom properties / CSS grid / responsive nav, verifying the audio player is wired up, and a longer reflection on the central thesis ('is it good?') and why design systems are the bar of quality LLMs need.", "tags": [ "ai", "claude", "figma console mcp", "vibe coding", "video" ], "presenters": [ "Brad Frost" ] }, { "id": "75645866", "course": "ai-design-systems", "position": 244, "chapter": { "position": 9, "title": "📖 Appendix" }, "title": "Storybook MCP Demo with Founder Dominic Nguyen", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75645866-storybook-mcp-demo-with-founder-dominic-nguyen", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "75542579", "course": "ai-design-systems", "position": 245, "chapter": { "position": 9, "title": "📖 Appendix" }, "title": "Soul Patrol Design System Walkthrough", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/75542579-soul-patrol-design-system-walkthrough", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72507445", "course": "ai-design-systems", "position": 246, "chapter": { "position": 10, "title": "Auditing Design Systems with FigmaLint" }, "title": "What is FigmaLint?", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/texts/72507445-what-is-figmalint", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72507287", "course": "ai-design-systems", "position": 247, "chapter": { "position": 10, "title": "Auditing Design Systems with FigmaLint" }, "title": "Linting Components with FigmaLint", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72507287-linting-components-with-figmalint", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "73073753", "course": "ai-design-systems", "position": 248, "chapter": { "position": 10, "title": "Auditing Design Systems with FigmaLint" }, "title": "Figma Lint AI Model Integration and Features", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/73073753-figma-lint-ai-model-integration-and-features", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72507547", "course": "ai-design-systems", "position": 249, "chapter": { "position": 11, "title": "AI Tools For Generating User Interfaces and Layouts With Your Design System" }, "title": "What is Story UI?", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/texts/72507547-what-is-story-ui", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71207868", "course": "ai-design-systems", "position": 250, "chapter": { "position": 11, "title": "AI Tools For Generating User Interfaces and Layouts With Your Design System" }, "title": "AI that knows (and uses) your design system", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71207868-ai-that-knows-and-uses-your-design-system", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71773064", "course": "ai-design-systems", "position": 251, "chapter": { "position": 11, "title": "AI Tools For Generating User Interfaces and Layouts With Your Design System" }, "title": "Installing Story UI Into Existing Custom Design System in Storybook", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71773064-installing-story-ui-into-existing-custom-design-system-in-storybook", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72507250", "course": "ai-design-systems", "position": 252, "chapter": { "position": 11, "title": "AI Tools For Generating User Interfaces and Layouts With Your Design System" }, "title": "Story UI and Claude Desktop", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72507250-story-ui-and-claude-desktop", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72506319", "course": "ai-design-systems", "position": 253, "chapter": { "position": 11, "title": "AI Tools For Generating User Interfaces and Layouts With Your Design System" }, "title": "Cursor Features and Story UI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72506319-cursor-features-and-story-ui", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74303831", "course": "ai-design-systems", "position": 254, "chapter": { "position": 11, "title": "AI Tools For Generating User Interfaces and Layouts With Your Design System" }, "title": "Story UI Voice Canvas", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74303831-story-ui-voice-canvas", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72508625", "course": "ai-design-systems", "position": 255, "chapter": { "position": 11, "title": "AI Tools For Generating User Interfaces and Layouts With Your Design System" }, "title": "What is the Storybook MCP?", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/texts/72508625-what-is-the-storybook-mcp", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71207019", "course": "ai-design-systems", "position": 256, "chapter": { "position": 11, "title": "AI Tools For Generating User Interfaces and Layouts With Your Design System" }, "title": "Agentic Design Systems in 2026 with Storybook - Intro from Dominic Nguyen", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71207019-agentic-design-systems-in-2026-with-storybook-intro-from-dominic-nguyen", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71207672", "course": "ai-design-systems", "position": 257, "chapter": { "position": 11, "title": "AI Tools For Generating User Interfaces and Layouts With Your Design System" }, "title": "Agentic Design Systems in 2026 - Storybook MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71207672-agentic-design-systems-in-2026-storybook-mcp", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71241280", "course": "ai-design-systems", "position": 258, "chapter": { "position": 12, "title": "Vibe Coding " }, "title": "Into Design Systems - Vibe Coding Jam November 2025", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71241280-into-design-systems-vibe-coding-jam-november-2025", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72507498", "course": "ai-design-systems", "position": 259, "chapter": { "position": 13, "title": "AI Tools for Gathering Knowledge for and from your Design System" }, "title": "What is the Design Systems Assistant?", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/texts/72507498-what-is-the-design-systems-assistant", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72507429", "course": "ai-design-systems", "position": 260, "chapter": { "position": 13, "title": "AI Tools for Gathering Knowledge for and from your Design System" }, "title": "Design Systems Assistant Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72507429-design-systems-assistant-overview", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72506680", "course": "ai-design-systems", "position": 261, "chapter": { "position": 13, "title": "AI Tools for Gathering Knowledge for and from your Design System" }, "title": "Connecting The Design Systems Assistant to ChatGPT", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72506680-connecting-the-design-systems-assistant-to-chatgpt", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72506737", "course": "ai-design-systems", "position": 262, "chapter": { "position": 13, "title": "AI Tools for Gathering Knowledge for and from your Design System" }, "title": "Documentation: Integrating Grammarly with Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72506737-documentation-integrating-grammarly-with-design-systems", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "73073352", "course": "ai-design-systems", "position": 263, "chapter": { "position": 13, "title": "AI Tools for Gathering Knowledge for and from your Design System" }, "title": "Using MCP Apps with Figma Console MCP To Analyze Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/73073352-using-mcp-apps-with-figma-console-mcp-to-analyze-design-system", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72507542", "course": "ai-design-systems", "position": 264, "chapter": { "position": 14, "title": "Figma MCP" }, "title": "What is the Figma MCP?", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/texts/72507542-what-is-the-figma-mcp", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72506805", "course": "ai-design-systems", "position": 265, "chapter": { "position": 14, "title": "Figma MCP" }, "title": "Using Figma MCP with Claude Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72506805-using-figma-mcp-with-claude-code", "free": false, "summary": "TJ sets up the Figma MCP for use with Claude Code inside Claude Desktop. From Customize he adds the Figma connector, completes the OAuth handshake that grants Claude access to his Figma account and files, then goes back and installs the separate Figma plugin from the Plugins section so the bundled tooling is ready to use.", "tags": [ "mcp", "figma", "claude", "southleft" ], "presenters": [ "TJ Pitre" ] }, { "id": "72506537", "course": "ai-design-systems", "position": 266, "chapter": { "position": 14, "title": "Figma MCP" }, "title": "Using the Figma MCP and Design Systems Assistant", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72506537-using-the-figma-mcp-and-design-systems-assistant", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71242022", "course": "ai-design-systems", "position": 267, "chapter": { "position": 14, "title": "Figma MCP" }, "title": "Figma MCP → Web Components → React Storybook → Story UI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71242022-figma-mcp-web-components-react-storybook-story-ui", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71242058", "course": "ai-design-systems", "position": 268, "chapter": { "position": 14, "title": "Figma MCP" }, "title": "Using Claude Desktop with Figma MCP, Story UI, and Design Systems Assistant", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71242058-using-claude-desktop-with-figma-mcp-story-ui-and-design-systems-assistant", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74303901", "course": "ai-design-systems", "position": 269, "chapter": { "position": 14, "title": "Figma MCP" }, "title": "Figma MCP Write Functionality", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74303901-figma-mcp-write-functionality", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74304016", "course": "ai-design-systems", "position": 270, "chapter": { "position": 14, "title": "Figma MCP" }, "title": "Figma MCP Beta Features", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74304016-figma-mcp-beta-features", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72508184", "course": "ai-design-systems", "position": 271, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "What is the Figma Console MCP?", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/texts/72508184-what-is-the-figma-console-mcp", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72505197", "course": "ai-design-systems", "position": 272, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Installing Figma Console MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72505197-installing-figma-console-mcp", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71241750", "course": "ai-design-systems", "position": 273, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Part 1: Why Figma Console MCP?", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71241750-part-1-why-figma-console-mcp", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71241800", "course": "ai-design-systems", "position": 274, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Part 2: From System-Wide Awareness to Pinpoint Precision", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71241800-part-2-from-system-wide-awareness-to-pinpoint-precision", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71241867", "course": "ai-design-systems", "position": 275, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Part 3: Figma Console MCP vs. Dev Mode MCP – Component Creation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71241867-part-3-figma-console-mcp-vs-dev-mode-mcp-component-creation", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71241922", "course": "ai-design-systems", "position": 276, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Part 4: Unlocking Full Variable Access", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71241922-part-4-unlocking-full-variable-access", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "71241979", "course": "ai-design-systems", "position": 277, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Part 5: Plugin Development and AI Feedback Loops", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/71241979-part-5-plugin-development-and-ai-feedback-loops", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72505369", "course": "ai-design-systems", "position": 278, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Using the Figma Console MCP Effectively", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72505369-using-the-figma-console-mcp-effectively", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72505305", "course": "ai-design-systems", "position": 279, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Console MCP Capabilities", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72505305-figma-console-mcp-capabilities", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72505251", "course": "ai-design-systems", "position": 280, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Using Figma Console MCP for Enterprise Design System Applications", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72505251-using-figma-console-mcp-for-enterprise-design-system-applications", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "72505355", "course": "ai-design-systems", "position": 281, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Implementing Code-Only Props Technique with Figma Console MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/72505355-implementing-code-only-props-technique-with-figma-console-mcp", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "73074047", "course": "ai-design-systems", "position": 282, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Console MCP Design To Code Demo", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/73074047-figma-console-mcp-design-to-code-demo", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "73074967", "course": "ai-design-systems", "position": 283, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Console MCP Code To Design - Fixing Drift", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/73074967-figma-console-mcp-code-to-design-fixing-drift", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74301522", "course": "ai-design-systems", "position": 284, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Console MCP in Claude Code to Convert Storybook Story to Figma pattern", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74301522-figma-console-mcp-in-claude-code-to-convert-storybook-story-to-figma-pattern", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74303302", "course": "ai-design-systems", "position": 285, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Console MCP Design Creation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74303302-figma-console-mcp-design-creation", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74302816", "course": "ai-design-systems", "position": 286, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Accessible Design and Code Automation with Figma Console MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74302816-accessible-design-and-code-automation-with-figma-console-mcp", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74303237", "course": "ai-design-systems", "position": 287, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Console MCP Codex Setup", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74303237-figma-console-mcp-codex-setup", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74303198", "course": "ai-design-systems", "position": 288, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Console MCP Cloud Mode Feature", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74303198-figma-console-mcp-cloud-mode-feature", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74303326", "course": "ai-design-systems", "position": 289, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Component Documentation Using Figma Console MCP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74303326-figma-component-documentation-using-figma-console-mcp", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74303507", "course": "ai-design-systems", "position": 290, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Console MCP Bi-Directional Demo", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74303507-figma-console-mcp-bi-directional-demo", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "74303641", "course": "ai-design-systems", "position": 291, "chapter": { "position": 15, "title": "Figma Console MCP" }, "title": "Figma Console MCP Remote Tool Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/ai-design-systems-course/lessons/74303641-figma-console-mcp-remote-tool-overview", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "62108387", "course": "subatomic", "position": 1, "chapter": { "position": 0, "title": "Introduction" }, "title": "Welcome!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62108387-welcome", "free": false, "summary": "Introduces Brad and Ian Frost's design tokens course, defining tokens as the subatomic elements of a design system (design properties stored as variables) and explaining how they support multi-product, multi-brand, multi-mode organizations.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62108426", "course": "subatomic", "position": 2, "chapter": { "position": 0, "title": "Introduction" }, "title": "About your teachers", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62108426-about-your-teachers", "free": false, "summary": "Introduces Brad Frost and Ian Frost and their decade of design system work for multi-brand, multi-platform organizations, including Pfizer's Helix, United Airlines' Atmos, and Caterpillar's Blocks, plus Atomic Design and Pattern Lab.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62108451", "course": "subatomic", "position": 3, "chapter": { "position": 0, "title": "Introduction" }, "title": "Who This Course Is For", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62108451-who-this-course-is-for", "free": false, "summary": "Describes who the course is for: design system designers and front-of-the-front-end developers, the product teams consuming a design system, and CMS users, marketers, brand managers, and leaders responsible for digital products.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62108508", "course": "subatomic", "position": 4, "chapter": { "position": 0, "title": "Introduction" }, "title": "Course Structure", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62108508-course-structure", "free": false, "summary": "Outlines the course's eight chapters: core token concepts, the three-tier architecture, naming, building in Figma and code, publishing, adoption, people and governance (including Token Czars), and advanced topics like dark mode, sub-brands, rebrands, and AI.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62108521", "course": "subatomic", "position": 5, "chapter": { "position": 0, "title": "Introduction" }, "title": "What's Included", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62108521-what-s-included", "free": false, "summary": "Lists what comes with the course: over eight hours of video, a PDF of resources, a sample Figma variables architecture and Style Dictionary code setup, naming and governance workflow diagrams, a Slack community, a certificate, and free updates.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62203939", "course": "subatomic", "position": 6, "chapter": { "position": 0, "title": "Introduction" }, "title": "Join the community", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/texts/62203939-join-the-community", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "62126856", "course": "subatomic", "position": 7, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "Chapter 1 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62126856-chapter-1-introduction", "free": false, "summary": "Previews the first chapter's core concepts: the problems design tokens solve, their use cases and business case, separation of concerns, the history of themeable interfaces, what tokens are, and how they work in design tools, code, and the wider UI ecosystem.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62127103", "course": "subatomic", "position": 8, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "The Problems Design Tokens Solve", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62127103-the-problems-design-tokens-solve", "free": false, "summary": "Offers a first definition of design tokens (design properties stored as variables for themeable UIs), then frames the problem they solve: organizations with many digital products of different shapes and sizes, dubbed the multi-all-the-things organization.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62128527", "course": "subatomic", "position": 9, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "The Multi-All-The-Things Organization", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62128527-the-multi-all-the-things-organization", "free": false, "summary": "Walks through the flavors of product diversity tokens must support: multiple products (Caterpillar), brands (Marriott, Aaker's brand relationship spectrum), sub-brands, rebrands (Verizon), white labeling (Blend), product families (Salesforce), color modes, frameworks, and platforms (Target).", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62129662", "course": "subatomic", "position": 10, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "The Business Case For Design Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62129662-the-business-case-for-design-tokens", "free": false, "summary": "Makes the business case for tokens with a Starbucks example: a switch from green to purple forces costly manual updates across every touchpoint, estimated at $50,000 per button, while a token system lets one change to a brand background token flow everywhere.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62129689", "course": "subatomic", "position": 11, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "The New Separation of Concerns", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62129689-the-new-separation-of-concerns", "free": false, "summary": "Explains separation of concerns through HTML, CSS, and JavaScript, a door analogy (structure and function vs. paint and hardware), and the CSS Zen Garden, then redraws it as a component system for structure and a design token system for aesthetics.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62130127", "course": "subatomic", "position": 12, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "The ROI of Design Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62130127-the-roi-of-design-tokens", "free": false, "summary": "Revisits the Starbucks button cost math: a one-time investment in a component system and token system, plus modest costs per style variant, beats building each button from scratch, with the gap widening at 100, 500, and 1,500 buttons.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62130356", "course": "subatomic", "position": 13, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "The History of Themeable User Interfaces", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62130356-the-history-of-themeable-user-interfaces", "free": false, "summary": "Tours the history of themeable interfaces, from the Xerox Star and Galaxian to Super Mario Bros. sprites, Windows 3.1 color schemes, the font tag, CSS, the CSS Zen Garden, MySpace and Gmail themes, and Sass variables in 2010.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62130380", "course": "subatomic", "position": 14, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "Design Tokens Origin Story", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62130380-design-tokens-origin-story", "free": false, "summary": "Tells the origin story of design tokens: Jina Anne and Jon Levine introducing them with Salesforce's Lightning Design System, early Material Design color systems following suit, and the W3C community group now working to standardize the format.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62131030", "course": "subatomic", "position": 15, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "What Are Design Tokens?", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62131030-what-are-design-tokens", "free": false, "summary": "Defines design tokens by combining Jina Anne's subatomic framing, Material Design, and CSS-Tricks, lists which properties can be tokens (color, typography, borders, shadows, spacing, animation, breakpoints, z-index), and maps tokens onto the Starbucks button.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62131072", "course": "subatomic", "position": 16, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "Tokens in Design Tools", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62131072-tokens-in-design-tools", "free": false, "summary": "Shows where tokens live in design tools, focusing on Figma variables: designers create and manage tokens there, then apply them in design files and switch an artboard's context between themes such as brand one and brand two.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62131496", "course": "subatomic", "position": 17, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "Tokens in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62131496-tokens-in-code", "free": false, "summary": "Explains how tokens work in code: an implementation-agnostic JSON source of truth transformed by Style Dictionary into CSS custom properties, Sass, JavaScript, iOS, and Android formats, then wired to components so themes change without touching component CSS.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62131731", "course": "subatomic", "position": 18, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "The Role of Design Tokens in a Design System Ecosystem", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62131731-the-role-of-design-tokens-in-a-design-system-ecosystem", "free": false, "summary": "Places tokens within the design system ecosystem's layer cake: the core system of tokens and components, plus platform-specific libraries, product recipes (like Google Maps UI), smart components, and products, all of which can adopt tokens independently of components.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62131882", "course": "subatomic", "position": 19, "chapter": { "position": 1, "title": "Chapter 1: Core Concepts" }, "title": "Chapter 1 Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62131882-chapter-1-summary", "free": false, "summary": "Recaps the first chapter: tokens power themeable UIs for multi-all-the-things organizations, systems beat building from scratch, separation of concerns splits structure from aesthetics, and tokens live in Figma, code, and across the ecosystem.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62292373", "course": "subatomic", "position": 20, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Chapter 2 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62292373-chapter-2-introduction", "free": false, "summary": "Previews the second chapter: what a minimum viable token system looks like, the three-tier token architecture, what themes are, and how the tiers apply to color, typography, spacing, border, shadow, animation, and breakpoints.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62295656", "course": "subatomic", "position": 21, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Brand Style Guide Vs Product Reality", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62295656-brand-style-guide-vs-product-reality", "free": false, "summary": "Uses T-Mobile's brand pink to show the gap between a brand style guide and reality: running the site through cssstats.com reveals many close-but-not-quite pinks in its background and text colors, a problem common to many websites.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62295706", "course": "subatomic", "position": 22, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Creating an MVP Token System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62295706-creating-an-mvp-token-system", "free": false, "summary": "Builds an MVP token system for T-Mobile pink step by step in Figma variables and CSS custom properties: a tier one pink value, a tier two brand token, and a tier three button background token, then argues for adding complexity only when needed.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62315094", "course": "subatomic", "position": 23, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "The Three-Tiered Token Architecture", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62315094-the-three-tiered-token-architecture", "free": false, "summary": "Details the three-tier token architecture: tier one definitions (primitives), tier two semantic aliases that give values jobs, and tier three component tokens, shown in Figma and Style Dictionary JSON, with a warning to use tier three sparingly.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62441989", "course": "subatomic", "position": 24, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Themes", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62441989-themes", "free": false, "summary": "Defines a theme as the three token tiers working together as a group, explains why the architecture pays off even for one brand, and shows Meredith's Verywell, Verywell Mind, and Verywell Fit themes flowing through one shared component system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62448894", "course": "subatomic", "position": 25, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Color Systems - Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62448894-color-systems-introduction", "free": false, "summary": "Introduces color systems with a nod to art-class color theory, Adobe's palette tool, and Josef Albers' Interaction of Color, suggests seeking color inspiration away from Figma, and frames UI color around brand, visual harmony, interaction, and accessibility.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62452774", "course": "subatomic", "position": 26, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Color Systems - Brand Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62452774-color-systems-brand-considerations", "free": false, "summary": "Covers brand considerations for color: interpreting print-era brand books for digital, Caterpillar's sparing use of Cat yellow, and Vox Media's portfolio (The Verge, Vox, Thrillist, SB Nation, Curbed) expressing distinct brands through one system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62451015", "course": "subatomic", "position": 27, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Color Systems - Visual Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62451015-color-systems-visual-considerations", "free": false, "summary": "Looks at color as a visual design choice through Meredith's Verywell health brand research, which found WebMD, Healthline, Medscape, Cleveland Clinic, and Mayo Clinic all using blue while applying it to create very different experiences.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62452896", "course": "subatomic", "position": 28, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Color Systems - UX Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62452896-color-systems-ux-considerations", "free": false, "summary": "Shows how color supports user experience: standard info, success, warning, and error colors, Nasdaq's red and green for stock movement, and an earlier QuickBooks system's color coding for income, expenses, liabilities, and errors.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62452925", "course": "subatomic", "position": 29, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Color Systems - Accessibility Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62452925-color-systems-accessibility-considerations", "free": false, "summary": "Covers color accessibility: WebAIM guidance, the problem of gray text on light gray, contrast tools like WebAIM's checker, the Contrast Figma plugin, and Chrome DevTools, plus designing for colorblindness with Who Can Use and further reading.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62453880", "course": "subatomic", "position": 30, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Color Systems - Three-Tiered color tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62453880-color-systems-three-tiered-color-tokens", "free": false, "summary": "Applies the three tiers to color: tier one palettes (brand, neutral, utility, transparent), tier two background, content, and border tokens (with Shopify Polaris examples), and sparing tier three tokens for buttons, links, and form controls.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62461604", "course": "subatomic", "position": 31, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Typography Systems- Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62461604-typography-systems-introduction", "free": false, "summary": "Introduces typography systems with Oliver Reichenstein's idea that web design is 95% typography, and sets up a look at type through brand, visual design, UX, and accessibility best practices while keeping the focus on tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62461622", "course": "subatomic", "position": 32, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Typography Systems- Brand Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62461622-typography-systems-brand-considerations", "free": false, "summary": "Shows typography as a brand signal through Walmart's brand book guidance on Myriad Pro, Nike's bold type across apparel and web, and The New York Times carrying its newspaper heritage into digital properties.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62461641", "course": "subatomic", "position": 33, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Typography Systems- Visual Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62461641-typography-systems-visual-considerations", "free": false, "summary": "Explores how typography sets the mood of an interface, using Google Fonts' mood filters and Adobe's pairing resources, and points to font pairing tools such as Fontpair and one from Monotype for matching headings with body text.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62461655", "course": "subatomic", "position": 34, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Typography Systems- UX Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62461655-typography-systems-ux-considerations", "free": false, "summary": "Lists the UX questions typography raises: legibility, hierarchy, consistency, contrast, rhythm, responsive type, accessibility, internationalization, and performance, noting that token-level choices like line height affect comprehension.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62461660", "course": "subatomic", "position": 35, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Typography Systems- Accessibility Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62461660-typography-systems-accessibility-considerations", "free": false, "summary": "Covers accessible typography, pointing to WebAIM's guidance on readability and to government design systems like digital.gov and GOV.UK for advice on adequate font sizes and line lengths.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62461688", "course": "subatomic", "position": 36, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Composite Tokens Definition", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62461688-composite-tokens-definition", "free": false, "summary": "Introduces composite tokens, using the W3C community group definition: typography bundles several named child values (font family, size, line height, and more) that are always applied together as a group.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62461762", "course": "subatomic", "position": 37, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Typography Systems- Tier 1 Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62461762-typography-systems-tier-1-tokens", "free": false, "summary": "Applies tier one to typography: defining available font families, a type ramp of sizes, line heights, weights, text transforms, and letter spacing, with pointers to modular scale tools and the point that picking any scale matters more than which one.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62461767", "course": "subatomic", "position": 38, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Typography Systems- Tier 2 Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62461767-typography-systems-tier-2-tokens", "free": false, "summary": "Shows tier two typography tokens: mapping tier one values to roles like body, then bundling them into composite tokens across categories such as display, headline, title, label, body, and meta (eyebrow or overline), each with size variants.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62461770", "course": "subatomic", "position": 39, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Typography Systems- Tier 3 Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62461770-typography-systems-tier-3-tokens", "free": false, "summary": "Covers tier three typography: mapping tier two composite tokens to components, the less common option of component-specific type tokens like a button font family, and overriding just one part of a composite token such as line height.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62462156", "course": "subatomic", "position": 40, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Spacing - Use an 8pt or 4pt grid", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62462156-spacing-use-an-8pt-or-4pt-grid", "free": false, "summary": "Introduces spacing systems, noting the industry's move to an eight-point grid (or a finer four-point grid) and how well that approach has worked across many spacing and token systems.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62462166", "course": "subatomic", "position": 41, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Spacing - Three-tiered Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62462166-spacing-three-tiered-tokens", "free": false, "summary": "Applies the three tiers to spacing: tier one values on a grid are often all a system needs, tier two semantic tokens handle constants like section breaks (shown on Harvest's marketing site), and tier three allows button padding per theme.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62462171", "course": "subatomic", "position": 42, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Spacing - Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62462171-spacing-summary", "free": false, "summary": "Wraps up spacing: use an eight- or four-point grid, define those values and use them throughout, add semantic concepts only if needed, and read Nathan Curtis's article on space in design systems.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62467379", "course": "subatomic", "position": 43, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Border Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62467379-border-tokens", "free": false, "summary": "Covers border tokens: width, style, and radius, with radius the most common; tier one values follow the grid plus a round value, tier two uses a single radius or t-shirt sizes, and components like inputs, cards, and badges share them.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62467384", "course": "subatomic", "position": 44, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Shadow Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62467384-shadow-tokens", "free": false, "summary": "Explains shadow tokens as composites of color, x, y, blur, and spread: tier one pulls a transparent color and sets offsets by eye, tier two creates semantic shadows sized small to large, and component-specific shadows are rarely needed.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62467396", "course": "subatomic", "position": 45, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Animation Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62467396-animation-tokens", "free": false, "summary": "Explains animation tokens as composites of duration, easing, and property, mapped at tier two to names like fade or slide, with references to Val Head's work, IBM Carbon's motion video, and an earlier Salesforce Lightning Design System naming.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62467422", "course": "subatomic", "position": 46, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "A Quick Note About Breakpoints and z-index", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/texts/62467422-a-quick-note-about-breakpoints-and-z-index", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "62467512", "course": "subatomic", "position": 47, "chapter": { "position": 2, "title": "Chapter 2: Foundations & Architecture" }, "title": "Chapter 2 Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62467512-chapter-2-summary", "free": false, "summary": "Recaps the second chapter: the three tiers, themes as collections of tiers, color and typography as the highest-impact categories, composite tokens, and starting simple, then assigns homework to audit existing variables against the three-tier model.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789782", "course": "subatomic", "position": 48, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Chapter 3 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789782-chapter-3-introduction", "free": false, "summary": "Previews the naming chapter: why naming matters and why it is hard, guiding principles, cross-disciplinary collaboration, design and code parity, a token naming algorithm, and naming conventions for each token category.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789788", "course": "subatomic", "position": 49, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - Humanity's Superpower", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789788-why-naming-matters-humanity-s-superpower", "free": false, "summary": "Frames naming as language: a token system is a vocabulary for a design language, illustrated with Chaser the border collie's 1,000-toy vocabulary and humanity's use of language and technology to build shared meaning.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789792", "course": "subatomic", "position": 50, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - Shared Understanding", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789792-why-naming-matters-shared-understanding", "free": false, "summary": "Explains how shared names create shared understanding and alignment, and how people talking past each other with different words for the same thing is the problem a token vocabulary is meant to solve.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789818", "course": "subatomic", "position": 51, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - Collaboration", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789818-why-naming-matters-collaboration", "free": false, "summary": "Shows how a shared naming language unlocks collaboration between designers and developers, and between people, systems, tools, and AI, with names acting as the glue that ties them together.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789823", "course": "subatomic", "position": 52, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - Contract", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789823-why-naming-matters-contract", "free": false, "summary": "Frames design tokens as a contract: how variables are defined and applied in Figma must match how tokens are defined and applied in code, making names the handshake between design tools, code, and beyond.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789827", "course": "subatomic", "position": 53, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - Infrastructure", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789827-why-naming-matters-infrastructure", "free": false, "summary": "Describes tokens as critical UI infrastructure and the API for a design language, revisiting Material Design's point about self-explanatory names and showing how names like brand background get wired into design files, code, and docs.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789833", "course": "subatomic", "position": 54, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - Traceability & Measurement", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789833-why-naming-matters-traceability-measurement", "free": false, "summary": "Explains how consistent naming makes token usage traceable, using a DS namespace prefix on the Starbucks button's background token to measure adoption in code, and Figma Analytics to track variable usage in design files.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789838", "course": "subatomic", "position": 55, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - User Experience", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789838-why-naming-matters-user-experience", "free": false, "summary": "Makes the case that consistent, cohesive token names create a good user experience for the designers and developers using them, letting them internalize the language instead of breaking flow to check documentation.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789841", "course": "subatomic", "position": 56, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - Maintainability", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789841-why-naming-matters-maintainability", "free": false, "summary": "Explains how consistent naming conventions and clear naming algorithms make token systems easier to maintain, from adding tokens to making changes with find-and-replace or codemods across a codebase.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789844", "course": "subatomic", "position": 57, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - Synchronization & Automation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789844-why-naming-matters-synchronization-automation", "free": false, "summary": "Notes that naming unlocks synchronization and automation between people, Figma, code, documentation, CMSs, and AI tools, with AI opportunities saved for the advanced chapter.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789868", "course": "subatomic", "position": 58, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Matters - Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789868-why-naming-matters-summary", "free": false, "summary": "Recaps why naming matters: shared understanding and collaboration, tokens as the API for design language and critical infrastructure, better experiences for users and maintainers, and smoother syncing across tools, AI, and documentation.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789970", "course": "subatomic", "position": 59, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Is Hard - Two Hard Things In Computer Science", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789970-why-naming-is-hard-two-hard-things-in-computer-science", "free": false, "summary": "Introduces why naming is hard, starting from the well-known quip, credited to Phil Karlton, that naming things is one of the two hard problems in computer science.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789974", "course": "subatomic", "position": 60, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Is Hard - Invented Language", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789974-why-naming-is-hard-invented-language", "free": false, "summary": "Explains that tokens are an invented language, simultaneously arbitrary and critical, lacking the built-in structure a language like TypeScript provides, yet serving as the contract that glues designers, developers, tools, and code together.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789979", "course": "subatomic", "position": 61, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Is Hard - Subjectivity", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789979-why-naming-is-hard-subjectivity", "free": false, "summary": "Shows how subjective naming is: four design systems label the same button destructive, danger, error, and caution, and years of emailed opinions on Atomic Design's names show how passionate and draining naming debates can get.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789986", "course": "subatomic", "position": 62, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Is Hard - What Actually Matters? It Depends!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789986-why-naming-is-hard-what-actually-matters-it-depends", "free": false, "summary": "Frames the core tension in token naming: some parts demand rigor and meticulous detail while others matter far less, setting up guidance on which to get right and which to stop arguing about.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789990", "course": "subatomic", "position": 63, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Is Hard - Rigor & Organization", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789990-why-naming-is-hard-rigor-organization", "free": false, "summary": "Explains why rigor is a new challenge: Figma variables only arrived in beta in 2023, and designers are used to loose file naming, yet tokens serve as an API and contract between design and code where structure matters.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62789996", "course": "subatomic", "position": 64, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Is Hard - Consistency", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62789996-why-naming-is-hard-consistency", "free": false, "summary": "Explains why consistent naming is critical yet hard to sustain, comparing it to sticking with a new gym habit and describing how team handoffs turn naming into a game of telephone where names get misconstrued and renamed.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790003", "course": "subatomic", "position": 65, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Is Hard - Designer/Developer Divide", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790003-why-naming-is-hard-designer-developer-divide", "free": false, "summary": "Identifies the divide between designers and developers as a major obstacle to naming, pointing to calcified waterfall processes where the two disciplines only meet at design handoff and how that distance undermines naming across both environments.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790071", "course": "subatomic", "position": 66, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Is Hard - Environments & Contexts Differ", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790071-why-naming-is-hard-environments-contexts-differ", "free": false, "summary": "Explains how design tools and code are different worlds that shape token structure and naming, using Figma's explicit state variants versus states rendered in code, plus z-index, breakpoints, and animation, and argues designers and developers must name things together.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790077", "course": "subatomic", "position": 67, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Why Naming Is Hard - Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790077-why-naming-is-hard-summary", "free": false, "summary": "Recaps why naming is hard: tokens are an invented language that serves as the API, language is subjective, consistency takes rigor, only some conventions need to be strict, the designer/developer divide is real, and static design tools are not software runtimes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790082", "course": "subatomic", "position": 68, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Principles - Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790082-naming-principles-introduction", "free": false, "summary": "Introduces naming principles as a form of design principles, citing Jared Spool's six counterintuitive tests, principles.design, and Jeremy Keith's principles collection, and stresses that a sound naming structure matters more than the specific words chosen.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790087", "course": "subatomic", "position": 69, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Principles - Clarity Over Cleverness", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790087-naming-principles-clarity-over-cleverness", "free": false, "summary": "Covers the first naming principle, clarity over cleverness, contrasting a plain name like typography display large with a clever name from a real client project, and argues that straightforward, declarative language confuses people less.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790091", "course": "subatomic", "position": 70, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Principles - Legibility Over Succinctness", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790091-naming-principles-legibility-over-succinctness", "free": false, "summary": "Makes the case for legibility over succinctness: spell token names out rather than abbreviating them, since shorthand requires a decoder and the names travel to design tools, development environments, AI tools, and CMSs.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790096", "course": "subatomic", "position": 71, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Principles - Consistency Is Key", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790096-naming-principles-consistency-is-key", "free": false, "summary": "Covers the principle that consistency is key: once a convention like -lg for large is chosen, apply it across the whole token system, which gets tricky when many people bring different opinions, histories, and preferences.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790099", "course": "subatomic", "position": 72, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Principles - Use Existing Conventions", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790099-naming-principles-use-existing-conventions", "free": false, "summary": "Covers the principle of using existing conventions wherever possible, such as naming a token Starbucks Green if the company already calls the color that, rather than inventing new names or overriding established ones.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790103", "course": "subatomic", "position": 73, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Principles - Communicate Hierarchy", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790103-naming-principles-communicate-hierarchy", "free": false, "summary": "Covers the principle of conveying hierarchy, explaining why token names should follow a structured order rather than how they are spoken aloud (like brand background color), likening it to the kingdom-to-species taxonomy of the natural world.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790109", "course": "subatomic", "position": 74, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Principles - Pragmatism Over Pedantry", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790109-naming-principles-pragmatism-over-pedantry", "free": false, "summary": "Covers the principle of pragmatism over pedantry: stop arguing over equivalent words, look at what others are doing, make a call, and focus on shared understanding rather than the specific language chosen.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790113", "course": "subatomic", "position": 75, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Principles - Environment Agnostic", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790113-naming-principles-environment-agnostic", "free": false, "summary": "Covers the principle of being environment agnostic, balancing the conventions of target platforms like the web and iOS against the need for cross-platform token language that isn't skewed toward any one environment.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62790176", "course": "subatomic", "position": 76, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Principles - Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62790176-naming-principles-summary", "free": false, "summary": "Recaps the token naming principles (clarity over cleverness, legibility over succinctness, consistency, hierarchy, existing conventions, pragmatism, environment agnosticism), adds naming as a cross-disciplinary sport, and encourages adapting the list to the team.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797835", "course": "subatomic", "position": 77, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "The Importance of Cross-disciplinary Collaboration", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797835-the-importance-of-cross-disciplinary-collaboration", "free": false, "summary": "Makes the case that naming is a cross-disciplinary sport: token architecture and nomenclature must be co-created by designers and developers to reach parity between design and code, since work thrown over the fence to the other discipline does not work.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797844", "course": "subatomic", "position": 78, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Cross-disciplinary Roles for Naming", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797844-cross-disciplinary-roles-for-naming", "free": false, "summary": "Explains how developers, with long experience naming variables, can guide designers who are newer to structured naming, and divides the work: architecture and nomenclature are a joint effort, while mapping token values onto that structure is design work.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797847", "course": "subatomic", "position": 79, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Parity - Critical but Impossible!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797847-naming-parity-critical-but-impossible", "free": false, "summary": "Introduces why parity between design and code environments is critical to a token system yet nearly impossible to achieve, since a static design tool and a browser or app runtime are fundamentally different, setting up the areas where they diverge.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797849", "course": "subatomic", "position": 80, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Parity Differences - Global Namespace", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797849-naming-parity-differences-global-namespace", "free": false, "summary": "Explains the first design/code divergence: code benefits from a global namespace prefix on every token to prevent collisions, while Figma handles provenance through team libraries, which means Figma and code names fundamentally differ side by side.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797852", "course": "subatomic", "position": 81, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Parity Differences - Viewport", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797852-naming-parity-differences-viewport", "free": false, "summary": "Contrasts Figma viewport variables for desktop, tablet, and mobile artboards with breakpoints on the web, a continuum of screen sizes handled by media queries, and explains why the two are usually managed separately rather than synced.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797854", "course": "subatomic", "position": 82, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Parity Differences - Animation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797854-naming-parity-differences-animation", "free": false, "summary": "Explains that animation tokens can be defined as Figma variables or in Tokens Studio but can't be used in the Figma interface or its prototyping (at the time of recording), so they only come to life in code.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797856", "course": "subatomic", "position": 83, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Parity Differences - z-index", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797856-naming-parity-differences-z-index", "free": false, "summary": "Covers z-index, the stacking order of UI elements, as another category where Figma differs from a browser or app runtime: z-index tokens can be defined as Figma variables but Figma can't use them, so they tend to be managed in code.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797861", "course": "subatomic", "position": 84, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Parity Differences - Named and Unnamed Defaults", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797861-naming-parity-differences-named-and-unnamed-defaults", "free": false, "summary": "Explains that code allows an unnamed default token value (typography display, with large and small modifiers) while Figma requires every variable to have a name, which is why default keeps showing up, and why designers and developers must navigate these differences together.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797865", "course": "subatomic", "position": 85, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Systems and Preferences", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797865-naming-systems-and-preferences", "free": false, "summary": "Surveys naming systems for tokens, including color ramps, steps, scale-based spacing, t-shirt sizes, named values and properties, semantic, variant, and category naming, and explains that different token categories will likely use different systems.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797868", "course": "subatomic", "position": 86, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Synonyms", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797868-synonyms", "free": false, "summary": "Points out the many synonyms in the token world, from design tokens versus design variables or theme variables to the various names for each tier (definitions, semantic, component-specific), and suggests picking the words that make sense for the organization.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797872", "course": "subatomic", "position": 87, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "The Naming Algorithm", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797872-the-naming-algorithm", "free": false, "summary": "Introduces the design token naming algorithm, defines algorithm via Merriam-Webster, points to published naming structures from Atlassian, REI's Cedar, GitLab's Pajamas, GitHub's Primer, Adobe Spectrum, and Nathan Curtis, and stresses structure over specific words.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797880", "course": "subatomic", "position": 88, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Algorithm Figjam Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797880-naming-algorithm-figjam-intro", "free": false, "summary": "Introduces the FigJam diagram included with the course, a naming algorithm template teams can use, adapt, and modify to meet their organization's preferences, ahead of a tour of what it contains.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797894", "course": "subatomic", "position": 89, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Algorithm Figjam Tour", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797894-naming-algorithm-figjam-tour", "free": false, "summary": "Tours the course's FigJam naming template: tier one token categories with guidance for working sessions, then the tier two and tier three anatomy (global prefix, tier identifier, category or component, property, variant, state) as a starting point to adapt.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62797895", "course": "subatomic", "position": 90, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Algorithm Process", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62797895-naming-algorithm-process", "free": false, "summary": "Recommends a process for creating a naming algorithm: limit working sessions to design and development leads with decision-making authority, work through the FigJam template, then present, document, and publish the conventions rather than reopening debate.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835660", "course": "subatomic", "position": 91, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Naming Tokens By Category", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835660-naming-tokens-by-category", "free": false, "summary": "Introduces a deep dive into the specific token names used across client projects for color, typography, and the other token categories, with a reminder (courtesy of Bootsy) that these names are a guide, not gospel.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835672", "course": "subatomic", "position": 92, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Global Prefix", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835672-global-prefix", "free": false, "summary": "Explains the global prefix (ds as a placeholder, like SLDS, Material, USWDS, or Carbon): a code-only convention Figma doesn't need that identifies tokens as coming from the design system and prevents collisions with other variables.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835678", "course": "subatomic", "position": 93, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Tier Identifier", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835678-tier-identifier", "free": false, "summary": "Explains the tier identifier, a dev-only convention (theme, semantic, or optionally component) that follows the global prefix and distinguishes tier two and tier three tokens, signaling which variables should be wired up to components and other environments.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835683", "course": "subatomic", "position": 94, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Token Category", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835683-token-category", "free": false, "summary": "Lists the token categories that follow the tier identifier (color, typography, spacing, border, box shadow, and animation) and sets up a walk through each one in order to dig into its naming details.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835710", "course": "subatomic", "position": 95, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Color Token Names - Tier 1", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835710-color-token-names-tier-1", "free": false, "summary": "Walks through tier one color naming: flat versus grouped names (color yellow 100 or color brand yellow 100), raw values, ramps, brand, neutral, utility, and data viz categories, third-party conventions like Tailwind, Material, and Open Props, and a case for color ramps.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835713", "course": "subatomic", "position": 96, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Color Token Names - Tier 2", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835713-color-token-names-tier-2", "free": false, "summary": "Breaks down the anatomy of tier two color tokens, the API worth sweating: property or surface (background, content, border), intention (brand, default, disabled, utility, accent), variant (strong, subtle, knockout, numbered accents), and state.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835715", "course": "subatomic", "position": 97, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Color Token Names - Tier 3", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835715-color-token-names-tier-3", "free": false, "summary": "Shows the anatomy of tier three color tokens for component-specific and special cases: component or use case, variant, property (background, content, border), and state, with disabled at the state level, illustrated by button primary color background.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835719", "course": "subatomic", "position": 98, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Color Token Names - Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835719-color-token-names-summary", "free": false, "summary": "Recaps color token naming: tier one names can be looser and optimized for system designers and developers, while tier two and tier three names must be strictly defined since they serve as the API, and points to an article on how Adobe Spectrum names its color tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835722", "course": "subatomic", "position": 99, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Typography Token Names - Tier 1", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835722-typography-token-names-tier-1", "free": false, "summary": "Walks through tier one typography naming: spelling out font size, family, weight, style, line height, text transform, and letter spacing with values that follow technology conventions, and defends descriptive names like Helvetica 64 since they only feed semantic tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835725", "course": "subatomic", "position": 100, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Typography Token Names - Tier 2", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835725-typography-token-names-tier-2", "free": false, "summary": "Breaks down tier two typography tokens: intention (display, headline, title, body, label, metadata), abbreviated t-shirt size variants, optional mobile/tablet/desktop values, and properties, combined into composite tokens used as Figma styles or code mixins.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835729", "course": "subatomic", "position": 101, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Typography Token Names - Tier 3", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835729-typography-token-names-tier-3", "free": false, "summary": "Shows the anatomy of component-specific tier three typography tokens (component, variant, typographic property) and notes the most common uses are tweaking a font size or setting line height to one to remove white space around text.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835730", "course": "subatomic", "position": 102, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Typography Token Names - Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835730-typography-token-names-summary", "free": false, "summary": "Recaps typography naming: spell out and categorize type properties at tier one, sweat the details of tier two tokens since components are wired to them, and expect tier three typography tokens to be relatively rare.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835734", "course": "subatomic", "position": 103, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Spacing Token Names", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835734-spacing-token-names", "free": false, "summary": "Covers spacing token naming: tier one values that describe a four or eight point grid and can be used directly, named tier two intentions like vertical rhythm or section breaks, and component-specific padding and margin tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835740", "course": "subatomic", "position": 104, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Border Token Names", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835740-border-token-names", "free": false, "summary": "Covers border token naming: tier one radius, width, and occasionally style values, mapped to tier two theme border radius tokens that usually use t-shirt sizing, plus optional border tokens at the component level.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835743", "course": "subatomic", "position": 105, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Shadow Token Names", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835743-shadow-token-names", "free": false, "summary": "Covers shadow as a composite token of color, x and y offset, blur, and spread, noting that in practice shadows are often described only at tier two, with optional component-specific shadow tokens on top.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835754", "course": "subatomic", "position": 106, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Animation Token Names", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835754-animation-token-names", "free": false, "summary": "Covers animation as a composite token: tier one durations and easing values, tier two named animations that combine them into specific effects, and component-specific animations that are possible but rarely used with clients.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835764", "course": "subatomic", "position": 107, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Breakpoint Token Names", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835764-breakpoint-token-names", "free": false, "summary": "Covers breakpoint token naming, the word breakpoint followed by t-shirt sizing (with mobile, tablet, and desktop as a less recommended option), and notes that breakpoints usually aren't managed in a cross-disciplinary way.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835770", "course": "subatomic", "position": 108, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "z-index Token Names", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835770-z-index-token-names", "free": false, "summary": "Covers z-index tokens, a questionable fit for a token system at all, named z-index plus a value on a 100 to 900 scale like a color ramp so that new values can be slotted in between.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "62835771", "course": "subatomic", "position": 109, "chapter": { "position": 3, "title": "Chapter 3 - Naming Conventions" }, "title": "Chapter 3 Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/62835771-chapter-3-summary", "free": false, "summary": "Recaps the naming chapter (why naming matters and is hard, designer/developer collaboration, a naming algorithm for predictable language) and assigns homework: review existing naming, identify design and dev leads, and use the FigJam algorithm file.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63060221", "course": "subatomic", "position": 110, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Chapter 4 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63060221-chapter-4-introduction", "free": false, "summary": "Introduces the hands-on chapter on building a token system in Figma and code through a demo project: choosing tools, environment setup, an MVP three-tier architecture, a full theme, a second theme, and keeping design and code in sync.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63060386", "course": "subatomic", "position": 111, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Introducing...Frost'd Tokens!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63060386-introducing-frost-d-tokens", "free": false, "summary": "Introduces Frosted Tokens, a fictional fast-growing ice cream company (with a Hot Fuzz nod), whose design token system will serve multiple products, product families, themes, and modes throughout the course.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63060466", "course": "subatomic", "position": 112, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Demo Tour in Figma and Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63060466-demo-tour-in-figma-and-code", "free": false, "summary": "Tours the Frosted Tokens demo: a marketing homepage, checkout flow, and customer dashboard designed with Molly Hellmuth, switching between vanilla, strawberry, chocolate, and dark chocolate themes in Figma and in code via Storybook.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63530743", "course": "subatomic", "position": 113, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "🗄️ Accessing the Project Demo Files", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/texts/63530743-accessing-the-project-demo-files", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "64405365", "course": "subatomic", "position": 114, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "🗄️ Accessing the Project Demo Figma Files", "kind": "download", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/downloads/64405365-accessing-the-project-demo-figma-files", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "64405083", "course": "subatomic", "position": 115, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "🗄️ Accessing the Project Demo Code Files and Storybook", "kind": "download", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/downloads/64405083-accessing-the-project-demo-code-files-and-storybook", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "63135689", "course": "subatomic", "position": 116, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Token Build Process Overview; Cross-disciplinary Approach", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63135689-token-build-process-overview-cross-disciplinary-approach", "free": false, "summary": "Lays out the five steps for building the token system (tools, environments, MVP architecture, a full theme, a second theme), done concurrently in design and code, and urges designers and developers to follow both sides, with Ian playing the developer.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63136595", "course": "subatomic", "position": 117, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "1. Choosing Tools for Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63136595-1-choosing-tools-for-figma", "free": false, "summary": "Surveys Figma token tooling (Figma variables, Tokens Studio, Supernova, Knapsack, Zeroheight) and explains the choice of native Figma variables for the course, with a pointer to Figma's own documentation.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63136654", "course": "subatomic", "position": 118, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "1. Choosing Tools for Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63136654-1-choosing-tools-for-code", "free": false, "summary": "Explains the code side of tokens: define them once in JSON, then use a build step to translate them for web, iOS, and Android, comparing Salesforce's Theo, Diez, and Style Dictionary, the tool of choice for the course.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63138587", "course": "subatomic", "position": 119, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "2. Environment Setup for Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63138587-2-environment-setup-for-figma", "free": false, "summary": "Covers Figma setup: an account and edit access, plan and pricing differences in how many variable modes and collections are supported, and where to find local variables (with dev mode off) to create a first variable.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63226495", "course": "subatomic", "position": 120, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "2. Environment Setup for Code - Prerequisites & Config", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63226495-2-environment-setup-for-code-prerequisites-config", "free": false, "summary": "Walks through code prerequisites: VS Code, Node.js and npm, npm init, installing Style Dictionary and Storybook as dev dependencies and Sass as a regular dependency, pushing to GitHub, and converting JSON tokens into CSS custom properties.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63165548", "course": "subatomic", "position": 121, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. MVP Tier 1 Tokens in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63165548-3-mvp-tier-1-tokens-in-figma", "free": false, "summary": "Starts the strawberry theme's MVP architecture in Figma by creating a first tier one color variable, color/brand/pink, using the slash convention for grouping, and renaming the variable collection to tier one.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63226806", "course": "subatomic", "position": 122, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. MVP Tier 1 Tokens in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63226806-3-mvp-tier-1-tokens-in-code", "free": false, "summary": "Mirrors the Figma tier one color variable in code, creating a tier one definitions collection in the JSON tokens file, nesting color, brand, and pink like Figma's slashes, and outputting a color brand pink CSS custom property.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63226914", "course": "subatomic", "position": 123, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. MVP Tier 2 Token in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63226914-3-mvp-tier-2-token-in-figma", "free": false, "summary": "Applies tier one values to tier two semantic tokens in Figma by creating a new tier two collection and a color/content/brand variable aliased to the tier one color/brand/pink value.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63226917", "course": "subatomic", "position": 124, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. MVP Tier 2 Token in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63226917-3-mvp-tier-2-token-in-code", "free": false, "summary": "Recreates the tier two token in code by duplicating the tier one definitions folder as tier two usage, adding color content brand referencing color brand pink, and building it into a new CSS custom property.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63226926", "course": "subatomic", "position": 125, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. MVP Tier 3 Token in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63226926-3-mvp-tier-3-token-in-figma", "free": false, "summary": "Creates a tier three collection in Figma with a button/color/content variable aliased to the tier two color/content/brand token, noting either tier can be aliased and that grouping at tier three distinguishes one component from another.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63226930", "course": "subatomic", "position": 126, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. MVP Tier 3 Token in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63226930-3-mvp-tier-3-token-in-code", "free": false, "summary": "Creates the tier three button token in code: a button JSON file in a tier three component directory with nested button, color, and content objects referencing tier two color content brand, then builds all three tiers into output.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63226948", "course": "subatomic", "position": 127, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Add Global Prefix to Code Config", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63226948-3-add-global-prefix-to-code-config", "free": false, "summary": "Adds a global DS prefix to every token through the build config file, so the design token system's CSS custom properties don't collide with same-named custom properties already living in downstream applications.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63226951", "course": "subatomic", "position": 128, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Add Theme Prefix to Code Config", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63226951-3-add-theme-prefix-to-code-config", "free": false, "summary": "Adds a theme prefix to tier two and tier three tokens (but not tier one) by converting the config to JavaScript with a custom transform, steering developers toward multi-theme-ready tokens and completing the MVP token system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227020", "course": "subatomic", "position": 129, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Expanding MVP Tier 1 Color Tokens in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227020-3-expanding-mvp-tier-1-color-tokens-in-figma", "free": false, "summary": "Replaces the single brand pink variable in the Figma tier one collection with a full 100 through 900 pink color ramp, grouped under color/brand/pink, and deletes the old variable.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227023", "course": "subatomic", "position": 130, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Expanding MVP Tier 1 Color Tokens in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227023-3-expanding-mvp-tier-1-color-tokens-in-code", "free": false, "summary": "Swaps the single pink value in the tier one code tokens for the same 100 through 900 pink color ramp defined in Figma, so the expanded palette exists in both design and code.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63297661", "course": "subatomic", "position": 131, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Expanding MVP Tier 2 Color Tokens in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63297661-3-expanding-mvp-tier-2-color-tokens-in-figma", "free": false, "summary": "Fixes a tier two Figma variable that broke when its tier one pink was deleted (flagged by a question-mark icon), then duplicates the content group into background and border groups remapped to the new pink ramp.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63297801", "course": "subatomic", "position": 132, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Expanding MVP Tier 2 Color Tokens in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63297801-3-expanding-mvp-tier-2-color-tokens-in-code", "free": false, "summary": "Adds background and border categories alongside content in the tier two code tokens, mapping each to the matching pink values so code lines up with the Figma variables.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63297816", "course": "subatomic", "position": 133, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Expanding MVP Tier 3 Color Tokens in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63297816-3-expanding-mvp-tier-3-color-tokens-in-figma", "free": false, "summary": "Expands the tier three button tokens in Figma by duplicating the content variable into background and border variables, letting the button's color properties be controlled independently of the tier two system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63297824", "course": "subatomic", "position": 134, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Expanding MVP Tier 3 Color Tokens in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63297824-3-expanding-mvp-tier-3-color-tokens-in-code", "free": false, "summary": "Adds button background and border tokens in code, mapped to the tier two background brand and border brand colors, then recaps the pink ramp and the content, background, and border categories now aligned across Figma and code.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227097", "course": "subatomic", "position": 135, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Wiring Up MVP Tokens in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227097-3-wiring-up-mvp-tokens-in-figma", "free": false, "summary": "Applies the MVP token system to real UI in Figma: wires a heading directly to the tier two brand content color and wires a button's fill, stroke, and text to its tier three button tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63299211", "course": "subatomic", "position": 136, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Wiring Up MVP Tokens in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63299211-3-wiring-up-mvp-tokens-in-code", "free": false, "summary": "Wires tokens into a sample index.html in code: the button CSS uses the prefixed tier three background, border, and content tokens (read from Figma dev mode), and the heading uses the tier two brand content color.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63299278", "course": "subatomic", "position": 137, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "3. Scoping Figma Variables", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63299278-3-scoping-figma-variables", "free": false, "summary": "Uses Figma variable scoping to hide tier one variables from designers and restrict content, background, and border colors to text, fills, and strokes, recommending scoping once token categories settle and a library is ready to publish.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63299664", "course": "subatomic", "position": 138, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Building a Full Theme Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63299664-4-building-a-full-theme-intro", "free": false, "summary": "Kicks off building out a full theme, moving beyond a pink ramp wired to a couple of components by extending color tokens and tackling typography, spacing, border, shadow, and more.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227383", "course": "subatomic", "position": 139, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Theme Tier 1 Colors in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227383-4-theme-tier-1-colors-in-figma", "free": false, "summary": "Expands the Figma tier one color collection beyond pink with more brand colors, utility colors (blue, green, yellow, red), a neutral grayscale, transparent values for modal backdrops, and data viz colors, noting these categories are optional.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227387", "course": "subatomic", "position": 140, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Theme Tier 1 Colors in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227387-4-theme-tier-1-colors-in-code", "free": false, "summary": "Adds the expanded tier one palette in code to match Figma: the brand cream ramp, utility colors that live outside the brand category, neutrals, transparent colors, and data viz colors.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227430", "course": "subatomic", "position": 141, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Theme Tier 2 Colors in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227430-4-theme-tier-2-colors-in-figma", "free": false, "summary": "Builds richer tier two color roles in Figma for content, background, and border (default, default hover, subtle, knockout, brand, brand hover, disabled), framed as roles identified through a pilot project rather than in the abstract.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227431", "course": "subatomic", "position": 142, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Theme Tier 2 Colors in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227431-4-theme-tier-2-colors-in-code", "free": false, "summary": "Fills out the remaining tier two color tokens in code, adding the default, border, and content colors so they match the roles already defined in Figma variables.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227436", "course": "subatomic", "position": 143, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Theme Tier 3 Colors in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227436-4-theme-tier-3-colors-in-figma", "free": false, "summary": "Extends tier three button tokens in Figma with state-based variables and primary, secondary, and tertiary variants, acknowledging the ballooning token count while arguing fine-grained control pays off across multiple brands and themes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227439", "course": "subatomic", "position": 144, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Theme Tier 3 Colors in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227439-4-theme-tier-3-colors-in-code", "free": false, "summary": "Restructures the button JSON in code with a default wrapper to add hover, active, and disabled states, fills in the primary variant and other component categories from Figma, then builds every color token into CSS custom properties.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227453", "course": "subatomic", "position": 145, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Tier 1 Typography in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227453-4-tier-1-typography-in-figma", "free": false, "summary": "Starts typography tokens by treating typography as a composite token and laying out tier one ingredients in Figma: font families, font weights, font sizes on an eight-point grid, line heights, letter spacing, and more.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227457", "course": "subatomic", "position": 146, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Tier 1 Typography in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227457-4-tier-1-typography-in-code", "free": false, "summary": "Fills out the tier one typography tokens in code by pasting in values for font family, font size, font weight, line height, letter spacing, and text transform instead of typing each one out.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227465", "course": "subatomic", "position": 147, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Understanding Relative Units and Differences between Figma & Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227465-4-understanding-relative-units-and-differences-between-figma-code", "free": false, "summary": "Explains why Figma's pixel-based type differs from the browser, tours absolute and relative CSS units, and demonstrates how rems respect a user's browser font-size setting, recommending rems and showing clamp() for fluid type.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63371184", "course": "subatomic", "position": 148, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Understanding Unitless Line Height and Differences between Figma & Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63371184-4-understanding-unitless-line-height-and-differences-between-figma-code", "free": false, "summary": "Covers line height as another Figma-to-code gap: Figma variables can't hold percentage line heights, while CSS best practice is unitless values like 1.5, with a pointer to a line height playground for experimenting.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227458", "course": "subatomic", "position": 149, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Tier 2 Typography in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227458-4-tier-2-typography-in-figma", "free": false, "summary": "Builds tier two typography tokens in Figma by grouping font family, size, line height, and weight into roles (display, headline, title, label, body) using a typography/role naming pattern so the properties travel together.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227462", "course": "subatomic", "position": 150, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Tier 2 Typography in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227462-4-tier-2-typography-in-code", "free": false, "summary": "Adds the tier two typography presets in code (display, headline, title, label, body, and meta) as grouped values, setting up a later discussion of combining them into an easier experience for developers.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227466", "course": "subatomic", "position": 151, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Responsive Typography - Core Concepts", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227466-4-responsive-typography-core-concepts", "free": false, "summary": "Introduces responsive typography with display default and display default mobile presets that shrink font size, line height, and letter spacing on small screens, and argues the system should absorb that work so downstream users get it for free.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63371410", "course": "subatomic", "position": 152, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Responsive Typography - Composite Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63371410-4-responsive-typography-composite-tokens", "free": false, "summary": "Explains how display default and display default mobile each become composite typography tokens that merge into a single display default, so downstream designers and developers wire up one token and get responsive behavior with fewer errors.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63371448", "course": "subatomic", "position": 153, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Understanding the Difference Between Viewports & Breakpoints", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63371448-4-understanding-the-difference-between-viewports-breakpoints", "free": false, "summary": "Contrasts designers' viewport artboards (desktop, tablet, mobile) with developers' media queries, walks through a min-width media query example, and argues that understanding the difference improves designer and developer relationships.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227554", "course": "subatomic", "position": 154, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Figma Modes and Viewport", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227554-4-figma-modes-and-viewport", "free": false, "summary": "Introduces Figma variable modes by creating a dedicated viewport collection with large, medium, and small modes (each with a label and a width), giving artboards a switch that typography can respond to.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227671", "course": "subatomic", "position": 155, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Applying Responsive Typography in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227671-4-applying-responsive-typography-in-figma", "free": false, "summary": "Walks through responsive typography in Figma: a design-only viewport typography collection with large, medium, and small modes, remapping text styles to it, then applying variable modes to artboards so type adjusts automatically.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227787", "course": "subatomic", "position": 156, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Responsive Typography in Code - Sass Mixins", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227787-4-responsive-typography-in-code-sass-mixins", "free": false, "summary": "Shows how mapping tier two typography tokens property by property in component CSS invites typos and missed properties, then bundles them into a Sass mixin, arguing no component should contain a stray font-size or font-weight.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63410917", "course": "subatomic", "position": 157, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Responsive Typography in Code - applying mixins", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63410917-responsive-typography-in-code-applying-mixins", "free": false, "summary": "Handles responsive typography in code with media queries, explains why code has more breakpoints than Figma artboards, then builds a mobile-first Sass display default mixin with a medium breakpoint override and applies it to the heading.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63373449", "course": "subatomic", "position": 158, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Typography Celebration!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63373449-4-typography-celebration", "free": false, "summary": "Marks getting through responsive typography, the most complex part of the token system, with a roller coaster metaphor (and Billy Corgan riding one), promising the remaining token categories are more straightforward.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227797", "course": "subatomic", "position": 159, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Tier 1 Spacing in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227797-4-tier-1-spacing-in-figma", "free": false, "summary": "Adds a spacing category to the Figma tier one collection with values named by their pixel amount (0, 4, 8, 12, 16, and so on), prioritizing ease of mapping for whoever wires up the token system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227811", "course": "subatomic", "position": 160, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Spacing Tier 2 in Code & Sass Size Function", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227811-4-spacing-tier-2-in-code-sass-size-function", "free": false, "summary": "Swaps exported spacing tokens on the button for a Sass sizing function that multiplies eight pixels by a number, importing the variables file and applying size two and size three to recreate the same padding.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227815", "course": "subatomic", "position": 161, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Tier 2 Spacing in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227815-4-tier-2-spacing-in-figma", "free": false, "summary": "Notes that spacing tokens often get used directly, then shows a tier two semantic spacing token in Figma for a section break mapped to spacing 16, and mentions making such spacing responsive like typography.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227826", "course": "subatomic", "position": 162, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Border Tier 1 in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227826-4-border-tier-1-in-figma", "free": false, "summary": "Starts border tokens, noting systems typically need only width and radius (rarely style), and adds a border grouping to the Figma tier one collection that holds all available radius and width values.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227827", "course": "subatomic", "position": 163, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Border Tier 1 in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227827-4-border-tier-1-in-code", "free": false, "summary": "Adds tier one border radius and border width tokens in a borders JSON file, explaining why they stay separate from spacing: it allows values like a three-pixel border width without permitting that value for spacing.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227834", "course": "subatomic", "position": 164, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Border Tier 2 in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227834-4-border-tier-2-in-figma", "free": false, "summary": "Gives tier one border values jobs at tier two using t-shirt sizes (none, small, medium, large) with a default in mind, then applies stroke width and corner radius variables to a rectangle in Figma.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63227837", "course": "subatomic", "position": 165, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Border Tier 2 in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63227837-4-border-tier-2-in-code", "free": false, "summary": "Maps tier two border radius and width tokens to tier one in code, then applies them in the button's Sass file, swapping a hard-coded one-pixel border for a width token and adding a radius token for rounded corners.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228097", "course": "subatomic", "position": 166, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Shadow Tier 1 in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228097-4-shadow-tier-1-in-figma", "free": false, "summary": "Defines tier one shadow tokens in Figma as composite pieces (x, y, blur, spread, and color) for small and medium shadows, acknowledging the co-located structure is a bit redundant but suits shadows.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228102", "course": "subatomic", "position": 167, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Shadow Tier 1 in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228102-4-shadow-tier-1-in-code", "free": false, "summary": "Creates a shadow JSON file in the tier one code definitions and adds the small and medium shadow token groupings, carrying over the tier one shadow values already defined in Figma.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228106", "course": "subatomic", "position": 168, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Shadow Tier 2 in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228106-4-shadow-tier-2-in-figma", "free": false, "summary": "Bundles tier one shadow values into tier two composite shadow variables in Figma, maps them to an effect's x, y, blur, and spread fields, and saves the result as a box shadow small effect style for downstream designers.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228110", "course": "subatomic", "position": 169, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Shadow Tier 2 in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228110-4-shadow-tier-2-in-code", "free": false, "summary": "Adds tier two box shadow tokens in code (named differently to avoid Style Dictionary conflicts), shows the tedium of stringing x, y, blur, spread, and color onto a button, then uses a custom transform to output composite shadow tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228117", "course": "subatomic", "position": 170, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Animation Tier 1 in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228117-4-animation-tier-1-in-code", "free": false, "summary": "Defines tier one animation tokens in code, since Figma can't use them yet: an animation JSON file with duration and easing values, leaving out the animated property because it varies by component.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228120", "course": "subatomic", "position": 171, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Animation Tier 2 in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228120-4-animation-tier-2-in-code", "free": false, "summary": "Gives tier one animation tokens jobs at tier two in an animation JSON file, with names like fade quick, fade long, move quick, and move long, plus easing values defined below them.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228251", "course": "subatomic", "position": 172, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Applying Animation Tokens in CSS", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228251-4-applying-animation-tokens-in-css", "free": false, "summary": "Adds a scale-on-hover effect to the button, shows how abrupt it looks without a transition, then applies the animation tokens in a CSS transition property for a smoother result.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228259", "course": "subatomic", "position": 173, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. z-index", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228259-4-z-index", "free": false, "summary": "Builds a z-index token system that steps up by 100 (like color ramps) so tooltips, modals, and other overlays stack predictably instead of relying on arbitrary numbers, noting Figma can't use these variables.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228265", "course": "subatomic", "position": 174, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. We Have A Theme! A Tour of Our Theme's Documentation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228265-4-we-have-a-theme-a-tour-of-our-theme-s-documentation", "free": false, "summary": "Tours the Figma documentation pages for the finished theme: brand, neutral, utility, and data vis color ramps, semantic background, content, and border tokens, tier-three button colors, responsive typography, borders, shadows, the eight-point spacing grid, and viewports.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63431330", "course": "subatomic", "position": 175, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "4. Our Theme Applied to Frost'd Tokens Products", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63431330-4-our-theme-applied-to-frost-d-tokens-products", "free": false, "summary": "Reviews the finished strawberry theme wired into the pilot project's homepage, checkout, and enterprise dashboard templates in both Figma and Storybook, and notes that new themes can now start from copy and paste.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228268", "course": "subatomic", "position": 176, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Let's Add A Chocolate Theme!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228268-5-let-s-add-a-chocolate-theme", "free": false, "summary": "Introduces building a second chocolate theme on the strawberry foundation, with two goals: shipping a new design language and validating that the token architecture can support any additional theme.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63431709", "course": "subatomic", "position": 177, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Introducing the Vanilla Theme Concept", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63431709-5-introducing-the-vanilla-theme-concept", "free": false, "summary": "Introduces the vanilla theme: a brandless, neutral, internal-facing theme that acts as x-ray vision for the token system and keeps it honest alongside the customer-facing strawberry and chocolate themes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228280", "course": "subatomic", "position": 178, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Add An Additional Theme in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228280-5-add-an-additional-theme-in-figma", "free": false, "summary": "Clones the strawberry theme in Figma: renames collections, creates a chocolate tier one collection with brown and gold ramps, adds chocolate modes at tier two and tier three, and remaps tokens so a new theme becomes a remapping exercise.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63432095", "course": "subatomic", "position": 179, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Core Tokens Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63432095-5-core-tokens-introduction", "free": false, "summary": "Introduces core tokens, universal decisions shared across all themes, and walks through candidates (neutrals, utility colors, transparents, data viz, parent brand colors, type scales, spacing, animation, z-index) to ease maintenance.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63432182", "course": "subatomic", "position": 180, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Core Tokens in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63432182-5-core-tokens-in-figma", "free": false, "summary": "Creates a core collection in Figma and moves shared utility, neutral, and transparent colors into it so values like white are managed once, recommending a core collection as soon as a second theme begins.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63228285", "course": "subatomic", "position": 181, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Add An Additional Theme in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63228285-5-add-an-additional-theme-in-code", "free": false, "summary": "Duplicates the strawberry theme directory in code as chocolate, replaces pink values with the brown ramp from Figma at tier one, and remaps tier two and tier three button tokens before building the theme's CSS custom properties.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63432505", "course": "subatomic", "position": 182, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Core Tokens in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63432505-5-core-tokens-in-code", "free": false, "summary": "Adds a core directory in code for shared tokens, removes those duplicates from each theme, moves shared SCSS files like the typography mixins into core, then previews the finished chocolate theme on the homepage.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63432667", "course": "subatomic", "position": 183, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. The Magic Trick of Theme Switching in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63432667-5-the-magic-trick-of-theme-switching-in-figma", "free": false, "summary": "Demonstrates the theme-switching magic trick in Figma: applying tier two and tier three variable modes to the pilot project frame to flip between strawberry and chocolate, a way to show skeptics the payoff.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63432646", "course": "subatomic", "position": 184, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Theme Switching in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63432646-5-theme-switching-in-code", "free": false, "summary": "Shows theme switching in code using Storybook's themes add-on, toggling the dashboard and checkout pages between the chocolate and strawberry themes as colors and typography change.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63432755", "course": "subatomic", "position": 185, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Revisiting The Vanilla Theme", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63432755-5-revisiting-the-vanilla-theme", "free": false, "summary": "Revisits the vanilla theme as a sanity check: adds vanilla tier one collections and modes in Figma to confirm the architecture supports any theme, noting internal themes can be boring or deliberately loud.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63433424", "course": "subatomic", "position": 186, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "5. Rounding Out Our Token System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63433424-5-rounding-out-our-token-system", "free": false, "summary": "Rounds out the demo with a dark chocolate theme, showing four themes (vanilla, strawberry, chocolate, dark chocolate) switching via Figma variable modes and a Storybook dropdown, and notes the architecture should stabilize after the first few themes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63433433", "course": "subatomic", "position": 187, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Synchronization & Automation - Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63433433-synchronization-automation-introduction", "free": false, "summary": "Introduces the most-asked token question, how to synchronize and automate tokens between Figma and code, framing a token system as more project than product and arguing that sync struggles are people and process problems no tool can fix alone.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63433487", "course": "subatomic", "position": 188, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Token Czars", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63433487-token-czars", "free": false, "summary": "Makes the case for designating two token czars, one owning the Figma library and one owning the codebase, as gatekeepers for every token request and change, using a lines-of-communication illustration to show why fewer cooks work better.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63433525", "course": "subatomic", "position": 189, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Synchronization & Automation - Fully Manual", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63433525-synchronization-automation-fully-manual", "free": false, "summary": "Frames design-to-code synchronization as a spectrum from fully manual to fully automated, then weighs the fully manual approach used throughout the chapter: it forces collaboration and avoids tools and lock-in, but copying hex codes by hand is tedious and error-prone.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64405892", "course": "subatomic", "position": 190, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "🗄️ Accessing the Project Demo Code with only Tier 2 and Tier 3 Tokens Being Exported", "kind": "download", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/downloads/64405892-accessing-the-project-demo-code-with-only-tier-2-and-tier-3-tokens-being-exported", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "63433530", "course": "subatomic", "position": 191, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Synchronization & Automation - Design Tokens Manager", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63433530-synchronization-automation-design-tokens-manager", "free": false, "summary": "Demos a mostly manual workflow using the Design Tokens Manager Figma plugin to export variables as JSON and run them through a Style Dictionary build, then weighs its pros (free, lightweight, little lock-in) against remaining manual steps and syntax mismatches.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64405637", "course": "subatomic", "position": 192, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "🗄️ Accessing the Project Demo Code with Design Tokens Manager and iOS Platform Tokens", "kind": "download", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/downloads/64405637-accessing-the-project-demo-code-with-design-tokens-manager-and-ios-platform-tokens", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "63434627", "course": "subatomic", "position": 193, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Synchronization & Automation - Tokens Studio", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63434627-synchronization-automation-tokens-studio", "free": false, "summary": "Demos syncing Figma variables to code with Tokens Studio, including wiring it to a GitHub repo, and weighs its configurability against cons the team has hit: black-box access, false collaboration, cost, font weights exported as pixels, and uneven application.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64405808", "course": "subatomic", "position": 194, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "🗄️ Accessing the Project Demo Code with Tokens Studio and iOS Platform Tokens", "kind": "download", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/downloads/64405808-accessing-the-project-demo-code-with-tokens-studio-and-ios-platform-tokens", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "63434719", "course": "subatomic", "position": 195, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Synchronization & Automation - Other Tools", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63434719-synchronization-automation-other-tools", "free": false, "summary": "Surveys other sync options: Figma's enterprise API (with Nate Baldwin's write-up on Adobe's approach) and the token features in Zeroheight, Supernova, and Knapsack, noting that Figma still has to originate variable changes since updates can't flow back in.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63434765", "course": "subatomic", "position": 196, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Synchronization & Automation - Full Automation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63434765-synchronization-automation-full-automation", "free": false, "summary": "Argues that full design-to-code automation doesn't exist, because a static vector drawing tool and a software runtime are fundamentally different, and that tools help but success ultimately depends on cross-disciplinary collaboration and communication.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63434768", "course": "subatomic", "position": 197, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Chapter 4 Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63434768-chapter-4-summary", "free": false, "summary": "Recaps the chapter: building a three-tier, multi-brand token system with Figma variables, collections, and modes, converting JSON to CSS custom properties with Style Dictionary, the quirks of each token category, and the spectrum of sync and automation tools.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63434811", "course": "subatomic", "position": 198, "chapter": { "position": 4, "title": "Chapter 4: Building a Token System" }, "title": "Chapter 4 Homework and Next Steps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63434811-chapter-4-homework-and-next-steps", "free": false, "summary": "Assigns next steps: set up the course's Figma and code assets as a head start (not a production-ready solution), adapt or discard anything that doesn't fit, master Figma variables, JSON, and Style Dictionary, research sync tools, and collaborate across disciplines.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63658093", "course": "subatomic", "position": 199, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Chapter 5 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63658093-chapter-5-introduction", "free": false, "summary": "Introduces the chapter on publishing a design token system: treating token systems as products, a pre-publish checklist, publishing a Figma team library, and creating and publishing a code package developers can install as a dependency.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63658105", "course": "subatomic", "position": 200, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Design Token Systems Are Products", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63658105-design-token-systems-are-products", "free": false, "summary": "Makes the case that design token systems are products, reframing product design through Andy Warhol's factory rather than commodity soup cans, and uses Slack's installable, versioned app and its release notes to set up later talk of versions and changelogs.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63658181", "course": "subatomic", "position": 201, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Difference Between Products and Libraries", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63658181-difference-between-products-and-libraries", "free": false, "summary": "Distinguishes user-facing digital products from libraries, which provide reusable functionality to help others build products, drawing on Nathan Curtis's idea of a design system as a product serving products and why libraries need careful rollouts.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63658192", "course": "subatomic", "position": 202, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "The Arc of Publishing A Token Library", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63658192-the-arc-of-publishing-a-token-library", "free": false, "summary": "Explains the basic arc of publishing: source Figma files and code repos produce a Figma team library and a built code package, which downstream product designers and developers pull into their own files and repos as a dependency.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63658303", "course": "subatomic", "position": 203, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Design Token System Makers & Users", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63658303-design-token-system-makers-users", "free": false, "summary": "Explains the difference between the makers who build and distribute a token system and the users who pull it into their work, using a car metaphor: manufacturers sweat specialized details while drivers just want to get from point A to point B.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63658400", "course": "subatomic", "position": 204, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "User-Centered Design for Token Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63658400-user-centered-design-for-token-systems", "free": false, "summary": "Revisits user-centered design principles (user focus, involvement, usability, iteration) and argues that for a token system the primary users are designers and developers, so a good experience means an exceptional designer and developer experience.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63687341", "course": "subatomic", "position": 205, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Should You Publish Tier 1 Tokens?", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63687341-should-you-publish-tier-1-tokens", "free": false, "summary": "Weighs whether to publish tier one tokens using a restaurant kitchen-doors metaphor and a failing contrast check, comparing flexibility and autonomy against accessibility risk and maintenance overhead, and recommends defaulting to not publishing them.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63687366", "course": "subatomic", "position": 206, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Pre-Publishing Checklist: Proper Mapping", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63687366-pre-publishing-checklist-proper-mapping", "free": false, "summary": "Opens the pre-publish checklist with validating token mapping, recommending pilot projects plus a playground environment (kitchen sink components and a responsive typography playground) to check every theme at a glance and demo the magic trick.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63687374", "course": "subatomic", "position": 207, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Pre-Publishing Checklist: Design & Code Alignment", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63687374-pre-publishing-checklist-design-code-alignment", "free": false, "summary": "Covers the checklist item of confirming design and code are aligned before publishing: values like color tokens should match exactly, while things like viewports and breakpoints don't need to be one-to-one.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63687388", "course": "subatomic", "position": 208, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Pre-Publishing Checklist: Scope Variables", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63687388-pre-publishing-checklist-scope-variables", "free": false, "summary": "Reminds teams to check variable scoping before publishing, so background color tokens only apply to frames and shapes and content tokens only apply to text, pointing back to the previous chapter for a refresher.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63687426", "course": "subatomic", "position": 209, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Pre-Publishing Checklist: Hide From Publishing", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63687426-pre-publishing-checklist-hide-from-publishing", "free": false, "summary": "Shows how to keep internal tokens out of a published Figma library using the hide from publishing option and by prefixing collection names with an underscore or period, demonstrated by hiding a strawberry tier one collection.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63687436", "course": "subatomic", "position": 210, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Pre-Publishing Checklist: Check Accessibility", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63687436-pre-publishing-checklist-check-accessibility", "free": false, "summary": "Distinguishes accessible tokens from tokens that yield accessible results in context, and shows checking contrast in a playground with the Contrast Figma plugin and in code with Storybook's accessibility addon.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63687446", "course": "subatomic", "position": 211, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Pre-Publishing Checklist: Test Build", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63687446-pre-publishing-checklist-test-build", "free": false, "summary": "Covers the checklist item of confirming everything builds: JSON files formatted and wired up correctly, with no errors or warnings in the console when converting the JSON source of truth into each output format.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63687455", "course": "subatomic", "position": 212, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Pre-Publishing Checklist: Check Documentation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63687455-pre-publishing-checklist-check-documentation", "free": false, "summary": "Closes the pre-publish checklist by making sure documentation reflects any changes, so the token system can be released with confidence in both design and code and is ready to publish.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63697138", "course": "subatomic", "position": 213, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Publishing a Tokens Library in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63697138-publishing-a-tokens-library-in-figma", "free": false, "summary": "Walks through publishing a Figma team library of tokens: unticking everything by default, publishing only tier two, tier three, and typography collections and styles, keeping components in a separate library, and cutting a v0.1 release.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63696259", "course": "subatomic", "position": 214, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Quick Intro to Consuming a Tokens Library in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63696259-quick-intro-to-consuming-a-tokens-library-in-figma", "free": false, "summary": "Demonstrates the end-to-end flow after publishing: in a fresh Figma file, adds the team library from the Libraries panel so the token variables and theme switching become available to apply to shapes and components.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63697042", "course": "subatomic", "position": 215, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Publishing a Tokens Library in Code - Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63697042-publishing-a-tokens-library-in-code-intro", "free": false, "summary": "Introduces publishing tokens in code: the tokens repo holds source files and Style Dictionary output, and the goal is a distribution package containing only the files downstream developers need, built locally and published for them to install.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63697058", "course": "subatomic", "position": 216, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Publishing a Tokens Library in Code - Build Process", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63697058-publishing-a-tokens-library-in-code-build-process", "free": false, "summary": "Walks through publishing the tokens package: versioning the monorepo's package.json files, building a dist folder of Style Dictionary output only, running npm publish, and cutting a tagged GitHub release with generated release notes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63697545", "course": "subatomic", "position": 217, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Quick Intro to Consuming a Tokens Library in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63697545-quick-intro-to-consuming-a-tokens-library-in-code", "free": false, "summary": "Demonstrates installing the published tokens package into a new project with npm install, importing the strawberry theme tokens, and styling a rectangle with the brand background color token to turn it pink.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63697669", "course": "subatomic", "position": 218, "chapter": { "position": 5, "title": "Chapter 5 - Publishing A Token System" }, "title": "Chapter 5 Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63697669-chapter-5-summary", "free": false, "summary": "Recaps the chapter (token systems as libraries, the tier one decision, the pre-publish checklist, Figma team libraries, and npm packages) and assigns homework: learn package distribution, start DevOps conversations early, and run the checklist.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63803868", "course": "subatomic", "position": 219, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Chapter 6 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63803868-chapter-6-introduction", "free": false, "summary": "Introduces the chapter on adopting design tokens: what adoption means, the many types of token users, and applying tokens across each layer of the design system ecosystem, from core components and native platforms to recipes, smart components, and products.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63803964", "course": "subatomic", "position": 220, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Understanding Design Token Adoption", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63803964-understanding-design-token-adoption", "free": false, "summary": "Frames design token adoption as design system adoption light: tokens are more flexible and portable than components, which makes them easier to deploy across software, and introduces a spectrum of integration that can be used strategically.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63804047", "course": "subatomic", "position": 221, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Spectrum of Token Integration - Reference", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63804047-spectrum-of-token-integration-reference", "free": false, "summary": "Covers the least integrated approach, referencing token documentation, for tools that can't consume the library directly, like Mailchimp's brand kit and WordPress or Drupal theme colors, and argues this is a valid starting point, not a failure.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63804051", "course": "subatomic", "position": 222, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Spectrum of Token Integration - Importing Token Library", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63804051-spectrum-of-token-integration-importing-token-library", "free": false, "summary": "Describes the next step on the integration spectrum: consuming the published token library in design files and code repos, creating a real connection so changes roll out and fewer things slip through the cracks.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63804367", "course": "subatomic", "position": 223, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Spectrum of Token Integration - Importing Component Library", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63804367-spectrum-of-token-integration-importing-component-library", "free": false, "summary": "Shows the most integrated approach, consuming a component library wired to tokens (Material Design in Figma, MUI in code), and recommends sharing the spectrum with teams as a staged roadmap rather than a yes-or-no adoption binary.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63804369", "course": "subatomic", "position": 224, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Design Token Users - You!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63804369-design-token-users-you", "free": false, "summary": "Revisits the makers-versus-users split and starts a tour of token users with the design system team itself, which creates the token architecture and then consumes it when wiring up core components and helping product teams.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63804383", "course": "subatomic", "position": 225, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Design Token Users - Other Product Teams", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63804383-design-token-users-other-product-teams", "free": false, "summary": "Widens the circle of token users to other designers, developers, and product teams, including third-party agencies, consultants, and offshore teams, and cautions against assuming everyone will get it immediately.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63804459", "course": "subatomic", "position": 226, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Design Token Users - Devs Using Multiple Tech Stacks", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63804459-design-token-users-devs-using-multiple-tech-stacks", "free": false, "summary": "Points out that token users work across many tech stacks, from web frameworks and CMSs to SwiftUI, Jetpack Compose, Flutter, Ionic, Electron, and React Native, reflecting a diverse landscape of digital touchpoints.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63804527", "course": "subatomic", "position": 227, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Design Token Users - Auxiliary Users", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63804527-design-token-users-auxiliary-users", "free": false, "summary": "Describes a different kind of token user: people composing pages and campaigns in CMSs like WordPress or email platforms like Weebly, who often work with a limited, configured subset of tokens rather than the full set.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63804551", "course": "subatomic", "position": 228, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Design Token Users - Stakeholders", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63804551-design-token-users-stakeholders", "free": false, "summary": "Rounds out the list of token users with stakeholders like chief marketing officers, brand managers, and agencies who care about brand results without using tokens directly, underscoring how vast the audience is.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63804603", "course": "subatomic", "position": 229, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Users Don't Care About Design Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63804603-users-don-t-care-about-design-tokens", "free": false, "summary": "Makes the case that none of these audiences care about design tokens because they're busy with sprints, rebrands, and replatforms, so the job is to explain how tokens help and roll up sleeves to help them get work done.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63863600", "course": "subatomic", "position": 230, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Tokens At Every Layer of the Design System Ecosystem", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63863600-adopting-tokens-at-every-layer-of-the-design-system-ecosystem", "free": false, "summary": "Outlines adopting tokens through each layer of the design system ecosystem layer cake: core components (the paint and door hardware metaphor), technology-specific stacks, recipes, smart components, and individual product files and repos.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63863824", "course": "subatomic", "position": 231, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Subscribing to the Token Figma Team Library", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63863824-subscribing-to-the-token-figma-team-library", "free": false, "summary": "Revisits subscribing to the Figma team library as a prerequisite for adoption, showing variables becoming available in a new file, and clarifies that the core component library file is the product subscribing to the tokens library.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63896702", "course": "subatomic", "position": 232, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Importing the Tokens Code Package", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63896702-importing-the-tokens-code-package", "free": false, "summary": "Walks through consuming the published tokens package: npm installing the subatomic design tokens package, checking package.json for the version, importing the strawberry theme to style an element, and how component libraries consume the same package.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63863881", "course": "subatomic", "position": 233, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Wiring Up Tokens To Existing Figma Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63863881-wiring-up-tokens-to-existing-figma-components", "free": false, "summary": "Demonstrates the Indiana Jones swap on a text field component in Figma, replacing hard-coded spacing, typography, padding, border radius, stroke, and placeholder values with tokens so nothing changes visually but theming is unlocked.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63896828", "course": "subatomic", "position": 234, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Wiring Up Tokens To Existing Code Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63896828-wiring-up-tokens-to-existing-code-components", "free": false, "summary": "Replaces hard-coded values in an existing text field component's CSS with tokens, using Figma dev mode as a guide: the size function for spacing, typography mixins, theme color custom properties, tier three form tokens, border tokens, and animation tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864026", "course": "subatomic", "position": 235, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Best Practices for Adopting Design Tokens in Existing Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864026-best-practices-for-adopting-design-tokens-in-existing-components", "free": false, "summary": "Shares tips for swapping tokens into existing components: cherry-pick values from Dev Mode instead of copying wholesale, follow environment conventions like Figma styles versus mixins, verify results with visual regression tools like Chromatic, and show the magic trick.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864052", "course": "subatomic", "position": 236, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "The Importance of Showing the Magic Trick", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864052-the-importance-of-showing-the-magic-trick", "free": false, "summary": "Explains why to demonstrate the value of a token swap that looks identical at first, using the course playground to drag components across themes like dark chocolate, and urges sharing it early and often with stakeholders.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864298", "course": "subatomic", "position": 237, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Wiring Up Tokens To New Figma Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864298-wiring-up-tokens-to-new-figma-components", "free": false, "summary": "Builds a new badge component in Figma by applying tokens during construction (label small, spacing, knockout background and content, border radius), then adds success, error, and warning variants, stressing why mastering the token language matters.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63896895", "course": "subatomic", "position": 238, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Wiring Up Tokens To New Code Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63896895-wiring-up-tokens-to-new-code-components", "free": false, "summary": "Builds a new badge component in code from its Figma design: a DSC badge class, spacing via the size function, a pill-shaped border radius, knockout background and content colors, label small typography, then success, error, and warning variants in Storybook.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864399", "course": "subatomic", "position": 239, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Showing The Magic Trick for New Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864399-showing-the-magic-trick-for-new-components", "free": false, "summary": "Shows theme switching the new badge component, noting that utility colors stay consistent across themes by design, so only details like border radius shift while validating it works everywhere.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864411", "course": "subatomic", "position": 240, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Best Practices for Adopting Design Tokens in New Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864411-best-practices-for-adopting-design-tokens-in-new-components", "free": false, "summary": "Offers tips for building new components with tokens: internalize the token language through reps, avoid over-copying from Dev Mode, respect environment conventions, and test theme switching while building to catch bugs early.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864473", "course": "subatomic", "position": 241, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Applying Your Token Nomenclature", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864473-applying-your-token-nomenclature", "free": false, "summary": "Sets up a deeper look at applying the token language from earlier in the course to real components, stressing a shared vocabulary so names like background subtle default mean the same thing to everyone, even if each team's names differ.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864651", "course": "subatomic", "position": 242, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Default Color Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864651-adopting-default-color-tokens-in-figma", "free": false, "summary": "Applies default color tokens to a generic box component (content default, background default, border default, and border width) and notes these defaults can also apply to the page body and other components.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63896935", "course": "subatomic", "position": 243, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Default Color Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63896935-adopting-default-color-tokens-in-code", "free": false, "summary": "Styles the box component in code to match its Figma design using default color tokens: theme background default, content default for the text, and a small border width with the default border color, checked in Storybook.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864733", "course": "subatomic", "position": 244, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Brand Color Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864733-adopting-brand-color-tokens-in-figma", "free": false, "summary": "Adds a brand variant to the badge component, wiring up brand background, border, and content color tokens, then theme switches across dark chocolate, chocolate, and strawberry to show a clearly branded result.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63896975", "course": "subatomic", "position": 245, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Brand Color Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63896975-adopting-brand-color-tokens-in-code", "free": false, "summary": "Adds the brand badge variant in code: a new Storybook story and brand modifier class using brand border, background, and content color tokens, with the base text color set on the base class and overridden at the modifier level.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864761", "course": "subatomic", "position": 246, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Accent Color Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864761-accent-color-tokens", "free": false, "summary": "Explores accent colors through Ulta Beauty's Palette design system, whose sibling tokens (brand one through brand six, with strong and extra strong modifiers) give components interchangeable branded backgrounds that do the same job.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864794", "course": "subatomic", "position": 247, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Disabled Color Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864794-adopting-disabled-color-tokens-in-figma", "free": false, "summary": "Applies disabled color tokens to a text field's disabled variant (label, input background, field notes) and explains why disabled is treated as an intention rather than a state, avoiding a pile of duplicate grays.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63896984", "course": "subatomic", "position": 248, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Disabled Color Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63896984-adopting-disabled-color-tokens-in-code", "free": false, "summary": "Adds the disabled text field variant in code: a disabled story with a modifier class and disabled attribute on the input, then disabled content, background, and border color tokens applied to the label, input, and field note.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864902", "course": "subatomic", "position": 249, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Utility Color Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864902-adopting-utility-color-tokens-in-figma", "free": false, "summary": "Applies utility color tokens (info, error, warning, success) to a toast component's variants, showing how centralizing these tokens keeps messaging consistent across alerts, toasts, badges, and other components.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897014", "course": "subatomic", "position": 250, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Utility Color Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897014-adopting-utility-color-tokens-in-code", "free": false, "summary": "Builds the toast component in code with utility color tokens: info background, content, and border colors, border width and radius tokens from Figma dev mode, then error, warning, and success modifier variants made with a quick find and replace.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864905", "course": "subatomic", "position": 251, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Color Token Variants", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864905-color-token-variants", "free": false, "summary": "Introduces naming for variants of color token intentions (subtle, strong, error, success, warning, info, knockout), noting the specific language is up to each team, before walking through conventions that worked in client work.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864916", "course": "subatomic", "position": 252, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Knockout Variant Color Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864916-adopting-knockout-variant-color-tokens-in-figma", "free": false, "summary": "Explains the knockout convention (also called inverted or reversed) for light content on dark backgrounds, applying it to a promo block so background and content tokens travel together, and notes some systems use on-default or on-brand naming.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897046", "course": "subatomic", "position": 253, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Knockout Variant Color Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897046-adopting-knockout-variant-color-tokens-in-code", "free": false, "summary": "Builds the promo block component in code with knockout tokens: applying the theme's knockout background color, then pairing it with the knockout content color so the text on top stays legible and accessible.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864983", "course": "subatomic", "position": 254, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Subtle and Strong Color Token Variants", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864983-subtle-and-strong-color-token-variants", "free": false, "summary": "Explains subtle and strong modifiers that dial color tokens down or up, using Ulta Beauty's subtle gray background and its strong and extra strong brand variants, and suggests applying them to utility colors like error alerts.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63864994", "course": "subatomic", "position": 255, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Tier 3 Color Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63864994-adopting-tier-3-color-tokens-in-figma", "free": false, "summary": "Wires a hyperlink to component-specific tier three color tokens for default, hover, active, and visited states, since link colors vary by theme, while falling back to the tier two disabled content token for the disabled state.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897223", "course": "subatomic", "position": 256, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Tier 3 Color Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897223-adopting-tier-3-color-tokens-in-code", "free": false, "summary": "Adds tier three link color tokens in code: default, hover, active, and visited colors handled as browser states rather than modifier classes, tested in the web inspector, plus a disabled link variant with a not-allowed cursor.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63865209", "course": "subatomic", "position": 257, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Display Typography Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63865209-adopting-display-typography-tokens-in-figma", "free": false, "summary": "Starts adopting typography tokens by putting tier-two language (display, headline, title, body, label) to use, explains display type for high-impact hero titles and big stats, and applies the display Figma style to a hero title.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897295", "course": "subatomic", "position": 258, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Display Typography Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897295-adopting-display-typography-tokens-in-code", "free": false, "summary": "Applies the display default typography mixin to the hero heading in code, mirroring the display default Figma style so all of the typography tokens come bundled together instead of being defined one by one every time.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63865211", "course": "subatomic", "position": 259, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Headline Typography Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63865211-adopting-headline-typography-tokens-in-figma", "free": false, "summary": "Defines headlines as medium-sized headings for page titles and section headers, then applies the headline large Figma style to a feature block starring Bootsy the dog, showing how styles bundle font family, size, and line height.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897347", "course": "subatomic", "position": 260, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Headline Typography Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897347-adopting-headline-typography-tokens-in-code", "free": false, "summary": "Applies the headline large typography mixin to the previously unstyled feature block heading in code, matching the headline large text style already used for that heading in the Figma design.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63865273", "course": "subatomic", "position": 261, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Title Typography Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63865273-adopting-title-typography-tokens-in-figma", "free": false, "summary": "Introduces title typography: smaller, functional headings used for subtitles and components like cards (unlike page-level headlines), then applies the title default Figma style to the card component's heading.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897414", "course": "subatomic", "position": 262, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Title Typography Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897414-adopting-title-typography-tokens-in-code", "free": false, "summary": "Applies the title default typography mixin to the product card heading in code, first confirming in Figma that the heading uses the title default style, then seeing the preset show up in the component.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63865298", "course": "subatomic", "position": 263, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Responsive Typography In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63865298-responsive-typography-in-figma", "free": false, "summary": "Shows responsive typography paying off in Figma: the hero's display text reacts correctly in a mobile viewport because token values are already baked into styles, plus a responsive typography playground for testing each theme.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897462", "course": "subatomic", "position": 264, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Responsive Typography In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897462-responsive-typography-in-code", "free": false, "summary": "Shows how responsive typography works in code: the typography mixins contain a media query that shrinks font size, line height, and other properties on smaller screens, pairing breakpoints with the typography tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63865669", "course": "subatomic", "position": 265, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Body Typography Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63865669-adopting-body-typography-tokens-in-figma", "free": false, "summary": "Explains body text as the default, fallback typography category, then applies Figma styles in practice: body default in a modal, body large to emphasize feature block descriptions, and body small for footer copyright text.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897527", "course": "subatomic", "position": 266, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Body Typography Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897527-adopting-body-typography-tokens-in-code", "free": false, "summary": "Applies body typography mixins in code: body default replaces hard-coded values in the modal text, body large enlarges feature block list items, and body small shrinks the footer copyright text, each checked against Figma.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63865682", "course": "subatomic", "position": 267, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Label Typography Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63865682-adopting-label-typography-tokens-in-figma", "free": false, "summary": "Covers label typography for form fields, badges, and navigation: wiring the text field label to the label style, then using label large for a new large button size variant and label small for a small text field variant, with padding adjustments.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897541", "course": "subatomic", "position": 268, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Label Typography Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897541-adopting-label-typography-tokens-in-code", "free": false, "summary": "Applies label typography mixins in code: label default on the text field label, a new large button story using label large plus bigger padding, and a small text field variant using label small with reduced input padding.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63865726", "course": "subatomic", "position": 269, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Tier 3 Typography Tokens In Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63865726-adopting-tier-3-typography-tokens-in-figma", "free": false, "summary": "Uses the button as an example of component-specific typography: breaking the shared label style attached to the button and mapping it to a tier three typography token so its font family and other properties can be controlled independently.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897602", "course": "subatomic", "position": 270, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Tier 3 Typography Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897602-adopting-tier-3-typography-tokens-in-code", "free": false, "summary": "Brings button-specific typography tokens into code: adding them to the JSON token files, building them to CSS custom properties, creating a button default mixin, and swapping the button's label default mixin for it in Storybook.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63897708", "course": "subatomic", "position": 271, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Border, Shadow, and Animation Tokens In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63897708-adopting-border-shadow-and-animation-tokens-in-code", "free": false, "summary": "Updates the toast component in code to match its Figma redesign: border radius and an inline-start border width token, a box shadow token, and a keyframe animation using duration and easing tokens, with the timing slowed to feel smoother.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63943368", "course": "subatomic", "position": 272, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Using Token-Powered Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63943368-using-token-powered-components", "free": false, "summary": "Explains the most integrated level of token adoption: wiring tokens into the core component library so consumers get them for free, demonstrated by publishing components from Figma and using theme switching on a component instance in a new file.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63943695", "course": "subatomic", "position": 273, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Tokens at the Technology-Specific Implementation Layer", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63943695-tokens-at-the-technology-specific-implementation-layer", "free": false, "summary": "Explains why some layers can't consume the core components (often a different tech stack) and how the token system can still reach them: tokens defined as JSON, transformed by Style Dictionary into formats whose names differ mainly in casing and syntax.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63943762", "course": "subatomic", "position": 274, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Tokens, CSS, and CSS Frameworks", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63943762-tokens-css-and-css-frameworks", "free": false, "summary": "Explains how CSS carries tokens to any web framework, then makes the case that adopting tokens is a chance to reevaluate tools like Tailwind, Bootstrap, and Material, since utility classes hard-code values like blue into markup and complicate theming.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63942316", "course": "subatomic", "position": 275, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Design Tokens in Native Mobile Apps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63942316-adopting-design-tokens-in-native-mobile-apps", "free": false, "summary": "Introduces how Style Dictionary goes beyond CSS custom properties, compiling the same token JSON into Sass, Less, CSS-in-JS, and native platforms like iOS Swift, Android, and React Native by defining platforms in its configuration file.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63942474", "course": "subatomic", "position": 276, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Design Tokens in iOS Apps", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63942474-adopting-design-tokens-in-ios-apps", "free": false, "summary": "Shows tokens in a native iOS app: a Style Dictionary iOS Swift platform generates a Swift file with the same token names in camelCase, which a Frosted Tokens landing page uses for spacing, colors, radius, and fonts, so swapping themes is a file swap.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63942516", "course": "subatomic", "position": 277, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Design Tokens in Android App", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63942516-adopting-design-tokens-in-android-app", "free": false, "summary": "Shows tokens in an Android app: Style Dictionary generates color and dimension XML files with the same token names in underscore format, imported into the project so swapping XML files switches between strawberry, chocolate, and dark chocolate themes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63942522", "course": "subatomic", "position": 278, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Adopting Design Tokens in React Native", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63942522-adopting-design-tokens-in-react-native", "free": false, "summary": "Builds a React Native screen with tokens: adding a React Native platform to Style Dictionary, importing the generated JavaScript tokens from the same npm package, applying colors, spacing, and typography, then switching to chocolate and dark chocolate themes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64457509", "course": "subatomic", "position": 279, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "🗄️ Accessing the Project Demo Code with Design Tokens Manager and React Native Tokens", "kind": "download", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/downloads/64457509-accessing-the-project-demo-code-with-design-tokens-manager-and-react-native-tokens", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "63943004", "course": "subatomic", "position": 280, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Tokens and Other Technology Environments", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63943004-tokens-and-other-technology-environments", "free": false, "summary": "Surveys unusual interfaces a token system might need to support, from United Airlines kiosks and slot machine displays at the Cosmopolitan to the NASDAQ ticker in Times Square, and how Style Dictionary custom transforms can output any format.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63943361", "course": "subatomic", "position": 281, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Technology-specific Considerations & Best Practices", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63943361-technology-specific-considerations-best-practices", "free": false, "summary": "Recaps the technology-specific layer: JSON as the source of truth, Style Dictionary platforms and custom transforms, per-platform import methods, and why it's fine to defer to platform conventions like Apple's HIG and Material Design while collaborating with implementers.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63948484", "course": "subatomic", "position": 282, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "The Power of Recipes", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63948484-the-power-of-recipes", "free": false, "summary": "Introduces the recipe layer: product-specific components built on top of the core design system, illustrated with Material Design and Google products like Docs and Gmail, a cooking metaphor of pantry ingredients, and recipes mixing core and bespoke parts.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63948491", "course": "subatomic", "position": 283, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Recipes In Figma - Architecture", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63948491-recipes-in-figma-architecture", "free": false, "summary": "Outlines the Figma architecture for recipes: tokens and component team libraries feed product teams who publish their own recipes library, so a product designer's file subscribes to tokens, core components, and product-specific recipes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63948571", "course": "subatomic", "position": 284, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Recipes In Figma - Publishing A Card Component", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63948571-recipes-in-figma-publishing-a-card-component", "free": false, "summary": "Creates a generic card component in Figma, essentially a box with header, body, and footer zones (slots, in code terms), and publishes it to the component library so downstream designers can build their own recipes with it.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63948615", "course": "subatomic", "position": 285, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Recipes In Figma - Creating Recipes", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63948615-recipes-in-figma-creating-recipes", "free": false, "summary": "Builds a recipe in Figma from the published card: restyling text, instance-swapping in a core button, testing themes, and showing blog card and customer card recipes that mix core components with a custom Starburst badge wired to tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63954128", "course": "subatomic", "position": 286, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Recipes In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63954128-recipes-in-code", "free": false, "summary": "Shows the code side of recipes: products pull in token, component, and optional recipe packages, and a blog card recipe composes a DS card web component with slots, a DS button, and a custom Starburst badge styled with tokens behind a simple API.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63953664", "course": "subatomic", "position": 287, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Recipes Best Practices & Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63953664-recipes-best-practices-considerations", "free": false, "summary": "Recaps recipes: compositions of core components plus their own secret ingredients, often but not always theme-specific, owned by product teams rather than the system team, and a test bed that still needs the system team's onboarding and guidance.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63954178", "course": "subatomic", "position": 288, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Smart Components and Design Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63954178-smart-components-and-design-tokens", "free": false, "summary": "Explains front-of-the-front-end versus back-of-the-front-end work, then introduces smart components that wrap presentational components in logic (forms, payments, data tables, the United seat selector), skinning AG Grid with tokens as an example.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63955008", "course": "subatomic", "position": 289, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Design Tokens at the Product Layer", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63955008-design-tokens-at-the-product-layer", "free": false, "summary": "Reaches the product layer, using Wilson Bentley's snowflake photography to frame bespoke special snowflake components, and makes the case that custom product UI can still be wired to tokens while system makers provide education and support.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "63955023", "course": "subatomic", "position": 290, "chapter": { "position": 6, "title": "Chapter 6 - Adopting Design Tokens" }, "title": "Chapter 6 Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/63955023-chapter-6-summary", "free": false, "summary": "Recaps Chapter 6: the spectrum of token integration from referencing the library to consuming it to adopting components, applying token language to components, tokens across every ecosystem layer and recipes, plus next-step activities for teams.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64127164", "course": "subatomic", "position": 291, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Chapter 7 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64127164-chapter-7-introduction", "free": false, "summary": "Opens the chapter on maintaining and evolving design token systems, shifting from the mechanics of Figma and code to the people, relationships, and human processes that keep a token system sturdy and growing over time.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64127167", "course": "subatomic", "position": 292, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Chapter 7 Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64127167-chapter-7-overview", "free": false, "summary": "Previews the chapter: the four phases of a token system's product lifecycle, atomic design and tokens, production pilot projects, versioning and releases, a governance model with a starter template, and when a self-service token system makes sense.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64127182", "course": "subatomic", "position": 293, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "4 Phases of a Design Token System Product Lifecycle", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64127182-4-phases-of-a-design-token-system-product-lifecycle", "free": false, "summary": "Frames the design token system as a product serving other products, citing Nathan Curtis, and lays out four phases: foundation and initial pilot, a second verifying pilot, evolving and expanding with customer support, and an optional self-service layer.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64127187", "course": "subatomic", "position": 294, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 1 - Goals", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64127187-phase-1-goals", "free": false, "summary": "Sets the goal of phase one: establish an MVP design token system architecture and validate it by building and shipping a real product, even if only a screen or three, so the system is actually wired up and living in production.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64127208", "course": "subatomic", "position": 295, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 1 - Team", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64127208-phase-1-team", "free": false, "summary": "Describes who does phase one work: a small, scrappy maker team with token czars for design and code plus design and technical architect roles (roles, not headcount), collaborating closely with a product team's owners, designers, developers, and QA.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64127210", "course": "subatomic", "position": 296, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 1 - Establishing the Virtuous Cycle", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64127210-phase-1-establishing-the-virtuous-cycle", "free": false, "summary": "Makes the case that makers and users must establish the virtuous cycle from day one, with the system shaping the product and the product shaping the system, because systems built without real products in mind end up going unused.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64127228", "course": "subatomic", "position": 297, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Atomic Design Connects Systems To Products", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64127228-atomic-design-connects-systems-to-products", "free": false, "summary": "Introduces atomic design as a methodology for treating interfaces as hierarchical systems, exploding Instagram's mobile UI into atoms and walking through molecules, organisms, templates, and pages before bringing design tokens into the mix.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64127235", "course": "subatomic", "position": 298, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Atomic Design + Design Tokens = ❤️", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64127235-atomic-design-design-tokens", "free": false, "summary": "Adds a design token system to the Instagram atomic design example, showing color and typography tokens flowing through components and how product design feeds back into tokens as a continuum rather than a step-by-step process.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64130038", "course": "subatomic", "position": 299, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Pilot Projects For The (Quick) Win!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64130038-pilot-projects-for-the-quick-win", "free": false, "summary": "Makes the case for building the token system through a pilot project rather than trying to power the whole organization at once, aiming for quick wins and citing Dan Mall's comparison to TV and movie pilots.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64130235", "course": "subatomic", "position": 300, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Pilot Project Criteria", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64130235-pilot-project-criteria", "free": false, "summary": "Lays out criteria for choosing a pilot project: timing (committed work that hasn't started yet), the components and tokens it yields, a reasonable scope, technical feasibility and independence, and enthusiastic partners rather than the most skeptical people.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64130407", "course": "subatomic", "position": 301, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Pilot Project Examples & The Importance of MVP", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64130407-pilot-project-examples-the-importance-of-mvp", "free": false, "summary": "Shares pilot project examples, including the United Airlines My Trips lift and shift for the Atmos design system and parts.cat.com for Caterpillar's Blocks, and argues for starting small with an MVP rather than opening the floodgates too soon.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64130976", "course": "subatomic", "position": 302, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Finding Pilot Projects", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64130976-finding-pilot-projects", "free": false, "summary": "Covers how to find pilot projects: accepting that some work will slip through the cracks, surveying what's happening across the organization, proactively selling teams on the system, applying the selection criteria, and a FigJam for scoring candidates.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64146857", "course": "subatomic", "position": 303, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Pilot Project Starting Point", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64146857-pilot-project-starting-point", "free": false, "summary": "Acknowledges that every product has its own starting point, from a tidy Lego kit to pieces strewn across the floor, and discusses the art of extending existing systems versus starting anew, decided collaboratively along with roles and responsibilities.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64146935", "course": "subatomic", "position": 304, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Pilot Project - Maker and User Collaboration", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64146935-pilot-project-maker-and-user-collaboration", "free": false, "summary": "Offers tips for makers and users working as one pilot team: actually doing work together, ambient chat, sharing context and systems thinking, leaving egos at the door, sharing one file early, and thinking globally while acting locally on the strawberry homepage.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64146978", "course": "subatomic", "position": 305, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 1 - Vanilla, Considerations, and Best Practices", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64146978-phase-1-vanilla-considerations-and-best-practices", "free": false, "summary": "Finishes phase one: using the vanilla theme as x-ray vision while shipping only strawberry, keeping future themes like chocolate in mind, splitting shared files into a token pipeline, and getting a 0.x release into production, then recaps the phase.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64147092", "course": "subatomic", "position": 306, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 2 - Semantic Versioning", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64147092-phase-2-semantic-versioning", "free": false, "summary": "Opens phase two, aiming for a v1 architecture validated by a second pilot, and breaks down semantic versioning: patch releases for fixes, minor releases for additive tokens, and major versions signaling stability at 1.0 or breaking changes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64208480", "course": "subatomic", "position": 307, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 2 - Semantic Version Example and Branching Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64208480-phase-2-semantic-version-example-and-branching-intro", "free": false, "summary": "Introduces a second pilot (a chocolate site's checkout flow), warns against Cousin Eddie-style edits to the main file that erode trust, then explains branching: a main branch for stable releases and a develop branch for new work.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64208525", "course": "subatomic", "position": 308, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 2 - Branching in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64208525-phase-2-branching-in-code", "free": false, "summary": "Demonstrates branching in code with Git: git branch, git checkout -b, and git switch to create a feature branch for a chocolate theme, plus a visual alternative in Git Tower and resources like Atlassian's guide and Learn Git Branching.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64208549", "course": "subatomic", "position": 309, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 2 - Branching in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64208549-phase-2-branching-in-figma", "free": false, "summary": "Explains branching in Figma: the built-in branching feature, available only on organization and enterprise plans at the time of recording, and the workaround of duplicating the tokens library file, which makes coordinating design and code releases important.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64208600", "course": "subatomic", "position": 310, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 2 - Branching Example and Changelog", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64208600-phase-2-branching-example-and-changelog", "free": false, "summary": "Works through the second pilot on a new branch: adding the chocolate theme, checking all three themes, fixing brittle or poorly named parts of the MVP while only one product depends on it, and keeping a changelog following Keep a Changelog.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64208887", "course": "subatomic", "position": 311, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 2 - Additional Pilots", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64208887-phase-2-additional-pilots", "free": false, "summary": "Walks through releasing the 1.0 token system for the second pilot, then moving the first pilot product off its early version by collaborating through any breaking changes, and leaning into the zero-dot days to make architectural changes early.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64147141", "course": "subatomic", "position": 312, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 2 - Version 1.0 and Pilot Project Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64147141-phase-2-version-1-0-and-pilot-project-considerations", "free": false, "summary": "Explains why token and component systems should share coordinated version numbers, adds criteria for the second pilot (close timing, advancing the core use case), and covers the commitment a 1.0 designation brings, citing Nathan Curtis.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64208979", "course": "subatomic", "position": 313, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 2 - Considerations and Best Practices", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64208979-phase-2-considerations-and-best-practices", "free": false, "summary": "Recaps phase two: a second quick win and a 1.0 token system, stable libraries and branching, extending the system for the second pilot while advancing the core use case, handling breaking changes, and coordinating token and component versions.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64188936", "course": "subatomic", "position": 314, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 3 - Picking a Third Pilot Project", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64188936-phase-3-picking-a-third-pilot-project", "free": false, "summary": "Introduces phase three, which extends the 1.0 system to new use cases and bolsters maintenance processes, using a dark chocolate enterprise customer dashboard as a third pilot that covers both dark mode and a different product family.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64209220", "course": "subatomic", "position": 315, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 3 - Shifting Maker and User Roles", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64209220-phase-3-shifting-maker-and-user-roles", "free": false, "summary": "Describes how system makers shift from production work to maintenance and support in phase three, recommends a dedicated core team with token czars, and makes the case that serving other designers and developers is deeply rewarding work.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64209363", "course": "subatomic", "position": 316, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 3 - Governance Workflow Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64209363-phase-3-governance-workflow-intro", "free": false, "summary": "Introduces a governance diagram built specifically for design token systems, inspired by Canonical's Vanilla decision tree, and gives the gist: teams use the system, talk with token czars when something's off, do the work, and release it.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64188948", "course": "subatomic", "position": 317, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 3 - Governance Workflow Details", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64188948-phase-3-governance-workflow-details", "free": false, "summary": "Walks through the token governance workflow step by step: proactive support, education conversations, triaging bugs, new or modified tokens, and visual discrepancies, product-layer overrides, the purple button A/B test example, testing, and release.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64210691", "course": "subatomic", "position": 318, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 3 - Governance Workflow Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64210691-phase-3-governance-workflow-summary", "free": false, "summary": "Reassures that most of the governance workflow is a quick conversation plus a few hours or days of work, stresses talking as the one essential habit, and notes product teams only need to know how to reach their token czars.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64210677", "course": "subatomic", "position": 319, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 3 - Considerations and Best Practices", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64210677-phase-3-considerations-and-best-practices", "free": false, "summary": "Recaps phase three: establishing a dedicated systems team, embracing a customer support role, formalizing governance with the provided template, and recognizing that phase three is the final form of the token system for most organizations.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64189045", "course": "subatomic", "position": 320, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Phase 4 - Self-Service", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64189045-phase-4-self-service", "free": false, "summary": "Explains an optional self-service phase four for organizations with many brands (Unilever, Comcast, Pfizer), where non-technical people create themes through a Mad Libs-style wizard and playground while token czars remain the gatekeepers.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64189071", "course": "subatomic", "position": 321, "chapter": { "position": 7, "title": "Chapter 7 - Maintaining & Evolving Token Systems" }, "title": "Chapter 7 Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64189071-chapter-7-summary", "free": false, "summary": "Reviews the four phases of the token system lifecycle and the need for formal governance, then sets homework: identifying the organization's current phase, what it needs to advance, and how to adapt the governance diagram to its reality.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64434449", "course": "subatomic", "position": 322, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Chapter 8 Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64434449-chapter-8-introduction", "free": false, "summary": "Introduces the advanced design tokens chapter by recapping the course so far, previewing dark mode, sub-brands, white labeling, internationalization, CMS integration, redesigns, and AI, and explaining that advanced means optional, not harder.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71017624", "course": "subatomic", "position": 323, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Fall 2025 Update: Figma Extended Collections", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/texts/71017624-fall-2025-update-figma-extended-collections", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "64434344", "course": "subatomic", "position": 324, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Dark Mode Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64434344-dark-mode-introduction", "free": false, "summary": "Revisits the knockout, user-selectable, and system-setting flavors of dark mode, then weighs whether a product actually needs one: eye strain, battery life, user preference, and trendiness against added design, build, QA, and maintenance effort.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64434395", "course": "subatomic", "position": 325, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Dark Mode In Practice", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64434395-dark-mode-in-practice", "free": false, "summary": "Demonstrates building a dark chocolate theme from the chocolate theme by adding Figma modes that remap only color and shadow tokens at tiers two and three, then overriding the parent theme in code and validating against real product screens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64434473", "course": "subatomic", "position": 326, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Dark Mode: User-selected", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64434473-dark-mode-user-selected", "free": false, "summary": "Shows how user-selectable dark mode works, using Piccalilli and GitHub as examples: a toggle swaps a theme class on the HTML element (chocolate to dark chocolate) to apply the corresponding CSS custom properties.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64434492", "course": "subatomic", "position": 327, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Dark Mode: System Settings", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64434492-dark-mode-system-settings", "free": false, "summary": "Shows system-level dark mode using the prefers-color-scheme media query to layer dark chocolate tokens over the chocolate base theme, plus a React Native app using a color scheme hook, and notes the mechanics match user-selectable dark mode.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64434515", "course": "subatomic", "position": 328, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Dark Mode Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64434515-dark-mode-summary", "free": false, "summary": "Summarizes dark mode: justify the effort first, keep the dark theme a skinny set of color and shadow overrides, validate it in pilot screens and component playgrounds, remember the knockout use case, and control it by toggle, system preference, or both.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64434974", "course": "subatomic", "position": 329, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Subbrands", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64434974-subbrands", "free": false, "summary": "Explains how the parent-child brand relationship shapes sub-brand architecture, recommends overriding only cosmetic tokens like color and typeface, and demonstrates a Frost'd Dawgs orange sub-brand inheriting from the strawberry theme in Figma and CSS.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64435041", "course": "subatomic", "position": 330, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Subbrands Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64435041-subbrands-summary", "free": false, "summary": "Summarizes sub-brands: the brand relationship drives architecture, overrides should stay small and cosmetic (color and typeface, not size or spacing), heavy overriding may signal a standalone theme, and parent theme changes propagate to every child.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64515239", "course": "subatomic", "position": 331, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "White Labeling and CMS Implementation Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64515239-white-labeling-and-cms-implementation-introduction", "free": false, "summary": "Introduces white labeling and CMS implementation through examples like Blend's themeable mortgage software and Material Design 3's theming, and recommends tackling white labeling only after the token system reaches a 1.0.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64515654", "course": "subatomic", "position": 332, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "White Labeling and CMS Implementation Details", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64515654-white-labeling-and-cms-implementation-details", "free": false, "summary": "Introduces auxiliary users (marketers and brand people) and recommends exposing a limited set of safe tokens, mostly color, through a translation layer with simple names like primary and secondary, via configuration, settings panels, or CMSs like WordPress and Drupal.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64515705", "course": "subatomic", "position": 333, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "White Labeling and CMS Implementation Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64515705-white-labeling-and-cms-implementation-summary", "free": false, "summary": "Recaps white labeling and CMS integration: limit which tokens auxiliary users can change, use their language instead of the token naming, treat it as an implementation concern, and use education, documentation, and tooling to offset accessibility risks.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64516012", "course": "subatomic", "position": 334, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Multiple Product Families", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64516012-multiple-product-families", "free": false, "summary": "Makes the case that one token system can support multiple product families, using a U-Haul boxes analogy and contrasting chunky marketing sites with dense, utilitarian enterprise apps that reach for different ingredients from the same toolset.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64516098", "course": "subatomic", "position": 335, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Multiple Product Families Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64516098-multiple-product-families-summary", "free": false, "summary": "Summarizes multiple product families: sites and apps reach for different type sizes, components, and variants within one shared system, and separate site and app density themes are technically possible but unproven in client work and require re-QA.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64516115", "course": "subatomic", "position": 336, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Internationalization/Localization", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64516115-internationalization-localization", "free": false, "summary": "Covers how internationalization and localization affect design tokens (color meaning across cultures, typography for different writing modes, and density preferences), points to a Spotify Design article, and introduces a recorded Q&A session on writing modes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "77847320", "course": "subatomic", "position": 337, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Dimitri's Token Architecture Demo", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/77847320-dimitri-s-token-architecture-demo", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "64516138", "course": "subatomic", "position": 338, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Internationalization/Localization Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64516138-internationalization-localization-summary", "free": false, "summary": "Summarizes internationalization: color, typography, and spacing are the main levers, font size and spacing should settle on a sensible middle ground instead of swinging per locale, and web features like CSS logical properties and writing modes help.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64520311", "course": "subatomic", "position": 339, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Redesigns, Refreshes, and Rebrands Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64520311-redesigns-refreshes-and-rebrands-introduction", "free": false, "summary": "Maps the spectrum of redesigns, refreshes, and rebrands, from tiny tweaks to total transformations, with examples like Verizon, united.com, About.com, Cigna, and NASDAQ acquisitions, and explains when a change fits the existing theme versus a new one.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64520334", "course": "subatomic", "position": 340, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Adopting Redesign/Refresh/Rebrand", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64520334-adopting-redesign-refresh-rebrand", "free": false, "summary": "Outlines a surgical strategy for bringing a redesign into existing products: wire up tokens with CSS custom property fallbacks to legacy values, comment out the new theme until it's tested and approved, then reintroduce it to launch.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64520342", "course": "subatomic", "position": 341, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Adopting Redesign/Refresh/Rebrand Scenarios", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64520342-adopting-redesign-refresh-rebrand-scenarios", "free": false, "summary": "Demonstrates the CSS custom property fallback strategy in three scenarios: a product with hard-coded values, one using Sass variables (including wiring tokens into Caterpillar's Cat yellow variable), and one already on the token system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64520353", "course": "subatomic", "position": 342, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Redesign/Refresh/Rebrand Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64520353-redesign-refresh-rebrand-summary", "free": false, "summary": "Summarizes redesigns, refreshes, and rebrands: small tweaks stay in the existing theme while bigger changes get a new theme, systems teams should support reluctant product teams, and CSS custom property fallbacks allow safe adoption until launch.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64520359", "course": "subatomic", "position": 343, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Campaigns", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64520359-campaigns", "free": false, "summary": "Explains campaign themes like a red-and-green holiday homepage for Frost'd Tokens, shows how to apply a theme class to just one section of a page such as a hero, and suggests keeping recurring holiday tokens ready for next year.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64520416", "course": "subatomic", "position": 344, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Campaigns Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64520416-campaigns-summary", "free": false, "summary": "Summarizes campaigns as short-lived, less rigorous overrides of a few key colors, highlights the ability to apply any theme's tokens to a specific area of a page, and suggests storing recurring holiday tokens in the attic.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650188", "course": "subatomic", "position": 345, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "AI and Design Tokens Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650188-ai-and-design-tokens-intro", "free": false, "summary": "Opens the AI section by framing large language models through the course's theme of tokens as shared language, sets the expectation that the demos will date quickly, and encourages simultaneous curiosity and skepticism toward AI.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650230", "course": "subatomic", "position": 346, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "AI and Design Token Nomenclature", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650230-ai-and-design-token-nomenclature", "free": false, "summary": "Demonstrates using ChatGPT to extract a draft token taxonomy from the Jane Goodall Institute website's CSS, then iterating with the course's naming slides to distill it into a naming structure and tree diagram.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650233", "course": "subatomic", "position": 347, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "AI and Design Token Naming Help", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650233-ai-and-design-token-naming-help", "free": false, "summary": "Shows using AI to referee naming debates, such as whether a state should be called default or initial, and to suggest additional states for a taxonomy, framing the output as fodder for team conversation rather than a decision.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650279", "course": "subatomic", "position": 348, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Figma AI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650279-figma-ai", "free": false, "summary": "Looks at AI features in Figma at the time of recording, including first draft, layer renaming, sample data population, and faster prototyping, and anticipates Figma weaving more AI into the product.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650302", "course": "subatomic", "position": 349, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "AI and Design Tools", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650302-ai-and-design-tools", "free": false, "summary": "Surveys AI-powered design tools beyond Figma, including Motiff, Uizard, and the open source Penpot (which just added native design token support), and notes how quickly the design tool landscape is changing.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650355", "course": "subatomic", "position": 350, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "AI and Developer IDEs", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650355-ai-and-developer-ides", "free": false, "summary": "Surveys AI development tools like GitHub Copilot, Cursor (used throughout the course), and Windsurf, which let developers chat with and generate code in a token library environment, with a caution to watch what they do under the hood.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650362", "course": "subatomic", "position": 351, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "AI and Design-Code Sync Tools", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650362-ai-and-design-code-sync-tools", "free": false, "summary": "Surveys design-to-code sync tools like UXPin, Builder.io, and Anima, generates a joke Hoobastank-themed marketing site with Claude, and notes most tools sit on base models like GPT, Claude, and Gemini in a fast-moving landscape.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650471", "course": "subatomic", "position": 352, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "AI-Infused Design Token Environment Setup", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650471-ai-infused-design-token-environment-setup", "free": false, "summary": "Uses Bolt.new to scaffold a Style Dictionary token environment with vanilla, chocolate, strawberry, and dark chocolate themes plus a reference site in minutes, then questions whether the output meets a team's actual conventions and requirements.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650535", "course": "subatomic", "position": 353, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Using AI to Create an MVP Token System from Brand Guidelines", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650535-using-ai-to-create-an-mvp-token-system-from-brand-guidelines", "free": false, "summary": "Demonstrates feeding Spotify's brand guidelines into Claude to generate a first-draft design token system, noting that it extracted real colors and typography but likely invented much of the rest.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650714", "course": "subatomic", "position": 354, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Using AI to Create an MVP Token System From an Image", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650714-using-ai-to-create-an-mvp-token-system-from-an-image", "free": false, "summary": "Shows generating a draft theme from an ESPN screenshot, translating the results into the course's CSS token format, and plugging the resulting red theme into the Frost'd Tokens web experience.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650830", "course": "subatomic", "position": 355, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Using AI to Create an MVP Token System from Existing Product", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650830-using-ai-to-create-an-mvp-token-system-from-existing-product", "free": false, "summary": "Walks through extracting a draft theme from Radiooooo's messy CSS: pulling colors from CSS Stats, having Claude consolidate them and map them to tier one and tier two formats, then using Cursor to add a Radio theme to the Storybook theme switcher.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650878", "course": "subatomic", "position": 356, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Build Out A Theme's Color Tokens with AI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650878-build-out-a-theme-s-color-tokens-with-ai", "free": false, "summary": "Uses AI to build 100 to 900 color ramps from a Coolors palette, then converts a screenshot of Figma variables into theme JSON files, prompting again to get proper aliasing, while stressing that designers and developers still need to collaborate.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650965", "course": "subatomic", "position": 357, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Testing a Token System with AI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650965-testing-a-token-system-with-ai", "free": false, "summary": "Demonstrates asking Claude for an accessibility review of theme CSS, where it catches a deliberately broken vanilla-wrong theme with white text on a white background, while noting this doesn't replace real accessibility testing.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64650970", "course": "subatomic", "position": 358, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Creating a New Token-Powered Component with AI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64650970-creating-a-new-token-powered-component-with-ai", "free": false, "summary": "Demonstrates prompting Cursor to create a new toast component modeled on the existing alert component, producing stories and styles that follow the system's class conventions and are wired up to the token system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64657539", "course": "subatomic", "position": 359, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Using AI to Adopt Tokens in Existing Application", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64657539-using-ai-to-adopt-tokens-in-existing-application", "free": false, "summary": "Shows using Cursor to rewire a Next.js app built on Material UI to the strawberry theme's CSS custom properties, as a way to ease token adoption for apprehensive product teams with existing codebases.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64657601", "course": "subatomic", "position": 360, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Translate to Additional Formats With AI", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64657601-translate-to-additional-formats-with-ai", "free": false, "summary": "Explains how LLMs can translate tokens from a JSON source of truth into whatever formats apps need, including glue code for brittle legacy applications, while noting that tools like Style Dictionary remain relevant.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64659123", "course": "subatomic", "position": 361, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Using AI to Help Create Dark Mode Theme", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64659123-using-ai-to-help-create-dark-mode-theme", "free": false, "summary": "Demonstrates using AI in Cursor to generate a dark strawberry theme from the strawberry theme, which takes several iterations, and acknowledges that copying the theme by hand might have been faster.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64659209", "course": "subatomic", "position": 362, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "AI and Design Systems Is A Potent Combination", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64659209-ai-and-design-systems-is-a-potent-combination", "free": false, "summary": "Makes the case that AI belongs in the design system toolkit and design systems belong in the AI toolkit, with systems providing constraints and conventions that make generative output more trustworthy.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64659352", "course": "subatomic", "position": 363, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Principles for AI and Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64659352-principles-for-ai-and-design-systems", "free": false, "summary": "Lays out principles for using AI in design systems work: respect for people's time and livelihoods, organization-specific solutions, security and privacy, human ownership of input and output, predictability and reliability, and enhancement over replacement.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64659369", "course": "subatomic", "position": 364, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Our Role In This New, Weird AI-Infused World", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64659369-our-role-in-this-new-weird-ai-infused-world", "free": false, "summary": "Reframes AI versus humans as a false dichotomy, drawing on AI slop, Cory Doctorow's enshittification, the Death to Bullshit talk, and Sturgeon's Law to argue that people must be the critical filter on whatever gets produced.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64659570", "course": "subatomic", "position": 365, "chapter": { "position": 8, "title": "Chapter 8 - Advanced Design Tokens" }, "title": "Chapter 8 Summary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64659570-chapter-8-summary", "free": false, "summary": "Recaps the chapter's advanced topics (dark mode, sub-brands, campaigns, white labeling, CMS integration, internationalization, redesigns, and AI), then prompts examining advanced use cases, identifying the hard parts, and learning the organization's AI policies.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "64662586", "course": "subatomic", "position": 366, "chapter": { "position": 9, "title": "Course Summary" }, "title": "Course Recap", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64662586-course-recap", "free": false, "summary": "Recaps the key takeaways from every chapter of the course, from core concepts and the three-tier architecture through naming, building, publishing, adopting, and governing a token system, to advanced use cases and AI.", "tags": [], "presenters": [] }, { "id": "64662593", "course": "subatomic", "position": 367, "chapter": { "position": 9, "title": "Course Summary" }, "title": "Closing Thoughts", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64662593-closing-thoughts", "free": false, "summary": "Closes the course with the hope that its concepts, strategies, and techniques serve learners and their teams, deepen understanding of collaborating disciplines, and encourage finding the fun and joy in design token work.", "tags": [], "presenters": [] }, { "id": "64662611", "course": "subatomic", "position": 368, "chapter": { "position": 9, "title": "Course Summary" }, "title": "Certificate, LinkedIn, & Survey", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64662611-certificate-linkedin-survey", "free": false, "summary": "Covers the certificate of completion and shareable LinkedIn certification, asks for a short course survey and an optional testimonial, and invites questions, feedback, or consulting inquiries.", "tags": [], "presenters": [] }, { "id": "64663022", "course": "subatomic", "position": 369, "chapter": { "position": 9, "title": "Course Summary" }, "title": "Acknowledgements & Thank Yous", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64663022-acknowledgements-thank-yous", "free": false, "summary": "Thanks the people who helped make the course, including Molly Hellmuth for the Frost'd Tokens Figma design, several online course creators who showed the ropes, the instructors' families, and everyone who pre-ordered.", "tags": [], "presenters": [] }, { "id": "64663035", "course": "subatomic", "position": 370, "chapter": { "position": 9, "title": "Course Summary" }, "title": "Follow Us, Thanks, and See Ya Soon!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/lessons/64663035-follow-us-thanks-and-see-ya-soon", "free": false, "summary": "Shares where to follow Ian Frost (his website, LinkedIn, and Bluesky) and Brad Frost (his blog, LinkedIn, Bluesky, Mastodon, and YouTube), points to the newsletter signup, and ends with a final thank you.", "tags": [], "presenters": [] }, { "id": "64092494", "course": "subatomic", "position": 371, "chapter": { "position": 10, "title": "Appendix and Resources" }, "title": "Links & Resources", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/subatomic-design-tokens/texts/64092494-links-resources", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "69924509", "course": "atomic-design-cert", "position": 1, "chapter": { "position": 0, "title": "Introduction" }, "title": "Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/69924509-introduction", "free": false, "summary": "Brad welcomes learners to the Atomic Design Certification course and sets expectations for mastering design systems and the atomic design methodology at scale.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "69924710", "course": "atomic-design-cert", "position": 2, "chapter": { "position": 0, "title": "Introduction" }, "title": "Design Systems At A Glance", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/69924710-design-systems-at-a-glance", "free": false, "summary": "Frames the problem design systems solve—inconsistent, redundant, inaccessible, expensive product landscapes—and shows how design systems centralize common UI building blocks in Figma, code, and docs (Porsche example).", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "69924786", "course": "atomic-design-cert", "position": 3, "chapter": { "position": 0, "title": "Introduction" }, "title": "Design System Ingredients", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/69924786-design-system-ingredients", "free": false, "summary": "Introduces the core ingredients of a design system—standards, assets, people, and processes—and surveys real-world examples from Google, Salesforce, Shopify, IBM, United, Pfizer, Caterpillar, and multiple governments.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "69924953", "course": "atomic-design-cert", "position": 4, "chapter": { "position": 0, "title": "Introduction" }, "title": "Importance of Atomic Design", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/69924953-importance-of-atomic-design", "free": false, "summary": "Explains the virtuous circle between a design system and the products it serves, and introduces atomic design as the methodology that helps teams break UIs down and build connected design systems.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "69925333", "course": "atomic-design-cert", "position": 5, "chapter": { "position": 0, "title": "Introduction" }, "title": "About Brad Frost", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/69925333-about-brad-frost", "free": false, "summary": "Brad Frost introduces himself—designer, developer, consultant, teacher, writer, musician, creator of atomic design (2013) and the book (2015), 13 years working on design systems, Pattern Lab, Subatomic, and bradfrost.com/courses.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "69925519", "course": "atomic-design-cert", "position": 6, "chapter": { "position": 0, "title": "Introduction" }, "title": "Who This Course Is For", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/69925519-who-this-course-is-for", "free": false, "summary": "Argues that 'design system' is a misleading name—these are really UI systems that matter to anyone invested in a digital product's success, from execs to designers to devs to content and QA, at any experience level.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "69925627", "course": "atomic-design-cert", "position": 7, "chapter": { "position": 0, "title": "Introduction" }, "title": "Course Structure", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/69925627-course-structure", "free": false, "summary": "Overview of the five chapters: (1) the problem and definition of design systems, (2) the atomic design methodology, (3) tools of the trade, (4) creating a design system alongside real product work, and (5) maintaining a successful design system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "69925674", "course": "atomic-design-cert", "position": 8, "chapter": { "position": 0, "title": "Introduction" }, "title": "What To Expect", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/69925674-what-to-expect", "free": false, "summary": "Explains course logistics—self-paced video, exercises and materials, PDF slides, Slack community, certificate of completion, lifetime access with free minor updates—and promises weird jokes and dated pop-culture references.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70591726", "course": "atomic-design-cert", "position": 9, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Chapter Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70591726-chapter-overview", "free": false, "summary": "Previews Chapter 1: the expanding digital landscape and modularity, defining design systems and their benefits/ROI, the reasons design systems are hard, and the need for atomic design.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70591730", "course": "atomic-design-cert", "position": 10, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "The Challenges of MORE", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70591730-the-challenges-of-more", "free": false, "summary": "Describes how organizations face more products, features, content, devices, languages, and contexts than ever—and why old page-by-page processes can't scale to meet that complexity.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70591739", "course": "atomic-design-cert", "position": 11, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "The Page Metaphor in the Digital Age", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70591739-the-page-metaphor-in-the-digital-age", "free": false, "summary": "Traces how the long-standing 'page' metaphor carried over from print into the web, and how new device classes finally forced us to move beyond it.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70591743", "course": "atomic-design-cert", "position": 12, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Modularize All The Things", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70591743-modularize-all-the-things", "free": false, "summary": "Surveys the tech industry's decades-long shift toward modularity—products, releases, processes, architecture, content, docs, and UI—setting the stage for design systems.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70938193", "course": "atomic-design-cert", "position": 13, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Design System Definition", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70938193-design-system-definition", "free": false, "summary": "Walks through several industry definitions of a design system and frames it as critical UI infrastructure — the official story of how an organization designs and builds interfaces.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70938366", "course": "atomic-design-cert", "position": 14, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Product Consistency and Cohesion", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70938366-product-consistency-and-cohesion", "free": false, "summary": "Uses United Airlines' date picker as a case study to show how design systems drive consistent, cohesive product experiences and tie design-system success to business metrics.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70938490", "course": "atomic-design-cert", "position": 15, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Speed and Efficiency", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70938490-speed-and-efficiency", "free": false, "summary": "Uses United's flight block component and stats from Atlassian, Tesco, REA, Sparkbox and others to show how design systems dramatically increase design/dev speed, efficiency, and quality.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70965235", "course": "atomic-design-cert", "position": 16, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Quality at Scale", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70965235-quality-at-scale", "free": false, "summary": "Uses form labels and accessibility walkthroughs to show how design systems deliver quality at scale by encoding brand, UX, front-end, and accessibility best practices into reusable components.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70965445", "course": "atomic-design-cert", "position": 17, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Baked In Best Practices", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70965445-baked-in-best-practices", "free": false, "summary": "Explains how design systems act as a delivery vehicle for brand, UX, front-end, and accessibility best practices, using Nord Health's Nord design system as an example.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70971912", "course": "atomic-design-cert", "position": 18, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "A Shared Vocabulary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70971912-a-shared-vocabulary", "free": false, "summary": "Describes how design systems create a shared vocabulary across disciplines, teams, silos, partners, and AI tools—helping humans and machines collaborate like musical notation.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70971922", "course": "atomic-design-cert", "position": 19, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "A Useful Reference", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70971922-a-useful-reference", "free": false, "summary": "Shows how a design system serves as a useful reference for humans and AI tools, using the Gov UK design system's tabs/accordions/details documentation as an example.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70972024", "course": "atomic-design-cert", "position": 20, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Future-friendly Foundation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70972024-future-friendly-foundation", "free": false, "summary": "Argues that design systems are a future-friendly foundation, using Material Design's evolution (M1 → M2 → M3) in Gmail to show how systems enable intentional, systematic evolution instead of chaotic rebrands.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70972040", "course": "atomic-design-cert", "position": 21, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Building Blocks for AI Innovation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70972040-building-blocks-for-ai-innovation", "free": false, "summary": "Explores how design systems are foundational building blocks for AI innovation, using Claude-generated websites and Tim Paul's PDF-to-Gov-UK-form demo to show how AI + design systems produce quality output.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "70972044", "course": "atomic-design-cert", "position": 22, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Mucho Benefits, Mucho Value", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/70972044-mucho-benefits-mucho-value", "free": false, "summary": "Recaps the many benefits design systems provide and reinforces why they're indispensable UI infrastructure for modern organizations.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71020880", "course": "atomic-design-cert", "position": 23, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "The Anatomy of a Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71020880-the-anatomy-of-a-design-system", "free": false, "summary": "Introduces the four key ingredients of a design system—standards, assets, people, and process—that work together to help organizations design and build at scale.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71022191", "course": "atomic-design-cert", "position": 24, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "UI Standards Live In A Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71022191-ui-standards-live-in-a-design-system", "free": false, "summary": "Explains that design systems are the home of UI standards (not all organizational standards) and clarifies how UI standards relate to brand, content, accessibility, and other org-wide standards.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71022002", "course": "atomic-design-cert", "position": 25, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "UI Standards As Guidelines", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71022002-ui-standards-as-guidelines", "free": false, "summary": "Frames UI standards as 'here's how we do things here' guidelines, using REI's Cedar design system to illustrate color, typography, iconography, and motion guidelines.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021974", "course": "atomic-design-cert", "position": 26, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "The Three-Legged Stool of Design System Assets", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021974-the-three-legged-stool-of-design-system-assets", "free": false, "summary": "Introduces the three-legged stool of design system assets: design library, code library, and documentation.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021969", "course": "atomic-design-cert", "position": 27, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "UI Design Libraries", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021969-ui-design-libraries", "free": false, "summary": "Covers design libraries (Figma, Penpot, Sketch) using IBM's Carbon design system as an example of how team libraries let designers assemble branded product screens quickly.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021955", "course": "atomic-design-cert", "position": 28, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Code Is The Design System Source of Truth", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021955-code-is-the-design-system-source-of-truth", "free": false, "summary": "Argues that code is the design-system source of truth, tracing how IBM Carbon (and Porsche, Gov UK) components flow from repo to npm package to product apps.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021949", "course": "atomic-design-cert", "position": 29, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Design System Documentation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021949-design-system-documentation", "free": false, "summary": "Covers the third stool leg—documentation—across design tools, code comments, Storybook, and reference websites (Gov UK, Carbon, Porsche), and why docs remain critical even in the AI era.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021851", "course": "atomic-design-cert", "position": 30, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Design Systems Are People!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021851-design-systems-are-people", "free": false, "summary": "Argues design systems are fundamentally about people—the bird's-eye system makers and the in-the-weeds users—and the culture and collaboration that make or break them.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021838", "course": "atomic-design-cert", "position": 31, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Healthy Processes For Healthy Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021838-healthy-processes-for-healthy-systems", "free": false, "summary": "Covers the processes that make design systems successful—building, adopting, evolving, and governing the system—and how governance really just helps people talk to each other.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021826", "course": "atomic-design-cert", "position": 32, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Your Design System Only Needs To Be As Complex As It Needs To Be", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021826-your-design-system-only-needs-to-be-as-complex-as-it-needs-to-be", "free": false, "summary": "Uses Gall's Law to argue your design system should start small, match your organization's actual complexity, and grow through a culture of evolution rather than big up-front design.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021785", "course": "atomic-design-cert", "position": 33, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Forces Working Against Design Systems Efforts", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021785-forces-working-against-design-systems-efforts", "free": false, "summary": "Introduces the four big forces working against design systems—time, money, people, and technology—framed through Pink Floyd songs.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021781", "course": "atomic-design-cert", "position": 34, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Time Issues", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021781-time-issues", "free": false, "summary": "Explores time-related forces working against design systems: not enough time, pressure to ship, and misaligned product vs. system timelines.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021779", "course": "atomic-design-cert", "position": 35, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Money Issues", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021779-money-issues", "free": false, "summary": "Explores money-related issues: design systems viewed as cost centers, hard-to-quantify ROI, cross-silo funding challenges, and quality costing money.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021775", "course": "atomic-design-cert", "position": 36, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "People Issues", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021775-people-issues", "free": false, "summary": "Explores people-related issues: designers/devs feeling threatened, perceived impact on creativity, time pressure, lack of shared vocabulary, and uncollaborative cultures.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021687", "course": "atomic-design-cert", "position": 37, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Technology Issues", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021687-technology-issues", "free": false, "summary": "Explores technology issues: constantly expanding tooling, ever-changing frameworks (Angular → React → Svelte), fashion-driven tool choices, and ongoing technology costs.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021609", "course": "atomic-design-cert", "position": 38, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Infrastructure Requires Time, Money, People, and Resources", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021609-infrastructure-requires-time-money-people-and-resources", "free": false, "summary": "Reframes the forces working against design systems as needed investments—design systems are critical UI infrastructure that requires time, money, people, and technology to succeed.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021603", "course": "atomic-design-cert", "position": 39, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Imbalanced Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021603-imbalanced-systems", "free": false, "summary": "Describes common ways the system/product balance goes sideways—ivory-tower systems, authoritarian pattern-police systems, and product-eats-system scenarios—and teases atomic design as the cure.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71021415", "course": "atomic-design-cert", "position": 40, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Chapter 1 Review", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71021415-chapter-1-review", "free": false, "summary": "Recaps Chapter 1: the flavors of MORE, frustrations of not having a DS, the benefits DSes provide, definitions, the core ingredients (standards, assets, people, process), how DSes come to life, forces working against them, and the need to connect systems to products.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71020350", "course": "atomic-design-cert", "position": 41, "chapter": { "position": 1, "title": "Chapter 1: Designing Systems" }, "title": "Next Steps, Activities, and Homework", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71020350-next-steps-activities-and-homework", "free": false, "summary": "Activities and discussion prompts to workshop with your team before moving on to Chapter 2—flavors of MORE, most desirable benefits, grading standards/assets/people/process, and where you sit on the time/money/people/tech Venn diagram.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71238421", "course": "atomic-design-cert", "position": 42, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Chapter 2 Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71238421-chapter-2-overview", "free": false, "summary": "Previews Chapter 2: how components revolutionized the world, the rise of UI components, the atomic design methodology (atoms, molecules, organisms, templates, pages), how it connects systems to products, and common misconceptions.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71238486", "course": "atomic-design-cert", "position": 43, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Components Have Changed The World", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71238486-components-have-changed-the-world", "free": false, "summary": "Uses Rolls-Royce vs. Ford, Lego bricks, and microchips to show how interchangeable parts and components transformed manufacturing, computing, and the world at large.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71247910", "course": "atomic-design-cert", "position": 44, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "The Rise of UI Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71247910-the-rise-of-ui-components", "free": false, "summary": "Traces how the web community embraced modularity in the late 2000s/early 2010s—OOCSS, BEM, SMACSS, Bootstrap, React—and why raw components alone weren't enough structure.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71247930", "course": "atomic-design-cert", "position": 45, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Taking Inspiration From Chemistry", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71247930-taking-inspiration-from-chemistry", "free": false, "summary": "Traces the origin of atomic design back to a high-school chemistry class and explains how atoms, molecules, and organisms inspired a hierarchical way of thinking about UI.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71248328", "course": "atomic-design-cert", "position": 46, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Introducing The Atomic Design Methodology", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71248328-introducing-the-atomic-design-methodology", "free": false, "summary": "Introduces the five stages of atomic design — atoms, molecules, organisms, templates, and pages — and explains how they describe UI hierarchy and complexity from the smallest elements up to real-world product screens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71248354", "course": "atomic-design-cert", "position": 47, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Atomic Design Creates Connected Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71248354-atomic-design-creates-connected-design-systems", "free": false, "summary": "Frames atomic design as a methodology that lets teams zoom in and out between abstract and concrete, enabling the virtuous circle between a design system and the products it serves, illustrated with Instagram's UI variability.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71321439", "course": "atomic-design-cert", "position": 48, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Atomic Design As Buzzword", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71321439-atomic-design-as-buzzword", "free": false, "summary": "Reflects on how atomic design became a buzzword after its 2013 introduction — the upsides (shorthand, spread) and downsides (misuse, misunderstanding).", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71321442", "course": "atomic-design-cert", "position": 49, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Misconception #1: You MUST Use Atomic Design Language", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71321442-misconception-1-you-must-use-atomic-design-language", "free": false, "summary": "Dispels the myth that atomic design requires the 'atoms/molecules/organisms' vocabulary — call things whatever makes sense for your team (ingredients/recipes/entrees, modules/patterns, etc.).", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71321446", "course": "atomic-design-cert", "position": 50, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Misconception #2: You Need To Obsess Over Component Categorization", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71321446-misconception-2-you-need-to-obsess-over-component-categorization", "free": false, "summary": "Dispels the myth that practicing atomic design requires obsessing over whether something is an atom, molecule, or organism. If you're thinking hierarchically, you're doing it right.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71321451", "course": "atomic-design-cert", "position": 51, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Misconception #3: You Must Structure Design & Code Using Atomic Design", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71321451-misconception-3-you-must-structure-design-code-using-atomic-design", "free": false, "summary": "Dispels the myth that design files and codebases must be organized using atomic design categories. Flat lists or category-based structure (e.g., a forms folder) is often more practical.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71321528", "course": "atomic-design-cert", "position": 52, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Misconception #4: Only Atomic Components Live In A Core Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71321528-misconception-4-only-atomic-components-live-in-a-core-design-system", "free": false, "summary": "Dispels the myth that only atoms/molecules live in a design system while organisms and templates live outside. Atomic design describes UI complexity, not what is or isn't part of the system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71321544", "course": "atomic-design-cert", "position": 53, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Component Cut-Up Exercise", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71321544-component-cut-up-exercise", "free": false, "summary": "Introduces Charlotte Jackson's Component Cut-Up Exercise — print a UI screen, cut it up with scissors, and physically break it down into smaller UI pieces to internalize the atomic design mental model.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71333231", "course": "atomic-design-cert", "position": 54, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Chapter 2 Review", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71333231-chapter-2-review", "free": false, "summary": "Recaps Chapter 2: how interchangeable parts transformed the world, the journey of UI components, the atomic design stages, the zoom-in/zoom-out superpower, the virtuous circle between system and product, and the misconceptions we can let go of.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71341750", "course": "atomic-design-cert", "position": 55, "chapter": { "position": 2, "title": "Chapter 2: The Atomic Design Methodology" }, "title": "Next Steps, Activities, and Homework", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71341750-next-steps-activities-and-homework", "free": false, "summary": "Activities to try after Chapter 2—run the Component Cut-Up Exercise, audit the UI vocabulary your team uses, and reflect on how closely your current design system structure aligns with atomic design.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71517099", "course": "atomic-design-cert", "position": 56, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Chapter 3 Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71517099-chapter-3-overview", "free": false, "summary": "Previews Chapter 3 — tools of the trade: the core design system, the design system ecosystem, design tokens, icons, UI components, and bringing it all to life in Figma, code, Storybook, and documentation.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71517104", "course": "atomic-design-cert", "position": 57, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Introducing the Design System Ecosystem", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71517104-introducing-the-design-system-ecosystem", "free": false, "summary": "Introduces the design system ecosystem — a layer-cake architecture of core system, optional technology-specific implementations, recipes, smart components, and products — that nuances the simple 'system ↔ product' story.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71599746", "course": "atomic-design-cert", "position": 58, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Core Design System Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71599746-core-design-system-overview", "free": false, "summary": "Defines a core design system as the UI standards and assets usable across any product, comprised of UI components, icons, and design tokens.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71599775", "course": "atomic-design-cert", "position": 59, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Introduction to Design Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71599775-introduction-to-design-tokens", "free": false, "summary": "Introduces design tokens as the subatomic pieces of a design system — Jina Anne's term for visual style variables that unlock theming across brands, modes, frameworks, and sub-brands.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71599779", "course": "atomic-design-cert", "position": 60, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Separating Structure and Style To Create Themeable Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71599779-separating-structure-and-style-to-create-themeable-design-systems", "free": false, "summary": "Uses the door frame metaphor to explain separation of concerns between structural UI components (HTML/CSS/JS) and aesthetic design tokens — the pairing that makes themeable design systems possible.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71599781", "course": "atomic-design-cert", "position": 61, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Token Properties and Architecture", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71599781-token-properties-and-architecture", "free": false, "summary": "Covers the design decisions tokens can embody (color, typography, border radius, shadows, animation) and recommends a three-tier token architecture, plus managing design tokens as their own subsystem.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71599786", "course": "atomic-design-cert", "position": 62, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Icons: Design Systems' Mullet", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71599786-icons-design-systems-mullet", "free": false, "summary": "Covers icons as a design system asset category — utility icons (business in the front) vs. expressive/branded icons (party in the back) — and whether to manage them as their own subsystem or as part of the component layer.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "71599793", "course": "atomic-design-cert", "position": 63, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Core Design System Component Assets", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/71599793-core-design-system-component-assets", "free": false, "summary": "Positions UI components (form controls, cards, buttons, tabs, alerts, etc.) as the core design system asset we've been discussing, and sets up the shift into bringing them to life in design tools, code, and documentation.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72871873", "course": "atomic-design-cert", "position": 64, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Creating Design Systems in Figma Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72871873-creating-design-systems-in-figma-intro", "free": false, "summary": "Sets context for the Figma demos — a brief history of digital design tooling, why Figma is the focus, recommended outside Figma resources (Moon Learning, UI Prep, Level Up, Shift Nudge), and the six-level structure of the upcoming walkthrough.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72942990", "course": "atomic-design-cert", "position": 65, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "1-minute Crash Course on Creating Design Systems in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72942990-1-minute-crash-course-on-creating-design-systems-in-figma", "free": false, "summary": "A rapid one-minute tour of the six levels of building a design system in Figma — no system, first component, full componentization, tokens/variables for theming, documentation, and team-library publishing.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72872231", "course": "atomic-design-cert", "position": 66, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 1: Static Designs", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72872231-level-1-static-designs", "free": false, "summary": "Walks through building a four-page static website in Figma with no components, no tokens, no libraries—just rectangles and text—to motivate the need for a single source of truth.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72872236", "course": "atomic-design-cert", "position": 67, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 2: Introduce Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72872236-level-2-introduce-components", "free": false, "summary": "Converts the header into a Figma component, moves it to a dedicated Components page, and propagates it across all four product pages — demonstrating the power of a single source of truth.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72872255", "course": "atomic-design-cert", "position": 68, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 3: Full Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72872255-level-3-full-components", "free": false, "summary": "Componentizes every element across the four screens, introducing Figma component properties (text properties via \"Apply variable or property\") using the button component as a teaching example.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72872258", "course": "atomic-design-cert", "position": 69, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Creating Component Variants", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72872258-creating-component-variants", "free": false, "summary": "Adds a hover variant to the Button component to demonstrate Figma's variant system — balancing centralized control with the flexibility designers need to pick the right state.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72923395", "course": "atomic-design-cert", "position": 70, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 3: Completed Component Conversion", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72923395-level-3-completed-component-conversion", "free": false, "summary": "Tours the fully componentized four-page site: every page is built from instances of 13 shared components (header, footer, hero, section heading, grid, card, newsletter, text passage, text field, text area, button, etc.), all driven from a single source of truth.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72923624", "course": "atomic-design-cert", "position": 71, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 4: Introducing Design Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72923624-level-4-introducing-design-tokens", "free": false, "summary": "Starts wiring subatomic design decisions into Figma variables, beginning with a border-radius variable that propagates to every component using it — showing how tokens give us centralized control over a design language.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72923892", "course": "atomic-design-cert", "position": 72, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Expanding Design Tokens", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72923892-expanding-design-tokens", "free": false, "summary": "Adds a blue-dark color variable and a font-family-primary typography variable and wires them into the Header and page title — a stepping stone toward a fuller three-tier token architecture.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72924607", "course": "atomic-design-cert", "position": 73, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Implementing a Three-Tiered Token System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72924607-implementing-a-three-tiered-token-system", "free": false, "summary": "Sets up tier-one pantry tokens and tier-two semantic tokens in separate Figma collections, then wires components to the tier-two aliases so a single change (e.g., color-background-brand) ripples across the system.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72941562", "course": "atomic-design-cert", "position": 74, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Creating Themes with Figma Variable Modes", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72941562-creating-themes-with-figma-variable-modes", "free": false, "summary": "Uses Figma's variable modes to create a wildly different 'Wowee Zowee' theme alongside 'Our Company' and 'Vanilla' — same components, radically different aesthetics — to illustrate multi-brand, multi-mode theming.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72938395", "course": "atomic-design-cert", "position": 75, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 5: Documentation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72938395-level-5-documentation", "free": false, "summary": "Surveys how the Gov UK and Helsinki design systems organize and document their Figma files, and argues for keeping in-Figma docs focused on the designer experience since docs also travel to reference websites later.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72941624", "course": "atomic-design-cert", "position": 76, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Documenting Components in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72941624-documenting-components-in-figma", "free": false, "summary": "Tidies the Components page with alignment, spacing, emojis, a dash-page separator, and an internal 'Documentation Frame' component with name/description props and a slot — so every component gets a labeled, browsable home.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72942218", "course": "atomic-design-cert", "position": 77, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Documenting Design Tokens in Figma", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72942218-documenting-design-tokens-in-figma", "free": false, "summary": "Uses Sam Childs' Token Board plugin to auto-generate clean, auto-layout token boards from Figma variables for each theme and tier, turning a previously painful documentation chore into a slick one-click job.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72942285", "course": "atomic-design-cert", "position": 78, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 5: Documentation Wrap-Up", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72942285-level-5-documentation-wrap-up", "free": false, "summary": "Recaps the cleaned-up, alphabetized Components page with documentation frames and the organized tier-one/tier-two/tier-three token boards—level 5 is done and we're ready to distribute.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72942654", "course": "atomic-design-cert", "position": 79, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 6: Design System Distribution", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72942654-level-6-design-system-distribution", "free": false, "summary": "Opens level 6—splitting design tokens and components into separate Figma team libraries—and introduces the Libraries panel, the Publish button, and the mechanics of beaming assets up to the cloud.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72942659", "course": "atomic-design-cert", "position": 80, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Creating a Figma Team Library", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72942659-creating-a-figma-team-library", "free": false, "summary": "Walks step-by-step through publishing a Figma team library — the Libraries panel, the Publish button, and the rationale for splitting design tokens and components into two separate sibling libraries rather than one combined library.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72942663", "course": "atomic-design-cert", "position": 81, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Creating a Design Tokens Team Library", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72942663-creating-a-design-tokens-team-library", "free": false, "summary": "Publishes a separate Our Company Design Tokens library with only the variables and styles (no components) so downstream files can consume tokens independently — including the Wowee Zowee theme.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72942667", "course": "atomic-design-cert", "position": 82, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Updating Team Libraries", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72942667-updating-team-libraries", "free": false, "summary": "Shows the publish-update-consume loop — adds a new Secondary variant to the Button component, publishes the update, and pulls it into a downstream file where the new variant appears in the Button instance's dropdown.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "72943096", "course": "atomic-design-cert", "position": 83, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Design Systems in Design Tools Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/72943096-design-systems-in-design-tools-considerations", "free": false, "summary": "Wraps the Figma section with big takeaways: components shouldn't be created in isolation, aim for progress over perfection, designers and developers must co-create, and Figma features like variables are still new compared to code.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73439090", "course": "atomic-design-cert", "position": 84, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "A Design System Must Live In Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73439090-a-design-system-must-live-in-code", "free": false, "summary": "Makes the case — yet again — that design systems have to live in code because users interact with real software, not pictures of software. Design libraries are abstractions; code is the actual product.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73439102", "course": "atomic-design-cert", "position": 85, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "7 Levels of Systematic Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73439102-7-levels-of-systematic-code", "free": false, "summary": "Introduces the seven levels of systematic code that structure the upcoming demos — from a static HTML/CSS/JS site up through components, design tokens, documentation/Storybook, publishing to npm, and pulling the system into consuming applications.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73439222", "course": "atomic-design-cert", "position": 86, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 1: Static Website In HTML & CSS", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73439222-level-1-static-website-in-html-css", "free": false, "summary": "Creates a four-page static site using HTML, CSS, and JavaScript — no components, no build tools — to show how quickly copy-paste-based headers produce drift and motivate the need for a real component layer.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73590161", "course": "atomic-design-cert", "position": 87, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 2: Introduce A Component", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73590161-level-2-introduce-a-component", "free": false, "summary": "Introduces web components via Lit: installs the library, builds a custom element, boots a local server to fix CORS, and replaces the static header across all four pages so a single component drives every page.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73590170", "course": "atomic-design-cert", "position": 88, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 3: All Components Intro", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73590170-level-3-all-components-intro", "free": false, "summary": "Opens level 3 — using the infrastructure built in level 2 to componentize the entire website, starting with a handful of representative components.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73590188", "course": "atomic-design-cert", "position": 89, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Creating a Button Component", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73590188-creating-a-button-component", "free": false, "summary": "Builds a single web component that renders as either a link or a button based on the presence of an href prop, using a slot for text — the quintessential (and deceptively complex) design system component.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73590201", "course": "atomic-design-cert", "position": 90, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Creating a Text Field Component", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73590201-creating-a-text-field-component", "free": false, "summary": "Builds the web component with label, placeholder, and type props, replacing the hard-coded text inputs on the Contact page and setting up a separate text-area component for multiline fields.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73590212", "course": "atomic-design-cert", "position": 91, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 3 Results: A Component-Driven Website!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73590212-level-3-results-a-component-driven-website", "free": false, "summary": "Tours the finished componentized site: 17 design-system components, a single barrel file, and a lean global stylesheet with only base resets and utility classes. Every page now has a single source of truth for each component.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73590223", "course": "atomic-design-cert", "position": 92, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Bonus: Automating Accessible Form Controls", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73590223-bonus-automating-accessible-form-controls", "free": false, "summary": "Shows how the text field component can auto-generate a unique id when one isn't provided and wire the label's for attribute to it — baking the semantic label–input connection into the design system so every product gets accessible forms for free.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73857128", "course": "atomic-design-cert", "position": 93, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 4: Design Tokens in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73857128-level-4-design-tokens-in-code", "free": false, "summary": "Introduces CSS custom properties as design tokens — defines a --color-brand variable in :root, wires it into the header and button components, and previews how a single variable change propagates across the UI.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73859644", "course": "atomic-design-cert", "position": 94, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Setting Up Style Dictionary", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73859644-setting-up-style-dictionary", "free": false, "summary": "Installs Style Dictionary as a dev dependency and sets up tier-one/tier-two/tier-three JSON token files plus a button override file — scaffolding for generating CSS custom properties (and other formats) from a single source of truth.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73859680", "course": "atomic-design-cert", "position": 95, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Populating A Theme's Tokens in Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73859680-populating-a-theme-s-tokens-in-code", "free": false, "summary": "Defines a color-brand-blue-500 tier-one ingredient, aliases color-background-brand and button-color-background-default to it at tier two and tier three, runs npm run build-tokens to generate tokens.css, and wires the header and button to the generated OC-theme variables.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73859702", "course": "atomic-design-cert", "position": 96, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 5: Documentation - A Frontend Workshop Environment", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73859702-level-5-documentation-a-frontend-workshop-environment", "free": false, "summary": "Opens level 5 — moves documentation in code into a dedicated front-end workshop environment away from the live website, where the design system can be treated as its own standalone library with its own home.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73861656", "course": "atomic-design-cert", "position": 97, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Introducing Storybook", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73861656-introducing-storybook", "free": false, "summary": "Installs Storybook via npm create storybook@latest, surveys the default button/header/page examples, and introduces it as the industry-standard front-end workshop environment for browsing, documenting, and testing components.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73977477", "course": "atomic-design-cert", "position": 98, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Configuring Storybook", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73977477-configuring-storybook", "free": false, "summary": "Tours the .storybook/ config directory, adds a theme switcher in preview.js, and deletes the default example stories in preparation for writing stories for our own components.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73977488", "course": "atomic-design-cert", "position": 99, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Creating Stories for Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73977488-creating-stories-for-components", "free": false, "summary": "Writes a button.stories.js file with metadata, argTypes, and multiple stories (default, disabled) so Storybook renders the button with a live property table, docs, and a theme switcher to preview it across themes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73977499", "course": "atomic-design-cert", "position": 100, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Representing All Components in Storybook", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73977499-representing-all-components-in-storybook", "free": false, "summary": "Adds stories files for every component (card, band, etc.) so the whole library shows up in Storybook with self-documenting prop tables that fall out of the source code, plus a note on Chromatic for visual regression testing.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73983963", "course": "atomic-design-cert", "position": 101, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 6: Publishing a design system in code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73983963-level-6-publishing-a-design-system-in-code", "free": false, "summary": "Opens level 6 — organizes the codebase into a monorepo (npm workspaces) so components, tokens, and the consuming website live as independent but co-located packages, ready to be published and pulled into downstream apps.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73994976", "course": "atomic-design-cert", "position": 102, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Building Code Libraries", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73994976-building-code-libraries", "free": false, "summary": "Runs npm run build-libraries to build the web-components and design-tokens packages — kicking out a bundled web-components dist/ folder and tokens CSS for each theme, ready to be published to npm.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73994992", "course": "atomic-design-cert", "position": 103, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Publishing Code Libraries to NPM", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73994992-publishing-code-libraries-to-npm", "free": false, "summary": "Runs the publish scripts to push versioned 1.0.0 packages up to npm under the @bradfrost-web organization — @bradfrost-web/atomic-design-course-demo-web-components and the matching design tokens library go live.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73995000", "course": "atomic-design-cert", "position": 104, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 7: Consuming Design System Libraries in Products", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73995000-level-7-consuming-design-system-libraries-in-products", "free": false, "summary": "Opens level 7 — turns attention to the our-company-app workspace and prepares to rewire it to pull the design system's components and tokens from npm, treating it as a truly separate application.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73995011", "course": "atomic-design-cert", "position": 105, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Installing Code Packages From NPM", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73995011-installing-code-packages-from-npm", "free": false, "summary": "cds into our-company-app and runs npm install @bradfrost-web/atomic-design-course-design-tokens and the matching web-components package — pulling the published design system into node_modules just like any other third-party dependency.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73995021", "course": "atomic-design-cert", "position": 106, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Connecting Our Website To Design System Code Package", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73995021-connecting-our-website-to-design-system-code-package", "free": false, "summary": "Replaces the stale local imports with clean @import and import statements that pull tokens into styles.css and web components into main.js, so all four pages now consume the design system from npm rather than a sibling directory.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73995029", "course": "atomic-design-cert", "position": 107, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Powering Multiple Websites and Tech Stacks With The Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73995029-powering-multiple-websites-and-tech-stacks-with-the-design-system", "free": false, "summary": "Demonstrates the portability of web components by reusing the same design system in an Eleventy static site, a React time-off app, and a PHP app — showing how one system can power many tech stacks and set up a healthy product→system feedback loop.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "73995036", "course": "atomic-design-cert", "position": 108, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Wrapping Up Code", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/73995036-wrapping-up-code", "free": false, "summary": "Closes the code section: reflects on how much careful work, architecture, and cross-discipline collaboration it takes, previews how chapters 4–5 will dig into the human side, and sets up documentation as the final leg of the stool.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74764381", "course": "atomic-design-cert", "position": 109, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Documentation Introduction", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74764381-documentation-introduction", "free": false, "summary": "Frames documentation as the often-overlooked third leg of the design system asset stool — the IKEA-style instruction manual that turns design libraries and code repos into successful outcomes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74764692", "course": "atomic-design-cert", "position": 110, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 1 Docs: Static and Scattered", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74764692-level-1-docs-static-and-scattered", "free": false, "summary": "Level 1 of systematic documentation: a scavenger hunt across Slacks, emails, PDFs, decks, Confluence and Drive links — things logically can live in different homes, but scattered to the wind is a different problem.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74764815", "course": "atomic-design-cert", "position": 111, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 2 Docs: Centralized Reference", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74764815-level-2-docs-centralized-reference", "free": false, "summary": "Level 2 of systematic documentation: corral all the assets into one home base — Confluence, Notion, a microsite, whatever fits the org — so there's a single URL people can point to as the design system entry point.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74764864", "course": "atomic-design-cert", "position": 112, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Notion Demonstration", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74764864-notion-demonstration", "free": false, "summary": "Walks through a simple one-pager Notion site for Our Company — overview, links to design library, code library and Storybook, component checklist, token architecture, contribution info, FAQs, changelog, and contact info.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74765418", "course": "atomic-design-cert", "position": 113, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 3 Docs: Connected Reference", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74765418-level-3-docs-connected-reference", "free": false, "summary": "Level 3 of systematic documentation: a connected reference that pulls in the design source of truth (Figma) and code source of truth (Storybook) so changes flow into the docs automatically — powered by tools like Zeroheight, Supernova, or Knapsack.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74765489", "course": "atomic-design-cert", "position": 114, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Zeroheight Demo", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74765489-zeroheight-demo", "free": false, "summary": "Tours Zeroheight as a design-system-tuned CMS: wires up Figma + Storybook integrations, shows the button page with linked design and code assets, edits usage guidelines and do's/don'ts, and pulls in a Wowee Zowee token board from Figma.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74765479", "course": "atomic-design-cert", "position": 115, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 4 Docs: Living Documentation", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74765479-level-4-docs-living-documentation", "free": false, "summary": "Level 4 of systematic documentation: more a process/workflow change than a tooling change — capture the real lived reality of components in use, not the platonic ideal, by baking documentation into your team's definition of done.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74765585", "course": "atomic-design-cert", "position": 116, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Level 5 Docs: Agentic", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74765585-level-5-docs-agentic", "free": false, "summary": "Level 5 of systematic documentation: with LLMs woven into design and dev tools, AI agents (not just humans) are wielding the design system — making documentation that supports both audiences a new and important frontier.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74765891", "course": "atomic-design-cert", "position": 117, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Documentation Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74765891-documentation-considerations", "free": false, "summary": "Wraps the documentation section: docs are the mortar that holds the design system together. Treat documentation as a both/and, not either/or, situation — design docs, code docs, and a connected reference all matter, for humans and for AI agents.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "74765943", "course": "atomic-design-cert", "position": 118, "chapter": { "position": 3, "title": "Chapter 3: Tools of the Trade" }, "title": "Chapter 3 Review", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/74765943-chapter-3-review", "free": false, "summary": "Recaps Chapter 3: the design system ecosystem and layer-cake architecture, the core design system ingredients (tokens, icons, components), six levels of systematic design, seven levels of systematic code, and five levels of systematic documentation.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75470469", "course": "atomic-design-cert", "position": 119, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Chapter 4 Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75470469-chapter-4-overview", "free": false, "summary": "Introduces the atomic workflow chapter: selling a design system, kicking off the initiative, planning, pilot projects, cross-disciplinary collaboration between designers and developers, and what launching a design system actually entails.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626183", "course": "atomic-design-cert", "position": 120, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Selling a Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626183-selling-a-design-system", "free": false, "summary": "Explains why airtight logic and ROI data about design system benefits can still meet disbelief and resistance, and makes the case for helping people feel the pain of not having a design system by showing rather than telling.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626187", "course": "atomic-design-cert", "position": 121, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Style Roundup", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626187-style-roundup", "free": false, "summary": "Shows the style roundup exercise, using CSS Stats to analyze a site's CSS (Facebook as the example) and surface near-duplicate blues, 19 font families, and stray border radius values to separate the real styles from the noise.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626190", "course": "atomic-design-cert", "position": 122, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Interface Inventory", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626190-interface-inventory", "free": false, "summary": "Walks through running an interface inventory as a group: a shared FigJam template, a time-boxed component roundup by category, presenting findings to surface naming mismatches, and deciding each component's fate to build shared vocabulary.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626194", "course": "atomic-design-cert", "position": 123, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Performance Audit", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626194-performance-audit", "free": false, "summary": "Shows how a performance audit with WebPageTest, racing a client's site against competitors in a filmstrip view, makes invisible performance problems visceral for non-technical stakeholders, backed by business data from wpostats.com.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626199", "course": "atomic-design-cert", "position": 124, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Accessibility Audit", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626199-accessibility-audit", "free": false, "summary": "Covers accessibility audits as a way to sell a design system, citing lawsuits and the European Accessibility Act, and tours Deque's axe tools, ARC Toolkit, and Chrome's Lighthouse for capturing a before-and-after scorecard.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626216", "course": "atomic-design-cert", "position": 125, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Personalize Your Sales Pitch", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626216-personalize-your-sales-pitch", "free": false, "summary": "Makes the case for tuning a design system pitch to each stakeholder's concerns: rebrands for design leaders, re-platforms for technology leaders, and efficient quality at scale for business people, approached with empathy and curiosity.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626224", "course": "atomic-design-cert", "position": 126, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Selling Design Systems Considerations", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626224-selling-design-systems-considerations", "free": false, "summary": "Recaps selling a design system: speaking to benefits and ROI, showing the pain through roundups, inventories, and audits, framing the pitch through stakeholders' concerns, and continually selling as new buzzwords like AI compete for attention.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626228", "course": "atomic-design-cert", "position": 127, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Kicking Off with Research and Interviews", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626228-kicking-off-with-research-and-interviews", "free": false, "summary": "Explains why kickoff now starts with research instead of a big meeting: interviews across disciplines and levels, the magic wand question, real interview anecdotes, the in-house versus consultant dynamic, and extracting themes for the workshop.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626233", "course": "atomic-design-cert", "position": 128, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Asset Audits", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626233-asset-audits", "free": false, "summary": "Covers assessing existing design libraries, product files, code, documentation, and processes to build a report of what's worth preserving, what needs surgery, and what belongs in the trash, delivered with the sandwich method.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626242", "course": "atomic-design-cert", "position": 129, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Kickoff Workshop & Priorities Exercise", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626242-kickoff-workshop-priorities-exercise", "free": false, "summary": "Walks through the kickoff workshop: playing back research themes and running a dot-voting priorities exercise, using the About.com (now People Inc.) project to show how a heat map of shared outcomes builds broad consensus.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626246", "course": "atomic-design-cert", "position": 130, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Design Brief", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626246-design-brief", "free": false, "summary": "Breaks down the design brief that comes out of kickoff: problem statement, vision and goals, success metrics, what's in and out of scope, design principles, a RACI chart, and a plan of attack, circulated widely to prevent the swoop and poop.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75626254", "course": "atomic-design-cert", "position": 131, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Design Principles", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75626254-design-principles", "free": false, "summary": "Distinguishes process design principles drawn from kickoff research (like making the system easier than Material or Bootstrap) from principles embodied in the product, and covers Jared Spool's counterintuitive tests and Ben Brignell's Design Principles site.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75658173", "course": "atomic-design-cert", "position": 132, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Planning a Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75658173-planning-a-design-system", "free": false, "summary": "Introduces the planning phase that follows kickoff, zooming in on the design brief's often high-level answers to spell out exactly what gets created, who creates it, and how the work will get done.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75658847", "course": "atomic-design-cert", "position": 133, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Design System Pilot Projects", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75658847-design-system-pilot-projects", "free": false, "summary": "Makes the case for design system pilot projects: rather than trying to power every product at once, choosing a specific page, flow, or application to build out the system against, with Dan Mall's TV pilot analogy.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75658864", "course": "atomic-design-cert", "position": 134, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Criteria for Choosing Pilot Projects", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75658864-criteria-for-choosing-pilot-projects", "free": false, "summary": "Walks through criteria for choosing pilot projects: timeline (a train still in the station), potential for common components, a scope of weeks rather than quarters, technical independence, enthusiastic partners, and marketing potential.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75660831", "course": "atomic-design-cert", "position": 135, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Design Systems Pilot Project at United", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75660831-design-systems-pilot-project-at-united", "free": false, "summary": "Shows pilot projects at United Airlines: a homepage pilot that marketed the new design language to other teams, and a lift-and-shift My Trips page that yielded breadcrumbs, tabs, data tables, and accordions, plus a FigJam for ranking pilots.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75660842", "course": "atomic-design-cert", "position": 136, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Who's Involved in Pilot Projects?", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75660842-who-s-involved-in-pilot-projects", "free": false, "summary": "Covers who's involved in pilot projects: a small, smart, architecture-minded, nimble, autonomous team working hip to hip with product teams, balancing product thinking about specific use cases with systems thinking about scale.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75660845", "course": "atomic-design-cert", "position": 137, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Planning a Design Systems Pilot Program", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75660845-planning-a-design-systems-pilot-program", "free": false, "summary": "Walks through a real pilot program plan from the PPG e-commerce project sprint by sprint, from tooling and tokens to product listing, cart, and checkout pilots, until component reuse delivers seven pilots in one sprint, plus a hardware-store tool metaphor.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75662969", "course": "atomic-design-cert", "position": 138, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Building Your Design System Toolkit Through Product Iteration", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75662969-building-your-design-system-toolkit-through-product-iteration", "free": false, "summary": "Explains how a design system grows by iterating over real product screens, flows, and applications, using the metaphor of acquiring tools only when something breaks, and points to Nathan Curtis's parts, products, and people activity.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75662972", "course": "atomic-design-cert", "position": 139, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Design & Build", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75662972-design-build", "free": false, "summary": "Transitions into the design and build phase, noting that the mechanics of component-driven design and development were covered earlier and that the focus now shifts to the human process of making the work happen.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75662975", "course": "atomic-design-cert", "position": 140, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Death To The Waterfall", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75662975-death-to-the-waterfall", "free": false, "summary": "Makes the case against the waterfall handoff from high-fidelity comps to the code cave, using the botched Borja fresco restoration as a metaphor, and argues development should start day one as a cross-disciplinary collaboration.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75662976", "course": "atomic-design-cert", "position": 141, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Token Naming", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75662976-token-naming", "free": false, "summary": "Explains why designers and developers should co-create design token naming and architecture, how one-way handoffs of Figma variables breed friction, and why parity across a three-tier token system in Figma and code is critical yet hard to fully achieve.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75662980", "course": "atomic-design-cert", "position": 142, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "API Design", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75662980-api-design", "free": false, "summary": "Defines a component API as the way design system users control a component's style or behavior (like a button variant) and argues for aligning API naming across design tools, code, and docs, citing differences between MUI and Material's Figma library.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75662984", "course": "atomic-design-cert", "position": 143, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "A Component API Design Walkthrough", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75662984-a-component-api-design-walkthrough", "free": false, "summary": "Walks through the component API naming conventions distilled from years of client work: variant, inverted, size values like SM and LG, spacing, behavior, align, text and heading, label and legend, tag name, and icon name and position.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75693040", "course": "atomic-design-cert", "position": 144, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Component Composition", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75693040-component-composition", "free": false, "summary": "Uses a hero component that keeps sprouting props (a button, a button group, a sign-up form) to show why slots beat brittle declarative APIs, and covers header, body, and footer slots, Figma's native slots, and how composability enables recipes.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75693053", "course": "atomic-design-cert", "position": 145, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Benefits of Cross-Disciplinary Collaboration", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75693053-benefits-of-cross-disciplinary-collaboration", "free": false, "summary": "Makes the case that cross-disciplinary collaboration on token naming, API design, and composability separates success from failure, builds a shared vocabulary, eases future evolution, and provides the parity AI needs to avoid scaling a mess.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75693056", "course": "atomic-design-cert", "position": 146, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "What Collaboration Looks Like In Practice", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75693056-what-collaboration-looks-like-in-practice", "free": false, "summary": "Shows what designer and developer collaboration looks like in practice through a snapshot of a component workflow and Dan Mall's hot potato process of real-time back and forth, including a talk where they built a design system live on stage.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75693151", "course": "atomic-design-cert", "position": 147, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Launching A Design System", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75693151-launching-a-design-system", "free": false, "summary": "Explains launching a design system end to end: packaging source files as a Figma team library and npm package, product files and repos consuming them, and why launch means software in front of real users, with Nathan Curtis's release articles.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75693153", "course": "atomic-design-cert", "position": 148, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Chapter 4 Review", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75693153-chapter-4-review", "free": false, "summary": "Recaps the chapter: selling a design system by showing the pain and tying it to stakeholders' priorities, kicking off with interviews and audits, using pilot projects for quick wins, cross-disciplinary design and build, and launching end to end.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75693176", "course": "atomic-design-cert", "position": 149, "chapter": { "position": 4, "title": "Chapter 4 - The Atomic Workflow" }, "title": "Next Steps, Activities, & Homework", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75693176-next-steps-activities-homework", "free": false, "summary": "Assigns homework by journey stage: choosing audits that resonate for selling, running interviews and a kickoff workshop that produces a circulated design brief, scouting pilot projects, and having an honest talk about designer and developer collaboration.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75773404", "course": "atomic-design-cert", "position": 150, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Chapter 5 Overview", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75773404-chapter-5-overview", "free": false, "summary": "Introduces the maintaining design systems chapter: teams and culture, governance, the tension between quality and product speed, contributions, support and training, adoption and measuring success, and expanding into new platforms in the AI age.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75773410", "course": "atomic-design-cert", "position": 151, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Avoiding The Design Systems Graveyard", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75773410-avoiding-the-design-systems-graveyard", "free": false, "summary": "Tours the design system graveyard of efforts that never took root, uses Pixar's Coco as a metaphor for systems that fade when product pressure wins, and lays out the framework: make design systems official, adaptable, supported, sticky, and bigger.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75773419", "course": "atomic-design-cert", "position": 152, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Make Design Systems Official", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75773419-make-design-systems-official", "free": false, "summary": "Frames a mature design system as infrastructure rather than a project with an end, drawing on Nathan Curtis and comparing it to roads, bridges, and power grids that need continued commitment and investment once products depend on them.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75773433", "course": "atomic-design-cert", "position": 153, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Design System Makers and Users", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75773433-design-system-makers-and-users", "free": false, "summary": "Details the two perspectives a design system needs: makers who curate from a bird's-eye view and maintain the assets, and users with an in-the-weeds product view, including the risk of users quietly cutting the cord and doing their own thing.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75773437", "course": "atomic-design-cert", "position": 154, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Design System Team Models", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75773437-design-system-team-models", "free": false, "summary": "Compares design system team models from Nathan Curtis's article: centralized teams that risk an ivory tower, federated models that sprawl into hundreds of sloppy components, and the Salesforce hybrid with pairing that Jina Anne described.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75773451", "course": "atomic-design-cert", "position": 155, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Design System Team Roles", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75773451-design-system-team-roles", "free": false, "summary": "Breaks down design system team roles (product owner, product manager, design lead, tech lead, production support, and specialists), how a team matures through pilot projects, and how organization size widens the gap between makers and users.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75773454", "course": "atomic-design-cert", "position": 156, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Design System Culture", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75773454-design-system-culture", "free": false, "summary": "Explores design system culture through Ben Callahan's use of the Cameron and Quinn framework, contrasting healthy collaborative and controlling cultures across prioritization, adoption, and extension, and warning against being the pattern police.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75781538", "course": "atomic-design-cert", "position": 157, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Avoid Burnout", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75781538-avoid-burnout", "free": false, "summary": "Raises design system burnout, pointing to Amy Hupe's writing on how people feel the weight of supporting an entire organization, and urges watching out for both one's own well-being and that of teammates.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75819428", "course": "atomic-design-cert", "position": 158, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Make Design Systems Supported", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75819428-make-design-systems-supported", "free": false, "summary": "Tours the Nord Health Design System's help and feedback page as a model for support (Slack channels, weekly office hours, a support email, a status page, bug reporting), then covers a single support URL, FAQs, prompt replies, and proactive outreach.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75838894", "course": "atomic-design-cert", "position": 159, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Make Design Systems Adaptable", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75838894-make-design-systems-adaptable", "free": false, "summary": "Uses the set it and forget it infomercial to describe the belief that a design system is set in stone, explains how that pushes product teams to cut the cord, and introduces the tension between adaptability and vetted quality.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75838914", "course": "atomic-design-cert", "position": 160, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Pace Layers", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75838914-pace-layers", "free": false, "summary": "Explains Stewart Brand's pace layers and Josh Clark's application of them to design systems, showing why the fast product layer and the slower, quality-first design system layer are in inherent tension, and why the system shouldn't be a bottleneck.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75838923", "course": "atomic-design-cert", "position": 161, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Recipes and Pace Layers", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75838923-recipes-and-pace-layers", "free": false, "summary": "Shows how a recipe layer between the core design system and products relieves pace layer tension, using Material Design and Google products like Docs, Gmail, and YouTube to illustrate product-specific recipes as a pragmatic middle way.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75841306", "course": "atomic-design-cert", "position": 162, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Governance Process", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75841306-governance-process", "free": false, "summary": "Walks through a full governance workflow adapted from Yaili de Leon's diagram: the happy path, bugs as five-alarm fires, deliberate versus accidental visual discrepancies, core versus recipe features, testing, and release, all hinging on a quick conversation.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75841421", "course": "atomic-design-cert", "position": 163, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Contributions", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75841421-contributions", "free": false, "summary": "Explains why design system contributions rarely flood in, then walks through the Nord Health Design System's contribution model (light, medium, and heavy contributions, conversation first, review, practical guides) and advises waiting until governance is solid.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75846081", "course": "atomic-design-cert", "position": 164, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Versioning", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75846081-versioning", "free": false, "summary": "Breaks down semantic versioning for design systems: patch, minor, and major releases, what a 1.0 commits to, handling rebrands as major releases, library versus component versioning, and keeping a changelog, with GitLab's Pajamas as an example.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75848677", "course": "atomic-design-cert", "position": 165, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Make Design Systems Stick", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75848677-make-design-systems-stick", "free": false, "summary": "Explains that design systems stick by becoming genuine dependencies through Figma team libraries and npm packages, and that adoption across the product landscape is a long journey that builds on the initial pilot program wins.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75848686", "course": "atomic-design-cert", "position": 166, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Measuring Design System Adoption", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75848686-measuring-design-system-adoption", "free": false, "summary": "Surveys ways to measure design system adoption: Figma library analytics, code scanners like Omlet, React Scanner Studio, and Zeroheight's adoption CLI, examples from Productboard and Onfido, and using LLMs to analyze how components are actually used.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75848697", "course": "atomic-design-cert", "position": 167, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Measuring Product Success", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75848697-measuring-product-success", "free": false, "summary": "Makes the case for measuring product success rather than just component counts, tying design system adoption to the business metrics the organization cares about, such as e-commerce revenue or newsletter sign-ups.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75848965", "course": "atomic-design-cert", "position": 168, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Support, Stickiness, and Evangelism", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75848965-support-stickiness-and-evangelism", "free": false, "summary": "Covers tactics to make a design system sticky: onboarding new hires through it, pair sessions and workshops, case studies and conference talks, open sourcing, and a design system council like the one Etsy established.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75850029", "course": "atomic-design-cert", "position": 169, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Make the Design System Public", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75850029-make-the-design-system-public", "free": false, "summary": "Makes the case for making a design system public: faster access for product teams, contractors, and agencies, a recruitment boost (Jina Anne's path to Salesforce's Lightning Design System), and little risk of exposing anything sensitive.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75850037", "course": "atomic-design-cert", "position": 170, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Make Your Design System Bigger", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75850037-make-your-design-system-bigger", "free": false, "summary": "Explores expanding a design system across technologies (web frameworks, CMSs, native apps, other software), using Material Design's implementations like MUI, Angular Material, Flutter, and Compose, and wrapping web components for frameworks like React.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75850039", "course": "atomic-design-cert", "position": 171, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Supporting Native Applications", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75850039-supporting-native-applications", "free": false, "summary": "Explains why native iOS and Android apps can't consume web components but can consume design tokens transformed with tools like Style Dictionary, and shows how Shopify's Polaris documented platform differences, deferring to native conventions.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75850057", "course": "atomic-design-cert", "position": 172, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Technology Specific Recipes and Smart Components", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75850057-technology-specific-recipes-and-smart-components", "free": false, "summary": "Covers technology-specific recipes and smart components (AG Grid data tables, United's seat picker, form validation wrappers, payment and type-ahead components) that wire presentational components to services, usually owned by product teams.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75850061", "course": "atomic-design-cert", "position": 173, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "AI & Design Systems", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75850061-ai-design-systems", "free": false, "summary": "Frames making design systems last in the AI age, arguing the system's constraints can keep generative AI on the rails, and outlines three uses: strengthening design system assets, building better products faster, and ephemeral, hyper-personalized UI.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75850146", "course": "atomic-design-cert", "position": 174, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Keeping Up to Speed", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75850146-keeping-up-to-speed", "free": false, "summary": "Points to resources for keeping up with the design system landscape: the course Slack community, design.systems, Stu Robson's newsletter, Into Design Systems, Ben Callahan's Redwoods community, and designsystems.media.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75850150", "course": "atomic-design-cert", "position": 175, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Chapter 5 Review", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75850150-chapter-5-review", "free": false, "summary": "Recaps the chapter: a design system as living infrastructure needing a dedicated team, a service-oriented culture rather than pattern police, pace layers, a conversation-driven governance model, measuring success, and growing the ecosystem.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75850151", "course": "atomic-design-cert", "position": 176, "chapter": { "position": 5, "title": "Chapter 5: Maintaining Design Systems" }, "title": "Next Steps, Activities, and Homework", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75850151-next-steps-activities-and-homework", "free": false, "summary": "Assigns homework: mapping design system team roles, placing the culture on the collaborative and controlling spectrum, comparing support to Nord Health's, meeting with a product team, adapting the governance FigJam, and settling versioning and ecosystem layers.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "75850289", "course": "atomic-design-cert", "position": 177, "chapter": { "position": 6, "title": "Course Outro" }, "title": "Go Forth and Be Atomic!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/75850289-go-forth-and-be-atomic", "free": false, "summary": "Closes the course with a Benjamin Franklin quote on change, thanks pre-order customers, asks for reviews, and points to the Subatomic design tokens course, the AI and Design Systems course with Ian Frost and TJ Pitre, and Brad's newsletter.", "tags": [], "presenters": [ "Brad Frost" ] }, { "id": "66719215", "course": "atomic-design-cert", "position": 178, "chapter": { "position": 7, "title": "Preorder Intro" }, "title": "👋 Hello there, preorder friend!", "kind": "lesson", "url": "https://courses.bradfrost.com/courses/take/atomic-design/lessons/66719215-hello-there-preorder-friend", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "66715574", "course": "atomic-design-cert", "position": 179, "chapter": { "position": 7, "title": "Preorder Intro" }, "title": "So...Is Atomic Design Dead?", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/atomic-design/texts/66715574-so-is-atomic-design-dead", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "66714642", "course": "atomic-design-cert", "position": 180, "chapter": { "position": 7, "title": "Preorder Intro" }, "title": "Design Systems Resources", "kind": "htmlitem", "url": "https://courses.bradfrost.com/courses/take/atomic-design/texts/66714642-design-systems-resources", "free": false, "summary": null, "tags": [], "presenters": [] }, { "id": "66713438", "course": "atomic-design-cert", "position": 181, "chapter": { "position": 7, "title": "Preorder Intro" }, "title": "Download the Atomic Design Ebook", "kind": "download", "url": "https://courses.bradfrost.com/courses/take/atomic-design/downloads/66713438-download-the-atomic-design-ebook", "free": false, "summary": null, "tags": [], "presenters": [] } ] }