Component Specs Generator

Component Spec Generator automatically creates detailed spacing documentation boardsfrom any frame or component in your Figma file.

Select a frame, click generate, and get a complete spec board with:- Visual measurement previews showing padding, gaps, and dimensions- Red badges for width and height- Light blue highlights for internal padding- Pink bands for gaps between child elements- A full property inspector with fill colors, borders, corner radius, layout direction,and alignmentText and icon styles are documented with font family, weight, size, line height, letterspacing, and color — each labeled by layer name.

Two generation modes:

1. Nested frames — creates a row for every child frame in the hierarchy2. Selected frame only — documents just the selected frame, with an option to list alltext styles and icons from nested layersBuilt for design system documentation, developer handoff, and spacing audits. No networkaccess required — everything runs locally in your Figma file.