Figma Use
**MANDATORY prerequisite**, you MUST invoke this skill BEFORE every `use_figma` tool...
Install
npx skills add openai/skills --skill figma-use -g -a claude-code -y- Repository
- openai/skills28.4k
- Category
- Design
- Updated
- 7d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
**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.
use_figma, Figma Plugin API Skill
Use use_figma 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 use_figma. 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 search_design_system, 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.
