# Code to Canvas: Claude Code Source: https://www.youtube.com/watch?v=C0fNUdjQxeY Recap page: https://rapidrecap.app/video/C0fNUdjQxeY Generated: 2026-03-12T11:34:27.048+00:00 --- ## Quick Overview The video demonstrates how to seamlessly integrate Figma designs into code using Claude Code, specifically showing the process of installing the Figma MCP plugin, authenticating with Figma, and then using Claude to generate design code (like updating the filter panel design) directly from the Figma canvas and pushing those updates back to the local codebase. **Key Points:** - The process involves using the Claude Code terminal interface to manage plugins, starting with installing the official Figma plugin via `/plugin discover` and typing "Figma". - Authentication with the Figma MCP server requires running a specific command in the terminal: `claude mcp add --transport http https://mcp.figma.com/mcp`, followed by authenticating in the browser. - After successful authentication, Claude can generate design code by sending a Figma file link or by capturing the current screen state using the capture tool. - The presenter successfully captures a local recipe listing prototype running on localhost:5179 and sends it to a Figma file for further iteration. - The demonstration shows updating a design element (the filter panel) in Figma by selecting it and using the capture tool, which then updates the local code when the design is sent back to Claude. - The core value demonstrated is maintaining a fluid workflow where design changes made in Figma are reflected quickly in the running local application via Claude Code updates. ![Screenshot at 00:43: The initial step in Claude Code terminal, where the user navigates to the plugin manager to search for and install the Figma integration plugin.](https://ss.rapidrecap.app/screens/C0fNUdjQxeY/00-00-43.jpg) **Context:** Ana Boyer, a Designer Advocate from Figma, walks through a workflow demonstrating how to bridge the gap between visual design in Figma and the corresponding code using Claude Code. This process leverages a specific plugin, the Figma MCP (Mockup Capture Protocol) server integration, to allow iterative design exploration and updates directly from the design canvas back into the application's source code. ## Detailed Analysis The video tutorials Ana Boyer on integrating Figma designs directly into code using Claude Code. First, Ana shows how to access the plugin manager within Claude Code using the command `/plugin discover` and searching for "Figma" to find and install the official `claude-plugin-official` plugin (01:01-01:13). Next, she explains that to allow designs to be sent back and forth, one must add the Figma MCP server via the command line: `claude mcp add --transport http https://mcp.figma.com/mcp` (01:48-01:56). This requires browser authentication, which results in a success message: "Authentication successful. Connected to Figma." (02:06). Once connected, the user can either provide a Figma file URL or use the capture tool. Ana navigates to a running local application (a recipe listing prototype) and uses the capture tool (02:13-02:23), which then generates a link to send the app state to Figma. She pastes this link into the command line, which prompts Claude to generate design files and add them to the specified Figma file (04:22-04:44). Finally, Ana demonstrates the reverse: making a design change in Figma (like selecting the filter panel component) and using the capture tool to send that specific design element back to Claude, which updates the local code, confirming the filter panel update matched the design (05:06-06:27). The key takeaway is that this creates a fluid, iterative design-to-code workflow, allowing developers and designers to rapidly explore creative ideas without forcing a strict, linear process. ### Plugin Installation and Authentication - Accessing plugins via `/plugin discover` - Installing the official Figma plugin - Adding the Figma MCP server via `claude mcp add --transport http https://mcp.figma.com/mcp` - Completing browser authentication ### Sending Code/Design to Figma - Running the local app on `http://localhost:5179` - Using the capture tool to generate a link for the current view - Sending the local application state to a Figma file using the provided URL ### Iterating on Figma Designs - Capturing specific elements like the Filter Panel in Figma - Sending the selected Figma component back to Claude - Claude automatically updates the local code to match the new design, including styling and layout changes ![Screenshot at 00:01: Ana Boyer, Designer Advocate, introducing the topic of bringing designs from code into the Figma canvas using Claude Code.](https://ss.rapidrecap.app/screens/C0fNUdjQxeY/00-00-01.jpg) ![Screenshot at 00:44: The Claude Code terminal interface displaying the initial prompt and navigation to the plugin discovery section.](https://ss.rapidrecap.app/screens/C0fNUdjQxeY/00-00-44.jpg) ![Screenshot at 01:38: The Figma developer documentation page detailing the command required to add the Figma MCP server.](https://ss.rapidrecap.app/screens/C0fNUdjQxeY/00-01-38.jpg) ![Screenshot at 03:32: The local application running, showing the recipe listing prototype with the filter panel open, which is the target for design synchronization.](https://ss.rapidrecap.app/screens/C0fNUdjQxeY/00-03-32.jpg)