Zpět na domů

AI-agenti editují Figma: MCP-server v betě

Figma aktualizovala MCP-server, čímž umožnila AI-agentům vytvářet a editovat design na plátně s použitím designového systému. Byly zavedeny skills a mechanismus samokorekce. Integrace s populárními IDE zrychlují workflow pro vývojáře.

Figma pro AI: agenti kreslí makety samostatně
Advertisement 728x90

AI agenti ve Figma: od čtení maket k autonomnímu vytváření designu

Beta verze aktualizovaného MCP serveru od Figma rozšiřuje možnosti AI agentů. Nyní nejen analyzují designové soubory, ale také vytvářejí nové prvky na plátně s využitím komponent, proměnných a tokenů designového systému. Funkce je dostupná zdarma během beta období, s plánovanou monetizací podle modelu pay-per-use.

Dříve byl MCP server omezen na režim čtení dat z maket pro následnou generaci kódu. Nové API use_figma umožňuje agentům upravovat plátno přímo: agent načte knihovnu komponent týmu a sestavuje makety na jejich základě. Doplněním je nástroj generate_figma_design, který převádí HTML na editovatelné vrstvy Figma.

Skills jako spustitelné designové směrnice

Klíčovým mechanismem jsou skills: markdownové instrukce definující chování agenta. Určují sekvenci kroků, pravidla práce s prvky a dodržování týmových dohod. Skills mění statické směrnice v kód spustitelný AI.

Google AdInline article slot

Každý specialista na Figma může vytvořit skill. Figma poskytuje základní /figma-use a příklady od komunity. Příklad základního skill může vypadat takto:

# /figma-use skill
1. Zagruzit biblioteku komponentov.
2. Withzdat frame with auto layout.
3. Razmestit komponenty by setke.
4. Primenit peremennye for tsvetov and tipografiki.
5. Proverit on sootvetstvie tokenam.

Toto zajišťuje konzistenci designu bez manuálního zásahu.

Mechanismus samoopravy pro přesné iterace

Agenti realizují cyklus samoopravy: generují obrazovku, vytvoří snímek obrazovky, porovnají s referencí a provedou úpravy. Protože práce probíhá s nativními strukturami Figma (komponenty, auto layout, proměnné), změny se propagují celým systémem, nejsou omezeny na rastrové úpravy.

Google AdInline article slot

Výhody přístupu:

  • Systémovost: úpravy aktualizují designový systém celý.
  • Iterativita: agent koriguje, dokud nedosáhne kritérií.
  • Integrace: využívá existující knihovny bez importu externích aktiv.
  • Škálovatelnost: vhodné pro generování více obrazovek.

Integrace a dostupnost MCP serveru

MCP server je integrovaný do populárních vývojových prostředí:

  • Claude Code.
  • OpenAI Codex.
  • Cursor.
  • Copilot CLI.
  • VS Code a další.

Jedná se o třetí velkou AI integraci Figma za poslední týdny: Claude Code v únoru, Codex v březnu. Plátno Figma evoluje z designového nástroje na společnou platformu pro lidi a agenty.

Google AdInline article slot

Vývojáři střední/senior úrovně mohou okamžitě testovat: připojit MCP server, napsat skill a spustit agenta na reálném projektu. Požadavky jsou minimální – účet Figma s přístupem k knihovnám.

Co je důležité

  • Rozšíření API: use_figma umožňuje AI vytvářet a editovat nativní prvky Figma.
  • Skills v markdownu: mění směrnice v spustitelný kód pro konzistentní design.
  • Samooprava: iterativní úpravy na úrovni struktur, ne pixelů.
  • Integrace: připravené připojení k Claude Code, Codex, Cursor a IDE.
  • Evoluce plátna: společná práce designerů a AI agentů.

— Editorial Team

Advertisement 728x90

Číst dál