Claude Code dokáže skutečně pracovat s Figma soubory a automaticky generovat kód z designů. Tato integrace funguje díky Model Context Protocol (MCP) – otevřenému standardu, který umožňuje AI nástrojům chápat designový kontext přímo z Figmy. Vzdálený MCP server je od září 2025 plně dostupný i bez nutnosti desktop aplikace, což otevírá tuto technologii širšímu okruhu vývojářů. V tomto komplexním průvodci se dozvíte, jak MCP funguje, jak ho nastavit v Claude Code, a jaké jsou praktické možnosti i současná omezení této technologie.
Obsah článku
- Klíčové poznatky
- Co je Model Context Protocol (MCP)?
- Jak konkrétně funguje integrace Figma + Claude Code?
- Co konkrétně můžete dělat?
- Praktický návod k nastavení
- Jak pracovat s designem
- Co musíte vědět: Požadavky a omezení
- Tipy pro nejlepší výsledky
- Současný stav a budoucnost
- Závěr
Klíčové poznatky
- MCP je otevřený standard vyvinutý společností Anthropic, který funguje jako „USB-C port pro AI aplikace“
- Figma MCP server je nyní Generally Available (GA) – oficiálně spuštěn v listopadu 2025 mimo beta verzi
- Vzdálený server je dostupný od září 2025 bez nutnosti desktop aplikace, i pro Starter plány (s limitem 6 calls/měsíc)
- Lokální server vyžaduje Figma desktop aplikaci a Dev/Full seat na Professional+ plánu
- Podporované nástroje zahrnují Claude Code, VS Code, Cursor, Windsurf, Android Studio a další
- Není to automatický převod – MCP poskytuje kontext, ale kvalita závisí na promptech a lidském dohledu
- Code Connect a Make soubory byly přidány v září 2025 pro lepší integraci s existujícím kódem
Co je Model Context Protocol (MCP)?
MCP je otevřený standard vyvinutý společností Anthropic, který funguje jako „USB-C port pro AI aplikace“. Umožňuje AI nástrojům připojit se k různým datovým zdrojům a aplikacím standardizovaným způsobem.
Figma v červnu 2025 (konkrétně 4. června 2025) spustila svůj oficiální MCP server v otevřené beta verzi, který propojuje designová data přímo s AI vývojovými nástroji.
Jak konkrétně funguje integrace Figma + Claude Code?
Podporované způsoby připojení
Figma nabízí dva způsoby připojení k MCP serveru:
1. Lokální MCP server (Desktop MCP server)
- Běží přes Figma desktop aplikaci
- Adresa: http://127.0.0.1:3845/mcp
- Vyžaduje spuštěnou Figma aplikaci
- Nižší latence, data zůstávají lokálně
2. Vzdálený MCP server
- Spuštěn 23. září 2025 a plně dostupný
- Přímé připojení k https://mcp.figma.com/mcp
- Nevyžaduje desktop aplikaci
- Vhodné pro cloudové pracovní postupy
- Dostupný pro všechny plány včetně Starter (s limity)
Podporované nástroje
MCP server od Figmy oficiálně podporuje:
- Claude Code (terminál i VS Code rozšíření)
- VS Code (s GitHub Copilot)
- Cursor
- Windsurf
- Android Studio
- Warp
- Amazon Q
- Replit
- A další…
Co konkrétně můžete dělat?
Generování kódu z designu
Můžete vybrat frame nebo komponentu ve Figmě a nechat AI vygenerovat odpovídající kód pro React, HTML/CSS, Tailwind a další frameworky.
Extrakce designového kontextu
MCP server umožňuje vytáhnout proměnné, komponenty a layoutová data přímo do vašeho IDE, což je užitečné zejména pro design systémy a komponentové workflow.
Integrace s Code Connect
Systém Code Connect zajišťuje, že generovaný kód zůstává konzistentní s vaší existující code base a používá vaše skutečné komponenty.
Práce s Make soubory
Tato funkce byla přidána 23. září 2025 jako součást aktualizace vzdáleného serveru. Server dokáže získat kódové zdroje z Make souborů a poskytnout je jako kontext pro přechod z prototypu do produkční aplikace.
Praktický návod k nastavení
Krok 1: Aktivace Figma MCP serveru
Pro lokální (desktop) server:
- Otevřete Figma desktop aplikaci (nejnovější verze)
- Menu Figma → Preferences → Enable Desktop MCP server
- Potvrzení se zobrazí ve spodní části okna
Pro vzdálený server:
- Není potřeba žádné speciální nastavení ve Figmě
- Pouze připojení přes vaše IDE s následnou OAuth autentizací
Krok 2: Připojení Claude Code
Pro vzdálený server:
claude mcp add --transport http figma https://mcp.figma.com/mcpPro lokální server:
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcpKrok 3: Ověření připojení
V Claude Code zadejte příkaz /mcp pro zobrazení všech připojených MCP serverů a jejich stavu.
Krok 4: Autentizace
Při prvním použití vzdáleného serveru budete vyzváni k autentizaci přes Figma OAuth flow. Postupujte podle pokynů v terminálu.
Jak pracovat s designem
Existují dva způsoby poskytnutí designového kontextu:
1. Výběr ve Figmě (selection-based) – pouze pro lokální server
- Vyberte frame nebo vrstvu v Figma desktop aplikaci
- V Claude Code zadejte prompt typu: „Vygeneruj React komponentu pro moji aktuální výběr s Tailwind CSS“
2. Odkaz na design (link-based) – funguje pro oba servery
- Zkopírujte odkaz na frame nebo vrstvu ve Figmě
- Do Claude Code vložte prompt: „Implementuj design z tohoto odkazu: [URL]“
Co musíte vědět: Požadavky a omezení
Požadavky na účet
Vzdálený server:
- Dostupný pro všechny plány včetně Starter
- Starter a View/Collab seats: 6 tool calls měsíčně
- Dev/Full seats na Professional+: minutové rate limity dle Tier 1 REST API
Desktop (lokální) server:
- Vyžaduje Dev nebo Full seat na Professional, Organization nebo Enterprise plánu
Aktuální omezení
Není to doslovný „import a automatický převod“
MCP poskytuje kontext, ale AI nástroj stále vyžaduje interakci a správné prompty. Výsledná kvalita závisí na tom, jak dobře formulujete požadavky.
Aktualizace existujícího kódu
Claude Code skvěle generuje nové komponenty, ale když se design vyvíjí, je obtížné provádět chirurgické aktualizace existujícího kódu bez hlubokého porozumění vašemu design systému.
Složité multi-frame flow
Konverze vícestránkového flow (např. carousel nebo onboarding) vyžaduje převod každého frame individuálně a následné propojení do interaktivní komponenty.
Vizuální zpětná vazba
Vizuální feedback loop končí jakmile Claude Code vygeneruje komponentu – další úpravy se dělají v kódu nebo musíte znovu generovat.
Tipy pro nejlepší výsledky
Používejte sémantické názvy
Pojmenujte vrstvy a komponenty ve Figmě výstižně – AI pak lépe rozumí designovému záměru.
Organizujte design do komponent
Strukturovaný design s komponentami vede k čistšímu generovanému kódu.
Využívejte design tokeny a proměnné
MCP server extrahuje proměnné a tokeny, které pomáhají udržet konzistenci.
Rozdělujte velké výběry
Pro složité layouty je lepší generovat menší části a pak je složit dohromady.
Buďte konkrétní v promptech
Místo „udělej to hezké“ zkuste: „Vytvoř React komponentu s Tailwind CSS, použij naše designové tokeny pro barvy a spacing“
Současný stav a budoucnost
Aktuální stav (listopad 2025):
- Figma MCP server je nyní generally available (GA) – oficiálně spuštěn mimo beta verzi
- Vzdálený server byl spuštěn 23. září 2025 a je plně dostupný bez nutnosti desktop aplikace
- Code Connect UI bylo představeno 23. září 2025 s jednodušším mapováním komponent
- Podpora Make souborů v MCP serveru byla přidána 23. září 2025
Co Figma nadále vyvíjí:
- Hlubší integraci s code base
- Podporu pro anotace a Grid
- Rozšíření funkcionality a partnerství
- Další vylepšení výkonu a stability
Závěr
Ano, Claude Code dokáže pracovat s Figma soubory a převádět je do kódu – ale nikoli magickým přímým importem. Funguje to přes Model Context Protocol, který poskytuje AI nástrojům bohatý designový kontext.
Tato technologie je nyní generally available (GA) a rychle se vyvíjí. Vzdálený server je již dostupný a funkční od září 2025, oficiální GA launch proběhl v listopadu 2025. Pro produkční workflow je stále potřeba lidský dohled a úpravy, ale proces design-to-code se dramaticky urychluje z hodin na minuty.
Doporučení:
Pokud pracujete s Claude Code, MCP server určitě vyzkoušejte. Vzdálený server je nyní dostupný i bez Professional+ plánu (s omezením 6 calls měsíčně pro Starter), což umožňuje širší testování. Je to výkonný nástroj pro prototypování, vytváření nových komponent a rychlé iterace designu.
