figma-use

Execute JavaScript code within Figma files via the Plugin API.

1.9k|171|Updated Aug 5, 2025
One-click install
npx skills add https://github.com/figma/mcp-server-guide --skill figma-use-figma
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-use
Source: https://github.com/figma/mcp-server-guide/tree/main/skills/figma-use
Command: npx skills add https://github.com/figma/mcp-server-guide --skill figma-use-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the problem of complex Figma manipulation by abstracting the Plugin API into a more accessible interface, allowing users to perform intricate tasks without directly interacting with the Plugin API.

Core Features & Use Cases

  • Figma API Access: Offers direct access to the Figma Plugin API, enabling users to execute JavaScript code within Figma files.
  • Design Automation: Automates the creation, modification, and management of Figma designs, components, and variables.
  • Use Case: For instance, users can build a custom component library, automatically generate design system tokens, or perform complex layout manipulations without leaving the Figma editor.

Quick Start

To use the use_figma skill, ensure that figma-use is loaded before executing use_figma tool calls. Example: use_figma skillNames="resource:figma-use".

Frequently Asked Questions about figma-use

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

FAQPage Schema
How do I automate component creation in Figma?

Design automation in Figma is achieved by executing JavaScript code through the Figma Plugin API. This interface automates component creation, modification, and management without requiring direct manual editing.

Can I generate design system tokens automatically in Figma?

Yes, you can automatically generate design system tokens in Figma. By leveraging the Plugin API with JavaScript, the Skill automates the extraction and management of variables and design tokens directly within your files.

Do I need the Figma Plugin API installed to manipulate layouts programmatically?

Yes, the Figma Plugin API and related dependencies must be installed and configured. The Skill requires this environment to execute JavaScript code for complex layout manipulations and design automation.

What's the best way to build a custom component library in Figma without leaving the editor?

Building a custom component library without leaving the Figma editor is best done by running JavaScript via the Plugin API. This approach abstracts complex API interactions into an accessible interface for automated library generation.

Does this approach support complex layout manipulation in Figma files?

Yes, complex layout manipulation in Figma files is fully supported. The Skill provides an interface to execute JavaScript code that programmatically adjusts layouts, components, and variables, bypassing manual interface limitations.

How do I execute JavaScript code within Figma files?

Executing JavaScript code within Figma files requires leveraging the Figma Plugin API. This Skill provides an accessible interface to run that code, enabling design automation and system management workflows directly inside the file.