Figma to React Component Converter

Convert Figma component designs into production-ready React components with full design token integration, accessibility support via React Aria, and comprehensive documentation. Works with any design token system (SCSS variables, CSS custom properties, Tailwind, or JavaScript tokens).

Prerequisites

• Figma MCP — Figma MCP server configured and running
• React Aria — react-aria and react-stately installed
• Design tokens (optional) — If the project already has a token system (SCSS, CSS vars, Tailwind, JS/TS), map to it. If not, tokens are extracted from Figma and generated as part of the workflow.
• Storybook (optional) — For component documentation and visual testing

Project Configuration Discovery

On first use in a project, discover the local configuration before generating code. Search the codebase to determine:

1. Token import path — Where tokens are imported from. Search for existing token files:
   • SCSS: @import 'styles/tokens' or @import 'path/to/variables'
   • CSS: @import 'tokens.css' or custom properties in :root
   • Tailwind: tailwind.config.ts theme extension