- Home
- Skills
- Frontend & Web Apps
- Figma Enhance — Component Properties & Audit for Your File
More screenshots
Works with the AI tools you already use
Figma Enhance — Component Properties & Audit for Your File
Audits a Figma file that already has components and variables, ranks what is still missing, and implements what you approve: component properties, variant merges, bindings, and cleanup.
$9
Figma Enhance — Component Properties & Audit for Your File
Example session with this skill installed
/figma-enhance https://www.figma.com/design/<fileKey>/figma-tokenize?node-id=10-2
- Read your context and instructions
- Compiled the figma enhance
- Generated the UI component
The file was already tidied, tokenized, and componentized: a villa-rental landing page with four components (a Button with 6 variants, a Villa card with 2 variants, a Header, and a Footer). The agent scanned every component on the page and the frame you pointed at.
Audit scan
| Check | Result |
|---|---|
| Standalone components that could merge into a variant set | 0 (Header and Footer are single components with unrelated names) |
| Components with no Text, Boolean, or Instance Swap property | 4 of 4 |
| Colors, font sizes, or spacing not bound to variables | 0 |
| Text Styles whose font size is not bound to a variable | 0 of 23 |
| Invisible or duplicated fills and strokes | 0 |
| Text that could use an existing Text Style | 0 |
The earlier steps had already covered variables and Text Styles, so the only gap left was component properties.
Proposals
| # | Category | Description | Priority | Scope |
|---|---|---|---|---|
| 1 | Property addition | Button: add a Label text property, wired to all 6 variants | Recommended | 1 set |
| 2 | Property addition | Villa card: add Title and Description text properties, wired to both variants | Recommended | 1 set |
| 3 | Property addition | Header: add Logo, Tagline, Language JA, and Language EN text properties, and an Instance Swap for the inquiry button | Recommended | 1 component |
| 4 | Property addition | Footer: add Logo, Tagline, Link 1 to 3, Copyright, and Slogan text properties | Recommended | 1 component |
The agent asked what to implement; the answer was all four.
What it added
| Component | Properties |
|---|---|
| Button (6 variants) | Label |
| Villa card (2 variants) | Title, Description |
| Header | Logo, Tagline, Language JA, Language EN, Inquiry button (Instance Swap) |
| Footer | Logo, Tagline, Link 1, Link 2, Link 3, Copyright, Slogan |
Each property was added to the Component Set itself, not to a single variant, and wired to the same text layer in every variant, after loading the fonts.
Checks reported by the agent
- Instance text values kept: 9 of 9 instances unchanged
- Instance sizes kept: 9 of 9 unchanged
- Full-frame comparison against the frame before the run: one pixel differs
Final report
| Proposal | Result |
|---|---|
| Variant merge | none found |
| Property addition | 15 properties (14 text, 1 instance swap) across 4 components |
| Variable binding | 0 locations, none missing |
| Fill cleanup | 0 locations |
| Text Style application | 0 locations, all applied |
The page looks the same as before. The difference is on each instance: the label of a button, the title of a card, and the links in the footer can now be edited in the properties panel instead of by opening the component.
figma-enhance-component-properties-audit.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
After a frame has components and variables, the last gaps are easy to miss. A button whose label is baked into each variant cannot take text from outside. Two components named Card / Large and Card / Small are really one component with a size. A text style may exist but not be applied. This skill scans for those gaps, shows them in a ranked table, and fixes only the ones you pick.
What it does
- Finds standalone components that share a name prefix and structure and could become one variant set
- Finds components with no Text, Boolean, or Instance Swap properties, and adds them so the text and nested parts can be set on each instance
- Finds colors, font sizes, and spacing that are not bound to variables, and Text Styles whose font size is not bound to a variable
- Finds invisible (0 percent) or duplicated fills and strokes, and text that matches an existing Text Style but does not use it
- Ranks the findings, asks which to implement, and asks before adding anything to a library collection
- Re-checks instance text, images, and sizes after every change and reports counts, not just "done"
How it works
- Give it a Figma page, frame, or section URL
- It scans the components across the whole page, and the frame you gave it for bindings and fills
- It shows a ranked table of proposals
- You choose all, some by number, or report only
- It implements the chosen items, verifies the instances, and gives a final report
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. It also carries the fixes learned from merging variants: sizes that collapse after variants are combined, instance text that resets, and images that fall back to the master's photo. The skill opens only the entry that matches a symptom.
What it is not
It does not build a first structure. If the file has no variables and no components yet, it tells you to run a tidy-up, tokenize, or componentize step first. On a file that has just been through those steps, expect a short report: in our example run, the only gap left was component properties.
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 changes components in place. Duplicate 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 last, after a tidy-up, tokenize, and componentize step, as a polish pass.
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
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean today
- Passed all security checks, Safe to install