![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 25 31" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 25 0 L 25 31 L 12.129 31 L 12.129 22.568 L 16.584 22.568 L 16.584 8.432 L 8.416 8.432 L 8.416 31 L 0 31 Z" fill="rgb(0, 0, 0)" height="31px" id="UDFifYHUy" width="25px"/></svg>)
Figma lacked a specific productivity feature, so I vibe-coded my own plugin.
My own personal problem space
I used to run into this all the time when working on complex design system components in Figma. I’d use “Select Matching Layers,” but it this lacked precision, selecting matches across every variant. I wanted to specific control over the selection — sometimes just the destructive variants, or only the large ones. And occasionally a combination like both destructive and large.
Before long, I’d be clicking through dozens of layers, manually deselecting the ones I didn’t need. It was tedious and easy to mess up.
I always wished I could just tell Figma to “select matching layers, but only within these variants”
Wait, you can just make your own tools?
As a designer who dabbles in front-end at best, the Figma plugin API was a bit hard for me to wrap my head around. So over the years, I made a few failed attempts to build this.
Finally, once tools like Claude and Cursor appeared on the horizon, I excitedly took to this challenge once again.
One thing I learned from my experience working with an LLM for coding is that if you treat the communication like between a PM and an engineer, you tend to see better success. So this initial prompt should read sort of like a technical requirements doc. The more specific the better.
You are building a Figma plugin in TypeScript. The goal is to let the user select a layer inside a component instance, then select all matching layers across that component set—but only within user-chosen variant(s).
Requirements:
1. Plugin manifest (`manifest.json`) should declare UI and code entry points.
2. In `code.ts`:
- When the user runs “Select Scoped Matching Layers,” read the user’s current selection:
- If it’s not a layer inside a component instance, show an error and exit.
- Identify the parent ComponentSet and the selected layer’s name and type.
- Query all instances of that ComponentSet in the document.
- Expose via `figma.showUI()` a small UI:
- A multi-select dropdown listing all variant property names and values for that ComponentSet (e.g. “primary,” “secondary,” “tertiary” under the “Style” property).
- A “Select Matching” button.
- When the user picks one or more variant values and clicks “Select Matching”:
- Filter the instances to only those whose variant properties match the user’s choices.
- Within each filtered instance, traverse its child nodes and collect those whose name and node type exactly match the originally selected layer.
- Set `figma.currentPage.selection` to that collection of matching nodes.
- Bring the selection into view with `figma.viewport.scrollAndZoomIntoView()`.
- Gracefully handle cases with no matches or invalid selections by sending a message back to the UI.
3. In `ui.html` (or React, if you prefer):
- Render a multi-select of variant names/values.
- A “Select Matching” button.
- Show status or error messages.
4. Use Figma Plugin API best practices (async message passing, cleanup, type safety).
Deliverables:
- `manifest.json`
- `code.ts` (TypeScript)
- `ui.html` (or React/JSX)
Be detailed in comments so a developer can pick up the generated files and run `npm run build` to test in Figma.
Of course I wasn't able to get the all result I wanted right away, but it was pretty close on the first shot. After a bit of healthy testing and iteration, I eventually had a fully functioning Figma plugin I could start using in my daily work.
Feels nice to make something useful
It's exciting that we live in time when as a designer you're not just limited to imagining solutions for someone else to implement — you can just do it yourself. I'm looking forward to solving a few more designer micro-problems in the future!
In the meantime check out the plug-in and let me know if it's helpful to your workflow and if it can be improved in any way.
