Namma Component Docs

Namma Component Docs scans your selected component and generates clean, enterprise-grade documentation directly on the Figma canvas — using only real data from your file. No mock content, no guessing, and it never modifies your designs.

⚡ One-click documentationSelect a component and extract exactly what you need: Colors, Typography, Variables, Spacing & Padding, Sizing, Radius, Border, Effects & Shadows, Variants, Icons, Accessibility, Responsive constraints, and Dev Tokens. Or run Generate All Components to document an entire library in one pass.

🧩 Rich, real documentation sectionsComponent definition, live preview, anatomy, UI-object breakdown, visual token annotations, state comparisons, color & typography documentation, developer tokens, usage guidelines, do/don't, and a master reference table — every value traceable to a real layer, style, or variable.

📦 Deliverables that shipExport polished PDF (with a print-ready Government Handbook theme — cover page, auto table of contents, numbered sections, running headers/footers, smart pagination across A4/A3/Letter/Legal), plus HTML, Markdown, JSON, CSV, and YAML.

👩‍💻 Developer handoff, 14 platformsOne-click token files for Web/CSS, SCSS, Tailwind, styled-components, React Native, iOS (SwiftUI & UIKit), Android (Compose & XML), Flutter, Token Studio, W3C Design Tokens, Style Dictionary, and agnostic JSON.

♿ WCAG 2.2 accessibility, done rightContrast Annotation — relationship-based, variant- and state-aware foreground↔background analysis (Text, Icon, Border, Focus) using the official WCAG 2.2 formula.

Color Compatibility Matrix — validates every real Color Style & Variable against every other, flags Recommended vs Not Recommended pairings, and generates a compatibility report or style-guide doc straight to the canvas.

🛠 Standalone documentation generators (no extraction required)Token Documentation — variables, styles, usage & component adoption.

Typography Intelligence — audit type usage across selection/page/file and migrate styles safely.

Color Compatibility — WCAG 2.2 pairing report from your real color library.

🔒 Safe by designStrictly read-only. Real Figma data only — real fills, styles, variables, and visible layers. Your file, components, and tokens are never modified.