31 lines
2.9 KiB
Markdown
31 lines
2.9 KiB
Markdown
# Design Systems 101: What Is a Design System?
|
|
|
|
|
|
|
|
## Metadata
|
|
- Author: [[Figma]]
|
|
- Full Title: Design Systems 101: What Is a Design System?
|
|
- Category: #articles
|
|
- Document Tags: [[design]]
|
|
- URL: https://www.figma.com/blog/design-systems-101-what-is-a-design-system/
|
|
- Archive: https://web-archive.alecodes.page/bookmarks?bf=1&search=&title=Design%20Systems%20101%3A%20What%20Is%20a%20Design%20System%3F
|
|
> [!tldr]
|
|
> A design system is a collection of standards and components that ensures consistency and efficiency in digital products. It helps designers work faster by providing reusable elements, allowing them to focus on more complex challenges. Implementing a design system can improve collaboration and streamline workflows across teams, making the design process smoother.
|
|
|
|
## Highlights
|
|
a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent. [View Highlight](https://read.readwise.io/read/01j7gbyb49nhm0t495h8wwakph))
|
|
|
|
While both are integral to design systems, component libraries focus on UI elements like buttons and input fields, whereas pattern libraries address broader design solutions like navigation flows or data display. [View Highlight](https://read.readwise.io/read/01j7gc0j368sfxwsseakv52kky))
|
|
|
|
While often used interchangeably, design systems are more holistic, including coding standards and usability, while a style guide is a subset focusing primarily on visual elements like colors, typography, and imagery. [View Highlight](https://read.readwise.io/read/01j7gc2ge1rj1tzkkmz150837e))
|
|
> [!note]
|
|
> Holistic: An approach that considers the entirety of a system or concept rather than focusing on individual components in isolation. In various fields, including medicine, education, and design, holistic perspectives emphasize the interconnectedness and interdependence of elements, advocating for comprehensive solutions that address the whole rather than just parts. This methodology often leads to more effective and sustainable outcomes by recognizing how components influence one another within a larger context.
|
|
> ---
|
|
> Styles guides focus only on visuals meanwhile design systems care about usability as a whole
|
|
|
|
Design systems support designers by solving for repeatable patterns and freeing them up to solve other challenges. [View Highlight](https://read.readwise.io/read/01j7gd50z8w8q8x5qc40hmx2yk))
|
|
|
|
 [View Highlight](https://read.readwise.io/read/01j7gdbmnzscxkqtkbjndqecaa))
|
|
|
|
 [View Highlight](https://read.readwise.io/read/01j7gdbt1d0mvvc58jfhg57t03))
|
|
|