2주 차 - 학습했던 내용 요약

디자인 시스템과 피그마 배리어블, 디자인 토큰 등에 관한 이론을 공부했습니다.

배리어블 계층과 이름을 어떻게 정하는지에 대하여 익혔습니다.

color, spacing, radius 등 foundation 스타일과 배리어블 등록을 했습니다.

✔ 디자인 시스템이란

재사용 가능한 컴포넌트, 패턴 그리고 가이드

✔ 디자인 시스템의 6가지 구성

1. 디자인 원칙 : 디자인 시스템이 왜 필요한가 (비전, 미션, 가치 설정)

2. 스타일 가이드 : 브랜드를 나타내는 스타일 가이드

EX) 로고, 칼라, 레이아웃/그리드, 간격, 아이콘, 모션, 일러스트레이션, 사진, 디자인 토큰, 타이포그래피, 톤 오브 보이스

3. 컴포넌트 라이브러리 : 재사용이 가능한 UI 기본 요소 (코드 포함)

EX) 버튼, 인풋 필드, 체크 박스, 라디오 등

4. 패턴 라이브러리 : 자주 반복 사용되는 디자인 템플릿

EX) 로그인 폼, 탐색 메뉴, 컨텐츠 카드 배치

5. 문서화 : 가이드라인, 컴포넌트, 패턴, 스타일 가이드 등을 문서화 한 자료

6. 시스템 관리/운영 : 디자인 시스템을 효과적으로 관리하고 유지하기 위한 프로세스와 규칙

EX) 업데이트, 학습 자료, 등 (=가버넌스)

✔ 디자인 시스템이 있으면 좋은 점

디자인 일관성 유지, 브랜드 강화, 효율적인 개발, 시간 단축, 팀 간 협업 강화, 빠른 온보딩, 유지 보수 용이, 높은 품질의 경험

✔ 배리어블 계층

Component (=component)

Alias (=semantic)

Global (=primitive)

Raw value

2주 차 - 회고

이론을 복습하고 Foundation 만드는데 시간이 많이 걸려 컴포넌트를 아직 만들어보지 못했어요 😭

조금 더 부지런히 작업을 해보겠습니다..!

3주 차 - 다짐 및 계획

파운데이션 설정과 문서화를 빨리 끝내고 다음주에는 컴포넌트들을 모두 만들겠습니다.