Converts provided React/JSX code into Symbols.app DOMQL, returning migration rules, syntax reference, and examples.
Creative Commons Attribution Non Commercial 4.0 International
650,553 tools. Updated 2026-10-14 11:19
"Converting Figma Files to React Code" matching MCP tools:
- Scan React/Next codebases for exported UI components, Tailwind/shadcn signals, and Figma↔code name mappings so you can reuse existing components before building a Figma design.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.-
- Locate source files in a local project that contain a given CSS selector. Map DOM selectors back to React, Vue, Svelte, HTML, PHP, or Astro code so you can edit the right file.MIT
- 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
Matching MCP Servers
- AlicenseAqualityDmaintenanceConverts 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.725 npmMIT
- 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.525 npmMIT
Matching MCP Connectors
Figma MCP Pack
Parse a Figma file URL. Path discarded.
- 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
- Push all queued Figma edits into your code, then refresh every screen in Figma from the code in one click.-
- Generate a detailed upgrade diff between React Native versions to identify required changes in dependencies, native configurations, project files, and troubleshooting steps.MIT
- 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
- Extract SVG components from React/TypeScript/JavaScript files into individual .svg files, preserving SVG structure and removing React-specific code.MIT
- Converts a Figma node URL to a code block by fetching the node and its rendered image from the Figma API.MIT
- Fetches a Figma node and converts it into a code block, enabling AI to generate production-level frontend code from design files.MIT
- Find TSX/JSX code examples for any daisyUI React component to see common usage patterns.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
- Report fix progress to the Figma panel during a fine-tune. Mark done to redraw Figma from code and clear the changelog.-