Token Studio for Figma

아직은 AI가 variable은 생성할 수 없어서 사용하는 플러그인

AI를 활용한 디자인 작업에서 Figma는 버전 히스토리 관리 도구로 자리잡고 있습니다.

Claude Code의 Figma 코드 생성 기능을 활용하면 웹 화면을 디자인 파일로 옮길 수는 있지만, 디자인 시스템 수준의 구현까지는 한계가 있었습니다.

이미 구현된 프로젝트를 Figma로 옮기는 데 많은 시간을 쓰는 것이 비효율적이라 판단했고, 수작업 의존도를 낮출 방법을 찾는 과정에서 Token Studio 플러그인을 발견하게 되었습니다.

Design System Plugin 활용 가이드

JSON 파일을 업로드하면 Color Variable과 Text Style을 자동 생성할 수 있습니다.

작업 순서:

프로젝트의 Color, Typography 정보를 LLM에 요청하여 JSON 파일로 생성

Figma에서 Token Studio 플러그인 실행 후, 생성된 JSON 코드를 붙여넣기

"Style & Variables Export" 클릭하면 Color Variable / Text Style 생성 완료

https://docs.tokens.studio/manage-tokens/token-sets?ref=onboarding_explainer_sets

Token Sets | Tokens Studio for Figma

프로젝트의 Color, Typography 정보를 LLM에 요청하여 JSON 파일로 생성

color json

typography json

Figma에서 Token Studio 플러그인 실행 후, 생성된 JSON 코드를 붙여넣기

"Style & Variables Export" 클릭하면 Color Variable / Text Style 생성 완료