Component Readiness

Handoff breaks when a component isn't structurally sound. The Component Readiness module acts as a strict linter for your Figma components, checking naming, token coverage, and prop contracts before the component reaches engineering.

What it Checks

1. Prop Contract Extraction

Select a component set and the module extracts a clean JSON property contract from your variant structure. It surfaces structural issues such as:

Combinatorial explosions (too many variant combinations)
Generic property names (Property 1, Type, unnamed values)
Inconsistent casing across variant values

2. Naming Quality

Detects non-code-safe and semantically weak names across your variants and properties. The plugin uses heuristics to generate rename suggestions with confidence scores. You can:

Accept a suggestion with one click
Edit it manually before applying
Batch-rename a property or value across all variants in the component set at once
Export the updated JSON contract

3. Token Coverage

The most important metric for a production-ready component. Token coverage measures the percentage of node properties that are bound to Figma Variables or Styles vs. hardcoded values (raw hex codes, numeric literals).

Broken down by category:

Colors — fill, stroke, shadow
Spacing — padding, item spacing
Radius — corner radius
Typography — font size, line height, letter spacing

Auto-Resolve — If hardcoded values have matching variables in your library, the plugin can resolve them for you with one click, binding the property to the appropriate variable without manual searching.

4. Nested Instance Scanning

Recursively audits all child instances within the component, grouped by their main component. Identifies detached overrides, broken library links, and components that silently reference remote symbols not in your local library.

When you navigate to a child instance during a readiness audit, the module tracks your path. Use the Back / Forward buttons in the header to move through your inspection history — including the viewport position and zoom level at each step. A "Return to Root" button snaps you back to the original component.

Remote library components (symbols from external team files) are flagged with a notification rather than opening, since they can't be modified locally.

Next Steps

Inspect your token bindings and generate platform-specific code in the Token Inspector.