HTML in Figma umwandeln: Jede Website als bearbeitbare Ebenen importieren

Installiere das kostenlose Plugin Codia AI Web2Figma aus der Figma Community und starte es in einer beliebigen Figma-Datei. Füge die URL der Seite ein, wähle einen Viewport (Desktop, Tablet oder Mobil) und ein helles oder dunkles Theme und importiere. Die Seite landet als bearbeitbare Figma-Ebenen auf deinem Canvas. Seiten hinter einem Login erfasst du vorher mit der Chrome-Erweiterung.

Ja, du kannst kostenlos starten. Der Free-Plan enthält 10 Transform-Credits pro Monat, ohne Kreditkarte. Pro bietet unbegrenzte Importe, Bildverarbeitung in höherer Auflösung und den Import mehrerer URLs oder Codia-Dateien auf einmal.

Ja. Figma-Plugins laufen im kostenlosen Figma-Plan, du brauchst also keinen bezahlten Platz. Du brauchst allerdings die Figma-Desktop-App oder Figma in einem Desktop-Browser – in den mobilen Figma-Apps laufen keine Plugins.

Ja. Installiere die Chrome-Erweiterung von Codia AI Web2Figma, öffne die Seite eingeloggt in Chrome und erfasse sie – die Erweiterung speichert sie als .codia-Datei. Diese Datei lädst du dann im Importfeld für die Chrome-Erweiterung im Plugin hoch oder fügst sie dort ein. Das funktioniert für Dashboards, Admin-Bereiche, Staging-Umgebungen und andere Seiten, die der URL-Import nicht erreicht.

Ja. Wähle vor dem Import Desktop, Tablet oder Mobil, um die Seite in dieser Breite zu erfassen, und bei Websites, die beides unterstützen, ein helles oder dunkles Theme. Importiere mehrere Viewports, um einen Satz responsiver Frames in einer Datei zu bekommen.

Text kommt als bearbeitbare Textebenen, Bilder als Bildfüllungen und Abschnitte, Hintergründe, Rahmen und Verläufe als Frames und Formen, die dem Layout der Seite folgen. Codia erfasst die Seite so, wie sie im Moment des Imports aussieht – Animationen, Skripte und Interaktionen werden daher nicht übernommen.

Ja. Statt eine URL einzufügen, lädst du im Importfeld für die Chrome-Erweiterung im Plugin eine .html- oder .htm-Datei hoch oder ein .zip einer exportierten Website mit CSS und Bildern. Enthält das ZIP mehrere Seiten, wählst du aus, welche importiert wird. Praktisch für lokale Builds, HTML-Exporte und Seiten, die noch nicht online sind.