[서적]2024 UX/UI디자인이 쉬워지는 디자인 시스템 실무_유명회사디자인시스템리스트
디자인 시스템의 정의
재사용이 가능한 디자인 구성 요소의 모음
1. 구글 : 머터리얼 디자인 시스템
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
https://www.figma.com/community/file/1035203688168086460
Material 3 Design Kit | Figma
Introducing Material Design 3 Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started. Visualize d
www.figma.com
2. 애플 : 휴먼 인터페이스 가이드라인
https://developer.apple.com/design/
Design - Apple Developer
Find documentation and resources for designing great apps for Apple platforms.
developer.apple.com
https://www.figma.com/community/file/1253443272911187215
Apple Design Resources - visionOS | Figma
Updated February 12, 2024 See the Change Log for details Apple’s initial visionOS design kit for Figma contains a comprehensive set of UI components, views, system interfaces, text styles, color styles, and materials. All of the core ingredients you need
www.figma.com
3. 마이크로소프트 : 플루언트 디자인
https://fluent2.microsoft.design/
Fluent 2 Design System
Develop Find installation guides and tooling tips Get started →
fluent2.microsoft.design
https://www.figma.com/community/file/836835755999342788
Microsoft Fluent system iconography | Figma
This is a set of the Microsoft Fluent system icons used for products across Microsoft. The Fluent icons are friendly - including rounded corners, simplified shapes and come in 2 themes: Regular & Filled. This file also comes with detailed guidance on icon
www.figma.com
4. IBM : 카본 디자인 시스템
https://carbondesignsystem.com/
Carbon Design System
Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contri
carbondesignsystem.com
https://carbondesignsystem.com/designing/kits/figma/
Carbon Design System
Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contri
carbondesignsystem.com
5. G마켓 디자인 시스템
Gmarket Design System
G마켓의 브랜드 정체성, 사용성, 일관성을 고려한 디자인 시스템의 가이드라인을 소개합니다.
gds.gmarket.co.kr
6. 스타벅스 브랜드 구축 사례
Starbucks Creative Expression
You are using an unsupported browser. Please upgrade your browser to improve your experience. (close) Our newexpression.It all starts here. Use this guide as a high-level overview of how the Starbucks brand comes to life.MessageCanvas support required.As w
creative.starbucks.com
7. 라인 컬러 시스템
LINE Design System
LINE Design System is an integrated set of guidelines for components, interaction methods, and other aspects that contribute to LINE's design and user experience.
designsystem.line.me
8. 삼성 컬러 시스템
https://developer.samsung.com/design/
Design | Samsung Developers
Inspired by Humans, Creating the Future.
developer.samsung.com
9. 우버의 컴포넌트 사례
https://baseweb.design/
baseweb.design
10. 쏘카의 디자인 시스템 개요
SOCAR FRAME · zeroheight
socarframe.socar.kr
11. 쇼피파이의 달력 설정 패턴 예시
Shopify Polaris
Build. Contribute. Evolve. Shape the merchant experience for Shopify’s core product, the admin.
polaris.shopify.com
12. 에어비엔비 전용 서체 Cereal
Say Hello to Airbnb Cereal
A new typeface that takes Airbnb from button to billboard
airbnb.design
13. 스카이스캐너의 아이콘 사례
https://www.skyscanner.design/
Welcome to Backpack
Backpack is Skyscanner's design system, a collection of guidelines, components and tools for creating intuitive traveller-first experiences
www.skyscanner.design
디자인 시스템의 구조
1. 개요 Overview
2. 파운데이션 Foundation
3. 컴포넌트 Components
4. 패턴 Pattern
ex)
Shopify Polaris
Build. Contribute. Evolve. Shape the merchant experience for Shopify’s core product, the admin.
polaris.shopify.com
5. 기타