Průvodce MCP serverem
Figma MCP
Necháte AI přečíst váš Figma design a překlopit ho do kódu: komponenty, barvy, mezery, typografii. Není to kouzlo na celou appku, je to most mezi designem a kódem.
Autor: Jindřich Fáborský · 17 let v marketingu · 2 000+ hodin vibe codingu · 180+ projektů
Figma MCP
Design a kód
Rychlá odpověď
Co je Figma MCP?
Figma je nejrozšířenější nástroj na návrh webů a aplikací. Jeho MCP server nechá AI číst přímo váš design: strukturu, komponenty a proměnné (barvy, mezery, typografii) a překlopit je do kódu, typicky React a Tailwind.
Pozor na očekávání. Z obrázku vám nepostaví hotovou appku. Je to překladatel designu do kódu pro obrazovky a komponenty. A jeho kvalita stojí a padá s tím, jak čistě máte soubor. Je oficiální a připojíte ho na jeden OAuth klik, reálně ho ale využijete až s placeným Figma seatem.
K čemu ho použijete
Na co se ho reálně zeptáte
Konkrétní dotazy, které místo klikání v rozhraní napíšete rovnou v Claude Code. Server si data sám vytáhne a odpoví.
Udělej z tohohle rámce React komponentu.
Přečte layout, styly i strukturu vybraného prvku a vrátí kód. Výchozí je React a Tailwind, jde přepnout.
Vytáhni barvy, mezery a typografii jako tokeny.
Vysype proměnné z designu, aby je kód používal doslova, ne od oka nastřeleně.
Stáhni mi ikonu a obrázek z tohohle prvku.
Vytáhne assety z vybraného uzlu rovnou do projektu, nemusíte je ručně exportovat.
Používej naše komponenty, ne vymyšlené.
Přes Code Connect namapuje Figma komponenty na reálné komponenty ve vašem repu. Agent pak sahá po nich.
Pošli tuhle stránku z kódu zpátky do Figmy.
Novější zápisové nástroje umí i opačný směr: z hotového kódu udělají editovatelné vrstvy pro designéra.
Čím lepší soubor, tím lepší kód
Kvalita výstupu stojí a padá s čistotou designu
Tohle není magie, co z chaosu udělá hezký web. Je to překladatel. A překládá jen tak dobře, jak srozumitelně jste design postavili.
Čistý soubor
Použitelný kód
- Komponenty místo slepených tvarů
- Proměnné na barvy a mezery
- Auto-layout místo ručního posouvání
- Sémantické názvy vrstev
- Code Connect na reálné komponenty
Nepořádek
Agent hádá
- Slepené vektory bez struktury
- Barvy natvrdo v každém prvku
- Absolutní pozice napálené od oka
- Vrstvy typu „Frame 217“
- Žádné napojení na kód
Figma to sama přiznává: velké výběry nástrojů zpomalují nebo vrací neúplné odpovědi, a radí dělit design na menší kusy. Proto se vyplatí rozumět designu i kódu, ne slepě čekat, že to AI srovná za vás. To je přesně ta řemeslná stránka, kterou učím v kurzu.
Instalace
Jak ho připojit do Claude Code
Stav k červenci 2026. Podmínky a příkazy se u MCP mění po měsících, čerstvý detail je vždy v oficiální dokumentaci.
claude mcp add --transport http figma https://mcp.figma.com/mcp- 1Ještě snazší je oficiální plugin:
claude plugin install figma@claude-plugins-official. Přinese rovnou i skilly, nejen holý server. - 2Po přidání spusťte
/mcp, vybertefigmaa dejte Authenticate. Přihlásíte se přes Figma účet (OAuth), žádný token nikam nekopírujete. - 3Remote server (adresa výše) nepotřebuje desktopovou appku. Lokální varianta běží na
http://127.0.0.1:3845/mcp, ale chce zapnutý Dev Mode přímo ve Figma aplikaci. - 4Na reálnou práci potřebujete placený Dev nebo Full seat(Dev od zhruba 12 $ měsíčně). Free Starter účet dá jen šest volání za měsíc, což je akorát na vyzkoušení.
Oficiální návod: Figma: Dev Mode MCP server
Náročnost na tokeny
Kolik vám ukrojí z kontextu
Každý připojený server nacpe popisy svých nástrojů do každé konverzace. To je daň, kterou platíte, i když server zrovna nepoužíváte.
Z běžného okna ~200 000 tokenů. Není malý. Za pár serverů téhle velikosti se okno začne krátit. Srovnání všech serverů a jak to nepřehnat najdete na přehledu MCP serverů.
Orientačně, odhad z počtu nástrojů v červenci 2026. Přesně si to zobrazíte příkazem /context.
Claude Code skill
Potřebujete k němu ještě skill?
MCP server dá agentovi ruce (sáhne na data). Skill mu dá návod, jak s nimi zacházet. U některých serverů se to vyplatí, u jiných je to zbytečnost.
Figma má oficiální plugin, který kromě serveru přinese i hotové skilly na běžné workflow. Nainstalujete ho příkazem claude plugin install figma@claude-plugins-official.
A tady to dává smysl. MCP server dá agentovi ruce (přečte design), skill mu dá postup, jak z něj udělat rozumný kód, aniž si vymýšlí vlastní komponenty. U designu, kde záleží na detailech, se to vyplatí.
Nevíte, co je skill? Vysvětlujeme ho v samostatném průvodci →
Buďme féroví
Na co si dát pozor (a co nezvládne)
Ať to není jen samá chvála. Kde má server hranice, kdy vám nestačí a kdy sáhnout radši po API nebo po plné aplikaci.
Free účet je jen na vyzkoušení
Na free Starter plánu má server strop šest volání za měsíc. Na reálnou práci potřebujete placený Dev nebo Full seat(Dev od zhruba 12 $ měsíčně). Připojení serveru se zvlášť neplatí, jen ten seat.
Nečistý soubor = slabý kód
Bez komponent, proměnných a auto-layoutu model hádá. Není to chyba serveru, je to zdokumentovaná podmínka. Čím pečlivější design, tím lepší výstup, a naopak.
Nepostaví celou appku
Je to překlad designu do kódu pro obrazovky a komponenty, ne generátor funkční aplikace s daty a logikou. Backend, stav a chování dopilujete jinde, ve vibe codingu.
Pozor, který server připojujete
Kolují podobně pojmenované komunitní balíčky a jeden z nich měl reálnou bezpečnostní díru. Připojujte jen oficiální mcp.figma.com nebo oficiální plugin, ne první „figma mcp“ z npm.
Chcete řídit svou práci z jednoho místa?
MCP servery, skilly a celý vibe coding vás v kurzu AI First naučím používat naživo, na reálných projektech.
21 hodin videí, 1 800+ absolventů a roční licence s aktualizacemi zdarma.
FAQ
Časté otázky: Figma MCP
Kolik stojí Figma MCP server?+
Připojení serveru se zvlášť neplatí. Reálně ale potřebujete placený Figma Dev nebo Full seat (Dev od zhruba 12 dolarů měsíčně), protože na free Starter účtu máte strop šest volání za měsíc. Platíte tedy běžný Figma seat, ne server jako takový. Zápis do plátna je zatím v betě zdarma.
Potřebuju placený Figma účet?+
Na vyzkoušení se připojíte i na free Starter plánu, ale narazíte na limit šesti volání měsíčně. Na reálnou práci potřebujete Dev nebo Full seat na placeném plánu. Bez něj je server prakticky umlčený.
Umí Figma MCP udělat celý web nebo appku?+
Ne. Generuje kód pro vybrané komponenty a obrazovky z designu, ne kompletní funkční aplikaci s backendem a logikou. Je to most mezi designem a kódem, ne náhrada za vývoj. Hotovou appku pořád stavíte vibe codingem.
Jak Figma MCP připojím do Claude Code?+
Nejrychleji oficiálním pluginem: claude plugin install figma@claude-plugins-official, který přinese i skilly. Nebo ručně přes claude mcp add s adresou mcp.figma.com, pak se přihlásíte přes OAuth. Remote varianta nepotřebuje desktopovou appku.
Je Figma MCP lepší než poslat AI screenshot designu?+
Ano, pokud máte soubor čistě postavený. Dává agentovi strukturovaná data (skutečné proměnné, komponenty, napojení na váš kód přes Code Connect) místo pouhého odhadu z obrázku. U nepořádku v souboru je ale rozdíl malý, model tak jako tak hádá.