🗄
디자이너의 서랍, 2020/
⚙
Design System
Design SystemDesign System
⚙

Design System

이 글은 브런치에 쓴 디자인 시스템에 대한 글을 보충하기 위해 만들어진 노션 문서입니다. 좀 더 자세하고, 다양한 시각과 정보를 얻기 위해 관리 되고 있습니다. 문의나 의견은 pliossun@gmail.com 으로 보내주세요.
 
디자인 시스템은 회사 제품에 대한 직원의 신뢰를 높이고 브랜드 평판에 긍정적인 영향을 미칩니다. 그것의 통합은 좋은 홍보 단계가 될 수 있으며 디지털 서비스 시장에서 회사의 위치를 향상 시킵니다. - Dmitry Plotnikov, 'How to get executive buy-in for your design system approach'
 
디자인 가이드 혹은 시스템을 만드는 글을 처음보고 내가 느낀 것은 규칙을 만들어가는 과정의 합리성과 목적이었다. 그런데 이후 디자인 시스템에 대해서 브런치 글을 볼 때 느끼는 것은 지나친 형식 주의다. 가이드가 사용되지 않는 것은 그것이 문서에만 있기 때문이다. 그림자를 만드는 사람이 아니라 그림자만 쫓아갈 때, 우리는 쉽게 방향을 잃는다. 과정은 열려 있어야 한다. 그리고 유연해야 한다. 그리고 유용함을 잊지 말아야 한다. 사용하지 않는 시스템은 그냥 가이드이고, 낭비가 된다.

만들기

개요

The ROI of design systems: the what, why, who, and how
Defined as "the use of individually distinct functional units, as in assembling an electronic or mechanical system", modularity is what helps some designers and builders across many industries build apartment units in just a few days and a 57-story skyscraper in two weeks. How, exactly?
The ROI of design systems: the what, why, who, and howThe ROI of design systems: the what, why, who, and how
https://uxdesign.cc/the-roi-of-design-systems-the-what-why-who-and-how-1392d02f80e5
The ROI of design systems: the what, why, who, and how
The Main Pillars of Effective Design Systems
Here we'll present a quick overview of the key components of a design system, how it can help your brand grow, and how you can convince stakeholders to build, adopt, and maintain one. Many big organizations make use of design systems to guide the development of their products.
The Main Pillars of Effective Design SystemsThe Main Pillars of Effective Design Systems
https://medium.com/thinking-design/the-main-pillars-of-effective-design-systems-e65cc2cd921e
The Main Pillars of Effective Design Systems
What is a Design System?
Defining what a Design System is and what it means for an organization can be tricky. In this post, we'll take the conversation of Design Systems past style guides and component libraries and get into breaking down silos between development and design.
What is a Design System?What is a Design System?
https://medium.com/@rangleio/what-is-a-design-system-7a3d63edfcf7
What is a Design System?What is a Design System?
blog.prototypr.io
https://blog.prototypr.io/the-abcd-of-systems-thinking-85bc191b561c
Why Designing Your Own UI Style Guide System Matters
Before diving deep into designing a product, I like to tidy-up the style guide system that I reuse for various applications and platforms. Let me walk you through this process that I know you'll find helpful, too!
Why Designing Your Own UI Style Guide System MattersWhy Designing Your Own UI Style Guide System Matters
https://medium.com/niftit-sharepoint-blog/why-designing-your-own-ui-style-guide-system-matters-ffd9a7930748
Why Designing Your Own UI Style Guide System MattersWhy Designing Your Own UI Style Guide System Matters
Design Systems: Rules Versus Norms
Atomic Design "...introduces a methodology for thinking of our UIs as thoughtful hierarchies..." writes Brad Frost. His system begins with atoms, the smallest documented units - think buttons, typographical styles, and the like. Combining atoms together creates a molecule. Multiple molecules and/or atoms in combination form an organism, and so on up the hierarchy.
Design Systems: Rules Versus NormsDesign Systems: Rules Versus Norms
https://blog.prototypr.io/design-systems-rules-versus-norms-3fb62146979b
Design Systems: Rules Versus Norms
How to get executive buy-in for your design system approach
Today, design systems are mentioned in almost every conference dedicated to Internet marketing. Media makes ratings of the most successful cases, and big brands are actively working on their implementation. In this article, we'll talk about why design systems are needed and how to correctly implement them in business.
How to get executive buy-in for your design system approachHow to get executive buy-in for your design system approach
https://medium.muz.li/how-to-get-executive-buy-in-for-your-design-system-approach-8bdf2e5976c9
How to get executive buy-in for your design system approach
Building a Design System? Start with a Map
Building a System is not an easy task, but it is an enjoyable one. Discovering connections, creating new ones, improving the parts and seeing the whole evolved in shape and purpose are some of the things that make it such an interesting project to work on.
Building a Design System? Start with a MapBuilding a Design System? Start with a Map
https://blog.prototypr.io/building-a-design-system-start-with-map-909aa4baf41f
Building a Design System? Start with a Map
Inside a Design System: What You Need to Know and Why
If you've been paying attention to the world of design, chances are you've heard about design systems. They are the latest trending topic in the world of design perhaps to the dismay (or delight) of designers everywhere. "Another thing to learn?" some designers may cry but design systems have great benefits.
Inside a Design System: What You Need to Know and WhyInside a Design System: What You Need to Know and Why
https://uxplanet.org/inside-a-design-system-what-you-need-to-know-and-why-198ab645d5a3
Inside a Design System: What You Need to Know and Why
Design Systems Handbook
A design system unites product teams around a common visual language. In this book, learn how you can create a design system and help your team improve product quality while reducing design debt.
Design Systems Handbook
https://www.designbetter.co/design-systems-handbook?fbclid=IwAR17QmJjjPuvwPLNe04lnmrXucH96FyZKbybvg2_zaHoBe1f_hFx54955Ng
Design Systems HandbookDesign Systems Handbook
국내 스타트업들의 디자인 시스템은? 그리고 디자인 시스템에 대한 사례 확인과 공부를 할 수 있는 곳은?
얼마 전, 디자인 시스템과 관련된 아주 흥미로운 질문과 답변을 보게 되었습니다. ' Yes, design systems will replace design jobs' 이란 내용이었죠. 뭐? 디자인 시스템이 디자이너를 대체할거라고? 대부분의 디자이너가 '디자인 시스템'은 디자이너란 포지션을 대체하지 못할 것이라고 답변한 것과 달리, 에어비앤비와 페이스북의 첫 디자인 시스템 프로젝트를 이끌었던 'Adam Michela'은 '아니!' 라고 말했습니다.
국내 스타트업들의 디자인 시스템은? 그리고 디자인 시스템에 대한 사례 확인과 공부를 할 수 있는 곳은?국내 스타트업들의 디자인 시스템은? 그리고 디자인 시스템에 대한 사례 확인과 공부를 할 수 있는 곳은?
http://icunow.co.kr/design-system/
국내 스타트업들의 디자인 시스템은? 그리고 디자인 시스템에 대한 사례 확인과 공부를 할 수 있는 곳은?국내 스타트업들의 디자인 시스템은? 그리고 디자인 시스템에 대한 사례 확인과 공부를 할 수 있는 곳은?
Naming Tokens in Design Systems
Design tokens have provided a visual foundation of many design systems since Salesforce pioneered the concept in 2014. I wrote an impassioned article on design tokens in 2016, and my energy on the topic continues to grow. As systems of visual style spread across a widening landscape of components, platforms and outputs, design tokens - and their names - are increasingly important.
Naming Tokens in Design SystemsNaming Tokens in Design Systems
https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676
Naming Tokens in Design Systems
The state of design systems in 2020
Back in 2017 I started a new job architecting and building design systems at a fortune 500 tech company. During these three years there have been drastic improvements to the design system ecosystem. Design tools like Figma with a focus on building and supporting design systems have started growing in popularity.
The state of design systems in 2020The state of design systems in 2020
https://uxdesign.cc/the-state-of-design-systems-in-2020-d8f580c54b39
The state of design systems in 2020
Design Systems: Who Uses Them, and What Value They Deliver to Organizations - Cantina
I like this article, but it strikes me that this is too narrowly focused on tackling the issue of production workflow. The article reads as irrefutable evidence that "if you want to improve the efficiency and accuracy of your production workflow, the boundary between design and execution must fall."
Design Systems: Who Uses Them, and What Value They Deliver to Organizations - CantinaDesign Systems: Who Uses Them, and What Value They Deliver to Organizations - Cantina
https://cantina.co/design-systems-who-uses-them-and-what-value-they-deliver-to-organizations/?fbclid=IwAR224995CNaHqXs8-iqWLH05NxY6grImIKoner7809IOnxg3jRVnPBMZCtA
Design Systems: Who Uses Them, and What Value They Deliver to Organizations - CantinaDesign Systems: Who Uses Them, and What Value They Deliver to Organizations - Cantina
The ABCs of Design Systems
Measure how people are using (or not using) your design system There are two groups who need to adopt your design system: designers who use UI Kits and engineers who use a code library such as React. Design adoption is easy - just swap out the UI Kit and voila.
The ABCs of Design SystemsThe ABCs of Design Systems
https://medium.com/curiosity-by-design/the-abcs-of-design-systems-b1dc6198bb7c
The ABCs of Design Systems
Exploring the souls of design systems | Inside Design Blog
Reed Enger is an artificial intelligence experience designer at Google. He's also the founder of Trivium Art History, a digital platform that shares the stories behind 30,000 years of creativity. After graduating from the University of Northwestern in 2009, Reed left behind his training as a print designer.
Exploring the souls of design systems | Inside Design BlogExploring the souls of design systems | Inside Design Blog
https://www.invisionapp.com/inside-design/design-systems-have-souls/?utm_campaign=Weekly%20Digest&utm_source=hs_email&utm_medium=email&utm_content=75829889&_hsenc=p2ANqtz-_N8UIPwPRineyiclPMxEkxU7PakRyPoX8TzF36ZcPGJb0hcFVlxX5c545ifsYmGBplEpExjHeKxLrGSrZvP0cKvG1Vdg&_hsmi=75882364
Exploring the souls of design systems | Inside Design BlogExploring the souls of design systems | Inside Design Blog
디자인 시스템을 구성하는 방법 - guleum - Medium
본 글은 Colm Tuite님이 작성한 글을 허락을 받아 제 나름대로의 의역을 덧붙여 번역한 것입니다. 어줍짢은 영어실력에 번역기와 사전 배경지식들을 더해 번역한 것으로 오역이 많을 수 있다는 점 미리 양해 부탁드립니다. 저는 항상 디자인 시스템에 관한 질문을 받아왔습니다. 그래서 지난 몇 년 동안 Marvel, Bantam 그리고 Modulz와 같은...
디자인 시스템을 구성하는 방법 - guleum - Medium디자인 시스템을 구성하는 방법 - guleum - Medium
https://medium.com/guleum/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%84-%EA%B5%AC%EC%84%B1%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-beefa8214884
디자인 시스템을 구성하는 방법 - guleum - Medium
 

구축

The Design System Encyclopedia
Before we get started, I've documented everything listed here plus way more in Airtable so that you can sort, filter, organize, and plan. You gain access to the Design System Encyclopedia...
The Design System EncyclopediaThe Design System Encyclopedia
https://medium.com/@jon.moore/the-design-system-encyclopedia-91670b838c9f
The Design System Encyclopedia
How to create a great Design System for your brand
Words by Simon Vieira & Olivia Perry. "How to create a great Design System for your brand" is published by Simon Vieira in UX Collective.
How to create a great Design System for your brandHow to create a great Design System for your brand
https://uxdesign.cc/how-to-create-a-great-design-system-for-your-brand-5a28f0ab7ae4
How to create a great Design System for your brand
디자인 시스템 문서 구조화하기
디자인 시스템 문서 만들기 - 1편 | *본 글은 디자인 뉴스레터 디독에서 발행한 글입니다. 해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv 요약: 디자인 시스템 문서화에 대한 글. 디자인 시스템을 작업자들이 보기 편한 형태의 콘텐츠로 가공하는 방법을 이야기합니다. 1)오디언스, 2)전달할 콘텐츠, 3)콘텐츠 분배 구조에 대해 고려해야 할 점들을 개
디자인 시스템 문서 구조화하기디자인 시스템 문서 구조화하기
https://brunch.co.kr/@thinkaboutlove/341
디자인 시스템 문서 구조화하기디자인 시스템 문서 구조화하기
Building a compelling business case for a Design System
The art of convincing business brains that a design system is a worthwhile investment for your product team. Design Systems have reached peak popularity. It's no secret that this has been an outrageously popular topic over the past few years. It seems like every product team has either built one, is building one, or wants to build one.
Building a compelling business case for a Design SystemBuilding a compelling business case for a Design System
https://uxdesign.cc/building-a-compelling-business-case-for-a-design-system-489899cd0751
Building a compelling business case for a Design System
Grouping components in atomic design systems
1] March 20, 2020 Update : Reader Luca Brognara made me realize input groups can easily be mistaken for groups of input fields. To prevent confusion, I've crossed input groups from the molecule's classification.
Grouping components in atomic design systemsGrouping components in atomic design systems
https://uxdesign.cc/grouping-components-in-atomic-design-systems-4d6e2095ea45
Grouping components in atomic design systems
Design Systems - Chapter 7, Planning and Practicalities by Alla Kholmatova
To get support from the business, you need to demonstrate that an effective design system will help to meet business goals faster and at lower cost. In other words, you need to make a business case for it. 1. Time saved on designing and building modules Naturally, reusing an existing element, rather than building one from scratch, is quicker.
Design Systems - Chapter 7, Planning and Practicalities by Alla KholmatovaDesign Systems - Chapter 7, Planning and Practicalities by Alla Kholmatova
https://uxplanet.org/design-systems-chapter-7-planning-and-practicalities-by-alla-kholmatova-b87b7ab1a8cf
Design Systems - Chapter 7, Planning and Practicalities by Alla KholmatovaDesign Systems - Chapter 7, Planning and Practicalities by Alla Kholmatova
Design System Tiers
Time To Mature Systems To Support Levels of Work Our design system, the one-source-of-truth. Singular, central, perfect. The one place you find all the answers. Are systems destined to have one set of only the best things? I'm not convinced. Why limit design systems to only things of the highest quality, relevant to everyone?
Design System TiersDesign System Tiers
https://medium.com/eightshapes-llc/design-system-tiers-2c827b67eae1
Design System TiersDesign System Tiers
Design System Sketch files, Two years later
SimilarWeb design assets architecture, explained and revisited Whenever I talk about Sketch before the age of Sketch libraries I feel like going into an explanation of a strange hack that everyone did with icons and layer fills: Before you could use layer styles overrides in symbols (Version 51, July 10 2018), we used to create small symbols that are just coloured squares, and used icons and buttons as masks for these symbols.
Design System Sketch files, Two years laterDesign System Sketch files, Two years later
https://medium.com/swlh/design-system-sketch-files-two-years-later-48ece881a49f
Design System Sketch files, Two years later
Design System based on the 8pt Grid
Colors are going to be our first building block. When designing digital products, we're going to need the following colors as a minimum: Primary: Usually the brand color. Secondary (Optional): Should complement the primary and not compete for attention, it's purpose is to signal elements with a secondary importance.
Design System based on the 8pt GridDesign System based on the 8pt Grid
https://medium.com/swlh/design-system-based-on-the-8pt-grid-2473ca5f0ae1
Design System based on the 8pt Grid
Patterns: The Stories of our Design Systems
Design Patterns are some of the most over-used concepts in design today. And we all know what happens when you have some ideas all over the place. We start repeating them like parrots and applying them to everything, therefore distorting their meaning. We end up missing the point with over-complicated concepts and lots of fancy words.
Patterns: The Stories of our Design Systems
https://blog.prototypr.io/patterns-the-stories-of-our-design-systems-dc5f788f33b9
Patterns: The Stories of our Design Systems
Design Systems 101: What, Why, & How
Design systems are everywhere these days. It seems that every leading technology organization has published a design system, including Salesforce, Shopify, Airbnb, Spotify, Google, and Microsoft. Design systems are even spawning their own specialized UX and product roles. So, how did all of this come about? Why are design systems suddenly so popular?
Design Systems 101: What, Why, & HowDesign Systems 101: What, Why, & How
https://medium.com/thinking-design/design-systems-101-what-why-how-e58ee0e7a48
Design Systems 101: What, Why, & How
When not to call a Blue a Blue - functional colour names for Design Systems
As a contractor, I frequently work with different companies and teams which included some good designers. However, regardless of where each design team might be in terms of skill level, as soon as you start handling multiple designs, organising all the elements between them starts to get tricky.
When not to call a Blue a Blue - functional colour names for Design SystemsWhen not to call a Blue a Blue - functional colour names for Design Systems
https://uxdesign.cc/when-not-to-call-a-blue-a-blue-functional-colour-names-for-design-systems-773e2a422464
When not to call a Blue a Blue - functional colour names for Design Systems
Design systems - In the wild
If there has been one thing digital product designers have collectively drooled over in the past few years, it has to be design systems. And no wonder. The most developed design systems are the ideal of what we want our products to be - holistic, systematic and well-documented wonders.
Design systems - In the wildDesign systems - In the wild
https://uxdesign.cc/design-systems-in-the-wild-cbc863f41c2
Design systems - In the wild
Creating a UI Component Design System (step-by-step guide)
Want to learn how to create a UI system from scratch? I'm going to take you through the process of making one. I'm sure you guys will learn something new! Let's dive right in. A UI design system is a...
Creating a UI Component Design System (step-by-step guide)Creating a UI Component Design System (step-by-step guide)
https://medium.muz.li/creating-a-ui-component-design-system-step-by-step-guide-5c18b5a2f529
Creating a UI Component Design System (step-by-step guide)Creating a UI Component Design System (step-by-step guide)
The most important lessons I've learned about creating design systems have little to do with design
Designs systems are all the rage. They're discussed to the nth degree and their benefits can be very real. Yet, there's nothing easy about building a successful design system. There are a million different things that can steer you off the road and many of them have nothing to do with design.
The most important lessons I've learned about creating design systems have little to do with designThe most important lessons I've learned about creating design systems have little to do with design
https://blog.prototypr.io/the-most-important-lessons-ive-learned-about-creating-design-systems-have-little-to-do-with-design-4ceee2717298
The most important lessons I've learned about creating design systems have little to do with designThe most important lessons I've learned about creating design systems have little to do with design
medium.com
https://medium.com/bootstart/the-granger-component-taxonomy-24c795fa02fb
Building a Design System at Insticator
Fall 2019 - a year and a half into my tenure with the company when a new internal project afforded the opportunity to try a smarter approach, and after I had experienced the challenges of working without one. To increase efficiency in my own process, and to create visual consistency across Insticator products and touch points.
Building a Design System at InsticatorBuilding a Design System at Insticator
https://uxplanet.org/building-a-design-system-at-insticator-84e66dd02c4a
Building a Design System at Insticator
Design Systems at Startup Scale: Yes, Please! - Solaria Labs - Medium
As designers, we know the importance of well-crafted visual patterns. As UX practitioners, we know consistency is critical. As front-end developers, we know how much easier atomic design makes our lives. But as team members in a small business or startup ...
Design Systems at Startup Scale: Yes, Please! - Solaria Labs - MediumDesign Systems at Startup Scale: Yes, Please! - Solaria Labs - Medium
https://medium.com/solaria-labs-blog/design-systems-at-startup-scale-yes-please-dc9c35529f99
Design Systems at Startup Scale: Yes, Please! - Solaria Labs - Medium
Typography in Design Systems
Choose Fonts, Set a Hierarchy, and Integrate with Components Everyday digital interfaces include a rich variety of images, visualizations, and other pictures. However, more than anything else, they are made of words. Oh so many words. As we equip teams to design and code usable, consistent, beautiful interfaces using systems, it's essential that words depend on a strong foundation of typography.
Typography in Design SystemsTypography in Design Systems
https://medium.com/eightshapes-llc/typography-in-design-systems-6ed771432f1e
Typography in Design SystemsTypography in Design Systems
Five lessons I learned building a design system
In the last 2 years, I have worked on developing and maintaining carwow's design system. It's been my first experience of this kind, and something I've been very excited about. During this period, our team and product have grown rapidly, especially Engineering going from 10 to 40 developers.
Five lessons I learned building a design systemFive lessons I learned building a design system
https://medium.com/carwow-product-engineering/five-lessons-i-learned-building-a-design-system-443f04c6b9d1
Five lessons I learned building a design system
5 Steps for Creating a Design System
Here are the steps we followed to create our design system. We chose Sketch to create our library, and some of the recommendations will be specific to its functionality, but the concepts we cover are universal. Other tools you can use include Figma, Adobe Xd, and Adobe Illustrator.
5 Steps for Creating a Design System5 Steps for Creating a Design System
https://medium.com/beyond-360/5-steps-for-creating-a-design-system-7ac86e3808fc
5 Steps for Creating a Design System5 Steps for Creating a Design System
Should motion design guidelines appear in Design Systems? Yes!
This article is about motion design and animations for digital interfaces and it's about Design Systems as well. Design Systems are a powerful tool that I think it's worth understanding what they are and where they come from.
Should motion design guidelines appear in Design Systems? Yes!Should motion design guidelines appear in Design Systems? Yes!
https://uxdesign.cc/should-motion-design-guidelines-appear-in-design-systems-yes-9afa36efbc21
Should motion design guidelines appear in Design Systems? Yes!
Why design systems fail, and how to make them work - UX Collective
For a short period of time I worked on a design system at WebNL, an agency specialised in web design, development and marketing based in the Netherlands. Our design system was aimed at improving the bridge between the design and development of the products we're making.
Why design systems fail, and how to make them work - UX CollectiveWhy design systems fail, and how to make them work - UX Collective
https://uxdesign.cc/why-design-systems-fail-and-how-to-make-them-work-6f6d812e216d
Why design systems fail, and how to make them work - UX Collective
 

운영

Scaling design systems
The design system is having its moment. IBM, Trello, Airbnb, Google - the Fluent Design System here at Microsoft - companies are evolving their design libraries and tools into full ecosystems, giving designers a way to build cohesive, consistent experiences at scale.
Scaling design systemsScaling design systems
https://uxdesign.cc/scaling-design-systems-2d84bb0cd060
Scaling design systemsScaling design systems
How we Grew our Design System Over 5 Years of Design Experimentation
A story told by a designer and a developer from Societe Generale. The current surge in articles about design systems inspired us to talk more about what we do at Societe Generale. We've been experimenting with ours for a long time now, and as a designer who deeply cares about technical details, I personally see it as a huge achievement in my career.
How we Grew our Design System Over 5 Years of Design ExperimentationHow we Grew our Design System Over 5 Years of Design Experimentation
https://medium.com/societe-generale-design/how-we-grew-our-design-system-over-5-years-of-design-experimentation-d2c72e1ec7de
How we Grew our Design System Over 5 Years of Design Experimentation
How to test your design system | Inside Design Blog
This is an excerpt from Design Systems for Developers , the guide to design systems published by the team behind design systems component developer Storybook. Read the book for free here. In chapter 5, we automate design system testing to prevent UI bugs.
How to test your design system | Inside Design BlogHow to test your design system | Inside Design Blog
https://www.invisionapp.com/inside-design/storybook-excerpt/?utm_campaign=Weekly%20Digest&utm_source=hs_email&utm_medium=email&utm_content=77757586&_hsenc=p2ANqtz-9WkAjyh-Cr76I-dq2cswbaEHfEpqeuoLUIBxOjKz-AyYxaYHn3C6Awhom4mONmN0Qj1cakZnBS3wqQSOlMRPyKZ1CVTQ&_hsmi=77860376
How to test your design system | Inside Design BlogHow to test your design system | Inside Design Blog
A generative backlog for large-scale design systems
Having recently grappled with conducting a UI audit/inventory across a large suite of products, I've struck upon an interesting, light-weight approach for generating an overview of patterns, elements and metaphors across a large portfolio.
A generative backlog for large-scale design systemsA generative backlog for large-scale design systems
https://uxdesign.cc/a-generative-backlog-for-large-scale-design-systems-fee5a1c97e90
A generative backlog for large-scale design systemsA generative backlog for large-scale design systems

스케치

Why your design system needs its own Sketch plugin
Sketch plugins are amazing. There's a whole community of people building and sharing tools that enhance our workflows. I was curious about these plugins and wanted to see if I could make something myself. Turns out they're not too scary! All you need is some Javascript knowledge, a bit of time, and buckets of determination.
Why your design system needs its own Sketch pluginWhy your design system needs its own Sketch plugin
https://medium.com/yoti-design/why-your-design-system-needs-its-own-sketch-plugin-dc17bcfed565
Why your design system needs its own Sketch pluginWhy your design system needs its own Sketch plugin
Eva Design System for Sketch - uistore.design
Customizable Design System available for Sketch, with Mobile and Web implementations. The main strength of the Design System is the ability to adapt and integrate your brand making it ideal for any type of product.
Eva Design System for Sketch - uistore.designEva Design System for Sketch - uistore.design
https://www.uistore.design/items/eva-design-system-for-sketch/
Eva Design System for Sketch - uistore.designEva Design System for Sketch - uistore.design

피그마

Building a Design System Library
At the end of 2019, I helped move all of Lyft's design system from Sketch to Figma. Ironically, this was one of the last projects I worked on prior to leaving Airbnb as well. What I learned from these two experiences helped me recognize some fundamental things that everyone should consider when designing a shared library within Figma, the design tool of choice at this time.
Building a Design System LibraryBuilding a Design System Library
https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811
Building a Design System LibraryBuilding a Design System Library
Simple, reusable design system in Figma
P utting together a design system may seem like an unnecessary hassle. It's often easier to jump straight into designing things without having to worry about styles...
Simple, reusable design system in FigmaSimple, reusable design system in Figma
https://uxdesign.cc/simple-reusable-design-system-in-figma-a3a01236a7e3
Simple, reusable design system in FigmaSimple, reusable design system in Figma

사례

10 great design systems and how to learn (and steal) from them
D esign systems are all the rage and while most articles talk about what they are and best practices for creating them, at DesignerUp we've been framing them as a teaching tool with our product design students to help them better understand, explore and learn the philosophies, best practices and principles of UI design, UX and Product Design.
10 great design systems and how to learn (and steal) from them10 great design systems and how to learn (and steal) from them
https://uxdesign.cc/10-great-design-systems-and-how-to-learn-and-steal-from-them-4b9c6f168fa6
10 great design systems and how to learn (and steal) from them10 great design systems and how to learn (and steal) from them
How Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences
Microsoft has built the world's preferred productivity apps for decades. Powerful tools, such as Office, Outlook, OneDrive, and Teams, empower people around the world to achieve more. Fluent UI, a...
How Fluent UI Unlocks the Next Generation of Microsoft 365 ExperiencesHow Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences
https://medium.com/microsoft-design/how-fluent-ui-unlocks-the-next-generation-of-microsoft-365-experiences-8b24809faf06
How Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences

2019 Best Design System

10 Best Design Systems for 2019 | Webdesigner Depot
A design system helps everyone in your business to maintain brand consistency. It's a collection of guidelines that explains how your branding assets should be used in everyday communication and marketing efforts. A design system usually consists of general brand guidelines, color usage, brand tone and voice, typography, patterns, and any other visual element that helps convey your brand principles.
10 Best Design Systems for 2019 | Webdesigner Depot10 Best Design Systems for 2019 | Webdesigner Depot
https://www.webdesignerdepot.com/2019/08/10-best-design-systems-for-2019/
10 Best Design Systems for 2019 | Webdesigner Depot10 Best Design Systems for 2019 | Webdesigner Depot

Design Systems Repo

디자인 시스템 사례를 수집하는 사이트입니다. 최신 소식을 들을 수도 있습니다.
Design Systems Repo
An organized and frequently updated collection of Design System examples, resources, tools, articles and videos.
Design Systems Repo
https://designsystemsrepo.com/
Design Systems Repo

브랜드에서 디자인 시스템 사례

Your guide to design systems from the world's leading brands
Many of the world's leading brands have made their design systems public, contributing their ideas and processes to the design community at large. Their design systems bring together branding, color, tone of voice, typography, animation, data visualization, and more to form the design language that power some of the biggest brands.
Your guide to design systems from the world's leading brandsYour guide to design systems from the world's leading brands
https://www.invisionapp.com/inside-design/design-systems/
Your guide to design systems from the world's leading brandsYour guide to design systems from the world's leading brands

Uniform

Hudl Uniform
A single design system to ensure every interface feels like Hudl. From the colors we use to the size of our buttons and what those buttons say, Uniform has you covered. Check the guidelines, copy the code and get to building.
Hudl Uniform
http://uniform.hudl.com/
Hudl Uniform
Hudl Design System 가장 인상적으로 본 디자인 시스템 유지 관리도 잘 되고 있음.

Uber

Uber - 77 Things
In 2018, Uber launched its new brand positioning along with a complete new visualidentity system. On this ocasion Michael Gough, Uber's head of Design, wrote the book 77 Things. A book with 77 design principles for those who work with Uber Design and t...
Uber - 77 Things
https://www.behance.net/gallery/73413305/Uber-77-Things?fbclid=IwAR1Y1wXDKY9DJ2_tEN3XO6ixV0T26KGlIGQEqmK06nAya5vw27pvuqA7dhA
Uber - 77 ThingsUber - 77 Things
Uber - 77 Things 77th: Design for Pattern
우버에서 2018년에 거대한 디자인/비주얼 아이덴티티 시스템을 만들고, 그 결과물 중의 하나로 출판물을 만들었습니다.

스포티파이

The Paradox of Design Systems
디자인 시스템의 모순 | *스포티파이 디자인 블로그에 2018년 12월 4일에 기고되었던 글을 번역한 것입니다. (스포티파이의 시니어 프로덕트 디자이너 JOSH MATEO와 BRENDON MANWARING이 기고) 다수의 의역이 있으며 혹시나 치명적인 오역이 있다면 DM으로 말씀부탁드립니다. 원문: https://spotify.design/articles/2018-12-04/the
The Paradox of Design SystemsThe Paradox of Design Systems
https://brunch.co.kr/@jihere1001/27
The Paradox of Design SystemsThe Paradox of Design Systems
스포티파이의 디자인 시스템 구축 사례입니다. 스포티파이의 디자이너들은 디자인 시스템을 만드는 일이 제한이 아니라 그 자체가 커뮤니케이션이 되도록 데이터 테이블을 기반한 시스템 구성을 시도했습니다. 이는 역설적으로 구분을 만드는 일이 구분을 허무는 일이 되었습니다.

ColorsMineral UI

Designing Systematic Colors - UX Planet
How to make themable, flexible, WCAG 2.1 compliant color ramps for a design system Mineral UI is the open source design system that CA Technologies is building for use by all of our products.
Designing Systematic Colors - UX PlanetDesigning Systematic Colors - UX Planet
https://uxplanet.org/designing-systematic-colors-b5d2605b15c
Designing Systematic Colors - UX Planet
Designing Systematic 시니어 Product Designer Jeeyoung Jung은 웹접근성 보장을 위한 WCAG 2.1 지침, 특히 그래픽 명도 대비를 준수하는 체계적인 컬러를 만드는 방법을 공유합니다.

인비전

Download our example design system and kickstart your own | Inside Design Blog
Let's be honest-all of the discussion around design systems can feel a little like getting pelted with buzzwords. Sure, you can read about the theory and tenets of a good system, ( and you should), but sometimes it's easier just to get into one and poke around.
Download our example design system and kickstart your own | Inside Design BlogDownload our example design system and kickstart your own | Inside Design Blog
https://www.invisionapp.com/inside-design/design-system-manager-walkthrough/?utm_campaign=Weekly%20Digest&utm_source=hs_email&utm_medium=email&utm_content=68585685&_hsenc=p2ANqtz-_k_2zMaaqG3PquWJgC7K-dX8uRSYjWG_cm5kHpOaARH92Prhaf_u7s2o9GFxePbR37egwQiGDS4MmX_eM6dIa5NnqHFw&_hsmi=68603901
Download our example design system and kickstart your own | Inside Design BlogDownload our example design system and kickstart your own | Inside Design Blog
인비전에서 엔터프라이즈 모델을 위해서 빠르게 만들 수 있는 디자인 시스템 키트를 제공

Lyft

디자인 시스템의 영향 - Surfit.io - Medium
배움과 창조, 교육에 대한 열정이 결국 저를 이 역할에 빠져 들게 만든 것 같습니다. 학교에서는 디자인 시스템에 대해 정확하게 배우지 못합니다. 그렇기 때문에 이 분야에서 성장하기 위해서는 지속적으로 배움의 자세를 갖춰야 하죠. 실수는 금물! 완벽한 정답도 없고, 회사마다 정답이 다 다르다는 것. 우리 모두는 시행착오를 통해 많은 것들을 배우고...
디자인 시스템의 영향 - Surfit.io - Medium디자인 시스템의 영향 - Surfit.io - Medium
https://medium.com/@surfit.io/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%98-%EC%98%81%ED%96%A5-4022386e0d68
디자인 시스템의 영향 - Surfit.io - Medium
Lyft는 사내의 문제를 해결하기 위해 점진적으로 디자인 시스템을 도입하고, 그 과정을 글로 정리했습니다.

Radiant

Radiant, ThoughtSpot design system
I was hired in February 2018 by the VP of Experience to build the design system of the company. A couple of attempts had been made before my time, but none had gained the necessary momentum.
Radiant, ThoughtSpot design systemRadiant, ThoughtSpot design system
https://medium.com/ccoutzoukis/radiant-thoughtspot-design-system-8789dfc79bd3
Radiant, ThoughtSpot design system

어도비 브랜드 시스템

Adobe Brand System
디자인 시스템 | D-tudy intro 잘하려고 어깨에 힘을 줄수록, 시작만 거창해졌기에 인트로는 짧게 시작하려고 한다. 이제 약 3년 정도 디자인으로 먹고살기 시작하면서, 아 이제 진짜 제대로 공부 좀 해야겠다는 생각이 들었다. 그냥 뭐든 꾸준히 연재해보려 한다. 철저히 내 기준에서 좋아 보이는 것들, 진짜 같은 것들 그냥 마구마구 정리해보고 써보아야지.
Adobe Brand SystemAdobe Brand System
https://brunch.co.kr/@712/35
Adobe Brand SystemAdobe Brand System
어도비의 여러가지 제품의 아이콘과 아이덴티티를 구성하는 시스템 구성에 대한 글
Adobe File type icon system
디자인 시스템 | 이번에 다룰 이야기는 Adobe system에 관한 두 번째 이야기로 포토샵, 일러스트 등 응용프로그램에서 저장하는 "File형식에 대한 시스템 디자인"이다. Adobe가 File type icon system이 왜 필요하게 되었는지, 어떠한 과정을 거쳐 리디자인되었는지 알아보려고 한다. 관련하여 Adobe Designer, Anny chen의 글을 바탕으
Adobe File type icon systemAdobe File type icon system
https://brunch.co.kr/@712/36
Adobe File type icon systemAdobe File type icon system
실제로 파일 시스템의 아이콘을 디자인할 때 고려해야 될 요소들에 대한 글
Building a design system - a case study
I landed my first User Experience role in 2018 at a mid-stage startup. With a customer base of over 8,000 paying users, the stakes were real. I had only a faint idea of what I had gotten into but I assumed there would be a script to follow, some direction provided, and a roadmap to complete.
Building a design system - a case studyBuilding a design system - a case study
https://uxdesign.cc/building-a-design-system-6ca7f5c8374a
Building a design system - a case study

효용

How to: measure a Design System's impact
Having a team dedicated to building out a design system can be a smart business decision that can help some companies save time and money. Saves company money As a product matures, there becomes more knowledge and on-boarding needed to understand the complexities of the system.
How to: measure a Design System's impactHow to: measure a Design System's impact
https://uxdesign.cc/how-to-measure-design-system-impact-guide-f1f9f0c3704f
How to: measure a Design System's impactHow to: measure a Design System's impact
The designer's guide to design system ROI & success
Identifying and measuring the return on investment for your design system. By its very nature, a design system is a product that serves products. It is a product that your internal staff consumes directly and your end users use vicariously. A successful enterprise design system delivers cohesive, scaleable features in a way that's efficient for both design and development.
The designer's guide to design system ROI & successThe designer's guide to design system ROI & success
https://uxdesign.cc/the-designers-guide-to-design-system-roi-success-16856038dd4d
The designer's guide to design system ROI & success
Measuring the Impact of a Design System
A few days ago I was writing my bi-annual review, and I was thinking of how I could include some meaningful metrics about the success of our design system in Badoo.
Measuring the Impact of a Design SystemMeasuring the Impact of a Design System
https://medium.com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7
Measuring the Impact of a Design SystemMeasuring the Impact of a Design System
The System Usability Scale & How it's Used in UX
Unlike something like a usability report, SUS is not diagnostic and is used to provide an overall usability assessment measurement, as defined by ISO 9241-11, which is made up of the following characteristics: Effectiveness - can users successfully achieve their objectives?
The System Usability Scale & How it's Used in UXThe System Usability Scale & How it's Used in UX
https://medium.com/thinking-design/the-system-usability-scale-how-its-used-in-ux-b823045270b7
The System Usability Scale & How it's Used in UX
 
디자인 시스템 현황 조사
모든 회사는 디자인 시스템을 구축하는 방법에 대해 서로 다른 견해를 가지고 있기 때문에 보편적인 방법이 무엇인지 분석하는 것은 어려울 수 있습니다. 디자인 시스템이 정확히 무엇이고 누가 사용할 것이고 언제 만들어야 하나요?최근에 다양한 접근 방식을 통해 모범 사례가 나타나고 있는데 우리(Figma)는 디자인 시스템 컨퍼런스를 주관한 Clarity와 협력하여
디자인 시스템 현황 조사디자인 시스템 현황 조사
https://brunch.co.kr/@ultra0034/118
디자인 시스템 현황 조사디자인 시스템 현황 조사
스타트업이 디자인 시스템을 만들어야 하는 이유
새로운 시스템을 만드는건 정말 시간이 많이 드는 일입니다. 그런데 과연 그럴만한 가치가 있는 일일까요? 스타트업이 굳이 디자인 시스템을 만들어야 하는 이유가 있을까요? 답은 "네. 당연히 그렇습니다." 그 이유에 대해서 이해하기 위해서는 버즈빌이 디자인적으로 어떤 문제를 가지고 있고 이러한 문제들을 디자인 시스템을 통해 어떻게 풀어내려고 했는지를 좀 더
스타트업이 디자인 시스템을 만들어야 하는 이유스타트업이 디자인 시스템을 만들어야 하는 이유
https://brunch.co.kr/@mobiinside/1030
스타트업이 디자인 시스템을 만들어야 하는 이유스타트업이 디자인 시스템을 만들어야 하는 이유
 

비판

Why design systems fail in product design
When you've got a new hammer, everything looks like a nail. The latest and greatest hammer in the designer's toolbox is a design system. Easily misapplied and often misunderstood, design systems are the latest in an ongoing evolution of artifacts supporting design in software delivery.
Why design systems fail in product designWhy design systems fail in product design
https://medium.com/@benludwig/why-design-systems-fail-in-product-design-f002744f26fc
Why design systems fail in product designWhy design systems fail in product design
디자인 시스템 도입에 있어서 할 수 있는 가장 멍청한 일은 모든 관점을 UX로만 생각했던 UX 열풍 초기 시절과 비슷합니다. 글쓴이는 망치를 들면 모든 것이 못으로 보인다고 경고합니다. "일관성만으로는 나쁜 경험을 좋게 만들 수 없습니다. 디자인 팀이 팀 간 의사 소통 및 협업의 필요성을 대체 할 수는 없습니다."
When your design system fails
Any mature application will eventually experience a UI identity crisis: the buttons are all over the place, the type scale is running amok, and - omg - is that a bevelled edge? Oof. You have three to four competing aesthetics dating back years. It's a mess.
When your design system failsWhen your design system fails
https://medium.com/design-paperless-post/when-your-design-system-fails-f035041ad6d2
When your design system fails
디자인 시스템이 실패하는 사례를 언급하고 현실적인 범위에서 디자인 시스템을 안착시키기 위한 팁을 제공합니다. 디자인 시스템이 새로 디자인을 만드는 것이 중요한 것이 아니라, 팀의 균형을 맞추면서 이전 제품의 상태와 계속해서 적응하기 위한 사례를 만들어 가면서 운영해야 한다는 것을 강조하고 있습니다.
Why design systems may not always be suited to startups
Startup life requires speed, agility and flexibility It's exciting to work for a newly formed startup. Startups are typically process-free, legacy-free and offer the luxury of working with the latest and most innovative technology, software and codebase. The "get shit done" mentality fuels employees with passion and drive that is...
Why design systems may not always be suited to startupsWhy design systems may not always be suited to startups
https://uxdesign.cc/why-design-systems-may-not-always-be-suited-to-startups-94dd8c4243c
Why design systems may not always be suited to startups
빠르게 성장하는 스타트업에서 디자인 시스템을 어떻게 사용해야 하는지 조언하는 글입니다. 디자인 시스템은 효율을 중요하게 생각하는 면이 있는데, 빠르게 제품이 업데이트 되면, 디자인이 양식화되고 창의성이 줄어듭니다. 그리고 시스템을 유지보수 하는데 많은 시간이 소모됩니다. 결론은 남들이 하는 것처럼 크고 무거운 시스템을 돌릴려고 하지 말고, 빠르고(speed), 민첩하고(agility), 유연한(flexibility) 디자인 시스템을 설계해야 한다는 말입니다.

관련 글(미디엄 외)

브런치

디자인 시스템과 디자이너
디자인 시스템에 대한 생각 | 내가 어릴 때는 전집의 시대였다. 전집이라는 것은 책을 한두권 사는 것이 아니라 수십 권을 한 번에 사는 방식이다. 우리집엔 윤석중 전집이란 것이 있었다.그림이 이쁘지 않았지만, 글을 읽게 되면서 여러 권 보게 되었다. 그중에 청기와 장수라는 동화가 있었다. 아주 어릴 때의 기억인 것 같다.
디자인 시스템과 디자이너디자인 시스템과 디자이너
https://brunch.co.kr/@pliossun/61
디자인 시스템과 디자이너디자인 시스템과 디자이너