agentsclimarketplace
Sign in

Generate component doc figma

Skill southleft/skills-for-figma/skills/generate-component-doc-figma

Generate complete Markdown documentation for a Figma component — anatomy/layer tree, design tokens (colors, spacing, typography), states/variants matrix, accessibility notes, content guidelines, and optional code-parity + YAML frontmatter. Use when the user wants a docs page or handoff spec for a component or component set. Triggers: 'document this component', 'generate component docs/spec', 'create a docs page for the Button', 'write up the anatomy and variants', 'component handoff doc from Figma', 'turn this component into Markdown docs'. Reads the node tree, bound variables/tokens, and designer annotations, then the agent assembles Markdown. Requires the Figma Desktop app (Plugin API).From its SKILL.md

Install
npx -y skills add southleft/skills-for-figma --skill generate-component-doc-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/generate-doc.mjs collected.json [--code-info codeInfo.json] [--out docs/components/Button.md] [--frontmatter] [--file-url <figma-url>]`.

SKILL.md

5.4 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

generate-component-doc-figma — Figma component → Markdown docs

Produce a complete documentation page for one component or component set: overview, anatomy tree, design tokens, variants/states matrix, typography, accessibility, content guidelines, and (optionally) design-code parity and YAML frontmatter. This skill collects structured data from the file via use_figma, then a deterministic Node converter (scripts/generate-doc.mjs) emits the Markdown — the same collected JSON always produces identical Markdown. Do not freehand the doc from prose.

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).
  • The collect script runs anywhere (use_figma); the converter is Node and runs in a terminal (node scripts/generate-doc.mjs ...). Same split as export-tokens-figma. If you can't run Node, you can't produce the doc — say so rather than freehanding it.
  • Markdown section layout + the cleanVariantName rule → references/doc-template.md. The converter already implements every rule in that file; treat it as the spec, not a checklist for hand-assembly.
  • Reading/writing annotations as standalone specs → use the annotations-figma skill.
  • Exporting the whole token system (not just one component's tokens) → use export-tokens-figma.

Workflow

  1. Identify the target. Get the component or component-set node ID from the current selection or a URL/ID the user provides. Component sets (with variants) produce the richest docs. Set NODE_ID in the collect script. Also note the file URL (for the figma: link / frontmatter).
  2. Collect data → save JSON. Run scripts/collect-component-data.js via use_figma (skillNames: "generate-component-doc-figma"). It returns the anatomy tree, per-variant colors (with bound token id + name), typography (font family, numeric weight + name, size, line height, letter spacing), spacing tokens, component property definitions (variants/booleans/text props), the description, and annotations (with category names). Save the returned JSON to a file (e.g. collected.json).
  3. Generate the Markdown (deterministic). Run the Node converter in a terminal: 
    node scripts/generate-doc.mjs collected.json [--code-info codeInfo.json] [--out docs/components/Button.md] [--frontmatter] [--file-url <figma-url>]
    It ports the source generator's section logic exactly: Overview (+ When to / When NOT to Use parsed from the description), Component Anatomy, Variants (matrix + icon mapping + configurable props), Token Specification (color + spacing tables), Typography, Content Guidelines, Accessibility, Design Annotations, and — with --code-info — Implementation, Design-Code Parity, and Changelog. cleanVariantName is applied automatically (Type=Image, Size=12 → Image / 12). Same input → identical output.
  4. Optional code parity. To add Implementation / Parity / [View Source] & [Storybook] links, read the component source and write a codeInfo.json (props, importStatement, sourceFiles, baseComponent, changelog, …), then pass --code-info codeInfo.json.
  5. Optional frontmatter. Pass --frontmatter to prepend YAML frontmatter (title, status, version, tags, figma URL, lastUpdated).
  6. Review & deliver. Read the emitted Markdown, sanity-check it, then write/return it. Report the path and a one-line summary (variant count, token count).

Notes

  • Font loading: if you add a step that writes text into Figma (e.g. stamping the doc back onto the canvas), await figma.loadFontAsync(...) first. Pure documentation generation reads only.
  • The collect script uses MAX_DEPTH to keep payloads small for deep trees — raise it only if the anatomy looks truncated.
  • Token names come from boundVariables; a color/spacing with no bound variable renders as — in the token tables (a hardcoded value to replace with a token).
  • The converter is dependency-free (Node 18+, ESM). It exits non-zero with a clear message if the JSON is missing or malformed.
  • These collect tools require the Figma Desktop app (the Plugin API isn't available in the browser).

What ships with it: 3 files

43.6 KB alongside SKILL.md, 2 of them executable

references/

scripts/

Gives 0 of the 12 instructions most docs writing skills give in ~1.1k tokens

Counted across 1,951 of the 3,904 authors here whose files we hold, read 2026-09-06

  • Use third-person for skill descriptionsin 54 of 1951, across 35 files
  • Start descriptions with Use whenin 43 of 1951, across 29 files
  • Run baseline scenarios before writing any skillin 40 of 1951, across 26 files
  • Use active voicein 40 of 1951, across 36 files
  • Map file responsibilities before defining tasksin 36 of 1951, across 29 files
  • Use checkbox syntax for tracking stepsin 35 of 1951, across 27 files
  • Ask one question at a timein 35 of 1951
  • Offer execution options after saving the planin 33 of 1951, across 24 files
  • Include complete code in every stepin 33 of 1951, across 27 files
  • Design units with clear boundaries and interfacesin 31 of 1951, across 23 files
  • Announce the skill usage at the startin 30 of 1951
  • Verify agent compliance after adding the skillin 29 of 1951, across 17 files

Said here and by no other author read

  • load the figma-use skill first
  • identify the component node ID
  • run the collect script via use_figma
  • save the returned data as JSON
  • run the node converter in a terminal
  • Pass code info for implementation details

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.