When to use this workflow
Use this workflow when an agent needs to inspect or edit a specific Figma artifact. Begin by confirming the file and target frame it can actually access. A response based on repository code or a screenshot may be useful, but it is not evidence that the agent inspected the Figma component, variables, or instances you named.
A worked example
For an illustrative button audit, ask the agent to report the component, properties, variants, and token references before making changes. Compare those observations with the implementation. Record disagreements such as an unsupported size or missing pressed state, then resolve them with the component owner. Apply one approved change and inspect the same target again.
Decisions and common mistakes
If the agent cannot identify the target or available operations, stop the editing portion and resolve access or selection first. Do not let an approximate reconstruction replace an existing library component without an explicit design decision. After a change, inspect constraints, instances, labels, and surrounding layout, including a narrow or long-content case.
What to hand off
Keep the file reference, target identifiers, approved decisions, and before/after evidence with the work. The next contributor should be able to distinguish what Figma originally contained from what the team chose to change. Use the related Figma-to-Storybook guide when the next step is a documented code component.
Set up and try the skill
1. Start with one concrete task
Bring: A Figma file URL, target frame, editing goal, and a connected MCP host with file access.
First task: Inspect the target frame and available operations before requesting a change to one component.
Choose a small task for “use the figma mcp.” Provide the relevant file, screen, or brief and define what a useful result should contain. Keep the original version available for comparison.
2. Install and verify the instructions
Run this command from the project where you want the skill available. Follow the installer’s host selection, then confirm the skill appears in that host. The command is the installation method documented by the TDP repository.
npx skills add thedesignproject/agent-skills -s figma-useRead the full skill instructions for prerequisites and supported tools. Installing a skill does not automatically connect Figma or grant access to external tools.
3. Apply it with your project context
Use the starter request below with the relevant inputs attached or referenced. Confirm that the host loaded the intended skill; a matching name alone is not evidence that its instructions were applied.
4. Review the result
Compare the edited frame with the request; check layout constraints, text content, and component instances.
Compare the output with the task’s acceptance criteria. Check factual claims, unsupported assumptions, and any changes to the interface. For code or design changes, review real states and behavior before treating the result as finished.
5. Keep what works
Save approved outputs with their source and ownership. Note which instructions helped, where the result needed correction, and what must be checked next time. Use the workflow below to connect this task to its next step.
A starter request
Adapt this example to your files, audience, and requirements.
Review the Figma MCP prerequisites for this file. Identify the supported operations, target frame, and any missing access before editing.
Completion checklist
- The inputs and intended result are explicit.
- Required files and tools are available in the chosen host.
- The result has been reviewed against the actual task.
- Limitations and follow-up checks are recorded.