I’ve made my bundle of five skills for working in Figma publicly available. With these skills, you can ask an agent to audit a design system, plan a user flow, build a screen, make edits, or restore variable bindings. You describe the task in chat, and the agent works directly in Figma, taking into account the components, variables, and decisions already in your product.
I’ve already written about how I work with agents and turn mistakes into rules in “Accept without edits (recommended)”. Here, I want to show you how to use the bundle and what you can try on your own project.
One bundle, five skills
You install the whole bundle at once. It contains five separate skills, each responsible for a different part of the work: planning user flows, auditing a design system, creating and editing screens, working with the Figma API, or restoring variable bindings.
You don’t need to memorise commands or run each skill separately. Just describe the task in plain language, and the agent will pick the instructions it needs. Some tasks require several skills at once: when building a screen, for example, the agent follows both the design rules and the guidance for working with the API.
Understand the design system
Say you’ve joined a project or returned to a file you haven’t opened in a while. There are components and variables, but it’s not clear which ones are being used, where duplicates have appeared, or which states are missing.
You can give the agent a link to the page and ask:
Review the design system on this page. Check which components and variables are available, where there are duplicates, and what’s missing. Don’t change anything yet.
With the audit skill, the agent examines the file and shows you concrete examples: identical elements using different tokens, components with missing states, and repeated patterns that still exist only as separate pieces on individual screens.
By default, it leaves the file untouched, so you can read through the report before deciding what to fix and whether you need separate documentation.
Plan a user flow and build it in Figma
You can ask the agent to handle an entire user flow: work out the sequence of steps, identify the screens and states you need, and then build everything in Figma. You don’t have to move straight into design, though. You can start by working through the logic and agreeing on what needs to be built.
Plan a password reset flow for a web app, starting from the login screen. Describe the screens, transitions, and states, including errors and loading. Don’t design anything yet; let’s discuss the plan first.
With the planning skill, the agent maps out the flow and proposes a file structure. You can review the whole user journey, discuss missing branches, remove unnecessary steps, and agree on the states before work on the screens begins.
Once you’re happy with the plan, just ask the agent to build the agreed flow in Figma. It will use the screen design and API skills for that part. If you don’t need a separate discussion, you can ask it to plan and build the flow in a single request.
Create a new screen or edit an existing one
You can use the bundle to build new screens from a task description. You explain what the user needs and what should be on the screen, and the agent works through the project context and creates the design directly in Figma.
For example, you can give it a link to the file and ask:
Build a profile settings screen where users can change their name, photo, and email address. Use our design system and follow the patterns in the rest of the product. If any components or states are missing, show me what needs to be added.
The screen design and editing skill first helps the agent establish what to work from. If the project has a design system, it uses that. Otherwise, it takes its cues from the product’s existing screens.
When building with an existing design system, it has three options: use an instance, update the design system, or create a new component. It can’t just draw a similar-looking frame and pass it off as a component.
The same skill works for edits to an existing design. You can ask it to change a specific detail while keeping everything else as it is:
Fix the selected state of the tab on this screen. Keep the current geometry, copy, and all other elements unchanged.
The agent makes changes one element at a time and checks them against the approved design, so a request to fix a highlight doesn’t also turn into new corner radii, spacing, and composition.
A separate use case that helped me a lot was bringing Figma back in sync with the live product. We already had a design system, but the product had drifted a long way from the mockups. We needed to capture the live screens and rebuild them using the existing components.
You can give the agent both links and ask:
Here’s a link to the live website page and our Figma file. Rebuild this screen on the specified Figma page. Use the existing components and variables. If anything is missing, show me what needs to be added.
That’s how I rebuilt more than fifty screens in one day. Doing it by hand alongside my other work would have taken me a month. I reviewed every screen, of course, and asked the agent to fix any errors I found. Even with those corrections, the time saved was invaluable to me.
Restore variable bindings
Sometimes a screen looks fine even though its spacing is set to raw numbers, its colours have been entered manually, and some variable references point to a deleted collection. You only discover the problem when you switch themes or update the library.
Check the colour, typography, spacing, and corner radius bindings on this page. Show me what’s become detached and what can be rebound to variables from our library.
With the variable binding repair skill, the agent first shows you what can be bound to the library, which values have no matches, and what will stay unchanged. It only starts making fixes after you confirm, and you can try it on a single frame first.
If a value doesn’t match any token, it needs a separate decision. For example, a 10-pixel gap shouldn’t simply be replaced with the nearest token when the available options are 8 and 12. You first need to understand whether it’s a mistake or a deliberate design choice.
The agent doesn’t have to learn the API all over again
When making changes to a file, the agent uses the Figma API rules alongside the other instructions.
Without knowing the API’s quirks, it starts trying calls, running into errors, and spending tokens figuring out what works. Even a simple task can become slow and tedious. These rules already contain the limitations, working approaches, and ways to check the result, giving the agent experience it would otherwise have to gain all over again on your file.
For example, after making a change, it needs to read the result back. A successful tool response doesn’t necessarily mean a variable was actually bound or a property applied.
Before showing you a screen, the agent must also check that it has built everything requested, including the required states, applied the variables and styles, and preserved the product’s established design decisions.
The scope of that check depends on the task. A small edit doesn’t call for reconsidering the entire screen, and the direction you chose shouldn’t change just because the agent prefers something else.
How to get started
In Claude Code, the bundle installs as a single plugin that adds all five skills. There are separate instructions for Codex in the README.
You’ll need to connect the agent to Figma and give it access to the relevant file. It’s also worth checking your seat type: Dev and Full seats allow substantially more tool calls than View and Collab seats. You can find the current limits in the Figma documentation.
If you already have Claude Code installed, you can ask it to handle part of the setup:
Install the chudarin-figma-skills bundle by following the README. Check what’s needed to connect to Figma and help me finish the setup.
After installation, restart the agent and sign in to Figma. Then you can move on to your task:
- Start the agent in a dedicated folder for your project.
- In Figma, copy a link to the relevant frame or page using Copy link to selection.
- Send the link along with your task. If the components are in another file, include a link to that one too.
Use the same folder in later sessions, because the screen design skill saves the project context and agreed decisions there.
I’d start with a small, real task, such as auditing a page, restoring bindings on one screen, or making a specific edit. That makes it easier to see how the agent works with your components and check the result.
Try it and send me a session
The bundle is available in the chudarin-figma-skills repository under the MIT licence. I’d like your feedback: what worked well, where you had to step in, and when the result diverged from what you expected.
If something goes wrong, send me the session or an excerpt of the conversation that shows how the work unfolded. These details would also help, though they’re optional:
- Your original request and the result you expected.
- The agent and model you used.
The session will help me see whether the agent found the design system, loaded the right instructions, and how it arrived at its solution. You don’t need to work out the cause before sending it.
To prepare an anonymised report, you can ask the agent:
Prepare a brief report on this session for public sharing. Do not include API keys, tokens, passwords, cookies, personal data, private links, or confidential project materials. Replace them with
[REMOVED]markers. Preserve the requests, responses, tool names, and steps relevant to understanding the issue. Before returning the report, check it for secrets and personal data.
Review the report before sending it, then message me on Telegram or open an issue.
If you’re building skills for Figma too, send me your approaches and examples. I’d like to compare the problems we’re running into and see which solutions we can combine. That way, looking into one unsuccessful session can help everyone who comes along with a similar task.