figma-use

Execute JavaScript on Figma files via the use_figma MCP.

Updated Mar 25, 2026

Search Tags:#automation #validation #components #figma #plugin #variables #design-systems

Ready to run

npx skills add https://github.com/PytaichukBohdan/figma_board_connection --skill figma-use-pytaichukbohdan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-use
Source: https://github.com/PytaichukBohdan/figma_board_connection/tree/main/.claude/skills/figma-use
Command: npx skills add https://github.com/PytaichukBohdan/figma_board_connection --skill figma-use-pytaichukbohdan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured, safe pathway to run JavaScript in Figma via the use_figma MCP, enabling deterministic edits and repeated reads/writes within design files.

Core Features & Use Cases

Enforces best practices for incremental, step-by-step interactions with Figma (e.g., creating nodes, updating properties, binding variables) and ensures results are always returned via a structured payload.
Guides discovery and use of design-system references (design tokens, components, styles) and coordinates multi-skill workflows (e.g., design-system-driven component assembly) across pages.
Supports error handling and recovery guidance, including required fonts loading before text changes, page switching via setCurrentPageAsync, and validation via metadata and screenshots.

Quick Start

Invoke use_figma with a small, incremental task and return the created node IDs.

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 actions using the Plugin API safely?▼

To automate Figma actions safely, you execute JavaScript via the Figma Plugin API using incremental steps, awaiting promises, loading fonts before text edits, and validating changes with get_metadata and get_screenshot.

What is the best way to manage design system components and variables in Figma programmatically?▼

Managing design system components and variables programmatically involves applying read and write actions across pages and frames, manipulating design tokens, and binding variables to nodes while returning structured data payloads.

Why does my Figma plugin script fail when updating text nodes?▼

Your Figma plugin script fails when updating text nodes if you do not load the required fonts asynchronously before applying text edits. You must await font loading promises to ensure successful text manipulation.

Can I switch pages in Figma via JavaScript to modify frames across different artboards?▼

Yes, you can switch pages in Figma via JavaScript to modify frames across different artboards by using the setCurrentPageAsync method, which ensures the target page is active before applying any node creation or property updates.

How do I validate Figma design system changes after running an automation script?▼

To validate Figma design system changes after running an automation script, you use the get_metadata function to check node properties and get_screenshot to visually confirm the updated component workflows and token adjustments.

Does scripting Figma instances require handling asynchronous promises for design system workflows?▼

Yes, scripting Figma instances requires handling asynchronous promises for design system workflows. The API enforces strict promise awaiting for node creation, variable binding, and page switching to ensure deterministic edits and structured data returns.