Resources
- AI & Design SystemsCourse
A course on making design systems work with AI tools and agents. More than 20 hours across 200 videos, plus installable agent skills, a Slack community and live jam sessions every two weeks. Paid.
- Category
- Course
- From
- Brad Frost, TJ Pitre and Ian Frost
- Link
- aianddesign.systems
- ARIA Authoring Practices GuideReference
A guide to building accessible widgets, setting out the keyboard and ARIA behavior for around 30 patterns, from accordions and comboboxes to tabs and tree views, each with a working example. Free.
- Category
- Reference
- From
- W3C Web Accessibility Initiative
- Link
- w3.org
- Design System OpsTool
A skill pack for Claude Code that takes on the operational work of running a design system: token and component audits, deprecation plans, decision records, adoption reports and stakeholder briefs. Its 22 skills are grouped into triage, audit, govern, document, validate and communicate, with multi-step workflows for jobs like a full diagnostic or a migration. Free and open source.
- Category
- Tool
- From
- Murphy Trueman
- Link
- designsystemops.com
- Design Systems WTFPodcast
A podcast where each short episode answers one practical design systems question, like what to automate. New episodes every two weeks, with more than 60 so far. Free.
- Category
- Podcast
- From
- zeroheight
- Link
- zeroheight.com
- Design Tokens Format Module 2025.10Specification
The first stable version of the standard format for design tokens, published in October 2025 alongside companion Color and Resolver modules. It's the interchange format most token tools now read and write, from Figma and Penpot to Style Dictionary and Tokens Studio. Free.
- Category
- Specification
- From
- W3C Design Tokens Community Group
- Link
- designtokens.org
- Figma Console MCPTool
An MCP server that lets AI assistants read, edit and check a Figma design system, through a Desktop Bridge plugin or Figma's REST API. Beyond writing to Figma, it exports variables to formats like DTCG JSON, CSS and Tailwind, scores how closely a component matches its code, and runs accessibility checks on both the design and the code. Free and open source.
- Category
- Tool
- From
- Southleft
- Link
- docs.figma-console-mcp.southleft.com
- Level Up with FigmaCourse
A self-paced Figma course built around structure, systems and scale. Thirty recorded lessons cover components, auto layout, variables and variants, with the working Figma files included. Paid.
- Category
- Course
- From
- Joey Banks
- Link
- levelupwithfigma.com
- LucideTool
An open-source set of 1,891 icons on a 24px grid with a 2px stroke, which started as a fork of Feather. Tree-shakable packages cover React, Vue, Svelte, Solid, Angular, Astro, React Native and more, there's a Figma plugin, and it's the default icon set in shadcn/ui. Free and open source.
- Category
- Tool
- From
- Lucide contributors
- Link
- lucide.dev
- Motion Design SystemReference
An exploration of motion as a foundation of a design system, built as three tiers of tokens: primitive durations and easings, semantic tokens named for their use, like hover or focus, and choreography for multi-step motion stored in the DTCG format. Each choreography token carries a reduced-motion fallback. Early, with articles and token generators still to come. Free to read.
- Category
- Reference
- From
- Ryan Smith
- Link
- motiondesignsystem.org
- Open UIReference
Research into how components work across design systems, comparing names, anatomy and behavior for dozens of components, which the group then turns into proposals for native browser controls. Customizable select and popover both came out of its work. Free.
- Category
- Reference
- From
- W3C Open UI Community Group
- Link
- open-ui.org
- Phosphor IconsTool
An icon family of 1,512 icons, each drawn in six weights: thin, light, regular, bold, fill and duotone. Packages cover React, Vue, the web, Flutter and more, with plugins for Figma and Sketch, which makes it a good fit for products that need more than one visual weight. Free and open source.
- Category
- Tool
- From
- Helena Zhang and Tobias Fried
- Link
- phosphoricons.com
- SpecsTool
A Figma plugin and command-line tool that turns components into structured specs, covering anatomy, props, variants and tokens as schema-valid YAML or JSON that engineers and agents can both read. Freemium, with the schema and CLI open source.
- Category
- Tool
- From
- Nathan Curtis
- Link
- specsplugin.com
- StorybookTool
The open-source workshop most design system teams use to build, document and test components in isolation. Recent versions add an MCP server, so coding agents can read the component library, write stories and run tests. Free and open source.
- Category
- Tool
- From
- Storybook
- Link
- storybook.js.org
- Style DictionaryTool
A build system that takes design tokens, including the DTCG format, and turns them into platform code for CSS, JavaScript, iOS, Android and more. It started at Amazon, is now community-maintained, and is the default token pipeline for a lot of systems. Free and open source.
- Category
- Tool
- From
- Style Dictionary
- Link
- styledictionary.com
- Subatomic: The Complete Guide to Design TokensCourse
A video course on design tokens. More than 13 hours on token architecture in both Figma and code, naming, and the workflows that keep tokens governed over time. Paid.
- Category
- Course
- From
- Brad Frost and Ian Frost
- Link
- designtokenscourse.com
- TerrazzoTool
Open-source tools for turning DTCG design tokens into code, with plugins for CSS, Sass, JavaScript, Tailwind, Swift and more. It's built by one of the format's editors as a native alternative to Style Dictionary for teams on the new format. Free and open source.
- Category
- Tool
- From
- Drew Powers
- Link
- terrazzo.app
- The Component GalleryReference
A reference of interface components, each one shown through real examples from public design systems: around 60 components and more than 2,600 examples drawn from 95 systems. Every component lists the other names it goes by, so an accordion also turns up as a disclosure or a collapse. Free.
- Category
- Reference
- From
- Iain Bean
- Link
- component.gallery
- The Iconography EncyclopediaReference
A field guide to the vocabulary of icon design, with 121 entries running from abstract symbols and anchor points to key lines and stroke weight. Entries can be browsed as a directory, an atlas or a glossary, filtered by themes like construction, meaning and systems, and many come with interactive diagrams. Free to read.
- Category
- Reference
- From
- The Iconography Company
- Link
- encyclopedia.iconography.co
- zeroheightTool
A documentation platform for design systems that brings content synced from Figma, Storybook and code repos into one site. It also manages tokens and has an MCP server, so AI agents can read the guidance as they work. Free plan, with paid plans for larger teams.
- Category
- Tool
- From
- zeroheight
- Link
- zeroheight.com