피그마(Figma)에 정의된 디자인 변수를 추출하여 웹 프로젝트의 스타일 시트 파일로 동기화하는 프롬프트(Prompt) 작성 방법을 다룬다. 디자인 토큰(Design Token)을 인공지능 도구로 추출하고, 이를 CSS 커스텀 프로퍼티(Custom Properties)와 문서로 자동 변환하는 절차를 설명한다. 디자인 시스템과 프론트엔드 코드베이스 간의 스타일 일관성을 유지하는 데 활용된다.
토큰 추출 프롬프트 구조
피그마 파일에서 변수 정의를 조회하고 CSS 및 마크다운 문서로 변환하도록 요청하는 프롬프트는 다음과 같다.
이 Figma 파일에서 디자인 토큰을 추출해줘:
[피그마 노드주소]
1. get_variable_defs로 모든 변수를 가져와줘
2. CSS custom properties로 변환해서
src/tokens/colors.css, src/tokens/spacing.css에 저장
3. Figma 변수명의 '/'는 CSS에서 '-'로 변환
4. Primitive → Semantic 참조 구조를 유지
5. 매핑 테이블을 docs/design-tokens.md에 업데이트주요 지시 항목 및 동작 원리
해당 프롬프트는 피그마의 원본 디자인 데이터를 개발 표준 형식으로 변환하기 위해 5가지 세부 요구사항을 정의한다.
1. 피그마 노드 주소 및 변수 정의 수집
프롬프트 상단에는 추출 대상이 되는 피그마 파일의 노드 주소를 입력한다. 지시문의 get_variable_defs 명령은 피그마 파일에 등록된 색상, 수치, 불리언 등의 변수(Variables) 정의 목록을 조회하는 동작을 수행한다.
2. CSS 커스텀 프로퍼티 변환 및 파일 분리
디자인 토큰(Design Token)은 UI 디자인에서 사용되는 색상, 여백, 타이포그래피 등의 시각 속성을 일관되게 정의한 최소 단위 값이다. 디자인 도구와 개발 코드 간의 스타일을 연결하는 역할을 하며, 규격화된 표준 부품에 비유된다.
커스텀 프로퍼티(Custom Properties, CSS 변수)는 스타일시트 내에서 재사용 가능한 값을 저장하는 사용자 정의 변수이다. 브라우저에서 선언된 값을 참조하여 스타일을 적용하며, 이름표가 붙은 보관함에 비유된다. 프롬프트는 추출된 값을 색상(colors.css)과 간격(spacing.css) 파일로 나누어 저장하도록 지시하여 유지보수성을 높인다.
3. 명명 규칙 변환 (슬래시를 대시로 치환)
피그마에서는 변수 계층을 슬래시(/)로 표현하여 그룹을 나눈다. 반면 CSS에서는 대시(-)를 사용하는 케밥 표기법(kebab-case)을 표준으로 삼는다. 프롬프트는 슬래시 문자를 대시로 변환하도록 지시하여 웹 표준 변수명 규칙을 따르도록 한다.
4. 프리미티브 및 시맨틱 참조 구조 유지
프리미티브(Primitive) 토큰은 특정 색상 코드나 고정 픽셀 값과 같은 가공되지 않은 기초 원시 값이다. 기본 색상 팔레트 역할을 수행하며, 건축의 원자재에 비유된다.
시맨틱(Semantic) 토큰은 UI 구성 요소의 역할과 의도를 나타내는 의미론적 토큰이다. 프리미티브 토큰을 참조하여 맥락에 맞는 스타일을 부여하며, 완성된 가구에 비유된다. 프롬프트는 시맨틱 변수가 프리미티브 변수를 참조하는 구조를 CSS 변수(var 함수)로 그대로 유지하도록 명시한다.
5. 토큰 매핑 테이블 문서화
추출된 디자인 변수와 생성된 CSS 변수 간의 대응 관계를 docs/design-tokens.md 파일에 표 형태로 기록한다. 이를 통해 디자이너와 개발자가 동일한 명칭과 기준을 공유할 수 있다.
사용 시 주의점 및 오류 방지
- 피그마 노드 접근 권한: 입력한 피그마 노드 주소에 도구가 접근할 수 있는 권한이 설정되어 있어야 변수 정의를 정상적으로 가져온다.
- 참조 누락 확인: 피그마 내부에서 변수 간 연결이 끊어져 고정값으로 입력된 경우 참조 구조 변환이 누락될 수 있으므로 생성된 CSS 파일을 검토해야 한다.
- 파일명 및 경로 일치: 지정된 출력 디렉터리(src/tokens, docs)가 프로젝트 구조에 존재하는지 확인하고 필요에 따라 경로를 조정해야 한다.