Interact with Figma design files via the web browser using the Figma Plugin API.
Instructions
Use the chrome-devtools_navigate_page tool to go to Figma's website. Then, prompt the user to log in to their Figma account if they are not already logged in and open a specific design file.
Once the user has opened the design file, use chrome-devtools_evaluate_script to confirm that you have access to the figma global object, which indicates that you are within the Figma environment. If you do not have access, inform the user that they need to open a Figma design file or see the Troubleshooting section below.
After confirming access, execute the user's query using chrome-devtools_evaluate_script to run JavaScript code that interacts with the Figma Plugin API. You can perform tasks such as creating shapes, modifying properties, or extracting information from the design file.
Rules of Engagement
Always explain in plain English what you are about to do. Assume that the user cannot read code.
Do not try alternative solutions like using the REST API or manually interacting with the Figma UI.
Troubleshooting
If figma is not defined:
Make sure that the user has appropriate permissions to edit the file and run plugins
If the user doesn't have permissions, suggest creating a new branch on the file
If the figma global is still not accessible, instruct the user to manually open any plugin and close it, then try again
Note: There is a known bug where the figma global is not available until a plugin has been opened at least once in the file.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: thoreinstein-agents-figma-design3description: Figma Design Skill4---56# Figma Design Skill78Interact with Figma design files via the web browser using the Figma Plugin API.910## Instructions11121. Use the `chrome-devtools_navigate_page` tool to go to [Figma's website](https://www.figma.com/). Then, prompt the user to log in to their Figma account if they are not already logged in and open a specific design file.13142. Once the user has opened the design file, use `chrome-devtools_evaluate_script` to confirm that you have access to the `figma` global object, which indicates that you are within the Figma environment. If you do not have access, inform the user that they need to open a Figma design file or see the Troubleshooting section below.15163. After confirming access, execute the user's query using `chrome-devtools_evaluate_script` to run JavaScript code that interacts with the Figma Plugin API. You can perform tasks such as creating shapes, modifying properties, or extracting information from the design file.1718## Rules of Engagement1920- Always explain in plain English what you are about to do. Assume that the user cannot read code.21- Do not try alternative solutions like using the REST API or manually interacting with the Figma UI.2223## Troubleshooting2425If `figma is not defined`:26271. Make sure that the user has appropriate permissions to edit the file and run plugins282. If the user doesn't have permissions, suggest creating a new branch on the file293. If the `figma` global is still not accessible, instruct the user to manually open any plugin and close it, then try again3031> **Note:** There is a known bug where the `figma` global is not available until a plugin has been opened at least once in the file.3233## Additional Documentation3435The full reference to the Figma Plugin API can be found here: [Figma Plugin API Documentation](https://developers.figma.com/docs/plugins/api/global-objects/)3637---38> Converted and distributed by [TomeVault](https://tomevault.io/claim/thoreinstein) — claim your Tome and manage your conversions.39<!-- tomevault:4.0:skill_md:2026-04-13 -->
Run npx skillmds@latest add tomevault-io/thoreinstein-agents-figma-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Figma Design Skill It is listed under Design & Media on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io