Needs `https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin` to work. Open the plugin in the design file, then follow the instructions until the plugin is connected to a channel. The plugin will allow a local API connection to the file, ignoring Figma's API / MCP limitations. No need for any Figma MCP's.
Call skill `/figma-to-code:extract` to get `.figma-to-code/extraction.md`. This is needed for the user to manually call the extraction script to bypass Claude Code's web socket permission.
This step is almost completely done by script with very little LLM.
Steps:
- Select a screen/page element (e.g. Home, or About Us).
- Call skill`/figma-to-code:extract`, with the channel. This will call the plugin's API via a websocket several times to gather screenshots, design tokens, image assets, and a markdown representation of the page. Keep the Figma app / web page on the foreground if possible.
- Call the command described in`.figma-to-code/extraction.md`. This will call the plugin's API via a websocket several times to gather screenshots, design tokens, image assets, and a markdown representation of the page. Keep the Figma app / web page on the foreground if possible.
- View the result at `.figma-to-code/output/<screen name>/`, especially the `content.md`, which shows the 0.5 scale screenshot of the whole page, then the sections, each with 1:1 screenshot, image assets, and text. Check, correct, and improve as needed.
- You can then use the result to implement the page using the next skills.
