agentsclimarketplace
Sign in

Import tokens figma

Skill southleft/skills-for-figma/skills/import-tokens-figma

Push design tokens from code INTO Figma as variables — DTCG / tokens.json / a token object → Figma variable collections, modes, and values. Use when the user wants to sync tokens code→Figma: triggers 'import tokens into Figma', 'create Figma variables from my tokens.json / DTCG / Tailwind config', 'sync design tokens to Figma', 'push tokens to Figma'. Non-destructively matches existing variables (by saved id/key/name) so re-imports update instead of duplicating. Works on ANY Figma plan. For the reverse (Figma → code) use export-tokens-figma.From its SKILL.md

Install
npx -y skills add southleft/skills-for-figma --skill import-tokens-figma

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 12 stars12 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
  • runs commandsInstructs the agent to run 1 command, including `node scripts/parse-tokens.mjs tokens.tokens.json --default-mode Light --collection Brand`.

SKILL.md

3.7 KB, 827 tokens by cl100k_base, as published. Nobody here has run it

import-tokens-figma — design tokens → Figma variables

Create and update Figma variables from a token source (DTCG tokens.json, a Tailwind/SCSS export, or a plain token object). Aliases and multi-mode values are supported. Re-running is safe: variables are matched by saved Figma id → key → exact name, so an update edits in place rather than duplicating.

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, no figma.closePlugin(); console.log is not returned), inputs inlined as const at 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).
  • Reverse direction (Figma → code) → export-tokens-figma.

Workflow

  1. Parse the source into the canonical token list — deterministically. For DTCG input (incl. anything export-tokens-figma produced), run the bundled parser instead of flattening by hand: 
    node scripts/parse-tokens.mjs tokens.tokens.json --default-mode Light --collection Brand
# --strip-prefix "ds-"   drops a leading name prefix on import (e.g. ds-color/x → color/x)
    It prints the exact COLLECTION_NAME / MODES / TOKENS constants to paste into the apply script — handling $type→Figma type, {ref} aliases, multi-mode ($extensions…modes), dimension unit stripping, and variableId round-trip. For non-DTCG sources (a Tailwind/SCSS export), export to DTCG first or hand-build the TOKENS array: { name: "Color/Brand/Primary", type: "COLOR"|"FLOAT"|"STRING"|"BOOLEAN", values: { <mode>: literal | { reference: "{Color.Brand.500}" } }, figmaVariableId? }.
  2. Decide conflict policy. Default: code wins on values, but never delete Figma-only variables without asking. Confirm the target collection name and the mode list (first = default).
  3. Apply. Put the parsed data into the constants at the top of scripts/apply-tokens.js and run it via use_figma (skillNames: "import-tokens-figma"). It runs two passes — literals first, then aliases — and returns { created, updated, errors, variableIds }.
  4. Report & validate. Surface created/updated counts and any errors. Run a read-back (the export-tokens-figma read script or get_variable_defs) to confirm values landed.

Notes & gotchas

  • Two-pass is required — alias targets must exist before createVariableAlias. The script handles this; don't collapse it into one pass.
  • Colors accept hex strings (3/6/8 digit) and are converted to {r,g,b,a} 0–1 automatically.
  • Scopes: new variables default to ALL_SCOPES, which pollutes every picker. After import, consider setting variable.scopes (see manage-variables-figma) to the right surfaces.
  • Round-trip: importing a file previously produced by export-tokens-figma is the happy path — the stashed variableId makes matching exact.

What ships with it: 2 files

9.5 KB alongside SKILL.md, 2 of them executable

scripts/

Gives 0 of the 12 instructions most images graphics skills give in 827 tokens

Counted across 341 of the 354 authors here whose files we hold, read 2026-09-06

  • Generate images via gemini_generate_imagein 14 of 341, across 10 files
  • Set the aspect ratio via set_aspect_ratioin 14 of 341, across 10 files
  • Verify MCP image tools are available before generatingin 13 of 341, across 9 files
  • Show estimated cost before generatingin 13 of 341, across 9 files
  • Run the post-generation SEO checklistin 13 of 341, across 9 files
  • Structure prompts as subject, setting, style, lighting, compositionin 10 of 341, across 5 files
  • Infer the brand strategy before generatingin 9 of 341, across 5 files
  • Use at most two logo concept methodsin 9 of 341, across 5 files
  • Use one dominant palette with repeating accentsin 9 of 341, across 5 files
  • Extract fileKey and nodeId from the Figma URLin 9 of 341
  • Read product marketing context before asking questionsin 8 of 341, across 3 files
  • Keep the logo simple, symbolic, and ownablein 8 of 341, across 4 files

Said here and by no other author read

  • Run the audit script via use_figma
  • Parse DTCG tokens with the bundled parser
  • Confirm the target collection name and mode list
  • Paste parsed constants into the apply script
  • Apply literal values before alias references
  • Report created, updated counts and errors

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.