Claude Code to Figma

Quick Overview

Figma launched the Claude Code to Figma feature, integrated into the Figma MCP server, allowing users to convert running UI states captured via screenshots or recordings directly into editable Figma frames, streamlining the design iteration process by bringing code context into design exploration.

Key Points: Figma released the "Claude Code to Figma" feature, running on the Figma MCP server. The feature allows capturing any running UI state from a browser by taking a screenshot or video recording. Captured states can be pasted as editable Figma frames directly onto the canvas. The workflow minimizes time wasted figuring out implementation details, providing immediate design context. Alex Kern (Software Engineer) and Gui Seiz (Design Director) from the Figma team presented this new capability. The process effectively bridges the gap between live code and design exploration by offering multiple solutions based on the captured state.

Context: Gui Seiz, the Design Director, and Alex Kern, a Software Engineer on the Figma team, introduced a new feature called "Claude Code to Figma." This feature aims to improve the workflow between development and design by allowing designers to quickly capture the current state of a running application and convert it into an editable Figma design element, using AI assistance (implied by the mention of Claude).

Detailed Analysis

Gui Seiz and Alex Kern introduce the new "Claude Code to Figma" feature, available on the Figma MCP server, which is designed to accelerate the exploration phase of design iteration. The process involves capturing the current UI state of a running application, either through a screenshot or a video recording, and then pasting that state directly onto the Figma canvas as editable frames. Alex Kern demonstrated this by starting a local development server using the command and then instructing Claude to "send my pantry page to the Figma file" using the command . The tool generates a capture ID and then imports the UI state, such as the 'My Pantry' dashboard, as selectable elements within Figma. This capability is highly valuable because it gives designers immediate context on existing UI variations without requiring them to manually recreate or guess implementation details, allowing them to immediately iterate on different design solutions based on the captured live state.