Doc Mapper

About this plugin

Documentation Mapper scans your Figma prototype and turns every interaction into structured, readable documentation — automatically.What it doesPoint it at a page or a selection, hit Generate, and it finds every element with a prototype connection: taps, delays, key presses, hover states, drags, swipes, and scrolls. For each one, it resolves the destination by name, groups everything by screen, and produces two outputs at once: a visual documentation frame on a dedicated Documentation page inside your Figma file, and a live-updating panel in the plugin UI showing all interactions as collapsible cards.The Documentation frameThe generated frame organizes interactions into screen sections, each listing the elements within it and their interactions as color-coded entries:🔵 Blue dot — tap / click🟠 Orange dot — after delay (timeout)🟣 Purple dot — key press🟢 Green dot — hoverEach entry reads as a plain-language sentence:On tap → Screen 02,After delay 2000ms → Screen 01,On key press → Screen 02.Export optionsOnce generated, two export formats are available directly from the plugin panel:Export Mermaid: downloads a .md file containing a fenced Mermaid flowchart of your full navigation map. Paste it into GitHub, Notion, Obsidian, or mermaid.live and your prototype flow renders as a diagram instantly.Export Markdown: downloads a structured .md document organized by screen and element, ready to drop into any documentation system or hand to a developer.Scope controlRun it against the full current page or limit it to a specific selection — useful for documenting a single flow or a subset of screens without regenerating everything.Who it's forDesigners handing off complex prototypes, developers who need to understand navigation logic without clicking through every screen, and stakeholders who need a shareable map of how a product flows.