figma-use

Executes JavaScript in Figma files via the Plugin API to create and edit design nodes.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/zniihgnexy/vid_tokenizer --skill figma-use-zniihgnexy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-use
Source: https://github.com/zniihgnexy/vid_tokenizer/tree/main/.ds/codex-home/plugins/cache/openai-curated/figma/314574a046f21938025ae443f9c6dbbd0c2c9b7a/skills/figma-use
Command: npx skills add https://github.com/zniihgnexy/vid_tokenizer --skill figma-use-zniihgnexy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing Figma Plugin API code blind leads to common, hard-to-debug failures like unawaited promises, invalid page switching, and collapsed auto-layout. This Skill provides the mandatory rules, gotchas, and reference docs needed before every use_figma tool call so scripts execute correctly the first time. ## Core Features & Use Cases - Plugin API guardrails: Enforces critical rules such as using return for output, 0–1 color ranges, async page switching via setCurrentPageAsync, and returning all created or mutated node IDs. - Incremental workflow guidance: Prescribes an inspect-first, small-steps pattern with validation via get_metadata and get_screenshot after each stage. - Deep reference library: Ships reference docs covering variables, components and variants, text and effect styles, common patterns, error recovery, and the full Plugin API typings. - Use Case: When asked to build a button component set with color variables and modes in Figma, load this Skill first to correctly create the collection, bind paints, set explicit variable modes, combine variants, and lay them out without overlap. ## Quick Start Load the figma-use skill before calling use_figma, then ask the agent to create a styled auto-layout card frame in the current Figma page.

Frequently Asked Questions about figma-use

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run JavaScript in a Figma file with the Plugin API?▼

Use the use_figma tool with plain JavaScript using top-level await and return. Load the figma-use skill first, pass skillNames: "figma-use", and return structured data such as created node IDs since console.log output is never visible.

How do I create components and variants in Figma programmatically?▼

Create ComponentNodes with figma.createComponent(), name them with Property=Value syntax, then call figma.combineAsVariants. Afterward you must manually position children in a grid and resize the set, since variants stack at (0,0) by default.

Why does setting figma.currentPage throw an error?▼

The sync setter figma.currentPage = page is not supported in use_figma and throws. Use await figma.setCurrentPageAsync(page) instead, which switches the page and loads its content. Page context also resets to the first page between calls.

Does use_figma support figma.notify or getPluginData?▼

No. figma.notify() throws a not implemented error, and getPluginData/setPluginData are unsupported. Use return values for output and getSharedPluginData/setSharedPluginData with a namespace, or track node IDs across calls.

Why do my Figma auto-layout children collapse when using FILL sizing?▼

FILL only works after the child is appended to an auto-layout parent, and the parent must be FIXED or FILL itself. A HUG parent gives FILL children no extra space, so they collapse to minimum size.

What happens when a use_figma script fails?▼

Failed scripts are atomic: no changes are made to the file. Read the error message, inspect state with get_metadata or get_screenshot if unclear, fix the script, and retry safely without worrying about partial nodes.