Figma zu Website: eine Landingpage veröffentlichen
Übertragen Sie einen Marketing-Frame von Figma in HTML, CSS und JavaScript und veröffentlichen Sie dann die fertige Website.
Verwandle Figma-Designs in funktionierende Web-Apps
Füge einen Figma-Frame-Link ein, beschreibe, was die Seite tun soll, und lass Manus das Frontend und Backend erstellen, das du veröffentlichen kannst.
Vom Design-Frame zur funktionierenden Seite
Manus liest das Layout, die Komponenten, Schriftarten und Farben im Figma-Frame, um eine funktionsfähige Web-App zu erstellen.
Design-FrameFunktionierende Seite
Veranschaulichendes Beispiel.
Design in Code für die benötigten Seiten umwandeln
Beginnen Sie mit einer Landingpage, einem Dashboard oder mehreren verbundenen Frames. Jede Anfrage kann das Verhalten hinter dem Design beschreiben.
Figma zu Code: ein funktionierendes Dashboard erstellen
Teilen Sie ein Admin-Dashboard-Design und beschreiben Sie die Daten und Aktionen, die Sie benötigen. Manus erstellt eine Web-App mit Frontend- und Backend-Komponenten.
Figma zu App: den gesamten Ablauf verbinden
Bring mehrere Frames in eine Design-zu-Code-Anfrage ein. Beschreibe, wie Seiten verknüpft sind, was bei einem Klick passiert und welche Komponentenzustände wichtig sind.
Figma mit einem Link in Code umwandeln, nicht mit einem Plugin
Für den dokumentierten Workflow wird kein separates Figma-zu-Code-Plugin benötigt. Verbinde dein Figma-Konto, füge einen Frame-Link ein und beschreibe, was auf der Seite funktionieren soll.
Veröffentliche deine Website und verfeinere sie dann weiter
KI-Design zu Code endet nicht mit einer Vorschau. Veröffentlichen Sie die Website, verbinden Sie Ihre eigene Domain und beschreiben Sie die gewünschten Änderungen in einem Gespräch.
Ein Link, eine klare Anfrage, eine veröffentlichungsfertige Website
Erkläre, wie deine Frames miteinander verbunden sind. Überprüfe dann das Ergebnis und setze die Änderungen im Gespräch fort.
Weiter bauen mit Manus
Häufig gestellte Fragen
Wie wandle ich Figma mit Manus in Code um?
Verbinde dein Figma-Konto mit Manus, teile dann einen Link zu einem Figma-Frame und beschreibe die Web-App, die du bauen möchtest. Manus liest Layout, Komponenten, Schriftarten und Farben aus und erstellt dann das Frontend sowie die nötigen Backend-Komponenten.
Kann Manus Figma in HTML und CSS umwandeln?
Ja. Der dokumentierte Figma-Import generiert HTML, CSS und JavaScript für das Frontend sowie die für die gewünschte Web-App benötigten Backend-Komponenten. Standardmäßig erstellt Manus ein React- und Tailwind-CSS-Projekt, das im Browser als HTML, CSS und JavaScript läuft. Beschreibe zusammen mit dem Frame-Link die benötigten Seiten und das gewünschte Verhalten.
Unterstützt Manus Figma zu React und Figma zu Tailwind?
Ja. Manus erstellt Websites standardmäßig mit React und Tailwind CSS. Ein aus Figma importiertes Design wird so zu einem mit Tailwind gestalteten React-Frontend, ergänzt um den für deine Anfrage benötigten Backend-Code. Du kannst den Projektcode in ein privates GitHub-Repository exportieren.
Brauche ich ein Figma-zu-Code-Plugin?
Für den dokumentierten Ablauf ist kein separates Plugin erforderlich. Verbinde dein Figma-Konto, teile einen Frame-Link mit Manus und erkläre, was erstellt werden soll; du kannst weitere Frames hinzufügen, wenn dein Design mehrere Seiten oder Zustände hat.
Muss ich einen Figma MCP-Server installieren?
Nein. Manus verbindet sich direkt über die Figma-Anmeldung mit deinem Figma-Konto. Nach der Verbindung importierst du einen Frame-Link und beschreibst die App; es muss kein separater Figma-MCP-Server installiert oder ausgeführt werden.
Benötige ich Figma Dev Mode oder einen kostenpflichtigen Figma-Sitzplatz?
Nein. Manus importiert Frames über dein verbundenes Figma-Konto und nicht über Dev Mode, und auch ein kostenloses Figma-Konto kann verbunden werden. Figma begrenzt, wie oft Apps Dateien lesen dürfen: Kostenlose Pläne und Plätze ohne Dev Mode erhalten ein kleines monatliches Kontingent, während bezahlte Plätze mit Dev Mode viel höhere Limits haben. Wenn du das Limit erreichst, informiert dich Manus darüber.
Kann ein KI-Workflow von Figma zu Code eine funktionierende App erstellen?
Ja. Teile einen Figma-Frame-Link und beschreibe die App. Manus analysiert das Design und erstellt das Frontend sowie die nötigen Backend-Komponenten für eine funktionierende Web-App.
Kann Manus mehrseitige Designs und Interaktionen verarbeiten?
Ja. Teile mehrere Figma-Frames und erkläre deren Seitenablauf, Interaktionen oder Komponentenzustände, wie etwa Hover. Das hilft Manus, eine interaktive, mehrseitige Web-Erfahrung zu erstellen.
Kann ich die Website nach der Konvertierung veröffentlichen?
Ja. Vorschau der Web-App anzeigen, auf „Veröffentlichen“ klicken, und sie ist online erreichbar. Du kannst eine eigene Domain verbinden und weiterhin Änderungen vornehmen, indem du sie Manus beschreibst.
Wie unterscheidet sich das von Figma Make?
Figma Make ist ein Produkt von Figma. Mit Manus beginnt der dokumentierte Weg mit einem Figma-Frame-Link und einer Anfrage für eine Web-App: Sie kann Backend-Komponenten enthalten, danach kannst du die Website veröffentlichen und sie im Gespräch weiter bearbeiten.
Kann ich die Ausgabe von Figma zu Flutter oder Figma zu React Native verwenden?
Diese Seite behandelt die Umwandlung von Figma in eine Web-App. Der Importleitfaden nennt HTML, CSS und JavaScript für das Frontend; er bestätigt keine Flutter- oder React Native-Ausgabe.