Claude Code Can Now Design in Figma -- Here's What That Means for Mobile Developers

The Big Announcement

Today, Figma and Anthropic jointly announced something that fundamentally changes how developers and designers collaborate: Claude Code now has native access to Figma. The integration works in both directions. Claude can read your Figma designs and generate production-ready code from them. And with the new Code to Canvas feature, Claude can take code from your running application and send it back to Figma as fully editable layers.

This is not a screenshot-based hack or a plugin that approximates layouts. The integration uses Figma's official MCP server -- a structured API that gives Claude deep access to the Figma document tree. Claude can read component hierarchies, extract design tokens, understand auto-layout constraints, and map Figma components directly to code components in your codebase. Going the other direction, Code to Canvas captures your actual rendered UI from the browser and converts it into native Figma layers that designers can edit, annotate, and iterate on.

The implications for development speed are significant. The gap between "what the designer intended" and "what the developer built" has always been a source of friction. This integration does not eliminate that gap entirely, but it compresses it dramatically. And for developers who use CodeSail to manage Claude Code sessions from their iPhone, it adds an entirely new dimension to the mobile development workflow.

How It Works: The Figma MCP Server

The technical foundation of this integration is the Figma MCP server. MCP stands for Model Context Protocol -- an open standard developed by Anthropic that lets AI models connect to external tools and data sources through a structured interface. Instead of relying on raw API calls, MCP provides a typed, discoverable set of tools that Claude can use intelligently based on the context of your conversation.

Figma's MCP server comes in two flavors:

• Remote server (recommended) -- hosted by Figma. You authenticate via OAuth, and the server handles API access, rate limiting, and token management automatically. This is the simplest way to get started and requires no local infrastructure.
• Local server -- runs on your machine via npx. You provide a Figma personal access token, and the server communicates with Figma's API from your local environment. This option gives you more control and is useful for air-gapped or enterprise setups.

Once connected, the MCP server exposes 13 tools that Claude can use during your session. These tools cover the full lifecycle of design-code interaction:

• get_file -- retrieve the full structure of a Figma file, including pages, frames, and component hierarchies
• get_node -- read detailed properties of a specific node, including layout constraints, fills, strokes, and typography
• get_styles -- extract design tokens like colors, text styles, and effects that map to CSS variables or design system tokens
• get_components -- list all components and component sets in a file, with their variant properties
• get_code_connect_maps -- retrieve Code Connect mappings that link Figma components to their code equivalents
• create_code_to_canvas_node -- the Code to Canvas tool that sends rendered UI back to Figma as editable layers

The remaining tools handle image exports, comments, version history, and project-level operations. Together, they give Claude a comprehensive view of your design system and the ability to act on it.

Design-to-Code: From Figma to Your Codebase

The design-to-code direction is the more intuitive half of the integration. You select a frame in Figma, share the link with Claude Code, and ask it to implement the design. Claude reads the Figma file through the MCP server, understands the layout structure, and generates code that matches the design.

What makes this different from previous "design to code" tools is the depth of understanding. Claude does not just look at a screenshot and approximate CSS. It reads the actual Figma document tree -- auto-layout directions, padding values, gap spacing, constraints, component instances, and variant properties. This means the generated code reflects the structural intent of the design, not just its visual appearance.

Framework Support

Claude can output code in whatever framework your project uses. If you are working in a React codebase, it generates React components with JSX. If your project uses Vue, you get single-file components. For SwiftUI projects, Claude generates native views with proper modifiers and layout stacks. The output adapts to your stack because Claude has access to your entire codebase context alongside the Figma data.

Design Token Extraction

Beyond layout code, Claude can extract design tokens from your Figma file and map them to your existing token system. If your project uses CSS custom properties, Tailwind configuration, or a theme provider, Claude will reference those tokens instead of hardcoding hex values. This keeps the generated code consistent with your design system rather than creating a one-off implementation.

Code Connect Integration

Figma's Code Connect feature lets teams define explicit mappings between Figma components and code components. When these mappings exist, Claude uses them to generate code that references your actual component library. Instead of recreating a button from scratch, Claude will import your existing Button component and pass the correct props based on the Figma variant. This is where the integration really shines for teams with mature design systems.

Code-to-Design: The Game Changer

The design-to-code direction is useful, but the code-to-design direction is the genuinely new capability. Figma calls it Code to Canvas, and it works like this: Claude captures a screenshot of your running application in the browser, processes it, and creates a new Figma node with fully editable layers that match the rendered UI.

The workflow is remarkably simple. While working in a Claude Code session, you build or modify a UI component. Once you are satisfied with how it looks in the browser, you type something like "Send this to Figma" or "Push this screen to my Figma file." Claude uses the create_code_to_canvas_node MCP tool to capture the current state of the UI and create a corresponding design in your Figma file.

The resulting Figma node is not a flat image. It contains editable layers -- text layers with proper font properties, rectangles with correct fills and corner radii, and layout groups that reflect the structure of the rendered DOM. Designers can then modify these layers, adjust spacing, tweak colors, add annotations, or use them as the starting point for the next design iteration.

Why This Matters

Before Code to Canvas, the process of getting code back into Figma was manual. A developer would build a feature, take a screenshot, paste it into Figma, and the designer would either trace over it or work from the screenshot as a reference. Code to Canvas eliminates that entire manual step. The code becomes the design, editable and ready for the next round of feedback.

You can also send multiple screens in a single session. Building a multi-step form? Send each step to Figma as you build it. Implementing a responsive layout? Capture the desktop, tablet, and mobile views and push all three to Figma. This turns Claude Code into a design documentation tool in addition to a coding assistant.

What This Means for Mobile Developers

If you use CodeSail to control Claude Code from your iPhone, this integration adds a powerful new workflow to your toolkit. Here is the scenario: you are away from your desk, but you need to implement a new screen that your designer just finished in Figma. With CodeSail, you can do the entire thing from your phone.

1. Open CodeSail and start a new Claude Code session (or continue an existing one) on your paired development machine
2. Paste the Figma link into the chat. Tell Claude: "Implement this Figma frame as a React component using our design system"
3. Watch Claude work. You will see tool calls in the session as Claude reads the Figma file, examines your codebase for existing components, and generates the implementation
4. Approve permissions as Claude requests access to create and modify files. Each permission card shows the exact file path and action
5. Review the code using CodeSail's file browser and diff viewer. Verify that Claude used the correct components and tokens
6. Ask Claude to push to Figma. Once the implementation is running in the browser on your dev machine, tell Claude to send the rendered result back to Figma using Code to Canvas

The entire loop -- from Figma design, to code implementation, to design review in Figma -- happens without opening a laptop. Your development machine does the heavy lifting. CodeSail provides the interface. Claude does the work.

For teams that practice asynchronous collaboration across time zones, this workflow is particularly valuable. A designer in London finishes a screen at the end of their day. A developer in San Francisco picks it up on their phone during their morning commute, implements it through CodeSail, and sends the result back to Figma for the designer to review when they start their next workday. The design-to-code-to-review cycle that used to take 24 hours can happen in 30 minutes.

Setting It Up

Getting the Figma MCP server working with Claude Code takes just a few minutes. Here is the setup process.

Option 1: Remote Server (Recommended)

The remote server is the fastest way to get started. Run the following command in your Claude Code session:

claude mcp add figma-mcp-server --transport sse https://figma.com/mcp/sse

Claude Code will prompt you to authenticate with Figma via OAuth. Follow the browser prompt to authorize access. Once authenticated, the MCP tools are immediately available in your session.

Option 2: Local Server

If you prefer to run the server locally, first generate a personal access token from your Figma account settings. Then add the server:

claude mcp add figma-mcp-server -e FIGMA_API_KEY=your-token-here -- npx -y figma-developer-mcp --stdio

This starts the MCP server as a local process that communicates with Figma's API using your token.

Verifying the Setup

To confirm everything is working, start a Claude Code session and ask Claude to list the available MCP tools. You should see the Figma tools in the response. Then try sharing a Figma file link and asking Claude to describe the design. If Claude can read the file structure and describe the components, the integration is working correctly.

Both the remote and local server options work with CodeSail. Since the MCP server connects to the Claude Code instance running on your development machine, you can trigger all Figma operations from your iPhone through CodeSail without any additional configuration.

Limitations to Know

This integration is powerful, but it is version one. Being honest about its current limitations helps set the right expectations.

• No iterative updates -- Code to Canvas creates new Figma nodes each time. It does not update existing nodes in place. If you send the same screen to Figma three times, you get three separate nodes. Designers need to manually reconcile changes.
• Complex multi-frame designs -- while Claude handles individual frames well, very large Figma files with dozens of interconnected frames and variants can hit context limits. For best results, share specific frame links rather than entire files.
• Rate limits -- the Figma API has rate limits that apply to the MCP server. Heavy usage in a single session (reading many large files, creating many canvas nodes) may trigger throttling. The remote server handles this more gracefully than the local option.
• Account requirements -- Code to Canvas requires a Figma account with edit access to the target file. Read-only access is sufficient for design-to-code operations. Enterprise Figma plans may have additional SSO or admin approval requirements for OAuth connections.
• Fidelity variance -- the editable layers created by Code to Canvas are a close approximation of the rendered UI, but they are not pixel-perfect recreations. Complex CSS effects like gradients, blend modes, or animated states may not translate perfectly into Figma layer properties.
• Browser-only capture -- Code to Canvas currently captures from web browsers. Native mobile app screens (iOS or Android simulators) are not yet supported for code-to-design conversion, though the design-to-code direction works for any framework including SwiftUI and Kotlin.

What's Next

This is the first release of a partnership that both Figma and Anthropic have signaled will deepen over time. The current integration already handles the two most common workflows -- turning designs into code and sending code back as designs. But there is clear room to grow.

Iterative updates to existing Figma nodes would be the most impactful improvement. Instead of creating new nodes each time, Code to Canvas could update an existing design in place, creating a true bidirectional sync between code and design. Support for native mobile rendering (capturing from iOS simulators or Android emulators) would expand the code-to-design workflow to mobile developers. And tighter integration with Figma's Dev Mode could streamline the handoff process even further.

Combined with the improvements in Claude's latest models, the code generation quality will continue to improve. Better understanding of design intent, more accurate mapping of Figma auto-layout to CSS flexbox or SwiftUI stacks, and smarter reuse of existing components are all areas where model improvements directly benefit this workflow.

For CodeSail users, every improvement to Claude Code's design capabilities automatically becomes available on your iPhone. The MCP server runs on your development machine, Claude does the processing, and CodeSail gives you the interface to orchestrate it all. As this integration matures, the distance between a design idea and a shipped feature continues to shrink -- and you do not need to be at your desk to close that gap.