디자인 시스템에 맞는 코드 자동화

디자인팀과의 협업, 이렇게 접근했습니다.

디자인팀의 작업 방식에 대한 이해와 존중
- 디자인팀의 도구(Figma 등), 워크플로우, 제약 사항에 대한 이해 필요
- 일방적인 요구가 아닌, 상호 존중의 자세로 협업
디자인 시스템에 대한 기본 이해
- 개발자도 디자인 시스템의 개념 및 구성요소(컴포넌트, 토큰, 패턴 등)를 이해해야 함
- 디자인 시스템을 이해하면 다음과 같은 효과 기대:
  - 디자이너의 의도를 정확히 파악
  - 커뮤니케이션 비용 절감
  - 중복 작업, 재작업 최소화
디자인 토큰 및 Local Style 활용
디자인 토큰 (Design Tokens)
- 색상, 폰트, 여백, 크기 등 스타일 속성을 추상화하여 재사용 가능하게 만드는 방식
- 토큰 기반으로 개발 시, 스타일 일관성과 유지보수성 대폭 향상
Local Style (Figma 기준)
- 디자인 토큰이 도입되지 않은 조직에서도 Figma의 Local Style을 활용 가능
- 색상, 텍스트 스타일, 효과(예: 그림자)를 스타일로 등록 → 일관성 확보
자동화 방법
- Figma의 JSON Export 기능을 통해 스타일 정보 추출
- 색상, 폰트, spacing, border radius 등 정보를 개발 코드에 자동 반영 가능

✅ 기대 효과

1. 컴포넌트 재사용성 향상

정의된 컴포넌트 기반으로 개발 → 중복 구현 방지
재사용 가능한 구조 → 생산성과 유지보수성 증가

2. 스타일 누락 방지

텍스트 스타일 등에서 흔히 빠지는 box-shadow, text height, line height 등을 정확히 반영 가능

3. SSOT(Single Source of Truth) 기반 협업 최적화

스타일 정보의 단일 소스 정의로 디자인-개발 간 불일치 최소화
동일한 기준으로 컴포넌트 구성 → 디자인/개발 품질 일관성 유지

🎯 디자인 토큰 자동화 적용을 위한 전체 프로세스 구조

1. Figma 토큰 추출

디자인 시스템 내에서 정의된 색상, 폰트, 여백 등의 스타일 속성을 디자인 토큰으로 정리
Figma의 토큰 관리 도구(예: Tokens Studio 등)를 통해 토큰 데이터를 추출

2. JSON 포맷으로 내보내기

추출된 디자인 토큰을 JSON 파일로 내보냄
이 JSON은 후속 자동화 프로세스의 입력값으로 활용됨

3. `token-transformer` 적용

JSON 내 변수 참조값(예: {color.primary})을 실제 값으로 변환
token-transformer를 사용하여 원시 값(raw value) 을 포함한 JSON 생성

4. 변환된 JSON 생성

이 단계에서의 결과물은 참조값 없이 순수한 실제 값이 포함된 JSON
이후 스타일 변환 도구에 직접 사용할 수 있는 구조로 정리됨

5. `style-dictionary` 변환 적용

style-dictionary를 통해 디자인 토큰을 다양한 플랫폼 포맷으로 변환
지원 포맷 예시:
- Flutter (Dart 코드)
- Web (CSS, SCSS, JS)
- Android (XML)
- iOS (JSON, Swift)

6. 최종 CSS 또는 플랫폼별 스타일 파일 생성

변환된 결과물로 실제 프로젝트에 적용 가능한 스타일 정의 파일(CSS, Dart 등) 생성
디자인과 개발 간 동기화된 스타일 기준으로 유지 가능

✅ Flutter 코드 자동 생성을 위한 도구 비교 및 선택 과정

도구 테스트 목록

도구명

특징

Composition Token 지원

amzn/style-dictionary

널리 사용되는 디자인 토큰 변환기

✅ (단, 유료 Pro 버전에서만 지원)

aloisdeniel/style-dictionary-figma-flutter

Flutter 특화 확장

❌ Composition Token 미지원

두 도구 모두 Color, Spacing, Radius 등 기본 토큰(Primitive Token) 에 대한 Flutter 코드 생성은 가능
하지만, TextStyle 같은 복합 토큰(Composition Token) 생성에는 제약이 있음

✅ 최종 선택: `figma2flutter` 플러그인

figma2flutter는 Figma 스타일 데이터를 기반으로 TextStyle 포함 전체 디자인 토큰을 Flutter 코드로 자동 변환 가능
Composition Token까지 지원되는 유일한 무료 오픈소스 대안
최종적으로 디자인 시스템 전체를 Flutter 코드로 일관되게 적용 가능

프로세스 진행하기

Figma의 Tokens Studio 플러그인을 사용하면 디자인 토큰을 쉽게 추출할 수 있습니다.

Figma에서 Tokens Studio 플러그인을 설치합니다 (https://tokens.studio)

컬러, 타이포그래피, 여백 등의 디자인 토큰을 설정합니다.
- import Local Styles or Design Token
- 현재 파일은 비어 있으며, 다음 단계에서 토큰을 추가할 것입니다.

Tokenization 된 Json 확인

💡 예제 JSON:

{
  "Semantic": {
    "Static": {
      "white": "#ffffff",
      "grey_background": "#e7e9ef",
      "grey_disabled": "#b6bcc8",
      "black": "#16171b"
    },
    "Accent": {
      "primary": "#122699",
      "primary_light": "#dfe0ff",
      "primary_disabled": "#dbdef0"
    },
    "Status": {
      "error": "#dc0c0c",
      "caution": "#f1a107",
      "success": "#11a277",
      "progress": "#287eff",
      "fail": "#636874",
    }
  },
  "Colors": {
    "grey": {
      "10": "#16171b",
      "20": "#1e2025",
      "30": "#444855"
    }
  }
}