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

🎯 이번 작업에서 디자인팀과의 협업 방향

1. 디자인팀의 상황에 대한 공감

디자인팀의 작업 방식과 환경을 이해하고 존중하는 자세가 필요

2. 디자인 시스템에 대한 이해

협업의 효율성 향상을 위해 개발자가 기본적인 디자인 시스템 개념을 이해할 필요 있음
디자인 시스템을 이해하면 개발자가 디자이너의 의도를 더 잘 파악하고, 재작업을 줄일 수 있음

3. 디자인 토큰 & Local Style 활용

디자인 토큰을 사용하지 않는 조직이라 하더라도, Figma의 Local Style을 통해 스타일을 등록하고 관리할 수 있음
Figma JSON Export를 통해 스타일 정보 (색상, 폰트, 여백 등)를 추출하여 개발에서 활용 가능

✅ 기대 효과

🔹 컴포넌트 재사용성 향상

이미 정의된 컴포넌트를 파악하여 재사용 → 유지보수성 & 생산성 향상

🔹 누락 방지

Text Style 등에서 흔히 누락되는 box-shadow, text height, line spacing 등 세부 요소들을 정확히 반영 가능

🔹 SSOT (Single Source of Truth) 를 통한 협업 효율화

스타일 소스의 단일화를 통해 디자인-개발 간의 불일치 최소화
이미 정의된 스타일이나 컴포넌트를 재정의하지 않도록 하고, 중복 구현 방지

전체 프로세스 구조화 설명

Figma 토큰 추출
- 디자인 시스템에서 Figma 토큰을 추출합니다.
JSON으로 내보내기
- 추출한 Figma 토큰을 JSON 파일로 내보냅니다.
token-transformer 적용
- token-transformer를 사용해 변수 참조값을 실제 값(원시 값)으로 변환합니다.
raw value가 포함된 JSON 생성
- 변환된 결과로 원시 값이 포함된 JSON 파일이 생성됩니다.
style-dictionary 적용
- style-dictionary를 사용해 디자인 토큰을 Flutter, CSS, XML 등 다양한 포맷으로 변환합니다.
최종 CSS 파일 생성
- 변환된 결과로 CSS 파일이 생성되어 실제 프로젝트에 적용할 수 있습니다.

Figma에서 디자인 토큰을 Flutter 코드로 변환하기 위해 여러 도구를 시도해보았습니다:

amzn/style-dictionary, aloisdeniel/style-dictionary-figma-flutter 두 도구 모두 Color, Spacing, Radius 등 primitive 타입의 디자인 토큰 생성은 잘 지원합니다. 하지만 TextStyle 등 Composition Token 속성까지 생성하고자 했으나,

amzn/style-dictionary는 Composition Token 생성을 지원하지만, 유료 버젼인 Pro 업그레이드를 해야하고 aloisdeniel/style-dictionary-figma-flutter는 Composition Token 생성을 제공하지 않습니다.

최종적으로, 텍스트 스타일을 포함한 디자인 토큰을 Flutter 코드로 생성할 수 있었던 figma2flutter 플러그인을 선택하여 사용하게 되었습니다.

프로세스 진행하기

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"
    }
  }
}

Json 을 git repository 에 내보내기(export)

Git Branch Push

Git에 대한 Access 권한을 얻은 뒤 Repo 설정과 브랜치를 설정하고 위에서 정의한 디자인 토큰을 JSON으로 Export 할 파일 경로를 설정하면 Figma 설정은 끝이라고 볼 수 있습니다.

Push 후 GitHub 저장소를 새로고침하면 token-translation/tokens 폴더에 tokens.json 파일이 생성된 것을 확인할 수 있습니다. 이제 Figma, 원격 저장소, 로컬 폴더 간 연결이 완료되어 디자인 토큰 관리가 자동화됩니다.

token.json 목록
- 거의 1500줄에 가까운 피그마 속성들이 있다. 색은 자그마치 133개나 있다.
- 수동으로 코드를 넣을 생각하면 아찔하다.

디자인 시스템의 각 속성에 맞는 코드 생성하기

결과물

디자인 시스템 속성들을 abstract클래스, 구현체 클래스로 만들어준다.

텍스트 스타일을 이렇게 편리하게 만들어준다.
BoxShadow 의 경우도 예전 같았으면 매번 수동으로 구현하거나 이미 어딘가에 있는 동일한 코드를 또 구현하면서 관리하기가 어려웠을텐데 아래와 같이 잘 만들어줍니다. 이제는 해당 파일 내에 명시되어 있는 BoxShadow 에서만 확인 후 코드에 반영해주면 됩니다.