figma-pilot

When to use

ALWAYS read this skill BEFORE calling figma_execute! This skill contains the correct API syntax, parameter formats, and examples that you MUST follow. Failure to read this will result in syntax errors.

Use this skill whenever you are working with figma-pilot MCP tools to create or modify Figma designs.

Code Execution Mode

figma-pilot uses a code execution mode for maximum efficiency. Instead of 15+ individual tools, you use figma_execute to run JavaScript code with access to all Figma APIs.

Available Tools

Quick Example

// figma_execute
// Create a card and modify selection
await figma.create({
  type: 'card',
  name: 'Welcome Card',
  children: [
    { type: 'text', content: 'Hello!', fontSize: 24 }
  ]
});

const { nodes } = await figma.query({ target: 'selection' });
for (const node of nodes) {
  await figma.modify({ target: node.id, fill: '#0066FF' });
}
console.log(`Modified ${nodes.length} elements`);

Benefits

• 90%+ fewer tokens - 3 tools instead of 15+
• Batch operations - Modify many elements in one call
• Data filtering - Filter results before returning to context
• Complex workflows - Loops, conditionals, error handling

API Reference

Read individual rule files for detailed API documentation:

Getting Started

• [rules/quick-start.md](rules/quick-start.md) - Quick start guide and setup requirements
• [rules/workflow.md](rules/workflow.md) - Recommended agent workflow and operator rules

Core APIs

• [rules/status.md](rules/status.md) - figma.status() - Check connection
• [rules/query.md](rules/query.md) - figma.query() - Query elements by ID, name, or selection

Creating Elements

• [rules/create.md](rules/create.md) - figma.create() - Create elements (frames, text, shapes, semantic types)
• [rules/layout.md](rules/layout.md) - Auto-layout configuration and patterns

Modifying Elements

• [rules/modify.md](rules/modify.md) - figma.modify(), figma.delete(), figma.append()

Styling

• [rules/effects.md](rules/effects.md) - Shadows, blur, and visual effects
• [rules/gradients.md](rules/gradients.md) - Gradient fills (linear, radial, angular)
• [rules/corner-radius.md](rules/corner-radius.md) - Independent corner radius
• [rules/strokes.md](rules/strokes.md) - Stroke styling (dash patterns, caps, alignment)
• [rules/transforms.md](rules/transforms.md) - Rotation and blend modes
• [rules/constraints.md](rules/constraints.md) - Responsive constraints and min/max sizes

Text

• [rules/text.md](rules/text.md) - Text elements, wrapping, and sizing
• [rules/fonts.md](rules/fonts.md) - Loading and using custom fonts

Components

• [rules/components.md](rules/components.md) - figma.listComponents(), figma.instantiate(), figma.toComponent(), figma.createVariants()

Accessibility

• [rules/accessibility.md](rules/accessibility.md) - figma.accessibility() - WCAG compliance checking and auto-fixing

Design Tokens

• [rules/tokens.md](rules/tokens.md) - figma.createToken(), figma.bindToken(), figma.syncTokens()

Export

• [rules/export.md](rules/export.md) - figma.export() - Export as PNG, SVG, PDF, JPG

Common Patterns

• [rules/patterns.md](rules/patterns.md) - Cards, navigation bars, page layouts

Reference

• [rules/target-specifiers.md](rules/target-specifiers.md) - How to target elements (ID, selection, name)