로컬 Figma 포트 – AI 코딩 에이전트를 위해 범위가 지정된 설계 컨텍스트를 MCP로 내보냅니다.

A local-first bridge between Figma and AI coding agents. Local Figma Port connects Figma design data directly to AI coding tools. It gives agents like Codex, Claude Code, Claude Desktop, and Cursor direct access to normalized design data (frames, components, styles) — without manual JSON handoff or copy-paste from Figma. It does not require a paid Figma account or Figma Dev Mode. - Developers using AI coding tools with Figma - Teams building UI from structured design systems - Anyone tired of manual Figma → code handoff - Install the tool - Start the local server - In Figma, import the plugin via manifest.json (see below), then export a node - In your coding agent, use the Local Figma Port integration for your target environment Takes under 2 minutes. To use the Local Figma Port plugin in Figma: - Open Figma Desktop - Go to Plugins → Development → Import plugin from manifest... - Select the manifest path printed by the installer - For checked-out repository installs, that path is packages/figma-exporter-plugin/manifest.json - Run Plugins → Development → Local Figma Port You can now select a node and export it from Figma using the plugin. Requires Figma Desktop (plugin development mode is not available in the browser). After exporting a design slice, the context becomes available to your coding agent. How you invoke it depends on the agent: Codex / Codex App : use the shortcut$Local Figma Port , for example$Local Figma Port implement this screen in React Claude Code : theclaude CLI must be installed; use thelocal-figma-port subagent or ask Claude Code to use thelocal-figma-port MCP serverClaude Desktop : install and enable theLocal Figma Port extension inSettings -> Extensions , then start a new chat and ask Claude to use the Local Figma Port toolsCursor : ask Cursor to use thelocal-figma-port MCP server or the Local Figma Port tools for the current task The more specific your prompt, the better the result will be. Notes: Claude Desktop uses the extension flow inSettings -> Extensions ; it is separate from the regular+ -> Connectors setup flow.- If Codex App orCursor were already open during installation, restart them before first use so they reload the new MCP config. Examples for Codex / Codex App : $Local Figma Port build this component $Local Figma Port generate layout with Tailwind $Local Figma Port extract styles and structure $Local Figma Port what do you see? Examples for agents without the $Local Figma Port alias: Use the local-figma-port MCP server to build this component Use the Local Figma Port tools to extract styles and structure What do you see in the local-figma-port MCP server right now? For best results, use strong coding agents backed by large models. Recommended environments: - Codex / Codex App - Claude Code - Claude Desktop - Cursor These tools provide sufficient reasoning and context handling to work effectively with Local Figma Port. Using weaker coding agents or smaller models is not recommended, as they may struggle to interpret the exported design context and produce lower-quality results. Works without Dev Mode only for Figma projects you own. To use designs from someone else: - duplicate the file into your own drafts or workspace - export from your copy It is built as a local-first system with strict control over exported scope. At a high level, it consists of four parts: - a Figma plugin for scoped export - a local MCP server - a data optimizer/importer that reshapes raw export data into agent-friendly context - a skill that helps coding agents use that context correctly Instead of dumping an entire Figma file into an agent, Local Figma Port exports only the narrow scope selected by the developer. That keeps the context focused, makes the data easier for coding agents to understand, and avoids wasting Figma credits on irrelevant parts of the file. The export can include layout structure, styles, icons, graphics, and preview screenshots. Those previews can also be used for visual control when your agent workflow has Playwright available. If your Figma file is structured well, you can also export a UI kit separately and let agents reuse mapped components from it. Short walkthrough: exporting a design slice and using it with an agent. AI coding agents struggle with large, unstructured design files. Passing an entire Figma file into context is noisy, expensive, and usually leads to weaker code generation. The agent has to search through too much unrelated design data, while the developer only needs one frame, one flow, or one component. Local Figma Port lets you export only the relevant part of a Figma design and send it to a local MCP server. The raw export is validated and normalized into a structure that is easier for agents to query than raw Figma JSON. Agents receive a focused design context instead of a giant design dump, which leads to much better implementation quality. - Export a specific frame, component, or selection from Figma. - Keep the exported scope intentionally narrow instead of sending the whole file. - Normalize raw plugin output into an agent-friendly local store. - Expose design context through a local MCP server and local HTTP import endpoint. - Export icons, graphics, layout metadata, styles, and preview screenshots. - Use screenshots as an additional verification aid in Playwright-enabled workflows. - Export a UI kit separately and reuse mapped components from it when the Figma file is built correctly. - Work locally instead of relying on broad remote design ingestion. - In Figma, you select the exact frame, component, or subtree you want to give to the agent. - The Figma plugin exports a scoped bundle from that current selection. - The bundle is sent to the local import endpoint at http://127.0.0.1:7331/import-bundle . - The importer/optimizer validates the bundle and rewrites it into a normalized local store. - The local MCP server exposes that exported scope to coding agents. - The Local Figma Port skill lets agents access and traverse the exported scope without guessing. If auto-post fails, the plugin can fall back to a downloadable bundle JSON for manual import. The MCP server does not automatically ingest the whole Figma file. It only knows about the scope you explicitly exported. Instead of asking an agent to reason over an entire design system, you give it exactly the design slice it needs. In practice, frontend implementation becomes close to "autopilot" for well-structured UI work. - Run the install script for your platform. - Start the local MCP server. - In Figma, select the node you want and click Export in theLocal Figma Port plugin. - Ask your coding agent to use the exported Local Figma Port context. - Figma Desktop - Node.js LTS - On macOS and Linux: sqlite3 must be installed withFTS5 enabled If you plan to install the Claude Code target, install Claude Code first so the claude CLI is available. On Windows, the release bootstrap installer can install Node.js automatically if it is missing, and the Windows bundle ships its own sqlite3.exe . On macOS, the release bootstrap installer can install Node.js and a Homebrew sqlite3 build with FTS5 enabled if they are missing. Install: curl -fsSL https://raw.githubusercontent.com/echo-ae/local_figma_port/main/mac-install.sh | bash Uninstall: ~/Library/Application\ Support/LocalFigmaPort/bundle/current/scripts/uninstall/macos.sh Uses the release bootstrap installer and downloads the matching prebuilt bundle. Install: powershell -NoProfile -ExecutionPolicy Bypass -Command "irm https://raw.githubusercontent.com/echo-ae/local_figma_port/main/windows-install.ps1 | iex" Uninstall: pwsh -ExecutionPolicy Bypass -File "$env:LOCALAPPDATA\LocalFigmaPort\bundle\current\scripts\uninstall\windows.ps1" Uses the release bootstrap installer and downloads the matching prebuilt bundle. Install: ./scripts/install/linux.sh Uninstall: ./scripts/uninstall/linux.sh Uses the native bash installer for Codex, Claude Code, Claude Desktop, and Cursor. Recommended install from the latest GitHub release: curl -fsSL https://raw.githubusercontent.com/echo-ae/local_figma_port/main/mac-install.sh | bash The bootstrap script: - detects arm64 vsx64 - downloads the matching prebuilt macOS bundle from GitHub Releases - installs Node.js and a Homebrew sqlite3 build withFTS5 support if they are missing - asks which coding agent to configure and applies the install for that target Claude Code requires theclaude CLI to already be installed; when available, the installer adds a user-scoped subagent and a user-scoped MCP server- prepares a local Claude Desktop extension bundle (.mcpb ) when you chooseClaude Desktop - reuses a prebuilt Claude Desktop extension payload from the release bundle, so release installs do not need a fresh npm install for the Desktop extension - installs a global Cursor MCP config in~/.cursor/mcp.json when you chooseCursor For Claude Desktop , the installer prints the local .mcpb path. Install that file from Claude Desktop -> Settings -> Extensions -> Install extension from file... . On Windows, follow that path manually inside Claude Desktop ; the installer does not rely on .mcpb file associations because they are not always registered correctly. If you are building from a checked-out repository instead of using a release bundle, see Build. Default state root on macOS: ~/Library/Application\ Support/LocalFigmaPort Recommended install from the latest GitHub release: powershell -NoProfile -ExecutionPolicy Bypass -Command "irm https://raw.githubusercontent.com/echo-ae/local_figma_port/main/windows-install.ps1 | iex" The bootstrap script: - detects amd64 vsarm64 - downloads the matching prebuilt Windows bundle from GitHub Releases - installs PowerShell 7 and Node.js LTS if they are missing - asks which coding agent to configure and applies the install for that target - offers separate Claude Code andClaude Desktop targets on Windows;Claude Code requires theclaude CLI, whileClaude Desktop prepares a local.mcpb extension bundle - reuses a prebuilt Claude Desktop extension payload from the release bundle when available, so release installs avoid a fresh Desktop-extension dependency install - installs a global Cursor MCP config in~/.cursor/mcp.json when you chooseCursor For Claude Desktop , the installer prints the local .mcpb path. Install that file from Claude Desktop -> Settings -> Extensions -> Install extension from file... . The installer also tries to open that .mcpb automatically; if no install dialog appears, use the printed path manually. If you are building from a checked-out repository instead of using a release bundle, see Build. Default state root on Windows: $env:LOCALAPPDATA\LocalFigmaPort Install for one or more targets: ./scripts/install/linux.sh Supported target numbers: 1 = Codex2 = Claude Code3 = Claude Desktop4 = Cursor The Linux installer validates that the system sqlite3 CLI supports FTS5 before it finishes. When you choose Claude Code , the Linux installer adds a user-scoped subagent and a user-scoped MCP server, but it requires the claude CLI to already be installed. When you choose Claude Desktop , it prepares a local .mcpb extension bundle. When you choose Cursor , it installs a global MCP config in ~/.cursor/mcp.json . For Claude Desktop , the installer prints the local .mcpb path. Install that file from Claude Desktop -> Settings -> Extensions -> Install extension from file... . The installer also tries to open that .mcpb automatically when the desktop session supports it; if no install dialog appears, use the printed path manually. Default state root on Linux: ~/.local/share/local-figma-port Source builds and checked-out repository installs need the full local toolchain. - Runtime requirements above - Rust toolchain and Cargo - On Windows: Visual Studio Build Tools (or Visual Studio) with C++ build tools macOS: ./scripts/install/macos.sh Windows: pwsh -ExecutionPolicy Bypass -File .\scripts\install\windows.ps1 Linux: ./scripts/install/linux.sh The source Windows installer builds the Rust importer locally. If link.exe is missing, install Visual Studio Build Tools with the C++ workload and re-run the installer from a new PowerShell session. The installer prepares sqlite3.exe in the Local Figma Port state directory and points the MCP server at that exact binary, so Windows users do not need a separate SQLite install on PATH . By default, the installer first looks for the pinned SQLite archive on the project's latest GitHub release and falls back to the official upstream SQLite tools archive if needed. You can override that with LOCAL_FIGMA_PORT_RELEASE_TAG or LOCAL_FIGMA_PORT_SQLITE_ZIP_URL . The current pinned Windows bundle is SQLite 3.51.3 (sqlite-tools-win-x64-3510300.zip ). The official SQLite download page currently ships Windows command-line tools for x64. On Windows ARM64, that binary runs through x64 emulation. Release maintainers can use the short runbook in WINDOWS_SQLITE_RELEASE_ASSET.md. The source macOS installer builds the Rust importer locally, so rustc and cargo are only required for checked-out repository installs. The release bootstrap installer downloads a prebuilt importer bundle and does not require Rust. Current macOS release bundles also include a prebuilt Claude Desktop extension payload, so Claude Desktop installs do not need to rebuild that payload locally. Release maintainers can build macOS release ZIPs with: ./scripts/release/package-macos.sh --target all --build On Apple Silicon, add the x64 Rust target first if you have not installed it yet: rustup target add x86_64-apple-darwin That produces: out/release/macos/local-figma-port-macos-arm64.zip out/release/macos/local-figma-port-macos-x64.zip The uninstall scripts remove the local config, generated bundle files, and MCP registration they manage. If you installed the Claude Desktop extension, also remove it manually in Claude Desktop -> Settings -> Extensions . Important: the local MCP server must be started manually before exporting from Figma or asking an agent to use Local Figma Port. The installers start the server once at the end of installation for validation, but day-to-day work still expects you to start it yourself when you begin a session. Start: ~/Library/Application\ Support/LocalFigmaPort/bundle/current/scripts/runtime/start.sh Stop: ~/Library/Application\ Support/LocalFigmaPort/bundle/current/scripts/runtime/stop.sh macOS / Linux: Start: ./scripts/runtime/start.sh Stop: ./scripts/runtime/stop.sh Windows: Start: pwsh -ExecutionPolicy Bypass -File .\scripts\runtime\start.ps1 Stop: pwsh -ExecutionPolicy Bypass -File .\scripts\runtime\stop.ps1 If you used the Windows release bootstrap installer instead of running from a checked-out repository, use the installed bundle path instead: Start: pwsh -ExecutionPolicy Bypass -File "$env:LOCALAPPDATA\LocalFigmaPort\bundle\current\scripts\runtime\start.ps1" Stop: pwsh -ExecutionPolicy Bypass -File "$env:LOCALAPPDATA\LocalFigmaPort\bundle\current\scripts\runtime\stop.ps1" By