firebenders/sync-figma-token-skill

sync-figma-token

Sync design tokens between code and Figma variables with strict drift reporting, mandatory approval gate, safe delta apply, and persisted reports.

소스 보기

사용 방법

  1. 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
  2. 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
  3. 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/firebenders/sync-figma-token-skill --skill sync-figma-token

시작 전 확인

  • 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
  • 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

sync-figma-token

Use this skill for token parity workflows (code tokens vs Figma variables).

MANDATORY prerequisite: load figma-use before every use_figma call.

Non-negotiable safety rule

After producing dry-run output, you MUST STOP and ask for approval.

  • Do NOT run any write use_figma calls in the same turn as dry-run output.
  • Ask a normal confirmation question (example: "Apply these changes? (yes/no)").
  • Only proceed on explicit affirmative approval.
  • If the response is unclear or negative, do not apply writes.

Standard source formats (required)

Prefer real token sources in this order:

  1. Design Tokens JSON (tokens.json, tokens/*.json, DTCG-style)
  2. Style Dictionary input JSON
  3. Platform theme sources (Compose/Kotlin/TS) only when JSON source is unavailable

If source format is non-standard, explicitly state assumptions in dry-run output.

Required policies before writes

  • direction: code_to_figma (default), figma_to_code, bidirectional
  • deletePolicy: default archive_only (NOT delete)
  • conflictPolicy: prefer_code, prefer_figma, manual_review
  • namingPolicy: token key normalization strategy
  • modePolicy: code mode <-> Figma mode mapping

Never delete by default. Deletion requires explicit user instruction.

Normalization rules

Normalize both sides to canonical rows:

  • key (canonical token name)
  • type (COLOR, FLOAT, STRING, BOOLEAN)
  • modeValues (light/dark/etc.)
  • aliasTarget
  • scopes
  • codeSyntax

Name normalization examples:

  • color.bg.primary <-> color/bg/primary
  • Neutral10 <-> Neutral/10 only if explicitly mapped by naming policy

Value validation (required)

Dry-run must validate values, not only presence/type.

  • COLOR: compare RGBA with tolerance epsilon = 0.0001
  • FLOAT: strict numeric comparison unless tolerance is configured
  • STRING/BOOLEAN: strict equality
  • Aliases: compare canonical alias targets

Drift categories

Each drift item must include one of:

  • missing_in_figma
  • missing_in_code
  • value_mismatch
  • alias_mismatch
  • type_mismatch
  • mode_mismatch
  • scope_mismatch
  • code_syntax_mismatch
  • broken_alias

Dry-run output format

Always return:

1) Headline summary:

json
{
  "create": 0,
  "update": 0,
  "aliasFix": 0,
  "scopeFix": 0,
  "syntaxFix": 0,
  "archive": 0,
  "delete": 0
}

2) Detailed drift list with token keys and before/after values.

Then ask:

Dry-run complete. Apply these changes? (yes/no)

Report persistence (required)

Persist report JSON every run:

  • /tmp/sync-figma-token-dry-run-{runId}.json
  • /tmp/sync-figma-token-final-{runId}.json

If file persistence fails, mention that explicitly in output.

Conflict handling

When conflicting data is found (type/mode/alias ambiguity):

  • If conflictPolicy=manual_review, list conflicts and STOP.
  • If conflictPolicy=prefer_code, update Figma to source values/types.
  • If conflictPolicy=prefer_figma, keep Figma and emit drift as informational.

Apply order

Apply deltas in this order:

  1. Ensure collections/modes
  2. Create missing primitives
  3. Create/update semantic aliases
  4. Apply value updates
  5. Apply scopes and code syntax
  6. Archive stale tokens per deletePolicy

Never parallelize write use_figma calls.

Success condition

After apply, run a fresh diff. Success = unresolved drift is zero, or only explicitly approved exceptions remain.

관련 작업