[Figma ETC] 디자인 시스템(Design System)에 관하여

디자인 시스템(Design System)이란?

[사진] 디자인 시스템을 구성하는 모든 요소 (출처/참고 : Anatomy of a Design System, Adobe 디자인 시스템 디자이너 Nate Baldwin)

디자인 시스템이란 서비스를 만들면서 사용한 공통 서체, 컬러, 인터랙션 및 각종 정책과 규정에 관한 모든 컴포넌트를 정리해놓은 것을 의미한다. 디자인 시스템을 이용하면 재설계하는데 시간을 낭비하지 않고 제품을 업데이트하는데 시간을 효율적으로 쓸수 있는 장점이 있으며 불필요한 커뮤니케이션을 없앨 수 있다. 디자인 시스템을 사용하게 되면 정해진 가이드라인에 따라 구축을 하면 되고 변경사항이 생길때는 디자인 시스템을 수정하여 지속적인 유지 관리가 가능하다. 만약 디자인 시스템이 없다면 어떤 디자이너와 개발자 프로젝트를 맡는지에 따라 미묘한 차이가 생기고 정돈을 위한 추가작업이 들어가야 할수도 있기 때문에, 처음부터 이런 차이가 생기지 않도록 관리해야 전체적으로 디자인에 일관성이 잡히고 비효율적으로 디자인하는 시간도 줄일 수 있다. 보통 디자인 시스템 도입을 고민하는 시점은 일반적으로 프로덕트의 기능을 확장할 때, 디자인 팀원이 많아졌을때 서비스에서 일관된 경험을 제공하기 위해서이다.

 

Foundation : 타이포그라피, 컬러, 아이콘에 대한 정리

• 타이포그라피 : font-size, font-weight, align 별로 따로 정리하여 모든 속성을 text style로 등록.
• 컬러 : primary, secondary, gray 컬러의 1~9까지의 컬러 값 정리.
• Iconography : 아이콘 제작가이드. 가이드에 맞춰 아이콘 제작 방법을 통일하고 아이콘의 성격과 크기에 따라 분류.

 

Component : 정의된 Foundation을 바탕으로 button, text field, chip과 같은 컴포넌트 제작.

• button은 유형에 따라 lable만 있는것/ icon+lable/ text button으로 존재. 버튼 사이즈별로 (s,m,l) 구분해줄것. Padding 을 고정으로 하고 텍스트 길이에 따라 자동으로 조절되는 버튼 심볼 작업을 해두면 편리함.

• style에 따라 구분 : contained / outlined/ text
• status에 따라 구분 : enabled, disabled, hover

 

디자인시스템 작성 순서

1. 로고 정리

2. 서체 정리

3. 색상 정리

4. 컴포넌트(요소)정리

    a) 디자인요소

• Grid
• Layout
• Shadow

    b) 프론트 요소

• Navigation
• Buttons
• Dropdown menu
• Selection