figma

Automate Figma design workflows via REST API, Plugin API, and MCP server.

30|5|Updated Jul 25, 2025
One-click install
npx skills add https://github.com/phuetz/code-buddy --skill figma-phuetz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/phuetz/code-buddy/tree/main/.codebuddy/skills/bundled/figma
Command: npx skills add https://github.com/phuetz/code-buddy --skill figma-phuetz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates repetitive Figma design workflows, enabling teams to programmatically access files, export assets, and synchronize design data across tools.

Core Features & Use Cases

  • REST API integration to fetch files, nodes, and metadata.
  • MCP server integration for command-driven automation across teams.
  • Asset export, design tokens extraction, and code generation from frames.
  • Use Case: Export assets from a file and generate React components.

Quick Start

Set FIGMA_ACCESS_TOKEN and FIGMA_FILE_KEY in your environment, then begin automating with a simple workflow to fetch file data and export assets.

Frequently Asked Questions about figma

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

FAQPage Schema
How do I automate Figma asset export and code generation from design frames?▼

Set the FIGMA_ACCESS_TOKEN and FIGMA_FILE_KEY environment variables in a Node.js or curl-based environment to authenticate REST API and MCP server requests for fetching Figma files and exporting assets.

Can I synchronize design tokens from Figma across different toolchains?▼

The skill supports command-driven automation across teams by leveraging the MCP server to access Figma files, nodes, and assets, enabling synchronized design token extraction and code generation.

Does this Figma automation skill require a Plugin API setup or just REST access?▼

It supports both REST API and Plugin API workflows, requiring environment variables FIGMA_ACCESS_TOKEN and FIGMA_FILE_KEY to fetch files, access nodes, and export assets without extensive manual plugin setup.

What is the best way to fetch Figma file metadata via REST API for design automation?▼

The best way to fetch Figma file metadata is by configuring your FIGMA_ACCESS_TOKEN and executing REST API requests in a Node.js environment to retrieve files, nodes, and assets for design automation.

Why does my Figma REST API workflow require specific environment variables to function?▼

Figma REST API workflows require FIGMA_ACCESS_TOKEN and FIGMA_FILE_KEY environment variables to authenticate your session and target the specific design file needed for asset export and node access.