skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

figma-pilot-mcp

Execute JavaScript against the Figma API to query, create, modify, delete, and export design elements.

3|Updated May 16, 2026
Search Tags:#accessibility#figma#mcp#design tokens#design automation#export#batch editing
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill figma-pilot-mcp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-pilot-mcp
Source: https://github.com/Aradotso/design-skills/tree/main/skills/figma-pilot-mcp
Command: npx skills add https://github.com/Aradotso/design-skills --skill figma-pilot-mcp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Figma work often requires repetitive manual clicking to create, modify, query, and export design assets, slowing down iterations and making batch updates error-prone.

Core Features & Use Cases

  • Programmatic Figma control (MCP): Creates, modifies, deletes, and appends design elements by executing JavaScript against the Figma API.
  • Query and batch operations: Lists nodes, filters by type or properties, and updates many elements in fewer tool calls.
  • Design system workflows: Builds components, creates variants, and manages design tokens for consistent styling.
  • Accessibility and exporting: Runs accessibility checks and exports selections as PNG/SVG/JPG for review and handoff.

Quick Start

Install the MCP server and plugin, then ask your agent to modify a selected set of Figma layers to update colors, spacing tokens, and export the result as PNG.

Frequently Asked Questions about figma-pilot-mcp

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

FAQPage Schema
How do I automate batch editing in Figma using code?▼

You can automate batch editing in Figma by executing JavaScript against the Figma API via an MCP server. This allows you to filter nodes by type or properties and update many elements simultaneously in fewer tool calls.

Can I create and manage design tokens in Figma programmatically?▼

Yes, you can create and manage design tokens programmatically in Figma. By using the MCP server to execute code, AI agents can handle token creation and binding to support consistent design system styling workflows.

How do I run accessibility checks and export Figma selections as PNG or SVG?▼

To run accessibility checks and export selections as PNG or SVG, use an MCP client to execute JavaScript on the Figma API. This workflow validates designs and outputs files for review or handoff.

Do I need an MCP client to control Figma from code?▼

Yes, you need a configured MCP client and the Figma Pilot plugin connection to control Figma from code. This setup satisfies low-token tool definitions while executing JavaScript with full Figma API access.

What is the best way to build Figma components and variants in bulk?▼

Building Figma components and variants in bulk is best handled by programmatically executing JavaScript through an MCP server. This approach automates design system authoring tasks like component creation and variant generation.

Related Skills

Explore More Design & Creative Skills→
Luohao-YanLuohao-Yan
6

figma-use

Execute JavaScript scripts to manipulate Figma files via the Plugin API.

Community
Advanced
zm2231zm2231

asset-optimization

Convert design assets to WebP, AVIF, and responsive variants.

Community
Advanced
Team-HirealTeam-Hireal

feishu-wiki

List, create, move, and rename Feishu wiki nodes and retrieve document tokens.

Community
Intermediate
AradotsoAradotso
3

claude2figma-design-system-harness

Enforces Design System compliance in AI-generated Figma files via token binding and component instances.

Official
Advanced