What is the figma-use skill?
The figma-use skill is the mandatory prerequisite for the use_figma tool on the Figma MCP server. It teaches an agent how to write Plugin API JavaScript that creates or edits nodes, variables and components, with rules for returns, pages, fonts, colors and error recovery.
The figma-use skill is a required companion to the use_figma tool on the Figma MCP server. Its description says to load it before every use_figma call, because skipping it causes common failures that are hard to debug.
It does not tell the agent what to design. It sets the rules for running JavaScript through the Figma Plugin API, covering returns, page switching, fonts, colors and error handling, so each script behaves predictably.
What changes in your agent's output
- Scripts use top level await and return, with no async wrapper and no figma.closePlugin call.
- Every call returns the IDs of nodes it created or changed, so the next call can build on them.
- Colors use the 0 to 1 range, and fonts load before any text change.
- Work happens in small steps, with a metadata or screenshot check after each one.
What the skill covers
- Seventeen critical rules, such as setting variable scopes explicitly and awaiting every Promise.
- Page rules: the current page resets to the first page on each call, so switch with setCurrentPageAsync.
- An incremental workflow from inspecting the file to final verification.
- Error recovery, where a failed script makes no changes, plus a pre-flight checklist.
Who the figma-use skill is for
Best for
- Anyone letting an AI agent write to Figma files through the Figma MCP server.
- Creating or editing nodes, tokens, components, variants and auto layout programmatically.
- Teams hitting silent failures from unawaited calls, wrong color ranges or unloaded fonts.
Not for
- Read only design to code work. Related: the Figma MCP page.
- Planning a whole page or screen layout. SKILL.md says to load figma-generate-design alongside this skill for that workflow.
- FigJam boards, since use_figma runs in design mode and blocks node types such as Sticky and Connector.
Use it with UiChemy
This skill writes to a Figma file and does not publish anything to WordPress. UiChemy Figma to WordPress then converts a finished Figma file into editable pages. Click Get Started on uichemy.com. See also Figma UI MCP.
How to install OpenAI Figma Use Skill: Rules for Writing to Figma
$skill-installer figma-useRun the skill installer
The repository README says curated skills install by name with the skill-installer inside Codex. Run
$skill-installer figma-use.Restart your agent
The README says to restart Codex after installing so it picks up new skills.
Connect the Figma MCP server
The skill guides calls to the use_figma tool, which comes from the Figma MCP server, so connect that server first.
Install by hand instead
Run
git clone https://github.com/openai/skills.gitand copy the skills/.curated/figma-use folder to where your agent loads skills.
Check that it loaded
Ask the agent to create a simple frame in a Figma file. It should load figma-use, inspect the file first, return node IDs from the script and check the result with a metadata or screenshot call.
Key features
- Mandatory prerequisiteThe description tells the agent to invoke the skill before every use_figma call and never to call the tool directly, and asks for skillNames set to figma-use as a logging parameter.
- Return as output channelOutput is only what the script returns. console.log is not returned, figma.notify throws not implemented, and every script must return all created and changed node IDs.
- Page context rulesfigma.currentPage resets to the first page on each call, and the sync setter throws, so scripts switch with await figma.setCurrentPageAsync to load page content.
- Incremental workflowInspect first, do one thing per call, return IDs, validate with get_metadata and get_screenshot, and fix before moving on. SKILL.md calls small steps the most important practice.
- Atomic error recoveryA failed script is not executed at all, so no partial nodes remain. The skill says to stop, read the error, fix the script and then retry, with a table of common errors.
- Variable scopesVariables get explicit scopes. The default ALL_SCOPES pollutes every property picker, so backgrounds, text colors and spacing each get specific scopes.
- Layout and sizing gotchasFILL sizing must be set after appendChild, resize comes before sizing modes, and new top level nodes are placed away from 0,0 to avoid overlapping existing content.
- Pre flight checklistA checklist covers return usage, color range, reassigning fills as new arrays, awaiting every async call, and lineHeight and letterSpacing in unit and value form.
- Reference libraryThe folder holds references on the Plugin API, components, variables, text styles, effect styles, gotchas, validation, and working with design systems.
Frequently asked questions
What is the figma-use skill?
It is a skill in the openai/skills catalog that must be loaded before every use_figma call. It holds the rules for writing Figma Plugin API JavaScript that creates or edits nodes, variables and components, and for recovering when a script fails.
How do I install figma-use?
The README says curated skills install by name inside Codex, so run $skill-installer figma-use and restart Codex. You can also clone the repository and copy the skills/.curated/figma-use folder to wherever your agent loads skills from.
Why must it load before use_figma?
The description calls it a mandatory prerequisite and says skipping it causes common, hard to debug failures. The rules cover details such as returning data, awaiting calls, loading fonts and color ranges that the tool alone does not enforce.
What happens when a use_figma script fails?
SKILL.md says failed scripts are atomic, so nothing changes in the file. The agent should stop, read the error, check state with get_metadata or get_screenshot if needed, fix the script and retry. It should not retry at once.
Does it work with FigJam?
No. SKILL.md says use_figma works in design mode, and FigJam has a different set of node types. Blocked node types in design mode include Sticky, Connector, ShapeWithText, CodeBlock, Slide, SlideRow and Webpage.
How does it relate to figma-generate-design?
For a full page, screen or multi section layout, SKILL.md says to load figma-generate-design as well. That skill covers the screen building workflow, while this one covers the API rules. Related: the Figma MCP page.
Does the skill need other tools?
It relies on the Figma MCP server for use_figma, and uses get_metadata and get_screenshot to validate each step. Its references also point to search_design_system and a design system guide when you work with existing components.
What license does the skill use?
GitHub shows no license for the repository itself. The README says each skill's license sits in a LICENSE.txt file inside that skill's folder, so read the file in the skill folder before you redistribute it.