figma-component-doclisted

Generate a component documentation block in Figma. Builds a structured doc frame next to the selected component (or component set) containing description, variants with visual+intent descriptions, anatomy of composite parts, properties with default values, colors grouped by role, subcomponents with thumbnails, and a generation footer. Auto-discovers the file's own design tokens (text styles + color variables) — works on any Figma file regardless of design system. Use when user has a component selected in Figma and says 'document this component', 'document this', 'create docs for this', 'document the [name]', 'generate component documentation', 'add doc page for', 'component doc', 'figma component doc', or shares a Figma component URL asking for documentation. Manual-only. Requires the figma-console MCP / Desktop Bridge plugin (writes back into Figma).
madebysan/claude-figma-skills · ★ 0 · Web & Frontend · score 72

Install: claude install-skill madebysan/claude-figma-skills

# Component Documentation (Generic) Create (or update) a component documentation block in Figma for the currently selected component. Auto-discovers the file's own design tokens (text styles + color variables) instead of assuming a specific design system. Works on any Figma file with any design system (or none). **This skill writes nodes back into Figma.** It uses the local `figma-console` MCP, the same one `/figma-autopilot` and `/figma-fix` use. --- ## Available figma-console tools | Tool | Purpose | |------|---------| | `figma_get_status` | Check plugin connection | | `figma_navigate` | Open a Figma file in Desktop | | `figma_execute` | Run JS in Figma plugin context — used for discovery and complex node creation | | `figma_create_child` | Create RECTANGLE / ELLIPSE / FRAME / TEXT / LINE under a parent | | `figma_set_text` | Change text content / font size on an existing TEXT node | | `figma_set_fills` | Change fill color on a node | | `figma_set_strokes` | Change stroke on a node | | `figma_resize_node` | Resize a node | | `figma_move_node` | Reposition a node | | `figma_rename_node` | Rename a layer | | `figma_capture_screenshot` | Plugin-based screenshot — use after writes (immediate, fresh state) | | `figma_take_screenshot` | REST-based screenshot — for initial visual context only | **Use `figma_execute` for the bulk of node creation.** The dedicated tools handle individual property tweaks but cannot set auto-layout, bind variables to fills/text styles, or build