skills.rest
xzedm
xzedmCOMMUNITY
Explore all skills by this author →
GitHub

figma-use

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

Updated Sep 3, 2026
Search Tags:#javascript#components#figma#design automation#variables#auto-layout#plugin api
One-click install
npx skills add https://github.com/xzedm/clipplic-landing --skill figma-use-xzedm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-use
Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/figma-use
Command: npx skills add https://github.com/xzedm/clipplic-landing --skill figma-use-xzedm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing Figma Plugin API code through the use_figma tool is error-prone: unloaded fonts throw exceptions, sync page setters fail, unawaited promises cause silent failures, and large single-shot scripts are hard to debug. This Skill provides the mandatory rules, efficient API patterns, and reference documentation needed to write correct Figma automation scripts on the first attempt. ## Core Features & Use Cases - Critical rule enforcement: Covers font loading before text edits, async page switching with setCurrentPageAsync, 0-1 color ranges, layoutSizing HUG/FILL constraints, and mandatory return of created node IDs. - Efficient API patterns: Teaches node.query() CSS-like selectors, node.set() batch updates, figma.createAutoLayout(), inline node.screenshot() verification, and placeholder shimmer for progress feedback. - Incremental workflow with error recovery: Prescribes inspect-first discovery, small validated steps, parallel multi-page fan-out, and a self-correction table mapping common error messages to fixes. - Use Case: A user asks to build a settings screen in Figma. The Skill guides the agent to inspect existing variables and components, create auto-layout sections with placeholders, populate them incrementally, and validate each step with screenshots. ## Quick Start Ask the agent to load the figma-use skill and then create a new auto-layout card component with a title and description text in the current Figma file.

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. The return value is JSON-serialized back to the agent, so always return created node IDs and status data instead of using console.log or figma.closePlugin.

How do I edit text nodes in Figma without font errors?▼

Follow the canonical text-edit recipe: call await figma.loadFontAsync with the node's current font, then mutate characters or font properties, then return affected node IDs. Skipping the font load throws a 'Cannot write to node with unloaded font' error.

Why does setting figma.currentPage fail in use_figma?▼

The sync setter figma.currentPage = page is not supported and throws an error. Use await figma.setCurrentPageAsync(page) instead, and call it at most once per script since page context resets between calls.

Does use_figma work in FigJam or Figma Slides files?▼

It works in design mode by default. FigJam and Slides block most design node types, and figma.createPage() is unavailable in both. Check the URL: figma.com/design for Design, figma.com/board for FigJam, figma.com/slides for Slides.

Why did my Figma script fail with HUG or FILL layout errors?▼

layoutSizingHorizontal/Vertical values are restricted by structural context: HUG works only on auto-layout frames or their text children, and FILL works only on non-absolute children of auto-layout frames. Append the child to an auto-layout parent first, then set the sizing value.

What happens when a use_figma script throws an error?▼

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

Related Skills

Explore More Design & Creative Skills→
winetree94winetree94

figma-generate-design

Generate Figma screens by reusing design system components, tokens, and styles.

Community
Advanced
rakibulismrakibulism
2

figma-generate-design

Build composed Figma views from source code using design system components.

Community
Advanced
codesour-designcodesour-design

source-command-gravity-tokens

Apply Gravity design system tokens to Figma screens via component linking and variable binding.

Community
Intermediate
openaiopenai
5.3k

figma-generate-library

Builds design systems in Figma from codebase tokens and components.

Official
Advanced