madebysan
UserClaude Code skills for Figma. Review designs, act on comments, sync design tokens.
Categories
Indexed Skills (8)
figma-autopilot
Execute design instructions left as Figma comments. Reads all unresolved comments, classifies each by intent, modifies the design via figma-console MCP, and replies to each comment confirming what was done. Manual-only. Use when user says 'auto figma', 'execute figma comments', 'process figma comments', 'run the comments', or provides a Figma URL with comments to execute.
figma-component-doc
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).
figma-extract
Standardizes extraction and documentation of design tokens, assets, and specs from Figma. Use when the user asks to export from Figma, extract design tokens, get color palettes, document a design system, export SVGs, or prepare Figma designs for development.
figma-file-cleanup
Audit and clean up Figma files — remove orphan library references, rebind colors and text to design system tokens, audit dark mode compatibility, fix naming conventions, and ensure file hygiene. Use when user says 'clean up figma', 'figma audit', 'fix figma styles', 'orphan variables', 'detach variables', 'dark mode check', 'fix dark mode', or shares a Figma URL and wants it cleaned up.
figma-fix
Review a Figma design and immediately fix what it can. Combines figma-review (expert analysis) with figma-autopilot (automated execution) into one workflow. Analyzes the frame, splits findings into auto-fixable changes and discussion comments, executes the fixes via figma-console MCP, and posts discussion items as Figma comments. Manual-only. Use when user says 'design fix', 'review and fix', 'fix this design', 'review and apply', or shares a Figma URL and wants both feedback and fixes.
figma-import
Import design tokens from any codebase into Figma as variables. Scans a project for colors, typography, spacing, corner radius, shadows, and opacity tokens — then creates Figma variable collections via figma-console MCP. Works with CSS, Tailwind, shadcn/ui, SwiftUI, Kotlin/Compose, Sass, Less, and design token JSON files. Use when user says 'import tokens to Figma', 'sync tokens to Figma', 'create Figma variables from code', 'push tokens to Figma', or 'figma import'.
figma-review
Review a Figma design and post actionable feedback as comments pinned to specific elements. Use when user shares a Figma URL with a node-id, or says 'review this design', 'give me feedback on this frame', 'design review', 'critique this', or 'what do you think of this design'. Do NOT use for live app UI audits (use ui-audit) or design token extraction (use figma-extract).
figma-tickets
Converts Figma page/frame comments into structured design tickets. This skill should be used when the user provides a Figma URL and wants to extract comment threads and turn them into actionable design/UX tickets. Triggers on phrases like "figma tickets", "turn these comments into tickets", "extract tickets from Figma", or when /figma-tickets is invoked with a Figma link.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.