Skip to content
Component Showcase: Auto Documenter

Component Showcase: Auto Documenter

by Iconora Studio

Auto-generate beautiful component documentation in 1 click.

FreeFigmaDev Mode

Installs

15

Likes

3

Users

118

Views

142

Preview

Component Showcase: Auto Documenter preview

About this plugin

**Stop wasting hours manually redlining and documenting your components.**Component Showcase is the ultimate Dev-Mode companion and Design System utility that automatically generates beautiful, comprehensive documentation for any Figma component, variant set, or instance in a matter of seconds.

Whether you are building a complex design system, streamlining developer handoff, or creating pixel-perfect portfolios, this plugin ensures your design specs are strictly organized, visually stunning, and highly accurate.

✨ **KEY FEATURES**🎨 **Variant & Grid Showcase**β€’ Instantly generates a structured matrix of all component variants (States, Types, Sizes, etc.).β€’ Supports "Ghost Mode" to reveal and document hidden anatomy layers cleanly.β€’ Uses smart, flexible Auto-layout frames that scale perfectly without clipping.

πŸ“ **Anatomy Specs & Measurements (Redlines)**β€’ Automatically draws measurement markers, bounding boxes, and alignment lines.β€’ Highlights margins, paddings, gaps, and corner radiuses for flawless developer handoff.β€’ Perfectly formats complex nested instances and child components.

πŸ’Ž **Design Token Extraction**β€’ Deep-scans your component to extract paired Figma Variables and Design Tokens.β€’ Generates clean, robust documentation tables linking variables to their actual numerical values or HEX codes.β€’ Labels token source collections (e.g., Color primitives, Semantic spacing).

β™Ώ **Accessibility & Guidelines**β€’ Automatically audits and displays Contrast Ratios (WCAG standard) and Touch Target sizing.β€’ Organizes component Best Practices and Implementation details flawlessly.β€’ Multi-variant support with structured sub-framed layouts for easy UI scanning.

πŸš€ **HOW TO USE**1. Select any Component, Component Set, or Instance on your canvas.

2. Run **Component Showcase**.3. Choose the specs you want to document (Anatomy, Variants, Tokens, Accessibility).

4. Click 'Showcase' and watch the magic happen! The plugin will output a fully organized auto-layout frame with your specs.

❀️ **Feedback & Support**If you love this plugin, please leave a like and a comment!

For bugs, feature requests, or to share how you're using Component Showcase, please reach out via [Your Email/Twitter/GitHub link here].

More file organization plugins plugins

View all