使い方
- インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
- 必要なツール、認証情報、対応環境を原文で確認します。
- 入力と成果物を指定し、出力を資料と照合します。
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.
