당근의 오픈소스 디자인 시스템 seed-design은 토큰과 컴포넌트 스펙이 JSON으로 생성되어 있다. 이 JSON을 그대로 Figma 라이브러리로 옮기면 어디까지 자동화되는지 보고 싶었다. 결과는 변수 310개, 컴포넌트 세트 98개, 배리언트 718개. 그 과정에서 정한 규칙 세 가지를 남긴다.
규칙 1. 컬렉션 접두어는 뺀다
seed의 토큰 경로는 color.palette.gray-00처럼 컬렉션 이름부터 시작한다. Figma에서는 컬렉션이 이미 상위 개념이라 변수명에 다시 넣으면 Color / color/palette/gray-00처럼 중복된다. 그래서 컬렉션 이름을 떼고 그 아래만 변수명으로 쓴다.
| 원본 경로 | Figma 컬렉션 | Figma 변수명 |
|---|---|---|
color.palette.gray-00 |
Color | palette/gray-00 |
color.fg.neutral |
Color | fg/neutral |
dimension.x4 |
Global | dimension/x4 |
규칙 2. 시맨틱은 팔레트의 별칭이다
fg/neutral처럼 의미가 담긴 색은 값을 직접 넣지 않고 palette/gray-100의 별칭(alias)으로 연결한다. 라이트·다크 모드는 별칭이 가리키는 팔레트만 바뀌고, 컴포넌트는 시맨틱 변수만 참조한다. 이 한 줄이 지켜지지 않으면 모드 전환이 깨진다.
컴포넌트는 팔레트를 직접 만지지 않는다. 항상 시맨틱을 거친다.
규칙 3. 상태 조합이 60개를 넘으면 축에서 뺀다
버튼 하나에 variant × size × state를 전부 배리언트 축으로 넣으면 조합이 수백 개가 된다. 조합 수가 60개를 넘는 컴포넌트는 state(hover, pressed, disabled)를 배리언트에서 빼고 인터랙티브 컴포넌트 속성으로 처리했다. 라이브러리가 무거워지는 것보다 규칙이 단순한 쪽을 택했다.
숫자로 남긴 것
- 변수 310개: Global 110, Color(Light·Dark) 197, Motion 3
- 스타일 105종: 텍스트 87(Pretendard), 페인트 12, 이펙트 6
- 컴포넌트 98세트, 배리언트 718개
남은 일
아이콘은 아직 컬러가 바인딩된 사각형 플레이스홀더다. 실제 SEED 아이콘 세트로 교체해야 하고, 토큰 JSON이 바뀌었을 때 Figma 변수를 다시 동기화하는 스크립트는 세션 스크래치패드에만 있어서 저장소로 옮겨야 한다.