Inspect Figma screens to gather details for implementation, including component variants, spacing, shared design settings, and image assets. It helps an agent understand layouts and design libraries before turning a design into code.
Inspect Figma designs and generate implementation context for screens and interfaces. Use to read component variants, spacing and design tokens, inspect layouts and design-system libraries, and extract image assets for implementing a design through Figma's official MCP server.
Run score Not tested
See how to installRead Figma designs and organize the information needed to implement screens and interfaces. Inspect component variants, layouts, and design-system libraries. Check design tokens, the shared settings used to manage details such as spacing and colors, and extract image assets for implementation. Separate guides cover implementing designs in code, editing the canvas, creating FigJam diagrams, and setting up Code Connect mappings.
Use it when you want to understand the settings behind components and their placement before implementing a screen. It helps you check the design details that support what you see on the canvas. You can also gather the information needed to build screens that follow an existing design system.
The skill uses an installed figma CLI and a connection to Figma's official MCP server. Changes to designs, files, and other resources require individual approval. Usage limits depend on the account and seat, and read operations also count toward those limits.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).
Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 24, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
Use the installed figma CLI. Start with figma status. If it reports
not_connected, run figma authorize-url and share only the returned
connect_url with the user.
OAuth uses Dynamic Client Registration and PKCE through authd. Figma issues a per-registration confidential client; authd stores its generated secret outside the runtime cell, so credentials must never be requested in chat.
Run figma list-tools to inspect the live provider catalogue and schemas,
then call an advertised tool with:
figma call-tool --name <tool> --arguments-json '<json-object>'
list-tools exposes only reviewed Figma tools and includes each tool's
hatch_permission, hatch_action, and hatch_permission_label. Unknown or
new provider tools remain unavailable until reviewed. Read permissions follow
the user's connector settings; design, file, asset, Code Connect, plugin, and
shader changes require granular approval. Do not retry a failed or timed-out
write automatically because its side effect may have completed.
Before calling a tool whose description requires a Figma skill, fetch that
skill with get_figma_skill and follow its prerequisites. These skill://
URIs refer to resources on Figma's MCP server. For example, before
create_new_file, read:
figma call-tool --name get_figma_skill --arguments-json '{"uri":"skill://figma/figma-create-new-file/SKILL.md"}'
Use the skill URI advertised by the tool. If the relevant URI is unknown,
fetch skill://index.json with the same tool and select the matching skill.
Fetch supporting references only as needed, resolving relative paths against
the parent skill URI. Reuse guidance already loaded for the current task;
there is no need to install or copy these provider skills into the local
skill directory. Skill reads use the designs.read permission.
Call get_figma_skill only when advertised by list-tools. If the tool is
unavailable or Figma confirms that a skill is missing, continue using the
live tool description, schema, and local guides only when the skill is
optional (for example, "if it exists"). If the skill is required
unconditionally, stop the dependent operation and report the missing
guidance. Authentication failures, permission denials, timeouts, and other
read errors do not establish that a skill is missing. Avoid repeated failed
lookups; continue work that does not depend on the unavailable guidance.
Read only the guide that matches the task before calling provider tools:
use_figma:
canvas editingFor a Figma URL, extract its fileKey and node-id; convert node IDs from URL
form (123-456) to API form (123:456). Inspect the live schema before
constructing arguments because Figma can add optional fields without changing
this skill.
Avoid redundant catalogue, context, screenshot, and validation calls. Figma applies account- and seat-dependent usage limits, and repeated reads can consume a user's small monthly allowance. Reuse results gathered earlier in the task.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create a 3D object with three.js, inspect it from every angle in an interactive viewer, and download it as OBJ + MTL or GLB for use in other 3D applications.
Maintain a private task list with deadlines, next steps, waiting parties, and blockers. Update progress and dependencies, merge duplicate items, and archive closed tasks so ongoing commitments stay clear and easy to follow.
Coordinate a task from a verifiable goal through completion. Handle work directly or split independent tasks across separate agent sessions, track progress, verify results, and arrange pull request merging when included in the goal.
Create animated HTML pages with smooth scene transitions and playback controls. An editable timeline lets users adjust scene lengths and speeds, with fixed landscape or portrait layouts prepared for video export.
Review synced Apple Health records, including steps, heart rate, sleep, and workouts. Retrieve daily summaries or detailed samples for a chosen period, and check sync status and missing data before interpreting the results.
Create and edit Word documents and templates, reorganize text, replace images, and work with tracked changes or comments. Apply proper headings and lists, then render every page to check its appearance before delivery.