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.

  1. Getting started and foundations: Learn how to create a design system with guides on grids, iconography, typography, and content strategy for system work.

  2. 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.

  3. Iconography design guide: Articles on iconography design, guide icon naming, and iconography database organization for cross-platform systems.

  4. Design and development: Articles on code collaboration, semantic design tokens, and accessible systems.

  5. Schema by Figma: Talks and recaps from Schema events in different regions when published on the site.

  6. 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.

  1. Match articles to your maturity

    Skim "getting started" when you are new; use ops pieces when you already ship components.

  2. Note governance patterns

    Capture how other teams handle contributions, naming, and review before you copy structure.

  3. Connect articles to your stack

    Figma features mentioned on the site evolve; verify behavior in your current Figma and code environments.

  4. 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.
  • 01

    Prefer principles over screen grabs

    Study why a team structured tokens or roles a certain way before copying component chrome.

  • 02

    Pair with your accessibility checklist

    Articles on inclusion still need verification against your product's WCAG goals and assistive tech mix.

  • 03

    Revisit on a cadence

    Design systems and Figma features change; bookmark decisions with dates in your internal docs.

  • 04

    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

Quick answers about this tool—open a question to read more.