Przewodnik po serwerze MCP Figma

The Figma MCP server helps developers explore and implement designs quickly and accurately:

• Get design context and code from your Figma designs, FigJam, and Make files
• Capture your live UI as design layers, bringing the interfaces rendered by your code to Figma Design files
• Enhance the way you work with design components and Code Connect

The tools within Figma’s MCP server bring additional context from Figma into your workflow, so your code doesn't just match your existing systems, but your design, too.

Serwery MCP są częścią standardowego interfejsu dla agentów AI do interakcji ze źródłami danych przez Model Context Protocol.

Zapoznaj się z naszą kolekcją Figma MCP, aby dowiedzieć się więcej o serwerze MCP i włączeniu Figma do swojego przepływu pracy →

Po włączeniu serwera możesz:

• Generate designs from the live UI of your web apps and sites

  Turn live UI from your browser (production, staging, or localhost) into editable design layers in Figma. Send pages, elements, or whole flows to Figma Design for exploration, alignment, and refinement.

  Note: This feature requires the remote Figma MCP server and is currently supported only for Claude Code, Codex by OpenAI, and VS Code.

  This feature is continuously being improved. If you encounter issues, you can report the issues using Fig, our support chatbot, or by emailing support (paid plans).

  Learn more about generating designs from your interfaces

• Wygeneruj kod z wybranych ramek

  Wybierz ramkę Figma i przekształć ją w kod. Świetne dla zespołów produktowych, które tworzą nowe przepływy lub iterują nad funkcjami aplikacji.

• Wyodrębnij kontekst projektowania

  Zaimportuj zmienne, komponenty i dane układu bezpośrednio do swojego IDE. To jest szczególnie przydatne dla systemów projektowania i przepływów pracy opartych na komponentach.

• Pobierz zasoby FigJam

  Uzyskaj dostęp do treści z diagramów FigJam i wykorzystaj je w swoim procesie generowania kodu. Włącz pomysły, przepływy lub mapy architektury na wczesnym etapie bezpośrednio do procesu rozwoju.

• Pobierz zasoby Make

  Zbierz zasoby kodu z plików Make i przekaż je modelom LLM jako kontekst. Może to pomóc w przejściu od prototypu do aplikacji produkcyjnej.

• Zadbaj o spójność komponentów systemu projektowego dzięki Code Connect

  Zwiększ jakość wyników, ponownie wykorzystując rzeczywiste komponenty. Code Connect utrzymuje wygenerowany kod w zgodzie z Twoją bazą kodu.

  Learn more about Code Connect

Skonfiguruj serwer MCP

Możesz połączyć serwer MCP Figma na dwa sposoby:

• Remote MCP server: Connects directly to Figma’s hosted endpoint at https://mcp.figma.com/mcp. Learn how to install the remote MCP server.
• Desktop MCP server: Runs locally through the Figma desktop app. Learn how to install the desktop MCP server.

Połącz serwer MCP z edytorem

Follow instructions for your specific editor to connect to the Figma MCP server, either locally or remotely. Some clients also support Skills, which add agent-level instructions that help AI tools work more effectively with Figma designs:

About Skills

Skills provide guidance for how an agent should complete specific tasks, using a combination of MCP tool calls and detailed instructions.

While the Figma MCP server exposes individual tools, Skills help agents understand which tools to use, how to sequence them, and how to apply the results when working with Figma designs.

Skills can guide agents through workflows like:

• Connect Figma design components to code components using Code Connect
• Generate design system rules aligned to your codebase 
• Translate designs into production-ready code 

Skills don’t replace MCP connections or add new MCP capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions.

Poproś swojego klienta MCP

Serwer MCP Figma wprowadza zestaw narzędzi, które pomagają LLM tłumaczyć projekty w Figma. Po nawiązaniu połączenia możesz poprosić klienta MCP o dostęp do konkretnego węzła projektowego.

For a complete list of tools and examples, see Tools and Prompts.

First, follow the instructions to install the Figma MCP server for your preferred MCP client. We provide instructions for:

• Claude Code
• Codex by OpenAI
• Cursor
• VS Code

For other MCP clients, follow the instructions in your client's documentation for adding MCP servers. See the table under Connect the MCP server to your editor for links.

Example: Get design context

Getting design context and code from files is link-based. To get design context:

1. In Figma Design, select the layer you want to get design context for.
2. In the address bar of your browser, copy the link to a frame or layer in Figma.

3. In your MCP client, paste the URL and prompt your client to help you implement the design.

   

Example: Send UI to Figma

Sending the live UI of your web app or site to Figma is done through conversation with your MCP client:

1. Prompt your MCP client: "Start a local server for my app and capture the UI in a new Figma file."
2. Follow the steps your client provides. Your client will open a browser window for you, or give you a link to follow.
3. Use the capture toolbar to capture pages, elements, and states of your web app or site.
4. Let your client know when you're finished. Your client will give you a link to open the Figma file that was created.

Improving the MCP server output

For the best output, we recommend setting up rules to guide the agent. To get you started, we have some helpful example rules.