The question "What is a design system medium?" is unclear. To make it more understandable, let's rephrase it as: What are the different ways a design system can be delivered or accessed? This focuses on the various media through which a design system is presented and utilized.
A design system, as a collection of reusable UI elements that product teams use and build on to create a consistent user experience across digital products, needs a medium to exist and be accessible. This medium is the way the design system is presented, documented, and utilized by the design and development teams. It's how the system's components, guidelines, and principles are communicated and implemented.
Here's a breakdown of common design system mediums:
Design System Delivery Methods
-
Documentation Website: A dedicated website that serves as the central repository for all design system elements.
- Example: Material Design's website, or Atlassian's design system.
- Benefits: Centralized, easily accessible, searchable, supports rich media (images, videos).
- Features:
- Component libraries with usage guidelines.
- Style guides outlining typography, color palettes, and spacing.
- Principles and philosophy behind the design system.
- Contribution guidelines for maintaining and evolving the system.
-
Component Library (Code): A collection of reusable code components (e.g., React, Angular, Vue) that developers can import and use directly in their projects.
- Example: A React component library using Storybook for previewing and documenting components.
- Benefits: Ensures code consistency, speeds up development, reduces redundancy.
- Features:
- Pre-built UI components with consistent styling and behavior.
- Easy integration with existing development workflows.
- Automated testing and versioning.
-
Design Tool Library: A library of design assets (e.g., Figma, Sketch, Adobe XD) that designers can use to create consistent designs.
- Example: A Figma library containing components, styles, and templates aligned with the design system.
- Benefits: Ensures visual consistency, speeds up design process, facilitates collaboration.
- Features:
- Pre-built components with consistent styling.
- Shared styles for typography, colors, and effects.
- Templates for common UI patterns.
-
Style Guides (PDF/Print): While increasingly rare, some organizations may still utilize printed or PDF-based style guides, especially for foundational elements.
- Example: A PDF document outlining the brand's visual identity, typography guidelines, and logo usage.
- Benefits: Can be useful for offline reference or for communicating the design system to non-digital teams.
- Limitations: Difficult to keep up-to-date, limited interactivity.
-
Living Style Guide: Combines code components and documentation into a single, interactive experience.
- Example: A tool like Storybook or Docz used to generate a website directly from code components, including live examples and documentation.
- Benefits: Ensures that documentation stays synchronized with the code, provides an interactive way to explore components.
-
Internal Wiki/Documentation Platform: Utilizing an existing internal platform to house the design system's documentation.
- Example: Confluence or Notion pages dedicated to the design system.
- Benefits: Leverages existing infrastructure, accessible to the entire organization.
- Limitations: May lack specialized features for design system documentation.
Choosing the Right Medium
The best medium (or combination of mediums) depends on the specific needs of the organization, the size and complexity of the design system, and the tools and workflows used by the design and development teams. Often, a multi-faceted approach is best, utilizing a documentation website for comprehensive information, code and design tool libraries for practical implementation, and potentially a living style guide for interactive exploration.
