# [[Figma Tokens Studio|Figma Tokens Studio]]

## 📌 Brief Summary
[[Figma|Figma]] Tokens Studio(과거 명칭: Figma Tokens)는 디자이너가 색상, 서체, 간격과 같은 디자인 결정(디자인 토큰)을 JSON 형식으로 구조화할 수 있게 해주는 Figma 플러그인입니다 [1]. 이 도구를 활용하면 Figma에서 작업한 토큰을 외부 파일로 내보내어 코드 기반의 디자인 시스템과 동기화할 수 있습니다 [1, 2]. 확장성 있는 UI 시스템에서 디자인과 개발 워크플로우를 연결하여 일관된 테마를 구축하는 데 필수적인 역할을 합니다 [1, 3].

## 📖 Core Content
* **디자인 토큰의 JSON 구조화 및 추출**: Tokens Studio for Figma는 디자이너가 내린 디자인 결정들을 플랫폼에 구애받지 않는 JSON 데이터로 정의하고 내보낼 수 있도록 지원합니다 [1]. 
* **테마 생성 엔진과의 파이프라인 연동**: 이 플러그인을 통해 내보낸 테마별 JSON 토큰 파일(예: `colors-light.json`, `colors-dark.json`)은 [[Style Dictionary|Style Dictionary]]와 같은 오픈소스 테마 엔진과 결합하여 사용할 수 있습니다 [4, 5]. 이 과정을 통해 React 애플리케이션 등에서 직접 사용할 수 있는 [[JavaScript|JavaScript]]/TypeScript 테마 객체나 CSS 변수로 자동 변환됩니다 [4].
* **단일 진실 공급원([[Single_Source_of_Truth|Single Source of Truth]]) 유지**: Tokens Studio와 같은 플러그인을 통해 토큰을 추출하여 공유 리포지토리나 코드베이스로 동기화함으로써, 디자이너와 개발자 간에 동일한 디자인 언어(디자인 토큰)를 공유할 수 있습니다 [2, 3]. 이는 다중 테마, 다크 모드, 여러 브랜드 스타일을 수동 코드 작성 없이 안전하게 확장할 수 있게 해줍니다 [1, 3].
* *참고: 소스에 관련 정보가 부족합니다.* (Figma Tokens Studio 플러그인 자체의 구체적인 내부 사용법이나 세부 기능에 대한 구체적인 설명은 소스에 포함되어 있지 않으며, 주로 Style Dictionary를 활용한 JSON 토큰 추출 파이프라인의 일부로만 언급됩니다 [1, 2].)

## 🔗 Knowledge Connections
- **Related Topics:** [[Design Tokens|Design Tokens]], Style Dictionary, CSS Variables, [[Dynamic Theming|Dynamic Theming]]
- **Projects/Contexts:** Scalable UISystems, Design-to-Code Workflow
- **Contradictions/Notes:** 소스 데이터는 Figma Tokens Studio의 작동 원리나 전체 기능에 대해 깊이 다루지 않습니다. 단지 디자이너가 만든 토큰을 코드로 가져오기 위해 JSON 형태로 내보내는 도구(플러그인)로써의 역할에만 초점을 맞추고 있으므로, 소스에 관련 정보가 부족합니다 [1, 2].

---
*Last updated: 2026-04-26*