Design Systems Repo
PAID
Top design systems, tools, and documentation on Design Systems Repo—examples, enterprise lists, React and UX references. Open the site if the embed is limited.
DesignSystems.com — Figma’s design systems publication
Tool powered by DesignSystems.com on DesignSystems.com.
Figma's DesignSystems.com: learn how to create a design system, explore grid systems, spacing, iconography design, and design system examples from Airbnb and more. Open in a new tab if the embed is limited.
What is DesignSystems.com?
DesignSystems.com is a publication from Figma focused on design systems: how teams build, govern, and scale shared UI, content, and code. The site covers how to create a design system from scratch, grid systems, spacing and layout guides, iconography design, and real-world design system examples from Airbnb, Atlassian, GitHub, and Salesforce. Key sections include the getting-started path for new practitioners, the space-grids-and-layouts guide for spacing website and grid design patterns, the iconography guide for iconography design, and open-design-systems for design system examples. You will also find the Christopher Alexander pattern language essay and talks from Schema, Figma’s design systems conference.
What you can explore
Typical content tracks on the publication.
- Getting started and foundations: Learn how to create a design system with guides on grids, iconography, typography, and content strategy for system work.
- Grids, spacing, and layouts: The space-grids-and-layouts section covers grid systems in graphic design, spacing website patterns, and concept grids for responsive systems.
- Iconography design guide: Articles on iconography design, guide icon naming, and iconography database organization for cross-platform systems.
- Design and development: Articles on code collaboration, semantic design tokens, and accessible systems.
- Schema by Figma: Talks and recaps from Schema events in different regions when published on the site.
- Design system examples: Case studies and design system examples from Airbnb, Airtable, Atlassian, GitHub, and Salesforce with links to Figma community files.
How to use this page
Move from reading to a practical next step for your system.
- Match articles to your maturity: Skim "getting started" when you are new; use ops pieces when you already ship components.
- Note governance patterns: Capture how other teams handle contributions, naming, and review before you copy structure.
- Connect articles to your stack: Figma features mentioned on the site evolve; verify behavior in your current Figma and code environments.
- Respect data policies on the source: Newsletter and account flows follow Figma; read live Terms and Privacy on the source site when you subscribe.
Tips for design system research
Publications help when you translate patterns to your context.
- Prefer principles over screen grabs: Study why a team structured tokens or roles a certain way before copying component chrome.
- Pair with your accessibility checklist: Articles on inclusion still need verification against your product's WCAG goals and assistive tech mix.
- Revisit on a cadence: Design systems and Figma features change; bookmark decisions with dates in your internal docs.
- Study grid systems and spacing examples: The space-grids-and-layouts guide shows real grid design patterns. Apply spacing website principles to your own responsive system.
Great for
Roles that own or support a shared system.
- Design system leads and maintainers: Compare governance stories and community examples when planning roadmap and contribution rules.
- Product designers and design engineers: Align on tokens, components, and documentation before handoff and implementation.
- Engineering and design ops: Read how organizations scale process across platforms and codebases.
- Students and new practitioners: Use the getting-started path to learn how to create a design system and baseline vocabulary for systems work.
Why read DesignSystems.com
Directory placement and a stable local URL.
- Lives in Design system: Listed with hubs, principles, and related references.
- Stable directory path: Link `/designsystems-com` in wikis or PRs for a single entry point.
- We do not host the articles: Content updates on the source site at designsystems.com.
Frequently Asked Questions
Have questions? We have answers.
Related tools
More tools from Learn & References.
Component Gallery
FREEUI component examples on component.gallery—carousel, tabs, accordion, dropdown, color picker. Compare design systems; open the site if the embed is limited.
World Time Buddy
FREEWorld clock and time zone converter for comparing time zones at a glance and scheduling meetings across regions; open the site if the embed is limited.
Paper Sizes
FREEPaper sizes on papersizes.io—envelope dimensions, photo sizes, Legal, Tabloid, A5. Charts in mm and inches; open the site if the embed is limited.
Design principles
FREEProduct and digital design principles on principles.design—Airbnb, HubSpot, org design, web design system examples. Open the site if the embed is limited.
Fluent 2 Design System
FREEMicrosoft Fluent 2 on fluent2.microsoft.design—Fluent UI components, iconography, cross-platform guidance. Open the site if the embed is limited.