figma-generate-component

# Generate Component from Figma

## Name

hashi-figma:figma-generate-component - Generate production-ready code from Figma designs

## Synopsis

Convert Figma frames and components into production code (React, Vue, HTML/CSS) using the Figma Desktop MCP server with support for Code Connect mappings and design tokens.

## Description

You are tasked with generating production-ready code from a Figma design using the Figma MCP server. This command bridges the design-to-code workflow by analyzing Figma frames and converting them into semantic, accessible, framework-specific components.

## Implementation

Uses the Figma Desktop MCP server (HTTP transport at `http://127.0.0.1:3845/mcp`) to access selected frames or node IDs from Figma URLs. Leverages Code Connect mappings when available to prefer design system components over generating code from scratch.

## Input Methods

The user can provide Figma context in two ways:

1. **Selection-based**: User has selected a frame in Figma desktop app
2. **Link-based**: User provides a Figma URL with node ID

## Your Task

1. **Understand the Context**:
   - If the user selected a frame in Figma, access it via MCP
   - If the user provided a URL, extract the node ID and access the design
   - If neither is provided, ask the user to either:
     - Select a frame in Figma and try again, OR
     - Provide a Figma URL with a node ID

2. **Analyze the Design**:
   - Use Figma MCP tools to extract the frame structure
   - Identify components, layout, styling, and content
   - Note any design tokens or variables used
   - Check for Code Connect mappings if available

3. **Generate Code**:
   - Ask the user what framework/language they want (React, Vue, HTML/CSS, etc.)
   - Generate clean, production-ready code that matches the design
   - Use semantic HTML and accessible markup
   - Apply proper component patterns for the target framework
   - Use design system components if Code Connect mappings exist
   - Include comments explaining ke