How I Set Up Figma-to-Code Using Figma's Remote MCP Server

Design-to-code automation is evolving rapidly, and my recent work integrating Figma with GitHub Copilot has shown just how powerful these new workflows can be. Here’s a step-by-step overview of my setup, key findings, and practical results.

1. Setting Up Figma's Remote MCP Server

Following the official Figma MCP server documentation, I chose the remote server approach which connects directly to Figma's hosted endpoint without requiring the desktop app.

Setup Steps:

• Used ⌘ Shift P in VS Code and selected "MCP: Open User Configuration"
• Created an mcp.json file with the remote server configuration:

{
  "inputs": [],
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

• Authenticated through Figma's OAuth flow when prompted
• Now I can use Figma links directly in prompts to generate code from any frame or component

Sample Prompt for Component Generation

Here's an example of how I use the remote MCP server to create components from Figma designs:

I need to create a React component from this Figma design #get_design_context https://www.figma.com/design/ABC123/MyProject?node-id=123-456

Please analyze this button component and generate:
1. A TypeScript React component with proper props interface
2. Tailwind CSS classes that match the design exactly
3. Responsive behavior for mobile and desktop
4. Proper accessibility attributes

Requirements:
- Use our existing design system tokens where possible
- Follow our component naming conventions (PascalCase)
- Include hover and focus states
- Ensure the component is reusable with different text and variants

The MCP server automatically extracts the node ID from the URL and provides rich context including colors, typography, spacing, and component structure.

2. Remote MCP Server Advantages

The remote MCP server offers several key benefits over the previous desktop-based approach:

• No desktop app required: Works entirely through Figma links, making it accessible from any environment
• Link-based workflow: Simply copy a Figma frame or component URL and paste it in your prompt
• Visual context included: The server automatically provides screenshots and design context for better code generation
• OAuth authentication: Secure, one-time setup that works across all projects
• Better reliability: Hosted endpoint ensures consistent availability

3. Model Evaluation: Claude Sonnet 3.5 vs. GPT-4.1

I compared two leading LLMs for code generation:

• Claude Sonnet 3.5: Produced code that was more accurate, better aligned with our internal standards, and more developer-friendly.
• GPT-4.1: Generated functional code, but it was often generic and less tailored to our needs.

Based on these results, I conducted all further tests with Claude Sonnet 3.5.

4. Results with Remote MCP Server

• UI Match: The generated code now matches 60-70% of the Figma design UI—a notable improvement over the desktop server approach
• Component Structure: Code structure aligns with our internal standards at 85% accuracy
• Workflow Speed: Link-based approach is significantly faster than the previous desktop plugin workflow
• Context Awareness: The remote server provides richer design context, including variables, components, and layout data
• Cross-platform compatibility: Works seamlessly across different development environments

5. Lessons Learned

• Remote server is superior: The hosted endpoint provides better reliability and richer context than desktop-based solutions
• Link-based workflow is faster: Simply copying Figma URLs is much more efficient than switching between apps
• Model choice still matters: Claude Sonnet 3.5 continues to outperform other models for design-to-code tasks
• Design system integration: The server's ability to pull component and variable data makes it excellent for maintaining design system consistency
• Authentication simplicity: OAuth setup is straightforward and works across all projects once configured

6. Next Steps

• Implement custom rules to guide the MCP server output for even better results
• Explore Code Connect integration to maintain component consistency
• Test with more complex design system patterns and nested components
• Document best practices for link-based Figma-to-code workflows

---

The remote MCP server has transformed our design-to-code process, making it faster and more reliable than ever before. The link-based approach eliminates friction and the hosted endpoint ensures consistent performance. If you're looking to implement a similar workflow, I highly recommend starting with the remote MCP server setup - it's significantly easier than the desktop-based approach and delivers better results.