프론트엔드 디자인 시스템

디자인 시스템이란?

프롤로그 피그마

필요성

1. 통일성 있는 UX 제공
2. 컴포넌트 재사용을 통한 중복 컴포넌트 제거

사용방법

1. 공통으로 사용되는 UI는 컴포넌트화한다.
2. 페이지를 컴포넌트화한다.
3. 페이지 UI에 변경이 생겼을 경우, 페이지 컴포넌트의 인스턴스를 통해 변경을 테스트하고 변경 사항을 원본 페이지 컴포넌트에 반영한다.

고려해야 할 것

1. 컬러
2. 공통적으로 사용되는 UI 패턴 혹은 컴포넌트
3. 레이아웃
4. 폰트
   1. font-family
   2. font-size
   3. color
   4. font-weight
5. 아이콘 스타일

참고 자료

컴포넌트 강의

Auto Layout 강의

iOS 15 UI Kit

Flamingo