Figma

This handles the full design-to-code pipeline with Figma's API. You get functions that pull component data from Figma files, extract design tokens like colors and spacing, and generate actual React or Tailwind code from the node tree. The code generation is genuinely useful because it maps Figma's auto layout properties directly to flexbox and handles things like corner radius, padding, and fill colors. Best for building design system tooling or automating repetitive component scaffolding. The image export endpoints are solid for pulling icons and illustrations into your build pipeline. Works well when you have structured Figma files and need to keep code in sync with design updates.

skills.sh installs: 450
GitHub stars: 296
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hoodini/ai-agents-skills --skill figma --agent claude-code

Installs into .claude/skills of the current project.

Files

Figma API Integration

Extract design data, generate code from components, and automate design workflows with Figma's API.

Quick Start

Authentication

const FIGMA_TOKEN = process.env.FIGMA_TOKEN;

const headers = {
  'X-Figma-Token': FIGMA_TOKEN
};

// Get file
const response = await fetch(
  `https://api.figma.com/v1/files/${FILE_KEY}`,
  { headers }
);

File Key & Node IDs

// Extract from Figma URL: figma.com/file/FILE_KEY/Name?node-id=NODE_ID
const figmaUrl = 'https://www.figma.com/file/abc123/MyDesign?node-id=1%3A2';
const fileKey = figmaUrl.match(/file\/([^/]+)/)?.[1];  // abc123
const nodeId = new URL(figmaUrl).searchParams.get('node-id');  // 1:2

Core API Endpoints

Get File

// Full file
GET https://api.figma.com/v1/files/:file_key

// Specific nodes (components)
GET https://api.figma.com/v1/files/:file_key/nodes?ids=1:2,1:3

// With geometry for SVG paths
GET https://api.figma.com/v1/files/:file_key?geometry=paths

// With plugin data
GET https://api.figma.com/v1/files/:file_key?plugin_data=shared

SKILL.md on GitHub