디자인 시스템 기초 및 확장
1일차 프레임부터 5일차 컬러 변수까지,
따로따로 배운 것들이 오늘 "디자인 시스템"이라는 하나의 이름으로 묶이더라고요.
오늘은 이걸 어떻게 공유하고 키워나가는지까지 배웠어요.
오늘 배운 네 가지
디자인 시스템이란
조각들이 하나로 묶인 일관된 체계
지금까지 배운 프레임, 오토 레이아웃, 타이포, 컴포넌트, 컬러가 사실 전부 디자인 시스템의 재료였어요.
이 재료들이 서로 연결되어 하나의 체계로 묶인 게 디자인 시스템이에요.
조각들이 따로 있으면 사람마다 다르게 쓰기 쉬운데, 시스템으로 묶이면 누가 작업해도 같은 결과가 나와요.
시스템의 구성 요소
기초(Foundation)와 컴포넌트
디자인 시스템은 크게 두 층으로 나뉘어요.
가장 아래엔 기초값(컬러·타이포·간격), 그 위엔 그 값으로 조립된 컴포넌트가 있어요.
5일차에서 배운 Primary 컬러 변수를 바꾸면,
그 변수를 쓰는 버튼 컴포넌트(4일차)가 자동으로 따라 바뀌어요. 기초가 흔들리면 안 되는 이유예요.
라이브러리로 공유하기
한 파일을 넘어 여러 곳에서 쓰기
스타일과 컴포넌트를 라이브러리로 발행하면, 다른 파일에서도 그대로 가져다 쓸 수 있어요.
한 파일 안에만 갇혀있으면 재사용의 의미가 반밖에 안 돼요.
여러 프로젝트, 여러 팀원이 같은 라이브러리를 연결해서 쓰면,
누가 어디서 작업하든 같은 색과 같은 버튼을 쓰게 돼요.
확장하기
기존 체계를 깨지 않고 더하기
제품이 커지면 새로운 컴포넌트가 계속 필요해져요.
이때 완전히 새로 만들지 않고, 기존 체계 위에 자연스럽게 얹는 게 확장이에요.
새 버튼 종류가 필요할 때 완전히 새로 그리지 않고,
4일차에서 배운 컴포넌트 속성(variant)으로 추가하면 기존 체계가 안 깨져요.
🧭 오늘의 정리
1~5일차가 재료를 하나씩 익히는 시간이었다면,
오늘은 그 재료들이 왜 그렇게 설계됐는지 전체 그림으로 이해한 날이었어요.
'Figma' 카테고리의 다른 글
| 디지털 접점 사례 분석 및 재구성 (0) | 2026.10.13 |
|---|---|
| 사용자 행동 기반 디지털 접점 설계 (0) | 2026.10.12 |
| 컬러 및 스타일 시스템 설계 (0) | 2026.10.07 |
| 한 번 만들고 계속 쓰는 UI 컴포넌트 (0) | 2026.10.02 |
| 피그마에서 타이포 다루기 (0) | 2026.10.01 |
