· 1 분 분량
핸드오프에서 살아남는 토큰
Figma와 코드 사이에서 디자인 토큰이 어긋나지 않게 지켜 준 세 가지 규칙.
- 디자인 시스템
- 프로세스
토큰 시스템은 첫날 망가지지 않습니다. 여섯 달 뒤, 급한 수정 하나가 색상을 하드코딩하고 아무도 눈치채지 못할 때 무너집니다.
1. 값이 아니라 결정에 이름을 붙이기
color-danger-surface는 리브랜딩에도 살아남지만 red-100은 그렇지 않습니다. 토큰이 무엇을 결정하는지 말할 수 없다면, 그건 토큰이 아닐 가능성이 큽니다.
2. 소스는 하나, 출력은 둘
토큰은 JSON 파일 하나에 두고, 거기서 Figma 변수와 CSS 커스텀 속성을 함께 생성합니다. 출력물은 아무도 손으로 고치지 않습니다.
3. 잘못된 것은 시끄럽게
컴포넌트에 hex 값을 직접 쓰면 린트가 경고합니다. 일주일은 귀찮지만, 그 뒤로는 그냥 코드베이스의 규칙이 됩니다.
가장 좋은 디자인 시스템은 쓰고 있다는 사실조차 잊게 만드는 시스템입니다.