Claude Code를 사용하여 Figma에 앱 코드를 보내는 방법

How to send your app code to Figma using Claude Code From running app to editable Figma layers; without leaving your terminal. As a designer, I work through interfaces, not terminals. Claude Code changed that; letting me direct the work the way I’d brief a collaborator: plain English, clear intent, real output. I think in systems, design psychology, user experience. Claude handles the implementation. Most design tools assume you start in Figma and build toward code. This workflow goes the other way: you have a working app, and you want design documentation that stays in sync with it; without rebuilding every screen from scratch. This guide covers one specific workflow: pushing your running app into Figma as editable design layers. Not screenshots. Real frames, real components, real layer trees you can inspect and hand off. I’m a solo builder, so this reflects my workflow. If you’re working in a team or organization, you’ll likely need to adjust some of these steps. Before you start The tool that makes this possible, generate_figma_design , lives in Claude Code CLI. Not the Cursor extension, not the VS Code connector. You’ll need the terminal for the setup steps, but only for setup. Once configured, you can work through Claude Code’s interactive session. I’m currently using Ghostty, a fast, feature-rich, cross-platform terminal emulator with native UI and GPU acceleration. Any terminal works though, iTerm was my previous choice. You also need a paid Claude plan. Step 1: Install the Figma plugin In your terminal, run: claude plugin install figma@claude-plugins-official This installs the official Figma plugin at user scope, available across all your projects. Then start a Claude Code session: claude Step 2: Authenticate and configure MCP Inside the Claude Code session, open the MCP manager: /mcp You’ll see a list of servers. Select plugin:figma:figma ; the remote MCP that includes write capability; and authenticate. Claude opens a browser window; log in and click Allow. Check the email shown if you have multiple Figma accounts. If you see figma-desktop in the list, disable it. It’s the local read-only MCP and will conflict with the remote one. After authenticating, run /mcp again to confirm: figma-desktop ; disabledplugin:figma:figma ; connected ✓ Then verify generate_figma_design is available: List all available Figma MCP tools It should appear as: “Capture/import a web page into Figma.” If it doesn’t, disconnect all Figma instances, restart Claude Code, and reauthenticate. Step 3: Brief Claude on your project Before capturing anything, disable thinking mode. Long execution tasks don’t benefit from it and it burns through context faster; which matters when you’re pushing 20+ screens in one session. Run your app locally, then give Claude the Figma file URL, the target page, and ask it to plan: My app is running locally. Here's my Figma file: https://www.figma.com/design/[YOUR_FILE_LINK]. Capture all screens to the "User Interface" page. Review the codebase, list all screens, and create a wave plan. Claude audits the project and returns a structured plan; screens grouped by section, ordered by priority. For Bookmarker, that looked like this: Wave 1; Core App (screens 1–8): Main product screens. Highest design value, done first. Wave 2; Auth (screens 9–12): Login, signup, password flows. Wave 3; Settings (screens 13–17): Account, billing, preferences. Wave 4; Marketing + Public (screens 18–22): Pricing, public sharing pages. Wave 5; Blog + Legal (screens 23–27): Content pages. Before telling Claude to start, ask it to write the plan to a file: Write this plan to /plan/figma-push.md. Include each screen, its wave, status (pending/done), and source file. Update status as you complete each screen. This is your safety net. If the context window fills up mid-execution; which it will on a large project; open a new session and continue: Read /plan/figma-push.md and continue from where you left off. Compacting mid-execution loses track of what’s done. The plan file is the source of truth, not the conversation. Once it’s written, proceed: Plan looks good. Start with Wave 1. Step 4: Capture and push the screens Claude starts the dev server, injects a capture script into your layout.tsx , and opens the app in a browser with a capture hash in the URL. A toolbar appears at the top of the page with four options: Send to Figma, Entire screen, Select element, and Open file. Click Entire screen to trigger the capture. Claude polls for completion, then removes the script tag from your layout automatically; your codebase is left clean. Captured layers are editable; text is real text, buttons are separate components, layout uses auto-layout. Not static images. Claude updates the plan file as each screen completes. Navigate to each screen when prompted and confirm: Captured. Move to the next screen. The first pass isn’t pixel-perfect. Fix issues by describing what’s off: The hero section padding looks too tight and the nav items are