figma-generate-component
Generate Component from Figma
Name
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
More from thebushidocollective/han
android-jetpack-compose
Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns.
1.1Kfastapi-async-patterns
Use when FastAPI async patterns for building high-performance APIs. Use when handling concurrent requests and async operations.
786storybook-story-writing
Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.
487atomic-design-fundamentals
Use when applying Atomic Design methodology to organize UI components into quarks, atoms, molecules, organisms, templates, and pages. Core principles and hierarchy.
367solid-principles
Use during implementation when designing modules, functions, and components requiring SOLID principles for maintainable, flexible architecture.
250angular-rxjs-patterns
Use when handling async operations in Angular applications with observables, operators, and subjects.
216