Figma Componentize — Components & Variants from a Frame

A frame built by hand, captured from code, or generated by Figma's Design Agent looks finished, but every button and card is its own copy. Change one and you have to change all the others. This skill finds the patterns, picks the best copy of each as the master, builds the component, and swaps every occurrence for an instance that keeps its own text and image.

What it does

• Finds repeated structures by comparing shape, size, and children, and always considers the header and footer, even if they appear only once
• Checks icon-like children by name, so cards that look alike but hold different icons are not merged by mistake
• Converts the most complete copy into a master component, moves it out of the frame, and sets its inner layers so it stays correct at other sizes
• Replaces every other occurrence with an instance, and keeps per-occurrence text and images as overrides
• Proposes variant axes that fit each component (for example Size and State for a button, Size for a card) and builds the ones you approve
• Offers to bind the colors used only in the new variants, such as a darker hover color, to variables
• Re-checks positions and sizes after every step and reports counts, not just "done"

How it works

1. Give it a Figma frame or section URL
2. It analyzes the frame and lists the candidates with counts and a short description of each
3. You choose which candidates to componentize
4. For each one it creates the master and the instances, shows a screenshot, and asks about variants
5. It builds the approved variants, verifies sizes and positions, and asks before creating any new variables

Includes field notes for the Figma Plugin API

The skill ships with a reference of 21 known pitfalls in writing to Figma through use_figma, for example a section that collapses to 100px or a component that stays nested in its frame. It also carries its own notes on componentizing: sizing that collapses after variants are combined, cards in a grid that jump to a new row, and icons that look identical but are not. The skill opens only the entry that matches a symptom.

What it is not

It does not publish to a team library, share components across files, or accept component or component-set URLs. It creates new components from a frame that has none yet. It works best on a frame that already has auto layout and clear layer names; run a tidy-up step first if it does not.

Requirements

Runs inside an agent connected to the official Figma MCP server, the same connection used for implementing Figma designs as code. Needs edit access to the Figma file, because it creates components and replaces elements in place. Duplicate the frame or the file first if you want a way back. No local file access and no arbitrary network calls.

Try it free first

Try it Free on Agensi runs on Agensi's servers, which have no connection to your Figma file. Use the example session above to see the flow and the kind of report you get; the installed skill works on your real file through your own Figma MCP connection.

Works well with

Run it after a tidy-up step and a tokenize step, so the patterns are easy to find and the colors are already variables.

More from KMRVID

The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills