Agent skill · design visual · openai
figma-use
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
Why this skill is useful
Provides specific rules and patterns for executing JavaScript in Figma's Plugin API that the AI wouldn't reliably generate on its own.
What it needs
About 10k tokens when loaded. Last updated 2026-07-14. 24,594 stars on the source repository.
What this skill does
usefigma — Figma Plugin API Skill Use usefigma MCP to execute JavaScript in Figma files via the Plugin API. All detailed reference docs live in references/. Always pass skillNames: "figma-use" when calling usefigma. This is a logging parameter used to track skill usage — it does not affect execution. If the task involves building or updating a full page, screen, or multi-section layout in Figma from code, also load figma-generate-design. It provides the workflow for discovering design system components via searchdesignsystem, importing them, and assembling screens incrementally. Both skills work together: this one for the API rules, that one for the screen-building workflow. Before anything, load plugin-api-standalone.index.md to understand what is possible. When you are asked to write plugin API code, use this context to grep plugin-api-standalone.d.ts for relevant types, methods, and properties. This is the definitive source of truth for the API surface. It is a large typings file, so do not load it all at once, grep for relevant sections as needed. IMPORTANT: Whenever you work with design systems, start with working-with-design-systems/wwds.md to understand the key concepts, processes, and guidelines for working with design systems in Figma. Then load the more specific references for components, variables, text styles, and effect styles as needed. 1. Critical Rules 1. Use return to send data back. The return value is JSON-serialized automatically (objects, arrays, strings, numbers). Do NOT call figma.closePlugin() or wrap code in an async IIFE — this is handled for you. 2. Write plain JavaScript with top-level await and return. Code is automatically wrapped in an async context. Do NOT wrap in (async () => { ... })(). 3. figma.notify() throws "not implemented" — never use it 3a. getPluginData() / setPluginData() are not supported in usefigma — do not use them. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills openai/figma-use