디자인 시스템은 일관성 있는 사용자 경험을 제공하고, 디자인 및 개발의 효율성을 높이는 중요한 도구다. 국내외 기업들은 자사의 브랜드 정체성과 사용자 니즈를 반영한 디자인 시스템을 구축하며 이를 통해 최적의 UI/UX를 제공하고 있다. 특히 Figma와 같은 도구는 이러한 디자인 시스템을 활용하기 쉽게 만들어, 디자이너와 개발자 모두에게 필수적인 협업 도구로 자리 잡았다.
이 글에서는 국내외 주요 기업들의 Design System Library 링크를 정리했다. 각 라이브러리는 Figma 커뮤니티 또는 공식 웹사이트에서 확인할 수 있으며, 일부는 무료로 다운로드하거나 복제하여 활용할 수 있다. 다만, 이 자료들은 상업적 사용을 목적으로 하지 않는 개인 학습 및 프로젝트에만 활용하길 권장한다. 저작권과 관련된 세부사항은 각 라이브러리의 제공처 가이드를 반드시 확인하기 바란다.
국내 기업 서비스 Design System Library
1. 원티드 (구인구직 플랫폼) *피그마
https://www.figma.com/community/file/1355516515676178246/wanted-design-library
2. 밀리의서재 *피그마
https://www.figma.com/community/file/1054670787974508295/millie-design-library-2-0
🔗 https://brunch.co.kr/@milliedesign/9
3. Line
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
4. 지마켓
Gmarket Design System
G마켓의 브랜드 정체성, 사용성, 일관성을 고려한 디자인 시스템의 가이드라인을 소개합니다.
gds.gmarket.co.kr
해외 기업 서비스 Design System Library
1. Material Design 3 (Google) *피그마
Google의 공식 Material Design 3 라이브러리. Android와 웹 디자인을 위한 핵심 컴포넌트와 스타일 가이드 포함.
https://www.figma.com/community/file/1035203688168086460/material-3-design-kit
2. Ant Design System (공식은 아닌 듯) *피그마
React 기반 UI 프레임워크인 Ant Design의 디자인 시스템.
https://www.figma.com/community/file/831698976089873405/ant-design-open-source
3. iOS Design Kit
Apple Human Interface Guidelines(HIG)을 기반으로 한 iOS 디자인 시스템.
https://developer.apple.com/design/human-interface-guidelines
Human Interface Guidelines | Apple Developer Documentation
The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.
developer.apple.com
4. Carbon Design System (IBM) *피그마
IBM의 오픈소스 디자인 시스템.
5. Uber Base Web Design System *피그마
Uber의 웹 애플리케이션 디자인 시스템.
https://www.figma.com/community/file/805195278314519508/base-gallery
6. Shopify *피그마
Shopify의 디자인 시스템.
https://www.figma.com/@Shopify
+ Figma/Community/UI Kits 로 찾아봐도 좋은 자료들이 많다. *피그마
+ Figma에서 제공하는 Simple Design System *피그마
https://www.figma.com/community/file/1380235722331273046/simple-design-system
+디자인 시스템 링크 정리
https://github.com/alexpate/awesome-design-systems?tab=readme-ov-file
GitHub - alexpate/awesome-design-systems: 💅🏻 ⚒ A collection of awesome design systems
💅🏻 ⚒ A collection of awesome design systems. Contribute to alexpate/awesome-design-systems development by creating an account on GitHub.
github.com
+ https://storybook.js.org/showcase/projects
Projects | Component Encyclopedia | Storybook
Projects that use Storybook
storybook.js.org
'Design > 03. Product Designer Tip' 카테고리의 다른 글
| [UX] UX 법칙들 정리 사이트 공유 (1) | 2024.12.11 |
|---|---|
| [UX] UX 심리학 브런치북 공유 (0) | 2024.12.04 |
| [Figma] 컴포넌트(Component) 기본 개념 & 활용 & 규칙 정리 (1) | 2024.12.03 |
| [Figma] 베리어블(Variable) 기본 정리 (0) | 2024.12.03 |
| [figma] 디자인 시스템 네이밍 규칙, 이렇게 하면 정리 끝! (1) | 2024.12.02 |