Coding Cloud

From Figma to Code: AI-Powered UI Generation with MCP

Published on July 11, 2025by Claudio Teixeira

Learn how to automate the conversion of Figma designs into production-ready HTML, CSS, and React Native code using an AI assistant like Claude and a specialized Figma MCP server from Composio.

Turn Figma Designs into Code with AI

Manually translating a Figma design into pixel-perfect code is time-consuming. By leveraging an AI assistant like Claude with the Model Context Protocol (MCP), you can automate this entire process. This tutorial will guide you through setting up a specialized Figma MCP server from Composio to empower your AI to read Figma designs and generate corresponding Web (HTML/CSS) and Mobile (React Native) code.

Benefits: Drastically accelerate UI development, reduce the gap between design and implementation, and allow developers to focus on logic rather than boilerplate.

Prerequisites

  • AI Assistant/MCP Client: This guide uses the @anthropic-ai/claude-code CLI. Other clients like Claude Desktop or Windsurf IDE will also work.
  • Node.js & npx: Required to run the MCP server and AI client. Install from nodejs.org.
  • Figma Account: You'll need a Figma account and a design file to work with.
  • Composio Account: Required to generate the custom Figma MCP server.

Setup and Configuration

1. Create Your Figma MCP Server

First, you need to generate a secure MCP server that can interact with the Figma API on your behalf.

  • Navigate to the Composio MCP dashboard at https://mcp.composio.dev/dashboard.
  • Follow the on-screen instructions to create a new server integration for Figma.
  • Once created, Composio will provide you with a unique setup command. Copy this command for the next step.

2. Install and Run the MCP Server

Open your terminal and paste the command you copied from Composio. It will look similar to this:

npx @composio/mcp@latest setup "https://mcp.composio.dev/composio/server/YOUR_UNIQUE_ID/mcp?include_composio_helper_actions=true" "Figma-ALIAS" --client claude

This command securely downloads, installs, and configures the connection between your local machine and the Figma service.

3. Isolate Your Project Configuration

The setup command adds the new server to your global AI client configuration. For better project management, it's best to move this to a project-specific file.

# Create a directory for your project
mkdir my-figma-project && cd my-figma-project

# Copy the global config into a local .mcp.json file
# (Adjust path based on your OS and client)
cp /Users/YOUR_USER/Library/Application\ Support/Claude/claude_desktop_config.json .mcp.json

Now, your AI client will use the Figma MCP server only when you run it from within the my-figma-project directory.

4. Install and Launch the AI Client

This guide uses the official claude-code CLI from Anthropic.

# Install the client globally
npm install -g @anthropic-ai/claude-code

# Run the client from your project directory
claude

Inside the claude interface, you can type /model to select which model to use. For UI generation, the default Claude 4 Sonnet is a powerful and cost-effective choice.

Be mindful of model selection. Advanced models like Opus are significantly more expensive and may not be necessary for this task. Sonnet provides an excellent balance of capability and cost.

Instructing the AI to Generate Code

With the server running and the client connected, you can now issue prompts. The key is to be specific and provide all the necessary context.

Example Prompt for Web (HTML + Tailwind CSS)

Here is a high-quality prompt for generating a webpage. It clearly states the source, the target technology stack, and the required level of fidelity.

I need you to clone the web page `Health Product - Employers` from this Figma design: <https://www.figma.com/design/********/-FLIFE---Website?node-id=5-7584&t=xxxxxx-1>. Use HTML and shadcn/ui components (which use Tailwind CSS). Make sure you clone the EXACT PIXEL PERFECT design. DON'T BE CREATIVE, make it EXACTLY AS IT IS.

The AI will now use the Figma MCP server to access the design file, analyze the components, layout, and styling, and generate the HTML and CSS code for you.

Example Prompt for Mobile (React Native)

The same process works for mobile development. Simply adjust your prompt to specify the desired technology stack.

Using the same Figma design <https://www.figma.com/design/********/-FLIFE---Website?node-id=5-7584&t=xxxxxx-1>, generate a React Native component for the `Health Product - Employers` page. Use functional components with hooks and `StyleSheet` for styling.

Key Considerations

  • Security: HIGHLY RECOMMENDED: Always run third-party MCP servers and AI clients in a sandboxed environment (like a Docker container or a dedicated VM) to isolate them from your main system.
  • Accuracy: While the goal is "pixel perfect," the generated code should be seen as a high-quality first draft. Always review and refine the output to match your coding standards and ensure functionality.
  • Complexity: For highly complex or interactive designs, consider breaking down the prompt into smaller, component-level requests for better results.

Conclusion

Integrating AI into your design-to-development workflow via MCP is a transformative step. By connecting Figma directly to a powerful language model like Claude, you can automate the most tedious parts of UI development, freeing you up to build the complex logic that makes your application unique.