generate-component-doc-figma

Installation
SKILL.md

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 rulereferences/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

Installs
6
GitHub Stars
4
First Seen
Jun 1, 2026
generate-component-doc-figma — southleft/skills-for-figma