Componentor

About this plugin

Tired of the manual, repetitive process of creating components and documenting your Design System? Componentor is here to accelerate your workflow and ensure consistency and quality across your projects.

With Componentor, you can focus on what truly matters: design. Let the tool handle the technical and tedious parts for you.

✨ Key Features:

Smart Master Component: Select any object or group and turn it into a master component, automatically replacing the original with an instance.

Effortless Variant Sets: Select multiple objects and intelligently create a Component Set with variants, using either layer names or a default naming convention.

Automated Documentation (DS Box): Generate a complete "documentation box" right next to your component, containing:

Attributes: Dimensions (in px and rem), fill/stroke colors (with variable/style names), border radius, and gradients.

Spacing (Auto Layout): Direction, alignment, item spacing, paddings, and resizing modes (Hug, Fill, Fixed).

Proportions: A percentage-based analysis of how child items are sized within a container.

Typography: A detailed and unique breakdown of every text style used, including family, size, color, line height, and more.

Assets (Icons): Finds all vector nodes within your component, minifies the code, and generates ready-to-copy SVG code.

Layout Visualizer: Create a graphical overlay of your component's paddings and gaps, making its structure easy to understand and perfect for developer handoff.