figma-use

Execute JavaScript code within the Figma file context to manipulate nodes, pages, and components.

1|12|Updated Feb 23, 2026
One-click install
npx skills add https://github.com/ChatAndBuild/chatchat-skills --skill figma-use-chatandbuild
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-use
Source: https://github.com/ChatAndBuild/chatchat-skills/tree/main/skills/figma-use
Command: npx skills add https://github.com/ChatAndBuild/chatchat-skills --skill figma-use-chatandbuild

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies complex Figma operations by providing a wrapper around the Figma Plugin API, enabling users to execute JavaScript code and interact with the Figma file context programmatically.

Core Features & Use Cases

  • Execute JavaScript: Run JavaScript code within the Figma file context.
  • Manipulate Nodes: Create, modify, and manipulate Figma nodes, including frames, text, shapes, and components.
  • Interact with Pages: Switch between pages, load page content, and manipulate page properties.
  • Use Case: Automate the creation of complex UI components, apply styles and effects, and generate design variants programmatically.

Quick Start

Use the figma-use skill to create a new frame and set its size and fill color.

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 operations using the Plugin API?

You can automate Figma operations by executing JavaScript code within the Figma file context to manipulate nodes, pages, and components. This approach wraps the Figma Plugin API to programmatically create frames, apply styles, and generate design variants.

Can I generate design variants in Figma programmatically?

Generating design variants programmatically in Figma involves running JavaScript to manipulate nodes and apply styles. You can create complex UI components and apply effects automatically by interacting with the Figma Plugin API.

Do I need JavaScript knowledge to automate Figma UI tasks?

Yes, JavaScript knowledge is required to automate Figma UI tasks, as this Skill executes JavaScript code directly within the Figma file context. Familiarity with the Figma Plugin API is also necessary to manipulate nodes, pages, and components effectively.

What's the best way to script complex Figma component creation?

Scripting complex Figma component creation is best handled by executing JavaScript within the file context to manipulate nodes and frames. Using the Figma Plugin API allows you to automate creating frames, applying styles, and building UI components programmatically.

Does this Figma automation approach work with page switching and manipulation?

Yes, this Figma automation approach works with page switching and manipulation by executing JavaScript code within the file context. You can switch between pages, load page content, and manipulate page properties programmatically using the Plugin API.

Why does my Figma Plugin API script fail to manipulate nodes?

Figma Plugin API scripts may fail to manipulate nodes if the JavaScript code is not executed within the correct Figma file context. Ensuring prerequisite knowledge of the Plugin API and JavaScript is essential for successfully interacting with nodes and components.