skills.rest
Haohao-end
Haohao-endCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-use

Execute JavaScript edits in Figma files through the Plugin API MCP tool.

779|80|Updated Jun 20, 2025
Search Tags:#figma#mcp#design automation#javascript execution#auto-layout#plugin api#variables tokens
One-click install
npx skills add https://github.com/Haohao-end/openagent --skill figma-use-haohao-end
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-use
Source: https://github.com/Haohao-end/openagent/tree/main/api/internal/core/skills/catalog/figma-use
Command: npx skills add https://github.com/Haohao-end/openagent --skill figma-use-haohao-end

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents brittle, hard-to-debug Figma automation by providing a strict, reusable rule-set for running JavaScript through the Figma Plugin API.

Core Features & Use Cases

  • Enforces correct MCP usage: ensures you load the prerequisite rules before calling use_figma, with consistent logging and execution expectations.
  • Supports design-safe editing: guides incremental creation and mutation of nodes (including variables, bindings, and layout operations) while respecting Figma runtime constraints.
  • Improves reliability & debugging: emphasizes atomic scripts, page-context resets across runs, and required return values for created/mutated node IDs.
  • Covers common Figma pitfalls: includes guardrails for font loading, page switching, auto-layout sizing order, and color/value ranges.

Quick Start

Use the figma-use skill to perform a write operation like creating or editing nodes in a Figma file through use_figma while following the required return and incremental-call rules.

Frequently Asked Questions about figma-use

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

FAQPage Schema
How do I automate Figma file edits using JavaScript safely?▼

You automate Figma file edits by executing JavaScript through the Figma Plugin API MCP tool. This approach enforces strict runtime rules, ensuring deterministic node creation and safe design system mutations.

How do I set up variables and design tokens in Figma programmatically?▼

Set up Figma variables and tokens programmatically by executing JavaScript through the Plugin API. This method ensures atomic operations and returns mutated node IDs for reliable design system binding.

Why does my Figma plugin script fail when switching pages?▼

Figma plugin scripts fail when switching pages if the multi-call page context is not reset properly. You must handle page context correctly between runs and use atomic error recovery to prevent brittle automation.

What's the best way to debug brittle Figma automation scripts?▼

The best way to debug brittle Figma automation is to use incremental, atomic scripts with consistent logging. Returning created or mutated node IDs tracks changes and isolates errors effectively during execution.

Can I use the Figma Plugin API to apply auto-layout programmatically?▼

Yes, you can apply Figma auto-layout programmatically by executing JavaScript through the Plugin API. You must follow strict runtime rules for sizing order to ensure deterministic layout operations.

What Figma runtime constraints should I check before running automation scripts?▼

Before running Figma automation scripts, check constraints like font loading requirements, 0-1 color value ranges, and auto-layout sizing order. These guardrails prevent execution errors during node mutation.

Related Skills

Explore More Design & Creative Skills→
DevPelumiDevPelumi

figma-use

Enforce mandatory Figma Plugin API execution rules for use_figma tool calls.

Community
Advanced
ahandselahandsel
1

figma-use

Execute JavaScript in the Figma Plugin API to manipulate design nodes.

Community
Advanced
pathtoresiliencebvpathtoresiliencebv

figma-use

Execute JavaScript in Figma files via the Plugin API to automate design operations.

Community
Advanced
manutejmanutej
61

figma-design

Automate Figma design workflows for plugin development and design-system management.

Community
Advanced