디자인 시스템이 없으면 모든 디자이너와 개발자는 약간 다른 파란색, 새로운 버튼 스타일, 다른 간격 값 등 스스로 작은 결정을 내립니다. 1년이 지나면 제품에는 수십 개의 거의 중복된 제품이 생깁니다. 디자인 시스템은 이러한 반복적인 결정을 공유된 결정으로 대체합니다.
대부분의 디자인 시스템에는 세 개의 레이어가 있습니다. 디자인 토큰은 원시 결정을 저장하는 color.primary, space.4 또는 Motion.duration.short와 같은 명명된 값입니다. 버튼, 입력, 카드, 대화 상자와 같은 구성 요소는 해당 토큰으로 구축되며 모든 상태를 포함합니다. 지침은 각 구성 요소를 사용하는 방법, 레이블과 메시지를 작성하는 방법, 적용되는 접근성 규칙을 문서화합니다.
디자인 시스템은 구성 요소 라이브러리인 디자인 도구와 개발자가 설치하는 패키지인 코드의 두 위치에 있습니다. 이 두 가지를 동기화하는 것이 가장 어려운 부분입니다. 코딩된 버튼이 더 이상 설계된 버튼과 일치하지 않으면 사람들은 시스템을 더 이상 신뢰하지 않게 됩니다.
모션도 시스템에 속합니다. 기간, 여유 곡선 및 스프링 설정은 토큰이 될 수 있으며 대화형 구성 요소에는 호버, 누르기, 로드 및 전환에 대해 정의된 동작이 필요합니다. 우리가 만드는 ExodeUI는 해당 동작을 상태 및 스프링 물리학과 함께 하나의 열린 파일에 저장하므로 동일한 구성 요소가 React, Vue, SwiftUI, Flutter 및 기타 프레임워크에서 재생됩니다.
잘 알려진 공개 사례로는 Google의 Material Design, Apple의 휴먼 인터페이스 지침, IBM의 Carbon 및 Shopify의 Polaris가 있습니다. 이를 읽는 것은 성숙한 시스템이 어떻게 구성되어 있는지 확인하는 좋은 방법입니다.