figma

What it does

This skill allows AI agents to interact with Figma designs programmatically. It can retrieve design context, including screenshots, variable values, and individual assets directly from Figma files. Furthermore, the skill is capable of translating specific Figma nodes into production-ready code snippets.

When to use it

• Automated Design Updates: Automatically fetch updated asset versions for a project when changes are made in Figma.
• Code Generation from Designs: Generate front-end code (e.g., React components) directly from selected elements within a Figma design.
• Design System Integration: Extract and utilize variable definitions from a Figma design system to ensure consistency across projects.
• Documentation & Handoff: Create documentation or handoff packages by automatically generating screenshots and asset lists from Figma files.

Key capabilities

• Fetching design context (screenshots, variables)
• Retrieving individual assets
• Translating Figma nodes into production code
• Utilizes the Figma MCP server for interaction

Example prompts

• "Get a screenshot of the 'login page' in this Figma file: [Figma URL]"
• "Extract all color variable values from this Figma design: [Figma File ID]"
• "Generate React code for the button with node ID 'bkLvGTa4J'"

Tips & gotchas

• Requires access to a Figma MCP server. Ensure proper authentication and permissions are configured before use.
• The skill's ability to translate nodes into production code is dependent on the complexity of the design and may require manual adjustments.