[{"_1":2,"_345":-5,"_346":-5},"loaderData",{"_3":4,"_24":25,"_261":262},"root",{"_5":6,"_7":8},"toasts",[],"visitor",{"_9":10,"_11":12},"viewportWidth",1280,"visitorSession",{"_13":14,"_16":17,"_18":-5,"_19":20,"_21":22,"_23":-5},"attributes",[15],"bot","id",28558670,"membership","referenceId","019ac906-4d97-72a0-8378-c7325b0b19cc","unreadReleaseNotesCount",2,"userAccount","routes/_public/mcp/servers/~namespace/~slug/_pages/_layout",{"_26":27,"_69":-5,"_70":28,"_29":71,"_179":180,"_260":161},"availableLocales",[28,41,48,55,62],{"_29":30,"_37":38,"_39":40},"mcpServer",{"_31":32,"_33":34,"_35":36},"description","Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.","displayName","Figma MCP Server","readme","# Figma MCP Server\n\nGive [Cursor](https://cursor.sh/), [Windsurf](https://codeium.com/windsurf), [Cline](https://cline.bot/), and other AI-powered coding tools access to your Figma files with this [Model Context Protocol](https://modelcontextprotocol.io/introduction) server.\n\nWhen Cursor has access to Figma design data, it's **way** better at one-shotting designs accurately than alternative approaches like pasting screenshots.\n\nGet started quickly, see [Configuration](#configuration) for more details:\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\n```\n\n## Demo Video\n\n[Watch a demo of building a UI in Cursor with Figma design data](https://youtu.be/6G9yb-LrEqg)\n[![Watch the video](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg)\n\n $\"Figma$ \n\n## How it works\n\n1. Open Cursor's composer in agent mode.\n1. Paste a link to a Figma file, frame, or group.\n1. Ask Cursor to do something with the Figma file—e.g. implement a design.\n1. Cursor will fetch the relevant metadata from Figma and use it to write your code.\n\nThis MCP server is specifically designed for use with Cursor. Before responding with context from the [Figma API](https://www.figma.com/developers/api), it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.\n\nReducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.\n\n## Installation\n\n### Running the server quickly with NPM\n\nYou can run the server quickly without installing or building the repo using NPM:\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\n\n# or\npnpx figma-developer-mcp --figma-api-key=\n\n# or\nyarn dlx figma-developer-mcp --figma-api-key=\n\n# or\nbunx figma-developer-mcp --figma-api-key=\n```\n\nInstructions on how to create a Figma API access token can be found [here](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).\n\n### JSON config for tools that use configuration files\n\nMany tools like Windsurf, Cline, and [Claude Desktop](https://claude.ai/download) use a configuration file to start the server.\n\nThe `figma-developer-mcp` server can be configured by adding the following to your configuration file:\n\n```json\n{\n \"mcpServers\": {\n \"figma-developer-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"figma-developer-mcp\", \"--stdio\"],\n \"env\": {\n \"FIGMA_API_KEY\": \"\"\n }\n }\n }\n}\n```\n\n### Running the server from local source\n\n1. Clone the [repository](https://github.com/GLips/Figma-Context-MCP)\n2. Install dependencies with `pnpm install`\n3. Copy `.env.example` to `.env` and fill in your [Figma API access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens). Only read access is required.\n4. Run the server with `pnpm run dev`, along with any of the flags from the [Command-line Arguments](#command-line-arguments) section.\n\n## Configuration\n\nThe server can be configured using either environment variables (via `.env` file) or command-line arguments. Command-line arguments take precedence over environment variables.\n\n### Environment Variables\n\n- `FIGMA_API_KEY`: Your [Figma API access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) (required)\n- `PORT`: The port to run the server on (default: 3333)\n\n### Command-line Arguments\n\n- `--version`: Show version number\n- `--figma-api-key`: Your Figma API access token\n- `--port`: The port to run the server on\n- `--stdio`: Run the server in command mode, instead of default HTTP/SSE\n- `--help`: Show help menu\n\n## Connecting to Cursor\n\n### Start the server\n\n```bash\n> npx figma-developer-mcp --figma-api-key=\n# Initializing Figma MCP Server in HTTP mode on port 3333...\n# HTTP server listening on port 3333\n# SSE endpoint available at http://localhost:3333/sse\n# Message endpoint available at http://localhost:3333/messages\n```\n\n### Connect Cursor to the MCP server\n\nOnce the server is running, [connect Cursor to the MCP server](https://docs.cursor.com/context/model-context-protocol) in Cursor's settings, under the features tab.\n\n![Connecting to MCP server in Cursor](./docs/cursor-MCP-settings.png)\n\nAfter the server has been connected, you can confirm Cursor's has a valid connection before getting started. If you get a green dot and the tools show up, you're good to go!\n\n![Confirming connection in Cursor](./docs/verify-connection.png)\n\n### Start using Composer with your Figma designs\n\nOnce the MCP server is connected, **you can start using the tools in Cursor's composer, as long as the composer is in agent mode.**\n\nDropping a link to a Figma file in the composer and asking Cursor to do something with it should automatically trigger the `get_file` tool.\n\nMost Figma files end up being huge, so you'll probably want to link to a specific frame or group within the file. With a single element selected, you can hit `CMD + L` to copy the link to the element. You can also find it in the context menu:\n\n![Copy link to Figma selection by right clicking](./docs/figma-copy-link.png)\n\nOnce you have a link to a specific element, you can drop it in the composer and ask Cursor to do something with it.\n\n## Inspect Responses\n\nTo inspect responses from the MCP server more easily, you can run the `inspect` command, which launches the `@modelcontextprotocol/inspector` web UI for triggering tool calls and reviewing responses:\n\n```bash\npnpm inspect\n# > figma-mcp@0.1.8 inspect\n# > pnpx @modelcontextprotocol/inspector\n#\n# Starting MCP inspector...\n# Proxy server listening on port 3333\n#\n# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀\n```\n\n## Available Tools\n\nThe server provides the following MCP tools:\n\n### get_figma_data\n\nFetches information about a Figma file or a specific node within a file.\n\nParameters:\n\n- `fileKey` (string, required): The key of the Figma file to fetch, often found in a provided URL like `figma.com/(file|design)//...`\n- `nodeId` (string, optional, **highly recommended**): The ID of the node to fetch, often found as URL parameter node-id=\n- `depth` (number, optional): How many levels deep to traverse the node tree, only used if explicitly requested by you via chat\n\n### download_figma_images (work in progress)\n\nDownload SVG and PNG images used in a Figma file based on the IDs of image or icon nodes.\n\nParameters:\n\n- `fileKey` (string, required): The key of the Figma file containing the node\n- `nodes` (array, required): The nodes to fetch as images\n - `nodeId` (string, required): The ID of the Figma image node to fetch, formatted as 1234:5678\n - `imageRef` (string, optional): If a node has an imageRef fill, you must include this variable. Leave blank when downloading Vector SVG images.\n - `fileName` (string, required): The local name for saving the fetched file\n- `localPath` (string, required): The absolute path to the directory where images are stored in the project. Automatically creates directories if needed.\n\n# Figma 정보 요청 화면 컴포넌트\n\n이 프로젝트는 Figma 디자인을 기반으로 정보 요청 화면 컴포넌트를 구현한 React 애플리케이션입니다.\n\n## 기능\n\n- 체크 아이콘 표시\n- 회사명이 강조된 안내 메시지 표시\n\n## 설치 및 실행\n\n### 의존성 설치\n\n```bash\n# npm 사용\nnpm install\n\n# 또는 pnpm 사용\npnpm install\n```\n\n### 개발 서버 실행\n\n```bash\n# npm 사용\nnpm run dev:web\n\n# 또는 pnpm 사용\npnpm dev:web\n```\n\n### 빌드\n\n```bash\n# npm 사용\nnpm run build:web\n\n# 또는 pnpm 사용\npnpm build:web\n```\n\n## 프로젝트 구조\n\n```\npublic/\n ├── images/\n │ └── checkCircle.svg\n └── index.html\nsrc/\n └── components/\n ├── App.tsx\n ├── CheckCircle.tsx\n ├── Header.tsx\n ├── InfoRequestScreen.tsx\n └── index.tsx\n```\n\n## 기술 스택\n\n- React\n- TypeScript\n- Tailwind CSS\n- Webpack\n\n## Figma 디자인\n\n이 프로젝트는 다음 Figma 디자인을 기반으로 구현되었습니다:\n[Figma 디자인 링크](https://www.figma.com/design/z5fANFNRnproZqtfdPuLm8/%5B%EC%8B%9C%EC%A6%8C11%5D-%EB%A7%9E%EC%B6%A4%EB%B6%84%EC%84%9D?node-id=4805-47890&m=dev)\n","name","English","tag","en-US",{"_29":42,"_37":46,"_39":47},{"_31":43,"_33":44,"_35":45},"Brinda a las herramientas de codificación impulsadas por IA, como Cursor, Windsurf y Cline, acceso a los archivos de diseño de Figma, lo que permite una generación de código más precisa directamente desde los diseños de Figma.","Servidor MCP de Figma","# Servidor MCP de Figma\n\nOtorgue [a Cursor](https://cursor.sh/) , [Windsurf](https://codeium.com/windsurf) , [Cline](https://cline.bot/) y otras herramientas de codificación impulsadas por IA acceso a sus archivos Figma con este servidor [de protocolo de contexto de modelo](https://modelcontextprotocol.io/introduction) .\n\nCuando Cursor tiene acceso a los datos de diseño de Figma, es **mucho** mejor para crear diseños de una sola pasada con precisión que con enfoques alternativos como pegar capturas de pantalla.\n\nComience rápidamente, consulte [Configuración](#configuration) para obtener más detalles:\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\n```\n\n## Vídeo de demostración\n\n[Vea una demostración de cómo crear una interfaz de usuario en Cursor con datos de diseño de Figma](https://youtu.be/6G9yb-LrEqg) [![Mira el video](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg)\n\n## Cómo funciona\n\n1. Abra el compositor de Cursor en modo agente.\n2. Pegar un enlace a un archivo, marco o grupo de Figma.\n3. Pídale a Cursor que haga algo con el archivo Figma (por ejemplo, implementar un diseño).\n4. El cursor obtendrá los metadatos relevantes de Figma y los usará para escribir su código.\n\nEste servidor MCP está diseñado específicamente para su uso con Cursor. Antes de responder con el contexto de la [API de Figma](https://www.figma.com/developers/api) , simplifica y traduce la respuesta para que solo se proporcione al modelo la información de diseño y estilo más relevante.\n\nReducir la cantidad de contexto proporcionado al modelo ayuda a que la IA sea más precisa y las respuestas más relevantes.\n\n## Instalación\n\n### Ejecutar el servidor rápidamente con NPM\n\nPuede ejecutar el servidor rápidamente sin instalar ni crear el repositorio mediante NPM:\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\n\n# or\npnpx figma-developer-mcp --figma-api-key=\n\n# or\nyarn dlx figma-developer-mcp --figma-api-key=\n\n# or\nbunx figma-developer-mcp --figma-api-key=\n```\n\nLas instrucciones sobre cómo crear un token de acceso a la API de Figma se pueden encontrar [aquí](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) .\n\n### Configuración JSON para herramientas que utilizan archivos de configuración\n\nMuchas herramientas como Windsurf, Cline y [Claude Desktop](https://claude.ai/download) utilizan un archivo de configuración para iniciar el servidor.\n\nEl servidor `figma-developer-mcp` se puede configurar agregando lo siguiente a su archivo de configuración:\n\n```json\n{\n \"mcpServers\": {\n \"figma-developer-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"figma-developer-mcp\", \"--stdio\"],\n \"env\": {\n \"FIGMA_API_KEY\": \"\"\n }\n }\n }\n}\n```\n\n### Ejecutar el servidor desde una fuente local\n\n1. Clonar el [repositorio](https://github.com/GLips/Figma-Context-MCP)\n2. Instalar dependencias con `pnpm install`\n3. Copia `.env.example` en `.env` y completa tu [token de acceso a la API de Figma](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) . Solo se requiere acceso de lectura.\n4. Ejecute el servidor con `pnpm run dev` , junto con cualquiera de los indicadores de la sección [Argumentos de la línea de comandos](#command-line-arguments) .\n\n## Configuración\n\nEl servidor se puede configurar mediante variables de entorno (mediante el archivo `.env` ) o argumentos de la línea de comandos. Los argumentos de la línea de comandos tienen prioridad sobre las variables de entorno.\n\n### Variables de entorno\n\n* `FIGMA_API_KEY` : Su [token de acceso a la API de Figma](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) (obligatorio)\n* `PORT` : El puerto donde se ejecutará el servidor (predeterminado: 3333)\n\n### Argumentos de la línea de comandos\n\n* `--version` : Mostrar el número de versión\n* `--figma-api-key` : Su token de acceso a la API de Figma\n* `--port` : El puerto donde se ejecutará el servidor\n* `--stdio` : ejecuta el servidor en modo de comando, en lugar del modo HTTP/SSE predeterminado\n* `--help` : Mostrar el menú de ayuda\n\n## Conectando al cursor\n\n### Iniciar el servidor\n\n```bash\n> npx figma-developer-mcp --figma-api-key=\n# Initializing Figma MCP Server in HTTP mode on port 3333...\n# HTTP server listening on port 3333\n# SSE endpoint available at http://localhost:3333/sse\n# Message endpoint available at http://localhost:3333/messages\n```\n\n### Conectar Cursor al servidor MCP\n\nUna vez que el servidor esté en ejecución, [conecte Cursor al servidor MCP](https://docs.cursor.com/context/model-context-protocol) en la configuración de Cursor, en la pestaña de características.\n\n![Conexión al servidor MCP en Cursor](./docs/cursor-MCP-settings.png)\n\nUna vez conectado el servidor, puedes confirmar que Cursor tenga una conexión válida antes de empezar. Si ves un punto verde y aparecen las herramientas, ¡estás listo!\n\n![Confirmando la conexión en Cursor](./docs/verify-connection.png)\n\n### Empieza a usar Composer con tus diseños de Figma\n\nUna vez conectado el servidor MCP, **puede comenzar a utilizar las herramientas en el compositor de Cursor, siempre que el compositor esté en modo agente.**\n\nColocar un enlace a un archivo de Figma en el compositor y pedirle a Cursor que haga algo con él debería activar automáticamente la herramienta `get_file` .\n\nLa mayoría de los archivos de Figma son muy grandes, así que probablemente quieras enlazarlos a un fotograma o grupo específico dentro del archivo. Con un solo elemento seleccionado, puedes pulsar `CMD + L` para copiar el enlace. También puedes encontrarlo en el menú contextual:\n\n![Copiar el enlace a la selección de Figma haciendo clic derecho](./docs/figma-copy-link.png)\n\nUna vez que tenga un enlace a un elemento específico, puede colocarlo en el compositor y pedirle a Cursor que haga algo con él.\n\n## Inspeccionar respuestas\n\nPara inspeccionar las respuestas del servidor MCP más fácilmente, puede ejecutar el comando `inspect` , que inicia la interfaz de usuario web `@modelcontextprotocol/inspector` para activar llamadas de herramientas y revisar las respuestas:\n\n```bash\npnpm inspect\n# > figma-mcp@0.1.8 inspect\n# > pnpx @modelcontextprotocol/inspector\n#\n# Starting MCP inspector...\n# Proxy server listening on port 3333\n#\n# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀\n```\n\n## Herramientas disponibles\n\nEl servidor proporciona las siguientes herramientas MCP:\n\n### obtener\\_datos\\_de\\_figma\n\nObtiene información sobre un archivo Figma o un nodo específico dentro de un archivo.\n\nParámetros:\n\n* `fileKey` (cadena, obligatoria): la clave del archivo Figma a obtener, que a menudo se encuentra en una URL proporcionada como `figma.com/(file|design)//...`\n* `nodeId` (cadena, opcional, **muy recomendable** ): el ID del nodo a buscar, que a menudo se encuentra como parámetro de URL node-id=\n* `depth` (número, opcional): cuántos niveles de profundidad se deben recorrer en el árbol de nodos; solo se usa si lo solicita explícitamente a través del chat\n\n### descargar imágenes de figma (trabajo en progreso)\n\nDescargue imágenes SVG y PNG utilizadas en un archivo Figma según los ID de los nodos de imagen o ícono.\n\nParámetros:\n\n* `fileKey` (cadena, obligatoria): la clave del archivo Figma que contiene el nodo\n* `nodes` (matriz, obligatorio): Los nodos que se obtendrán como imágenes\n * `nodeId` (cadena, obligatoria): el ID del nodo de imagen de Figma que se obtendrá, con el formato 1234:5678\n * `imageRef` (cadena, opcional): Si un nodo tiene un relleno de imageRef, debe incluir esta variable. Déjela en blanco al descargar imágenes SVG vectoriales.\n * `fileName` (cadena, obligatoria): el nombre local para guardar el archivo obtenido\n* `localPath` (cadena, obligatoria): La ruta absoluta al directorio donde se almacenan las imágenes en el proyecto. Crea directorios automáticamente si es necesario.\n\n# Figma 정보 요청 화면 컴포넌트\n\n이 프로젝트는 Figma 디자인을 기반으로 정보 요청 화면 컴포넌트를 구현한 React 애플리케이션입니다.\n\n## 기능\n\n* El amor es grande\n* 회사명이 강조된 안내 메시지 표시\n\n## El amor es grande\n\n### El sueño de Jeon\n\n```bash\n# npm 사용\nnpm install\n\n# 또는 pnpm 사용\npnpm install\n```\n\n### El amor es grande\n\n```bash\n# npm 사용\nnpm run dev:web\n\n# 또는 pnpm 사용\npnpm dev:web\n```\n\n### 빌드\n\n```bash\n# npm 사용\nnpm run build:web\n\n# 또는 pnpm 사용\npnpm build:web\n```\n\n## 프로젝트 구조\n\n```\npublic/\n ├── images/\n │ └── checkCircle.svg\n └── index.html\nsrc/\n └── components/\n ├── App.tsx\n ├── CheckCircle.tsx\n ├── Header.tsx\n ├── InfoRequestScreen.tsx\n └── index.tsx\n```\n\n## 기술 스택\n\n* Reaccionar\n* Mecanografiado\n* Viento de cola CSS\n* Paquete web\n\n## Figura de acción de Figma\n\n이 프로젝트는 다음 Figma 디자인을 기반으로 구현되었습니다: [Figma 디자인 링크](https://www.figma.com/design/z5fANFNRnproZqtfdPuLm8/%5B%EC%8B%9C%EC%A6%8C11%5D-%EB%A7%9E%EC%B6%A4%EB%B6%84%EC%84%9D?node-id=4805-47890\\&m=dev)","Spanish","es-ES",{"_29":49,"_37":53,"_39":54},{"_31":50,"_33":51,"_35":52},"Cursor、Windsurf、Cline などの AI 搭載コーディングツールに Figma デザインファイルへのアクセスを提供し、Figma デザインから直接、より正確なコード生成を可能にします。","Figma MCP サーバー","# Figma MCP サーバー\n\nこの[モデルコンテキストプロトコル](https://modelcontextprotocol.io/introduction)サーバーを使用して、 [Cursor](https://cursor.sh/) 、 [Windsurf](https://codeium.com/windsurf) 、 [Cline](https://cline.bot/)などの AI 搭載コーディングツールに Figma ファイルへのアクセスを許可します。\n\nCursor が Figma のデザインデータにアクセスできる場合、スクリーンショットを貼り付けるなどの他の方法よりも、デザインをワンショットで正確に作成する**方がはるか**に優れています。\n\nすぐに始めましょう。詳細については[構成を](#configuration)参照してください。\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\n```\n\n## デモビデオ\n\n[Figmaのデザインデータを使ってCursorでUIを構築するデモをご覧ください](https://youtu.be/6G9yb-LrEqg)[![ビデオを見る](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg)\n\n## 仕組み\n\n1. エージェントモードで Cursor のコンポーザーを開きます。\n2. Figma ファイル、フレーム、またはグループへのリンクを貼り付けます。\n3. Cursor に Figma ファイルで何かを実行するように指示します (例: デザインの実装)。\n4. カーソルは Figma から関連するメタデータを取得し、それを使用してコードを記述します。\n\nこのMCPサーバーは、Cursor専用に設計されています。Figma [API](https://www.figma.com/developers/api)からのコンテキストを返す前に、レスポンスを簡素化および変換し、最も関連性の高いレイアウトとスタイル情報のみがモデルに提供されます。\n\nモデルに提供されるコンテキストの量を減らすと、AI の精度が向上し、応答の関連性が高まります。\n\n## インストール\n\n### NPMでサーバーを素早く実行する\n\nNPM を使用すると、リポジトリをインストールまたはビルドせずにサーバーをすばやく実行できます。\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\n\n# or\npnpx figma-developer-mcp --figma-api-key=\n\n# or\nyarn dlx figma-developer-mcp --figma-api-key=\n\n# or\nbunx figma-developer-mcp --figma-api-key=\n```\n\nFigma API アクセストークンを作成する方法については、[こちらを](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)ご覧ください。\n\n### 設定ファイルを使用するツールの JSON 設定\n\nWindsurf、Cline、 [Claude Desktop](https://claude.ai/download)などの多くのツールは、構成ファイルを使用してサーバーを起動します。\n\n`figma-developer-mcp`サーバーは、構成ファイルに以下を追加することで構成できます。\n\n```json\n{\n \"mcpServers\": {\n \"figma-developer-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"figma-developer-mcp\", \"--stdio\"],\n \"env\": {\n \"FIGMA_API_KEY\": \"\"\n }\n }\n }\n}\n```\n\n### ローカルソースからサーバーを実行する\n\n1. [リポジトリ](https://github.com/GLips/Figma-Context-MCP)をクローンする\n2. `pnpm install`で依存関係をインストールする\n3. `.env.example`を`.env`にコピーし、 [Figma API アクセストークン](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)を入力してください。読み取りアクセスのみが必要です。\n4. [コマンドライン引数](#command-line-arguments)セクションのいずれかのフラグとともに、 `pnpm run dev`を使用してサーバーを実行します。\n\n## 構成\n\nサーバーは、環境変数（ `.env`ファイル経由）またはコマンドライン引数を使用して設定できます。コマンドライン引数は環境変数よりも優先されます。\n\n### 環境変数\n\n* `FIGMA_API_KEY` : [Figma APIアクセストークン](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)（必須）\n* `PORT` : サーバーを実行するポート (デフォルト: 3333)\n\n### コマンドライン引数\n\n* `--version` : バージョン番号を表示\n* `--figma-api-key` : Figma API アクセストークン\n* `--port` : サーバーを実行するポート\n* `--stdio` : デフォルトのHTTP/SSEではなく、コマンドモードでサーバーを実行します。\n* `--help` : ヘルプメニューを表示する\n\n## カーソルに接続\n\n### サーバーを起動する\n\n```bash\n> npx figma-developer-mcp --figma-api-key=\n# Initializing Figma MCP Server in HTTP mode on port 3333...\n# HTTP server listening on port 3333\n# SSE endpoint available at http://localhost:3333/sse\n# Message endpoint available at http://localhost:3333/messages\n```\n\n### カーソルをMCPサーバーに接続する\n\nサーバーが実行中になったら、Cursor の設定の機能タブで、 [Cursor を MCP サーバーに接続します](https://docs.cursor.com/context/model-context-protocol)。\n\n![カーソルでMCPサーバーに接続](./docs/cursor-MCP-settings.png)\n\nサーバーに接続したら、作業を始める前にCursorの接続が有効になっていることを確認してください。緑色のドットが表示され、ツールが表示されれば、準備完了です！\n\n![カーソルで接続を確認](./docs/verify-connection.png)\n\n### FigmaデザインでComposerを使い始める\n\nMCP サーバーに接続すると、**コンポーザーがエージェントモードになっている限り、Cursor のコンポーザー内のツールの使用を開始できます。**\n\nコンポーザーで Figma ファイルへのリンクをドロップし、Cursor に何かを実行するように要求すると、 `get_file`ツールが自動的にトリガーされます。\n\nFigmaファイルはサイズが大きくなることが多いため、ファイル内の特定のフレームやグループにリンクを貼りたいと思うでしょう。要素を1つ選択した状態で`CMD + L`を押すと、その要素へのリンクをコピーできます。また、コンテキストメニューからもリンクをコピーできます。\n\n![右クリックしてFigmaの選択範囲へのリンクをコピーします](./docs/figma-copy-link.png)\n\n特定の要素へのリンクができたら、それをコンポーザーにドロップして、カーソルに何かを実行するよう指示できます。\n\n## 応答を検査する\n\nMCP サーバーからの応答をより簡単に検査するには、 `inspect`コマンドを実行します。このコマンドは、ツール呼び出しをトリガーして応答を確認するための`@modelcontextprotocol/inspector` Web UI を起動します。\n\n```bash\npnpm inspect\n# > figma-mcp@0.1.8 inspect\n# > pnpx @modelcontextprotocol/inspector\n#\n# Starting MCP inspector...\n# Proxy server listening on port 3333\n#\n# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀\n```\n\n## 利用可能なツール\n\nサーバーは次の MCP ツールを提供します。\n\n### get\\_figma\\_data\n\nFigma ファイルまたはファイル内の特定のノードに関する情報を取得します。\n\nパラメータ:\n\n* `fileKey` (文字列、必須): 取得する Figma ファイルのキー。通常、 `figma.com/(file|design)//...`のような URL で見つかります。\n* `nodeId` (文字列、オプション、**強く推奨**): 取得するノードのID。URLパラメータ node-id= としてよく使用されます。\n* `depth` （数値、オプション）：ノードツリーを何レベルの深さでトラバースするか。チャットで明示的に要求された場合にのみ使用されます。\n\n### download\\_figma\\_images（作業中）\n\n画像またはアイコンノードの ID に基づいて、Figma ファイルで使用されている SVG および PNG 画像をダウンロードします。\n\nパラメータ:\n\n* `fileKey` (文字列、必須): ノードを含むFigmaファイルのキー\n* `nodes` (配列、必須): 画像として取得するノード\n * `nodeId` (文字列、必須): 取得するFigma画像ノードのID。形式は1234:5678\n * `imageRef` (文字列、オプション): ノードにimageRef fill属性がある場合は、この変数を含める必要があります。ベクターSVG画像をダウンロードする場合は空白のままにしてください。\n * `fileName` (文字列、必須): 取得したファイルを保存するためのローカル名\n* `localPath` （文字列、必須）: プロジェクト内の画像が保存されているディレクトリへの絶対パス。必要に応じてディレクトリが自動的に作成されます。\n\n# Figma 정보 요청 화면 컴포넌트\n\nこの機能は Figma の機能を使用して React を実行します。 애플리케이션입니다。\n\n## ギルド\n\n* チョーク・アヨコ・フシ\n* 회사명이 강조된 안내 메시지 표시\n\n## 結婚と結婚\n\n### 의존성 설치\n\n```bash\n# npm 사용\nnpm install\n\n# 또는 pnpm 사용\npnpm install\n```\n\n### ガバ・サンベル・シンパ\n\n```bash\n# npm 사용\nnpm run dev:web\n\n# 또는 pnpm 사용\npnpm dev:web\n```\n\n### ドラム\n\n```bash\n# npm 사용\nnpm run build:web\n\n# 또는 pnpm 사용\npnpm build:web\n```\n\n## フォートルール郡\n\n```\npublic/\n ├── images/\n │ └── checkCircle.svg\n └── index.html\nsrc/\n └── components/\n ├── App.tsx\n ├── CheckCircle.tsx\n ├── Header.tsx\n ├── InfoRequestScreen.tsx\n └── index.tsx\n```\n\n## ゴールスター\n\n* 反応する\n* タイプスクリプト\n* テイルウィンドCSS\n* ウェブパック\n\n## Figma デモ\n\n今度は Figma 디자인을 기반으로 구현되었습니다: [Figma 디자인 링크](https://www.figma.com/design/z5fANFNRnproZqtfdPuLm8/%5B%EC%8B%9C%EC%A6%8C11%5D-%EB%A7%9E%EC%B6%A4%EB%B6%84%EC%84%9D?node-id=4805-47890\\&m=dev)","Japanese","ja-JP",{"_29":56,"_37":60,"_39":61},{"_31":57,"_33":58,"_35":59},"Cursor, Windsurf, Cline과 같은 AI 기반 코딩 도구가 Figma 디자인 파일에 액세스하여 Figma 디자인에서 직접 보다 정확한 코드를 생성할 수 있도록 합니다.","Figma MCP 서버","# Figma MCP 서버\n\n이 [모델 컨텍스트 프로토콜](https://modelcontextprotocol.io/introduction) 서버를 사용하면 [Cursor](https://cursor.sh/) , [Windsurf](https://codeium.com/windsurf) , [Cline](https://cline.bot/) 및 기타 AI 기반 코딩 도구가 Figma 파일에 액세스할 수 있습니다.\n\nCursor가 Figma 디자인 데이터에 액세스할 수 있으면 스크린샷을 붙여넣는 것과 같은 대체 방식보다 한 번에 디자인을 정확하게 제작하는 데 **훨씬** 더 효과적입니다.\n\n빠르게 시작하려면 [구성을](#configuration) 참조하세요. 자세한 내용은 다음과 같습니다.\n\n지엑스피1\n\n## 데모 비디오\n\n[Figma 디자인 데이터를 사용하여 Cursor에서 UI를 구축하는 데모를 시청하세요.](https://youtu.be/6G9yb-LrEqg) [![영상을 시청하세요](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg)\n\n## 작동 원리\n\n1. 커서의 작성기를 에이전트 모드로 엽니다.\n2. Figma 파일, 프레임 또는 그룹에 대한 링크를 붙여넣습니다.\n3. Cursor에게 Figma 파일로 무언가를 하라고 요청합니다. 예를 들어, 디자인을 구현합니다.\n4. 커서는 Figma에서 관련 메타데이터를 가져와서 코드를 작성하는 데 사용합니다.\n\n이 MCP 서버는 Cursor와 함께 사용하도록 특별히 설계되었습니다. [Figma API](https://www.figma.com/developers/api) 에서 컨텍스트를 응답하기 전에, 응답을 단순화하고 변환하여 가장 관련성 높은 레이아웃 및 스타일 정보만 모델에 제공합니다.\n\n모델에 제공되는 컨텍스트의 양을 줄이면 AI의 정확도가 높아지고 응답의 관련성도 높아집니다.\n\n## 설치\n\n### NPM을 사용하여 서버를 빠르게 실행\n\nNPM을 사용하면 저장소를 설치하거나 빌드하지 않고도 빠르게 서버를 실행할 수 있습니다.\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\n\n# or\npnpx figma-developer-mcp --figma-api-key=\n\n# or\nyarn dlx figma-developer-mcp --figma-api-key=\n\n# or\nbunx figma-developer-mcp --figma-api-key=\n```\n\nFigma API 액세스 토큰을 만드는 방법에 대한 지침은 [여기에서](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) 확인할 수 있습니다.\n\n### 구성 파일을 사용하는 도구에 대한 JSON 구성\n\nWindsurf, Cline, [Claude Desktop과](https://claude.ai/download) 같은 많은 도구는 서버를 시작하기 위해 구성 파일을 사용합니다.\n\n다음을 구성 파일에 추가하여 `figma-developer-mcp` 서버를 구성할 수 있습니다.\n\n```json\n{\n \"mcpServers\": {\n \"figma-developer-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"figma-developer-mcp\", \"--stdio\"],\n \"env\": {\n \"FIGMA_API_KEY\": \"\"\n }\n }\n }\n}\n```\n\n### 로컬 소스에서 서버 실행\n\n1. [저장소](https://github.com/GLips/Figma-Context-MCP) 를 복제합니다\n2. `pnpm install` 로 종속성 설치\n3. `.env.example` 파일을 `.env` 로 복사하고 [Figma API 액세스 토큰을](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) 입력하세요. 읽기 권한만 필요합니다.\n4. [명령줄 인수](#command-line-arguments) 섹션의 플래그와 함께 `pnpm run dev` 로 서버를 실행합니다.\n\n## 구성\n\n서버는 환경 변수( `.env` 파일을 통해) 또는 명령줄 인수를 사용하여 구성할 수 있습니다. 명령줄 인수는 환경 변수보다 우선합니다.\n\n### 환경 변수\n\n* `FIGMA_API_KEY` : [Figma API 액세스 토큰](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) (필수)\n* `PORT` : 서버를 실행할 포트(기본값: 3333)\n\n### 명령줄 인수\n\n* `--version` : 버전 번호를 표시합니다\n* `--figma-api-key` : Figma API 액세스 토큰\n* `--port` : 서버를 실행할 포트\n* `--stdio` : 기본 HTTP/SSE 대신 명령 모드에서 서버를 실행합니다.\n* `--help` : 도움말 메뉴를 표시합니다\n\n## 커서에 연결\n\n### 서버를 시작합니다\n\n```bash\n> npx figma-developer-mcp --figma-api-key=\n# Initializing Figma MCP Server in HTTP mode on port 3333...\n# HTTP server listening on port 3333\n# SSE endpoint available at http://localhost:3333/sse\n# Message endpoint available at http://localhost:3333/messages\n```\n\n### 커서를 MCP 서버에 연결합니다.\n\n서버가 실행되면 커서 설정의 기능 탭에서 [커서를 MCP 서버에 연결합니다](https://docs.cursor.com/context/model-context-protocol) .\n\n![커서에서 MCP 서버에 연결](./docs/cursor-MCP-settings.png)\n\n서버가 연결되면 시작하기 전에 Cursor's가 제대로 연결되었는지 확인할 수 있습니다. 녹색 점이 표시되고 도구가 나타나면 준비가 완료된 것입니다!\n\n![커서에서 연결 확인](./docs/verify-connection.png)\n\n### Figma 디자인에 Composer를 사용해보세요\n\nMCP 서버가 연결되면 **Cursor의 Composer가 에이전트 모드에 있는 한, Cursor의 Composer에 있는 도구를 사용할 수 있습니다.**\n\nComposer에 Figma 파일에 대한 링크를 놓고 Cursor에 해당 파일에 대한 작업을 요청하면 `get_file` 도구가 자동으로 트리거됩니다.\n\n대부분의 Figma 파일은 크기가 매우 크기 때문에 파일 내 특정 프레임이나 그룹에 링크를 걸고 싶을 수 있습니다. 요소를 하나 선택한 상태에서 `CMD + L` 눌러 해당 요소의 링크를 복사할 수 있습니다. 컨텍스트 메뉴에서도 찾을 수 있습니다.\n\n![Figma 선택 항목에 마우스 오른쪽 버튼을 클릭하여 링크를 복사하세요.](./docs/figma-copy-link.png)\n\n특정 요소에 대한 링크가 생기면 이를 작성기에 끌어다 놓고 Cursor에 작업을 요청하면 됩니다.\n\n## 응답 검사\n\nMCP 서버의 응답을 더 쉽게 검사하려면 `inspect` 명령을 실행하면 됩니다. 이 명령은 도구 호출을 트리거하고 응답을 검토하기 위한 `@modelcontextprotocol/inspector` 웹 UI를 시작합니다.\n\n```bash\npnpm inspect\n# > figma-mcp@0.1.8 inspect\n# > pnpx @modelcontextprotocol/inspector\n#\n# Starting MCP inspector...\n# Proxy server listening on port 3333\n#\n# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀\n```\n\n## 사용 가능한 도구\n\n서버는 다음과 같은 MCP 도구를 제공합니다.\n\n### 피그마 데이터 가져오기\n\nFigma 파일이나 파일 내의 특정 노드에 대한 정보를 가져옵니다.\n\n매개변수:\n\n* `fileKey` (문자열, 필수): 가져올 Figma 파일의 키입니다. 제공된 URL(예: `figma.com/(file|design)//...` 에서 찾을 수 있습니다.\n* `nodeId` (문자열, 선택 사항, **강력히 권장** ): 가져올 노드의 ID로, 종종 URL 매개변수 node-id=로 발견됩니다.\n* `depth` (숫자, 선택 사항): 노드 트리를 탐색할 깊이 수준입니다. 채팅을 통해 명시적으로 요청한 경우에만 사용됩니다.\n\n### download\\_figma\\_images (작업 중)\n\n이미지나 아이콘 노드의 ID를 기반으로 Figma 파일에 사용된 SVG 및 PNG 이미지를 다운로드합니다.\n\n매개변수:\n\n* `fileKey` (문자열, 필수): 노드를 포함하는 Figma 파일의 키\n* `nodes` (배열, 필수): 이미지로 가져올 노드\n * `nodeId` (문자열, 필수): 가져올 Figma 이미지 노드의 ID, 형식은 1234:5678입니다.\n * `imageRef` (문자열, 선택 사항): 노드에 imageRef 채우기가 있는 경우 이 변수를 포함해야 합니다. 벡터 SVG 이미지를 다운로드할 때는 비워 두세요.\n * `fileName` (문자열, 필수): 가져온 파일을 저장할 로컬 이름\n* `localPath` (문자열, 필수): 프로젝트에서 이미지가 저장된 디렉터리의 절대 경로입니다. 필요한 경우 디렉터리를 자동으로 생성합니다.\n\n# Figma 정보 구성요소\n\n이 프로젝트는 Figma 디자인을 기반으로 하는 정보 구성 요소를 구성하는 React를 구성합니다.\n\n## 기능\n\n* 체크 아이콘 표시\n* 소속감을 강조하는 안내 메시지\n\n## 설치 및 지원\n\n### 의존성 설치\n\n```bash\n# npm 사용\nnpm install\n\n# 또는 pnpm 사용\npnpm install\n```\n\n### 개발 서버 지원\n\n```bash\n# npm 사용\nnpm run dev:web\n\n# 또는 pnpm 사용\npnpm dev:web\n```\n\n### 빌드\n\n```bash\n# npm 사용\nnpm run build:web\n\n# 또는 pnpm 사용\npnpm build:web\n```\n\n## 프로젝트 구조\n\n```\npublic/\n ├── images/\n │ └── checkCircle.svg\n └── index.html\nsrc/\n └── components/\n ├── App.tsx\n ├── CheckCircle.tsx\n ├── Header.tsx\n ├── InfoRequestScreen.tsx\n └── index.tsx\n```\n\n## 기술병원\n\n* 반응하다\n* 타입스크립트\n* 테일윈드 CSS\n* 웹팩\n\n## Figma 디자인\n\n이 프로젝트는 다음 Figma 디자인을 기반으로 구현되었습니다: [Figma 디자인 링크](https://www.figma.com/design/z5fANFNRnproZqtfdPuLm8/%5B%EC%8B%9C%EC%A6%8C11%5D-%EB%A7%9E%EC%B6%A4%EB%B6%84%EC%84%9D?node-id=4805-47890\\&m=dev)","Korean","ko-KR",{"_29":63,"_37":67,"_39":68},{"_31":64,"_33":65,"_35":66},"让 Cursor、Windsurf 和 Cline 等 AI 驱动的编码工具访问 Figma 设计文件，从而可以直接从 Figma 设计生成更准确的代码。","Figma MCP 服务器","# Figma MCP 服务器\n\n使用此[模型上下文协议](https://modelcontextprotocol.io/introduction)服务器，让[Cursor](https://cursor.sh/) 、 [Windsurf](https://codeium.com/windsurf) 、 [Cline](https://cline.bot/)和其他 AI 驱动的编码工具访问您的 Figma 文件。\n\n当 Cursor 可以访问 Figma 设计数据时，它比粘贴屏幕截图等其他方法**更能**准确地一次性完成设计。\n\n快速上手，更多详情请见[配置](#configuration)：\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\n```\n\n## 演示视频\n\n[观看使用 Figma 设计数据在 Cursor 中构建 UI 的演示](https://youtu.be/6G9yb-LrEqg)[![观看视频](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg)\n\n## 工作原理\n\n1. 以代理模式打开 Cursor 的编辑器。\n2. 将链接粘贴到 Figma 文件、框架或组。\n3. 要求 Cursor 对 Figma 文件执行某些操作 - 例如实现设计。\n4. Cursor 将从 Figma 获取相关元数据并使用它来编写代码。\n\n此 MCP 服务器专为与 Cursor 配合使用而设计。在通过[Figma API](https://www.figma.com/developers/api)响应上下文之前，它会简化并转换响应，以便仅向模型提供最相关的布局和样式信息。\n\n减少提供给模型的上下文量有助于提高人工智能的准确性和响应的相关性。\n\n## 安装\n\n### 使用 NPM 快速运行服务器\n\n您可以使用 NPM 快速运行服务器，而无需安装或构建 repo：\n\n```bash\nnpx figma-developer-mcp --figma-api-key=\n\n# or\npnpx figma-developer-mcp --figma-api-key=\n\n# or\nyarn dlx figma-developer-mcp --figma-api-key=\n\n# or\nbunx figma-developer-mcp --figma-api-key=\n```\n\n有关如何创建 Figma API 访问令牌的说明可以[在这里](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)找到。\n\n### 使用配置文件的工具的 JSON 配置\n\n许多工具（如 Windsurf、Cline 和[Claude Desktop）](https://claude.ai/download)使用配置文件来启动服务器。\n\n可以通过将以下内容添加到配置文件来配置`figma-developer-mcp`服务器：\n\n```json\n{\n \"mcpServers\": {\n \"figma-developer-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"figma-developer-mcp\", \"--stdio\"],\n \"env\": {\n \"FIGMA_API_KEY\": \"\"\n }\n }\n }\n}\n```\n\n### 从本地源运行服务器\n\n1. 克隆[存储库](https://github.com/GLips/Figma-Context-MCP)\n2. 使用`pnpm install`安装依赖项\n3. 将`.env.example`复制到`.env`并填写您的[Figma API 访问令牌](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)。仅需要读取权限。\n4. 使用`pnpm run dev`以及[命令行参数](#command-line-arguments)部分中的任何标志运行服务器。\n\n## 配置\n\n可以使用环境变量（通过`.env`文件）或命令行参数来配置服务器。命令行参数的优先级高于环境变量。\n\n### 环境变量\n\n* `FIGMA_API_KEY` ：您的[Figma API 访问令牌](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)（必需）\n* `PORT` ：运行服务器的端口（默认值：3333）\n\n### 命令行参数\n\n* `--version` ：显示版本号\n* `--figma-api-key` ：您的 Figma API 访问令牌\n* `--port` ：运行服务器的端口\n* `--stdio` ：以命令模式运行服务器，而不是默认的 HTTP/SSE\n* `--help` ：显示帮助菜单\n\n## 连接到光标\n\n### 启动服务器\n\n```bash\n> npx figma-developer-mcp --figma-api-key=\n# Initializing Figma MCP Server in HTTP mode on port 3333...\n# HTTP server listening on port 3333\n# SSE endpoint available at http://localhost:3333/sse\n# Message endpoint available at http://localhost:3333/messages\n```\n\n### 将 Cursor 连接到 MCP 服务器\n\n服务器运行后，在 Cursor 设置的功能选项卡下[将 Cursor 连接到 MCP 服务器](https://docs.cursor.com/context/model-context-protocol)。\n\n![在 Cursor 中连接到 MCP 服务器](./docs/cursor-MCP-settings.png)\n\n连接服务器后，您可以先确认 Cursor 的连接是否有效，然后再开始操作。如果出现绿点并且工具也显示出来，那就表示您已经可以开始了！\n\n![在 Cursor 中确认连接](./docs/verify-connection.png)\n\n### 开始使用 Composer 进行 Figma 设计\n\n一旦 MCP 服务器连接成功，**您就可以开始使用 Cursor 编辑器中的工具，只要编辑器处于代理模式。**\n\n在编辑器中放置一个 Figma 文件的链接并要求 Cursor 对其执行某些操作应该会自动触发`get_file`工具。\n\n大多数 Figma 文件最终都会变得非常大，因此您可能需要链接到文件中的特定框架或组。选择单个元素后，您可以按`CMD + L`将链接复制到该元素。您也可以在上下文菜单中找到它：\n\n![通过右键单击将链接复制到 Figma 选择](./docs/figma-copy-link.png)\n\n一旦您有了特定元素的链接，您就可以将其放入编辑器中并要求 Cursor 对其执行某些操作。\n\n## 检查响应\n\n为了更轻松地检查来自 MCP 服务器的响应，您可以运行`inspect`命令，该命令将启动`@modelcontextprotocol/inspector` Web UI 来触发工具调用和查看响应：\n\n```bash\npnpm inspect\n# > figma-mcp@0.1.8 inspect\n# > pnpx @modelcontextprotocol/inspector\n#\n# Starting MCP inspector...\n# Proxy server listening on port 3333\n#\n# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀\n```\n\n## 可用工具\n\n该服务器提供以下 MCP 工具：\n\n### 获取figma数据\n\n获取有关 Figma 文件或文件内特定节点的信息。\n\n参数：\n\n* `fileKey` （字符串，必需）：要获取的 Figma 文件的键，通常在提供的 URL 中找到，例如`figma.com/(file|design)//...`\n* `nodeId` (字符串，可选，**强烈推荐**) ：要获取的节点的 ID，通常作为 URL 参数 node-id=\n* `depth` （数字，可选）：遍历节点树的深度，仅在您通过聊天明确请求时使用\n\n### download\\_figma\\_images（正在进行中）\n\n根据图像或图标节点的 ID 下载 Figma 文件中使用的 SVG 和 PNG 图像。\n\n参数：\n\n* `fileKey` （字符串，必需）：包含节点的 Figma 文件的键\n* `nodes` （数组，必需）：要作为图像获取的节点\n * `nodeId` （字符串，必需）：要获取的 Figma 图像节点的 ID，格式为 1234:5678\n * `imageRef` （字符串，可选）：如果节点包含 imageRef 填充，则必须包含此变量。下载矢量 SVG 图像时请留空。\n * `fileName` （字符串，必需）：保存获取的文件的本地名称\n* `localPath` （字符串，必需）：项目中存储图像的目录的绝对路径。如有需要，将自动创建目录。\n\n# Figma 정보 요청 화면 컴포넌트\n\nFigma 的应用程序包括 React 和 React 애플리케 Been 션입니다。\n\n## 기능\n\n* 체크 아이콘 표시\n* 회사명강조된 안내 메시지 표시\n\n## 설치 및 실행\n\n### 의존성 설치\n\n```bash\n# npm 사용\nnpm install\n\n# 또는 pnpm 사용\npnpm install\n```\n\n### 개발 서버 실행\n\n```bash\n# npm 사용\nnpm run dev:web\n\n# 또는 pnpm 사용\npnpm dev:web\n```\n\n### 빌드\n\n```bash\n# npm 사용\nnpm run build:web\n\n# 또는 pnpm 사용\npnpm build:web\n```\n\n## 韩国网络电视台\n\n```\npublic/\n ├── images/\n │ └── checkCircle.svg\n └── index.html\nsrc/\n └── components/\n ├── App.tsx\n ├── CheckCircle.tsx\n ├── Header.tsx\n ├── InfoRequestScreen.tsx\n └── index.tsx\n```\n\n## 기술스택\n\n* 反应\n* TypeScript\n* Tailwind CSS\n* Webpack\n\n## Figma 动画\n\n프로젝트는 다음 Figma 디자인을 기반으로 구현되었습니다: [Figma 디자인 링크](https://www.figma.com/design/z5fANFNRnproZqtfdPuLm8/%5B%EC%8B%9C%EC%A6%8C11%5D-%EB%A7%9E%EC%B6%A4%EB%B6%84%EC%84%9D?node-id=4805-47890\\&m=dev)","Chinese","zh-CN","githubUser","locale",{"_72":73,"_13":74,"_82":32,"_83":32,"_33":34,"_16":84,"_85":86,"_105":106,"_113":-5,"_114":115,"_116":-5,"_117":118,"_168":169,"_174":-5,"_93":151,"_175":115,"_96":176,"_177":178},"addedAt","2025-03-26T20:02:09.326758Z",[75,76,77,78,79,80,81],"category:code-execution","category:developer-tools","category:app-automation","environment:network","hosting:remote-capable","language:typescript","license_grade:a","descriptionMarkdown","descriptionPlainText",3800,"integrations",[87,98],{"_88":89,"_31":95,"_96":97},"brand",{"_90":91,"_37":92,"_93":94},"logoSvgPath","M1 0a1 1 0 0 0-1 1v22c0 .063.007.124.018.184L0 23.199l.025.026c.103.443.5.775.975.775h22a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm.707 1h20.582l-2 2H3.707l-2-2zM23 1.705v20.588l-2-2V3.705l2-2zM1 1.707l2 2v16.492l-2 2V1.707zM4 4h16v16H4V4zm3.537 3c-1.006 0-1.51.535-1.51 1.605v2.297c0 .4-.184.6-.554.6a.47.47 0 0 0-.344.139.512.512 0 0 0-.129.365.49.49 0 0 0 .129.353.47.47 0 0 0 .344.139c.37 0 .554.2.554.6v2.297c0 1.07.504 1.605 1.51 1.605.136 0 .248-.05.334-.148A.494.494 0 0 0 8 16.498a.512.512 0 0 0-.129-.365.439.439 0 0 0-.334-.139c-.376 0-.564-.199-.564-.6v-2.296c0-.46-.1-.823-.297-1.092.099-.138.173-.3.222-.485.05-.183.075-.389.075-.619V8.605c0-.4.188-.6.564-.6a.439.439 0 0 0 .334-.138A.499.499 0 0 0 8 7.512a.53.53 0 0 0-.129-.364A.425.425 0 0 0 7.537 7zm8.926 0a.425.425 0 0 0-.334.148.53.53 0 0 0-.129.364.5.5 0 0 0 .129.355.439.439 0 0 0 .334.139c.376 0 .564.199.564.6v2.296c0 .23.025.436.075.62.049.183.123.346.222.484-.197.27-.297.632-.297 1.092v2.297c0 .4-.188.6-.564.6a.439.439 0 0 0-.334.138.512.512 0 0 0-.129.365c0 .145.043.262.129.354a.425.425 0 0 0 .334.148c1.006 0 1.51-.535 1.51-1.605v-2.297c0-.4.184-.6.554-.6a.439.439 0 0 0 .334-.139.475.475 0 0 0 .139-.353.492.492 0 0 0-.139-.365.439.439 0 0 0-.334-.139c-.37 0-.554-.2-.554-.6V8.605c0-1.07-.504-1.605-1.51-1.605zm-7.25 6a.737.737 0 0 0-.496.227.717.717 0 0 0-.217.529.74.74 0 0 0 .75.744.74.74 0 0 0 .75-.744.717.717 0 0 0-.217-.53A.71.71 0 0 0 9.25 13h-.037zm2.75 0a.737.737 0 0 0-.496.227.717.717 0 0 0-.217.529.74.74 0 0 0 .217.53c.152.143.33.214.533.214a.74.74 0 0 0 .75-.744.717.717 0 0 0-.217-.53A.71.71 0 0 0 12 13h-.037zm2.75 0a.737.737 0 0 0-.496.227.717.717 0 0 0-.217.529.74.74 0 0 0 .217.53c.152.143.33.214.533.214a.74.74 0 0 0 .75-.744.717.717 0 0 0-.217-.53.71.71 0 0 0-.533-.226h-.037zm-11.1 8h16.68l2 2H1.613l2-2z","Codeium","slug","codeium","Enables Windsurf (by Codeium) to access Figma design data for AI-assisted code generation through the MCP protocol.","uid","6bqhazqo8r",{"_88":99,"_31":103,"_96":104},{"_90":100,"_37":101,"_93":102},"M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z","Figma","figma","Fetches design data from Figma files, frames, or groups, translating layout and styling information to help AI-powered coding tools generate more accurate implementations from Figma designs.","k31l6blvjz","namespace",{"_107":108,"_93":112},"owner",{"_109":110},"githubAccount",{"_111":112},"login","rlagudals95","readmeMarkdown","recentUsage",0,"redditPostExternalId","repository",{"_119":120,"_136":137,"_140":141,"_159":-5,"_160":161,"_162":163,"_167":-5},"argumentsJsonSchema",{"_121":122,"_133":134,"_128":135},"properties",{"_123":124,"_130":131},"PORT",{"_125":126,"_31":127,"_128":129},"default","3333","The port to run the server on","type","string","FIGMA_API_KEY",{"_31":132,"_128":129},"Your Figma API access token","required",[130],"object","githubProject",{"_35":36,"_138":139},"url","https://github.com/rlagudals95/mcp_figma","githubRepository",{"_142":143,"_144":145,"_146":147,"_16":148,"_149":150,"_37":151,"_107":152,"_154":115,"_155":156,"_158":115},"defaultBranch","develop","fullName","rlagudals95/mcp_figma","githubTreeId",296157,6389,"language","TypeScript","mcp_figma",{"_111":112,"_96":153},"MRZrhR4I9G","recentStargazers","spdxLicense",{"_37":157},"MIT License","stargazers","glamaJson","inspectable",false,"npmPackage",{"_37":164,"_165":166},"figma-developer-mcp","weeklyDownloads",18999,"supportedPlatforms","scores",{"_170":171,"_172":-5,"_173":-5},"license",100,"quality","security","simpleIcon","toolCount","lb01goowmg","updatedAt","2025-11-25T16:26:07.394744Z","meta",[181,184,186,193,196,198,201,204,207,210,213,215,218,221,223,225,227,229,231],{"_182":183},"title","Figma MCP Server | Glama",{"_185":32,"_37":31},"content",{"_187":188,"_189":190,"_191":192},"href","https://glama.ai/mcp/servers/@rlagudals95/mcp_figma","rel","canonical","tagName","link",{"_185":34,"_194":195},"property","og:title",{"_185":32,"_194":197},"og:description",{"_185":199,"_194":200},"https://glama.ai/logo.png","og:logo",{"_185":202,"_194":203},"https://glama.ai/mcp/servers/@rlagudals95/mcp_figma/og-image","og:image",{"_185":205,"_194":206},"630","og:image:height",{"_185":208,"_194":209},"1200","og:image:width",{"_185":211,"_194":212},"website","og:type",{"_185":188,"_194":214},"og:url",{"_185":216,"_194":217},"Glama – MCP Hosting Platform","og:site_name",{"_185":219,"_37":220},"summary_large_image","twitter:card",{"_185":216,"_37":222},"twitter:title",{"_185":32,"_37":224},"twitter:description",{"_185":202,"_37":226},"twitter:image",{"_185":205,"_37":228},"twitter:image:height",{"_185":208,"_37":230},"twitter:image:width",{"_232":233},"script:ld+json",{"_234":235,"_236":237},"@context","http://schema.org","@graph",[238],{"_234":239,"_240":241,"_242":243},"https://schema.org","@type","BreadcrumbList","itemListElement",[244,251,254,258],{"_240":245,"_246":247,"_37":248,"_249":250},"ListItem","item","https://glama.ai/","Glama","position",1,{"_240":245,"_246":252,"_37":253,"_249":22},"https://glama.ai/mcp","MCP",{"_240":245,"_246":255,"_37":256,"_249":257},"https://glama.ai/mcp/servers","Servers",3,{"_240":245,"_246":188,"_37":34,"_249":259},4,"visitorIsMaintainer","routes/_public/mcp/servers/~namespace/~slug/_pages/_explorer/blob/~commit/~/_route",{"_263":264,"_29":270,"_292":293,"_179":307,"_304":331,"_332":333},"blob",{"_185":265,"_266":267,"_268":269},"import React from 'react';\n\n\nconst App: React.FC = () => {\n return (\n

\n );\n};\n\nexport default App; ","fileName","App.tsx","size",115,{"_72":73,"_13":271,"_82":32,"_83":32,"_33":34,"_16":84,"_85":272,"_105":277,"_113":-5,"_114":115,"_116":-5,"_117":280,"_168":291,"_174":-5,"_93":151,"_175":115,"_96":176,"_177":178},[75,76,77,78,79,80,81],[273,275],{"_88":274,"_31":95,"_96":97},{"_90":91,"_37":92,"_93":94},{"_88":276,"_31":103,"_96":104},{"_90":100,"_37":101,"_93":102},{"_107":278,"_93":112},{"_109":279},{"_111":112},{"_119":281,"_136":286,"_140":287,"_159":-5,"_160":161,"_162":290,"_167":-5},{"_121":282,"_133":285,"_128":135},{"_123":283,"_130":284},{"_125":126,"_31":127,"_128":129},{"_31":132,"_128":129},[130],{"_35":36,"_138":139},{"_142":143,"_144":145,"_146":147,"_16":148,"_149":150,"_37":151,"_107":288,"_154":115,"_155":289,"_158":115},{"_111":112,"_96":153},{"_37":157},{"_37":164,"_165":166},{"_170":171,"_172":-5,"_173":-5},"member",{"_294":295,"_298":299,"_300":301,"_146":302,"_303":161,"_304":267,"_305":306,"_268":269,"_128":263},"commit",{"_296":297},"sha","7275a25d391efa42184f0c4238f68e2df8de1ec5","contentStoredObjectPointerId",10210349,"fullPath","src/components/App.tsx",296152,"indexable","path","safeToDisplayAsText",true,[308,310,312,314,316,317,318,320,321,322,323,324,325,326,327,328,329,330],{"_182":309},"App.tsx | Figma MCP Server | Glama",{"_185":311,"_37":31},"Enterprise-grade security, privacy, and features like agents, MCP, prompt templates, and more.",{"_187":313,"_189":190,"_191":192},"https://glama.ai/mcp/servers/@rlagudals95/mcp_figma/blob/7275a25d391efa42184f0c4238f68e2df8de1ec5/src/components",{"_185":315,"_194":195},"App.tsx | Figma MCP Server",{"_185":311,"_194":197},{"_185":199,"_194":200},{"_185":319,"_194":203},"https://glama.ai/generated-images/og?title=App.tsx+%7C+Figma+MCP+Server",{"_185":205,"_194":206},{"_185":208,"_194":209},{"_185":211,"_194":212},{"_185":313,"_194":214},{"_185":216,"_194":217},{"_185":219,"_37":220},{"_185":216,"_37":222},{"_185":311,"_37":224},{"_185":319,"_37":226},{"_185":205,"_37":228},{"_185":208,"_37":230},"src/components","treeMembers",[334,339,341],{"_294":335,"_300":336,"_304":337,"_128":338},{"_296":297},"src/components/icons","icons","tree",{"_294":340,"_300":301,"_304":267,"_128":263},{"_296":297},{"_294":342,"_300":343,"_304":344,"_128":263},{"_296":297},"src/components/index.tsx","index.tsx","actionData","errors"]

MCP directory API