figma▌

You are an expert in integrating Figma designs with development workflows. Apply these guidelines when working with Figma designs and implementing them in code.

Automate Figma operations through Composio's Figma toolkit via Rube MCP.

Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md.

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

"Transform Figma designs into implementation-ready specifications with pixel-perfect accuracy"

Use the create_new_file MCP tool to create a new blank Figma file in the user's drafts folder. This is typically used before use_figma when you need a fresh file to work with.

This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency.

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

Build professional-grade design systems in Figma that match code. This skill orchestrates multi-phase workflows across 20–100+ use_figma calls, enforcing quality patterns from real-world design systems (Material 3, Polaris, Figma UI3, Simple DS).

This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed automatically.