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
306,361 tools. Last updated 2026-07-26 19:59
"Tools or Methods for Converting Figma Designs to React JS Code" matching MCP tools:
- Convert Figma designs to JSX and CSS pseudo-code for specific frames or components, enabling design-to-code workflows.
- Restart the Metro JS bundle in a connected React Native app to apply code changes or reset JS state without restarting the native process.Apache 2.0
- Get a curated implementation bundle for any CometChat integration scenario with prerequisites, install commands, configuration, code examples, and common pitfalls. Covers React, Flutter, iOS, Android, React Native, and JS SDK.Apache 2.0
- Retrieve the GTM installation snippet (HTML/JS tagging code) for a container by supplying account and container IDs.MIT
- Parse code files into semantic chunks such as functions, classes, and methods to improve retrieval in RAG systems.MIT
Matching MCP Servers
- 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.Last updated511MIT
- Alicense-qualityDmaintenanceConverts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.Last updated76MIT
Matching MCP Connectors
Figma MCP Pack
Decision Layer for AI Agents — 58+ tools, Advisor, MCP. Free key: POST /v1/register {}.
- Open a native target for Expo/React Native apps: iOS simulator or Android device mirror. Drive the app via idb/adb and stream JS/native logs to the timeline.MIT
- Transform images into realistic embroidery effects for logos, artwork, or product designs. Use this tool to prepare designs for embroidery mockups and print-on-demand products.MIT
- Compare Figma design tokens with code tokens to detect matches, missing tokens, and value divergences for design-code gap analysis.MIT
- Browse popular technology tags to filter developer tools by frameworks, languages, or deployment methods. Discover granular filters like react, rust, or self-hosted to narrow search results within categories.MIT
- Create or modify Figma designs programmatically with JavaScript code. Supports design operations, variables, styles, components, and prototyping transitions.MIT
- Predict text layout dimensions and detect overflow for any width, with responsive breakpoint checks. Verify fit in fixed containers before generating designs or code.MIT
- Execute JavaScript code in React Native apps to inspect app state, run diagnostics, or perform REPL-style interactions with Hermes compatibility.MIT
- Search Apple Developer Documentation to find APIs, frameworks, guides, and sample code. Ideal for locating specific classes, methods, or technical terms.MIT
- Converts groups or shapes into frames in Figma, preserving position, size, visual properties, and children, enabling auto-layout.MIT
- Discover available debugging objects like Apollo Client, Redux store, and React DevTools in a connected React Native app to identify state management and debugging tools.MIT
- Retrieve source code for multiple methods in one batch call, reducing round trips when analyzing code flows.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
- Generate complete Lenis smooth scroll setup code for vanilla JS, React, Vue, or Next.js, with optional GSAP ScrollTrigger, snap scrolling, and custom RAF loop.MIT