Skip to main content
affpapa.org
RU EN
skill CX Codex GP ChatGPT official · OpenAI

figma-use — Codex skill: what it does, how to install

This skill sets out how to use the Figma Plugin API through use_figma. It helps when an agent needs to change a Figma file or inspect its structure programmatically.

Install into Codex · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/plugins --skill figma-use -a codex
Open on GitHub

What figma-use does

figma-use explains how to run JavaScript in Figma files through the Plugin API. Its guidance covers text edits, pages, variables, and auto layout, with instructions to make changes in small steps and validate them. Detailed API references are included with the skill.

For building or updating a full page, load figma-generate-design as well. Component work also calls for figma-generate-library. Pay attention to font-loading rules when editing text and to the requirement to switch pages asynchronously. Install this skill when an agent will call use_figma; it is unnecessary for tasks that do not involve the Figma Plugin API.

What it helps with

  • create or edit nodes in a Figma file
  • inspect a page's structure with JavaScript
  • set up variables and bind them to properties
  • build a component with variants and auto layout

Example prompts for the agent

  • Create an auto-layout frame in Figma and add a heading to it.
  • Find the text nodes on the current page and return their IDs.
  • Change this node's fill and return its ID.

How to install figma-use

1Skills CLI (Vercel)

npx skills add openai/plugins --skill figma-use -a codex

2Manually: put the files in place

.agents/skills/figma-use/SKILL.md

For all projects use ~/.agents/skills/

From the same set201

The whole set →
supabase official supabase Guides the agent through database configuration and strict RLS policies in Supabase. CX Codex GP ChatGPT 8installs remotion-render official Remotion Exports videos and static stills from Remotion projects using CLI commands. CX Codex GP ChatGPT 3installs figma-create-new-file official Figma Creates blank Figma, FigJam, or Slides files inside draft folders. It resolves planKey and editor types before invoking Figma MCP tools. CX Codex GP ChatGPT 6installs swiftui-performance-audit official OpenAI Pinpoints SwiftUI runtime issues like frame drops, unresponsive taps, and excessive view body computations. Works code-first and guides Instruments profiling. CX Codex GP ChatGPT 109installs swiftui-liquid-glass official OpenAI This skill helps build and review SwiftUI Liquid Glass interfaces for iOS 26+. Use it when adopting the API or checking fallbacks, interaction, and design fit. CX Codex GP ChatGPT 121installs swiftui-ui-patterns official OpenAI This skill helps build and refactor SwiftUI interfaces, from navigation and state to layouts and controls. Use it for new screens or changes to an existing project. CX Codex GP ChatGPT 114installs swiftui-view-refactor official OpenAI Refactors SwiftUI view files into clean, testable structures with dedicated subview types and proper Observation ownership. CX Codex GP ChatGPT 113installs ios-memgraph-leaks official OpenAI Captures and inspects iOS leaks from a simulator process or .memgraph. Useful for tracing retained objects and checking a fix with before-and-after evidence. CX Codex GP ChatGPT 1,054installs

Similar

frontend-design-review microsoft This skill reviews and creates frontend interfaces with checks for design quality, accessibility, and design-system use. Use it for UI reviews, PRs, and responsive layouts. Claude Code GitHub Copilot 237installs markdown-html-orchestrator Alireza Rezvani Routes long Markdown documents, code reviews, and slide decks to the right converter, which writes a standalone HTML file. Use it when a document needs a browser-ready format. Claude Code 46installs design-system Alireza Rezvani Captures brand identity via a 10-question wizard and validates WCAG 2.2 AA contrast. It derives 12 CSS tokens in HSL for markdown-html converters. Claude Code 33installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs

Questions about figma-use

How do I install figma-use in Codex?

Run npx skills add openai/plugins --skill figma-use. To specify the agent, run npx skills add openai/plugins --skill figma-use -a codex.

What does figma-use do?

It provides guidance for running JavaScript in Figma files through the Plugin API with use_figma. An agent can use it to edit a file or inspect its structure programmatically.

Do I need another skill to build Figma components?

Yes. Load figma-generate-library alongside figma-use for component creation. For a full page or screen, load figma-generate-design.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor