사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/southleft/skills-for-figma --skill setup-design-tokens-figma시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
setup-design-tokens-figma — atomic token-system bootstrap
Create a variable collection + modes + all variables in a single use_figma call. This is the fastest way to stand up a new token system (or a new collection within one). Because it runs as one atomic script, either everything is created or nothing is (failed scripts apply no changes).
Skill boundaries
- `use_figma` rules — load the official `figma-use` skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level
await+return(no IIFE, nofigma.closePlugin();console.logis not returned), inputs inlined asconstat the top of each script, colors in 0–1 range, load fonts before any text op,await figma.getNodeByIdAsync(...), and atomic errors (a failed script applies nothing — read the error, fix, retry). - Incremental CRUD / batch edits to an existing system →
manage-variables-figma. - Sync from a code token file →
import-tokens-figma.
Workflow
- Agree the v1 scope. List the collection name, the modes (first one is the default), and the
full token set with per-mode values. Lock this before writing — it's much cheaper than editing afterward.
- Fill the constants in `scripts/setup-tokens.js`:
COLLECTION_NAME,
MODES, TOKENS (values keyed by mode name), and optional per-variable SCOPES.
- Run via
use_figma(skillNames: "setup-design-tokens-figma"). It returns
{ collectionId, modes, created, errors }.
- Validate with
get_variable_defsor theexport-tokens-figmaread script, then screenshot if
you also created swatches.
Notes
- Two-tier systems: create primitives (raw values) with this skill, then create semantic
tokens that alias them using import-tokens-figma (which has the alias pass) or manage-variables-figma. Keep primitives single-mode and put theming on the semantic layer.
- Set scopes: the default
ALL_SCOPESclutters every property picker. PassSCOPESfor the
surfaces each token belongs to (FRAME_FILL/SHAPE_FILL for backgrounds, TEXT_FILL for text, GAP for spacing, CORNER_RADIUS for radii, WIDTH_HEIGHT for sizing).
- Keep one bootstrap per collection. Multiple collections = multiple runs.
