On my team, there are several Figma-centered gates we need to go through before a design is ready to handoff to engineering. This process is important but also increasingly in tension with my exploration and full-on adoption of AI tools like Cursor and Claude Code in my design process.
The gates are:
- Add any new components you created to the team's Figma component library
- Accessibility specialist audits the Figma mockups so that engineering will have all specs necessary to make the designs WCAG compliant.
- Content designer does a final audit of the content in Figma to ensure consistency with company content guidelines
- Sign off from design and product leadership, often requiring video walkthroughs of features in a prototype
Over the past few months, I have been building an agent and some AI skills to bridge the gap between my coded prototypes and the larger organization's current way of working.
React-to-Figma skill
To automate adding new components to the team's Figma component library, I created a React-to-Figma Claude skill. It translates React components to Figma components. The skill instructs the agent to properly create component sets, not just components, that mirror all of the states a React component can have as Figma component variants and React props as Figma component properties. The skill aditionally uses a JSON map of existing React components in my codebase to Figma components in the team's component library. This map is especially helpful when a new component contains sub-components that already exist in the component library. The skill can just go grab the pre-existing components instead of rebuilding from scratch.
Note: When I first started exploring this skill, Figma MCP and Figma Console MCP could do some of what I wanted. At the time, I found myself having to do a lot of tweaking in Figma when I used either MCP directly, without the React-to-Figma skill. Both MCPs have improved significantly, and I use them more and more. The JSON map of React to Figma components remains the most valuable peice of this skill. Giving the agent that context up front makes using the Figma and Figma Console MCPs much more token efficient because they don't have to waste resources on searching the Figma component library for elements the agent can re-use.
Playwright-to-Figma pipeline
For accessibility audits, content audits, and stakeholder signoffs, I am using a custom agent that writes Playwright scripts, captures video sessions and screenshots, and can upload the screenshots to Figma for review. This lets me automate generating the necessary assets for each function without recreating in Figma whole UX flows I designed in a coded prototype.
The skill takes a markdown document that I create (or create with an AI agent) that lays out all of the UX flows that I want to capture. It then writes Playwright scripts for each. The skill instructs the agent to write the script in a way that takes screenshots after each step in the flow and relevant state change in the app.
The agent runs the Playwright script to generate the screenshots and videos. The agent then uses the Figma MCP to add the screenshots in a row from start to finish to a Figma page that I can share with colleagues or leadership. I upload teh video recordings to OneDrive to share with the larger team.
With this agent, I can automatically create static and video assets without lifting a finger. Fine, I have to upload the video, but still. Accessibility and content can use the screenshots to do part of the accessibility audit and the entire content audit. Leadership can get detailed video walkthroughs of the feature before signing off.
What's next
I think these skills are temporary patches that won't be necessary very soon. With each of these, I am trying to fit the square peg of a new AI-forward design process into the round hole of a large company's Figma-centric process.
However, as more designers move away from Figma and the Figma component library as their source of truth, there will soon be a time when I don't need to reverse engineer a React component into a Figma component so others can use it. Similarly, accessibility specialists and content designers are creating their own AI-powered processes that work with a coded prototype instead of Figma mocks. Leadership, too, is increasingly asking for the link to a feature prototype.
These custom skills are specific tools for a point in time. As the ways of working changes, the necessary tools will change as well.