한 줄 정의
Stripe, Figma, Linear, Notion, Google 등 글래시컬 디자인 팀들이 피그마 라이브러리의 파편화와 핸드오프 깨짐을 막고 제품 개발 속도를 최대 38% 향상시키기 위해 적용하는 10가지 엔터프라이즈 컴포넌트 아키텍처 규격이다.
핵심 요지
- 1. 토큰 우선 원칙 (Token-First):
gray-100대신color/background/subtle처럼 의미론적(Semantic) 토큰을 변수(Variables)에 정의하여 다크 모드/테마 전환 시 파괴 방지. - 2. 슬래시 기반 명명 규칙 (Slash-Based):
Component / Type / Variant / State구조로 에셋 패널 계층 자동 분류 및 검색 최적화. - 3. 베이스 컴포넌트 + 배리언트: 마스터 컴포넌트 1개에 Variant 속성을 부여해 상태 파편화 방지 및 60~80% 배리언트 축소.
- 4. 예외 없는 Auto Layout: 정적 캔버스 제거, 반응형 Flexbox 구조 구현.
- 5. 컴포넌트 속성 (Component Properties): Boolean, Text, Instance Swap 활용.
- 6. 아토믹 디자인 중첩 (Atoms -> Molecules -> Organisms): 하위 인스턴스 중첩 구조로 변경 사항 상위 자동 전파.
- 7. 라이브러리 모듈화 (Split Libraries): Tokens, Foundations, Core, Pattern 파일 분리로 피그마 성능 및 거버넌스 확보.
- 8. 코드와 일치시킨 Naming:
<Button variant="primary" />규격과 1:1 맞춤. - 9. 파일 내 문서화 (In-Figma Doc): Do/Don’t, Spacing, Accessibility 노트를 피그마 내 탑재.
- 10. 거버넌스 및 기여 규칙: 주요 변경(Breaking Change) 승인 절차 구축.
상세
실증 연구 지표에 따르면 디자인 시스템 구축 팀은 디자인 프로젝트 효율성 38% 향상, 개발 팀 효율성 31% 향상, 완성 디자인 작업량 34% 증가(팀원 3.5명 추가 효과)를 기록한다.
아키텍처 레이어 세부:
- Tokens:
category/role/variant명명 규칙 적용. HEX 값 직저장 금지. - Base Component: 공통 모서리 곡률/패딩을 마스터에 감싸 포커스 상태 변경 시 단 1곳만 수정.
- In-Figma Doc: 외부 노션 대신 피그마
Documentation전용 페이지에 Overview, Anatomy, Spacing, Accessibility 표기.
예시
- 코드 일치 명명:
Figma: Button / Primary->Code: <Button variant="primary" />(오개념인 “Big Blue Button” 배제). - 효율성 통계 수치: 디자인 프로젝트 효율 38% 향상, 개발 효율 31% 향상, 34% 작업량 증가.
충돌
- 단일 거대 피그마 파일 vs 모듈형 분할 라이브러리: 단일 파일에 1만 개 레이어를 집어넣으면 피그마 성능이 급락한다. 위험성이 가장 낮은 ‘토큰 라이브러리’부터 독립 파일로 분리해야 피그마 로딩 속도가 유지된다.