Figma na web: spusťte vstupní stránku
Převeďte marketingový rámec z Figma do HTML, CSS a JavaScriptu a poté publikujte hotový web.
Proměňte návrhy z Figma ve funkční webové aplikace
Vložte odkaz na rámec Figma, popište, co má stránka dělat, a nechte Manus sestavit frontend a backend, které můžete publikovat.
Od návrhového rámce k funkční stránce
Manus čte rozvržení, komponenty, písma a barvy v rámu Figma a vytváří tak funkční webovou aplikaci.
Designový rámFunkční stránka
Ilustrační příklad.
Převeďte design na kód pro potřebné stránky
Začněte s přistávací stránkou, dashboardem nebo několika propojenými rámci. Každý požadavek může popsat chování skryté za návrhem.
Figma na kód: vytvořte funkční dashboard
Sdílejte návrh administrátorského dashboardu a popište data a akce, které potřebujete. Manus vytvoří webovou aplikaci s komponentami frontendu a backendu.
Figma na aplikaci: propojte celý postup
Zahrňte více snímků do jednoho požadavku na převod designu na kód. Popište, jak jsou stránky propojeny, co se stane po kliknutí a které stavy komponent jsou důležité.
Převeďte Figma na kód pomocí odkazu, ne pluginu
Pro dokumentovaný postup není potřeba žádný samostatný plugin pro převod Figma na kód. Připojte svůj účet Figma, vložte odkaz na rám a popište, co by měla stránka umět.
Publikujte svůj web a dál ho vylepšujte
AI design na kód nekončí náhledem. Publikujte web, připojte svou vlastní doménu a popište v konverzaci změny, které chcete.
Jeden odkaz, jasný požadavek, web, který lze publikovat
Vysvětlete, jak jsou vaše rámce propojeny. Poté výsledek zkontrolujte a pokračujte v úpravách v konverzaci.
Pokračujte ve stavění s Manus
Často kladené otázky
Jak převedu Figma na kód pomocí Manus?
Připojte svůj účet Figma k Manus, poté sdílejte odkaz na rámec Figma a popište webovou aplikaci, kterou chcete vytvořit. Manus si přečte rozvržení, komponenty, písma a barvy a poté sestaví frontend a potřebné backendové komponenty.
Dokáže Manus převést Figma do HTML a CSS?
Ano. Dokumentovaný import Figma generuje HTML, CSS a JavaScript pro frontend, plus backendové komponenty potřebné pro požadovanou webovou aplikaci. Ve výchozím nastavení Manus sestaví projekt jako React a Tailwind CSS, který běží jako HTML, CSS a JavaScript v prohlížeči. Popište stránky a chování, které potřebujete, společně s odkazem na rámec.
Podporuje Manus převod Figma na React a Figma na Tailwind?
Ano. Manus ve výchozím nastavení staví webové stránky s React a Tailwind CSS, takže design importovaný z Figma se stane frontendem v React stylovaným pomocí Tailwind, plus backendový kód, který váš požadavek vyžaduje. Kód projektu můžete exportovat do privátního repozitáře GitHub.
Potřebuji plugin pro převod Figma na kód?
Dokumentovaný postup nevyžaduje žádný samostatný plugin. Připojte svůj účet Figma, sdílejte odkaz na rám s Manus a vysvětlete, co se má vytvořit; pokud má váš návrh více stránek nebo stavů, můžete přidat další rámy.
Musím instalovat server Figma MCP?
Ne. Manus se připojuje k vašemu účtu Figma přímo přes přihlášení Figma. Po připojení importujte odkaz na frame a popište aplikaci; žádný samostatný Figma MCP server se neinstaluje ani nespouští.
Potřebuji Figma Dev Mode nebo placené místo Figma?
Ne. Manus importuje frames přes váš připojený účet Figma, nikoli přes Dev Mode, a připojit se může i bezplatný účet Figma. Figma omezuje, jak často mohou aplikace číst soubory: bezplatné plány a licence bez Dev Mode mají malý měsíční limit, zatímco placené licence s Dev Mode mají mnohem vyšší limity. Pokud limit dosáhnete, Manus vás na to upozorní.
Může AI pracovní postup pro převod Figma na kód vytvořit funkční aplikaci?
Ano. Sdílejte odkaz na rámec Figma a popište aplikaci. Manus analyzuje návrh a vytvoří frontend i potřebné backendové komponenty pro funkční webovou aplikaci.
Zvládne Manus vícestránkové návrhy a interakce?
Ano. Sdílejte více rámců Figma a vysvětlete jejich tok stránek, interakce nebo stavy komponent, například hover. To pomáhá Manusu vytvořit interaktivní, vícestránkový webový zážitek.
Mohu po konverzi web publikovat?
Ano. Zobrazte náhled webové aplikace, klikněte na Publikovat a bude dostupná online. Můžete připojit vlastní domén a dále provádět změny tím, že je popíšete Manusu.
Jak se to liší od Figma Make?
Figma Make je produkt od Figma. S Manus zdokumentovaný postup začíná odkazem na rám Figma a požadavkem na webovou aplikaci: může obsahovat backendové komponenty, poté můžete web publikovat a pokračovat v jeho úpravách v konverzaci.
Mohu použít výstup Figma do Flutter nebo Figma do React Native?
Tato stránka se zabývá převodem Figma na webovou aplikaci. Průvodce importem uvádí pro frontend HTML, CSS a JavaScript; nepotvrzuje výstup Flutter nebo React Native.