Back to Plugins
Component Showcase: Auto Documenter

Component Showcase: Auto Documenter

Auto-generate beautiful component documentation in 1 click.

Plugin 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].

Plugin Details

Version5
CreatedMarch 31, 2026
Last UpdatedMay 7, 2026
CategoryFile organization plugins
CreatorIconora Studio
Stats9 installs, 1 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Network Access:

    Need access to external AI services to auto-generate guidelines and design best practices.

  • Editor Types:
    figma
  • Allowed Domains:
    • *