디자인 시스템 구축기: Figma에서 React까지 완전 자동화

디자이너와 개발자의 완벽한 협업

디자이너와 개발자 간의 협업을 혁신적으로 개선한 디자인 시스템 구축 여정을 공유합니다. Figma Tokens, Style Dictionary, Storybook을 활용한 완전 자동화 파이프라인 구축 과정을 살펴보겠습니다.

1. 디자인 토큰 정의

Figma에서 정의된 디자인 토큰을 JSON 형태로 추출합니다:

{
  "color": {
    "primary": {
      "value": "#3182F6"
    },
    "secondary": {
      "value": "#8B5CF6"
    }
  }
}

2. Style Dictionary로 플랫폼별 변환

하나의 디자인 토큰에서 CSS 변수, SCSS 변수, JavaScript 객체 등 다양한 포맷으로 자동 변환합니다.

3. 자동화된 워크플로우

Figma에서 토큰이 업데이트되면 자동으로 GitHub Actions가 트리거되어 모든 플랫폼의 코드가 업데이트됩니다.

4. 성과와 교훈

이 시스템 도입 후 디자인-개발 간 불일치가 90% 감소했고, 새로운 컴포넌트 개발 시간이 50% 단축되었습니다.