프론트엔드
단 한 줄로 전환하는 다크 테마 - Variables 기반 디자인 토큰 자동화
두줄요약
Figma Variables와 CSS Variables를 연결해 디자인 토큰을 자동화한 사례를 소개했습니다. data-theme 속성만으로 다크 테마와 브랜드 테마를 단순 전환하도록 구성했습니다.
핵심 내용
- Figma Variables와 CSS Variables를 연결해 디자인 토큰을 single source로 관리한 사례
- Tokens Studio for Figma와 Style Dictionary로 Variables를 JSON, CSS 변수, TypeScript 객체로 자동 변환하는 파이프라인 구성
- data-theme 속성만 바꿔 라이트/다크 테마와 여러 브랜드 테마를 단순 전환하는 구조
적용해볼 점
- 디자인 토큰의 시맨틱 계층과 코드 참조 구조를 맞춰 관리 복잡도 감소
- Figma 변경을 자동으로 PR과 코드 산출물로 반영하는 워크플로우 구축
- 테마 분기 로직을 컴포넌트 내부가 아닌 전역 변수 레벨로 이동