Design to Markdown

What it doesScans your entire Figma file and extracts every design token into a structured DESIGN.md file that AI coding tools and developers can read.

What gets extractedColors from fills, strokes, and local paint stylesTypography from text nodes and local text styles (font, size, weight, line height, letter spacing)Spacing values from auto-layout frames (padding, gap, item spacing)Border radius values across all componentsShadow effects from nodes and local effect stylesComponent names from your component libraryOutput formatA single markdown file with 8 sections:

Identity: visual personality summaryColor: full palette with hex values and rolesTypography: font scale with every propertySpacing and Layout: base unit, spacing scale, border radiiDepth and Motion: shadow tokensComponents: list of named components foundStates: recommended hover, focus, disabled, error treatmentsRules: do's and don'ts based on your designHow to useOpen any Figma fileRun the pluginClick "Extract tokens"Copy to clipboard or download as DESIGN.mdWho is this forDesigners handing off to developersDevelopers using AI coding tools (Copilot, Cursor, Claude) that read DESIGN.md filesTeams who want a single source of truth for their visual styleAnyone building with vibe coding who wants their output to match their Figma designsColors are ranked by usage count so the most important ones surface first. Local styles (your named colors, text styles, effect styles) take priority over raw node values.