디자인 시스템 문서 사이트 사례
디자인 시스템 공개 준비 2편
본 글은 Cloudforet 디자인 시스템인 미리내(Mirinae) 문서화 작업을 위한 자료 조사를 위해 작성했습니다.
디자인 시스템 공개 준비 시리즈
디자인 시스템 문서 사이트 사례 (본편)
목차
- Atlassian design system by Atlassian
- Canvas by Workday
- Carbon design system by ibm
- Cloudscape by aws
- Dell design system by dell
- DRUIDS by Datadog
- Fluent UI by Microsoft
- Garden by Zendesk
- Gestalt by pinterest
- Lightening design system by salesforce
- Material 3 by Google
- Polaris by Shopify
- Primer by Github
Atlassian Design System
아틀라시안(Atlassian)은 이 단일 디자인 시스템을 기반으로 하여 지라(Jira), 컨플루언스(Confluence) 등의 여러 브랜드의 제품을 갖고 있습니다.
Canvas
Workday의 오픈소스 디자인 시스템으로 단순해 보이지만, 이 디자인 시스템에는 토큰, 콘텐츠 디자인, 접근성, 패턴, 세계화, 에셋 등 다양한 세부정보가 포함되어 있습니다.
Carbon Design System
IBM의 제품과 디지털 경험을 위한 오픈소스 디자인 시스템입니다. IBM 디자인 언어를 기반으로, 이 시스템은 작업코드, 디자인 도구와 리소스, 휴먼 인터페이스 가이드라인으로 구성되어 있으며 활발한 커뮤니티의 컨트리뷰터들로 구성됩니다.
Cloudscape
React로 만들어진 AWS의 디자인 시스템으로, 실용적인 예제와 패턴, 데모 등을 포함하여 풍부한 콘텐츠로 구성되어 있습니다. 사용자 인터페이스 가이드라인, 프론트엔드 컴포넌트, 디자인 리소스를 포함하고 있으며, 규모에 맞게 직관적이고 매력적이며, 포용적인 사용자 경험을 구축하기 위한 개발자 도구를 제공합니다.
Dell Design System
2번째 버전의 델 디자인 시스템으로, 모든 페이지에서 사용자 피드백을 수집할 수 있습니다.
DRUIDS
DRUIDS는 ‘Datadog Reusable User Interface Design System’의 약자이며, Datadog UI의 기반입니다. 알파벳순으로 나열된 타 디자인시스템의 컴포넌트와 달리 카테고리별(form, dialog 등)로 분류가 되어 있는 것이 특징입니다. 일부 페이지의 경우 상단에 검색 기능이 있어 편리합니다.
Fluent UI
마이크로소프트의 디자인 시스템으로 리액트, 웹, 윈도우, iOS, 안드로이드, macOS 그리고 크로스 플랫폼까지 플랫폼 별로 가이드를 제공합니다. components를 controls로 표기하고 있으며, 카테고라이징 되어 있습니다.
Garden
Zendesk의 디자인 시스템입니다. 콘텐츠 디자인에 대한 정의가 정교합니다.
Gestalt
pinterest 디자인 시스템으로 기능을 형식(form) 보다 우선시합니다. 로드맵을 제공하며, web, android, iOS 별로 컴포넌트를 제공합니다. 컴포넌트 상태(deprecated, planned, partially ready, ready)를 제공합니다.
Lightning Design System
Salesforce의 라이트닝 디자인 시스템에는 원칙, 디자인 언어, 모범 사례 등을 위한 리소스와 예제가 포함되어 있습니다. 개발자는 픽셀에 집중하는 대신 애플리케이션 로직에 집중할 수 있고, 디자이너는 사용자 경험과 상호 작용 및 흐름에 집중할 수 있도록 합니다.
Material Design 3
디자인 시스템의 아버지 매터리얼 디자인입니다. 사용자 인터페이스를 디자인하고 만드는데 필요한 반응형 가이드라인, 컴포넌트 등을 포함한 디자인 시스템으로 모범 사례를 포함하고 있습니다. 디자이너와 개발자 간 협업을 간소화하고, 심미적이고 유용한 제품을 구축할 수 있도록 지원합니다.
Polaris
디자인 시스템의 발전을 이끌고 있는 shopify의 디자인 시스템입니다. Shopify를 이용한 관리자 경험 향상을 목표로 하는 디자인 시스템입니다.
Primer
Github의 디자인 시스템으로 CSS framework와 React 컴포넌트를 사용할 수 있으며, Figma 디자인도 포함되어 있습니다.
※ 이 글은 아래의 글들을 일부 번역, 일부 의역, 참고하여 작성하였습니다. 더 많은 목록을 보고 싶으시다면 아래 링크를 참고해 주세요.
