# Claude Code to Figma

Source: https://www.youtube.com/watch?v=riFFyTRljic
Recap page: https://rapidrecap.app/video/riFFyTRljic
Generated: 2026-02-17T14:34:29.991+00:00

---
## 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.

![Screenshot at 01:12: The introductory screen appearing after the feature announcement, displaying the title "Claude Code to Figma" on a black background, signaling the core topic of the demonstration.](https://ss.rapidrecap.app/screens/riFFyTRljic/00-01-12.jpg)

**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 `npm run dev` and then instructing Claude to "send my pantry page to the Figma file" using the command `send the my pantry page to the figma file`. 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.

### Introduction and Goal

- Gui Seiz and Alex Kern introduce the new feature
- The goal is to bridge code and design exploration, moving away from just sharing screenshots/recordings.

### Demonstration Setup

- Alex Kern spins up a dev server using `npm run dev`
- The prompt sent to Claude is "send my pantry page to the figma file".

### Feature Execution

- The tool captures the running UI state (Pantry page) and generates an editable Figma file based on the selection (e.g., the 'Eggs' card).
- This process bypasses time wasted on implementation details.

### Design Iteration Benefits

- The feature allows designers to explore multiple design variations based on the live state immediately.
- It provides a bird's-eye view of tradeoffs, keeping engineering scope clear.

### Conclusion

- The team expresses excitement about users building things with this new capability, reinforcing that it leverages the best of both code and design worlds.

![Screenshot at 00:00: Gui Seiz \(Design Director\) and Alex Kern \(Software Engineer\) introducing the topic in a conversational setting.](https://ss.rapidrecap.app/screens/riFFyTRljic/00-00-00.jpg)
![Screenshot at 01:27: The command line interface showing the execution of the command to spin up the dev server and the subsequent prompt to Claude to generate the Figma file.](https://ss.rapidrecap.app/screens/riFFyTRljic/00-01-27.jpg)
![Screenshot at 01:48: The live web application \('My Pantry' dashboard\) being captured, showing pantry items, filters, and a 'Sending to Figma...' progress bar.](https://ss.rapidrecap.app/screens/riFFyTRljic/00-01-48.jpg)
![Screenshot at 02:02: The user selecting the 'Eggs' card element in the live application before sending it to Figma for conversion.](https://ss.rapidrecap.app/screens/riFFyTRljic/00-02-02.jpg)
![Screenshot at 02:25: The Figma canvas displaying multiple generated design solutions \(Table View, Realistic Images & Trends, Recipe Offset, Condensed Grid\) derived from the code state.](https://ss.rapidrecap.app/screens/riFFyTRljic/00-02-25.jpg)