Converts provided React/JSX code into Symbols.app DOMQL, returning migration rules, syntax reference, and examples.
Creative Commons Attribution Non Commercial 4.0 International
458,158 tools. Updated 2026-08-14 23:05
"Converting Figma Files to React Code" matching MCP tools:
- Fetch a Figma file or specific node and get a compact tree with layout, styles, semantic roles, and Tailwind class suggestions to prepare for React code generation.MIT
- Generate a React project skeleton with Vite, antd, AG Grid, ApexCharts, and Tailwind, automatically wiring Figma design tokens into the configuration files.MIT
- Export your current design as code in HTML, React, Vue, or Figma token format. Choose the format that fits your workflow.MIT
- Access the mapping rules that convert a Figma tree into React using Ant Design, AG Grid, ApexCharts, and Tailwind CSS.MIT
- Generate a detailed upgrade diff between React Native versions to identify required changes in dependencies, native configurations, project files, and troubleshooting steps.MIT
Matching MCP Servers
- AlicenseAqualityCmaintenanceConverts a Figma file into a React project using Ant Design, AG Grid, ApexCharts, and Tailwind CSS, with optional export of mobile screens as a React Native (Expo) app.724MIT
- AlicenseBqualityCmaintenanceAutomates the conversion of Figma designs into TypeScript React components and integrates with GitHub to create pull requests for the generated code. It includes visual regression testing with Playwright and accessibility validation to ensure implementations match the original designs.524MIT
Matching MCP Connectors
Figma MCP Pack
Corporate travel: search and book flights, hotels, rail and transfers, manage orders.
- Export a 3D scene to React Three Fiber components, Remotion projects, glTF files, or JSON data for rendering and further use.MIT
- Fetch a Figma node URL, retrieve upstream design context, strip React/Tailwind passthrough, and return compact markdown with layout, text, asset, and implementation notes to reduce token consumption.MIT
- Converts a Figma node URL to a code block by fetching the node and its rendered image from the Figma API.MIT
- Extract SVG components from React/TypeScript/JavaScript files into individual .svg files, preserving SVG structure and removing React-specific code.MIT
- Fetches a Figma node and converts it into a code block, enabling AI to generate production-level frontend code from design files.MIT
- Index a TypeScript/React repository into a queryable code graph and persist it for dependency and impact analysis.MIT
- Convert a Figma node into a production React component, mapping Auto Layout to Flexbox, fills, typography, strokes, and border radius.MIT
- Convert Figma frames to React Native components: generates StyleSheet output, mobile UI library suggestions, asset hints, and TypeScript prop interfaces.MIT
- Transform Figma designs into React/Tailwind code by extracting node structure and visual context, then generating clean, semantic components with AI instructions.ISC
- Locate source files in your project containing a specific CSS selector, mapping DOM selectors back to editable code in React, Vue, Svelte, HTML, PHP, or Astro files.MIT
- Generate configuration files for AI coding assistants, embedding React Native best practices, API validation rules, and project context to guide AI code suggestions.MIT
- Generates ready-to-use integration code for .riv files in React, Vue, Svelte, plain JS, or Flutter, using real artboard, state machine, and input names.Inno Setup
- Extract Figma node IDs and convert designs into HTML, React with CSS Modules, or React with Tailwind CSS using MCP server f2c-mcp-server to automate design-to-code workflows.MIT
- Reverse-lookup a Figma node ID or URL to find corresponding Aurum components, code mappings, or icons. Ideal for designers wanting to identify the code behind a Figma element.MIT