Erfasse deine Websites als Code- oder Designebenen
Bring deine Live-Website mit der Option „Capture“ als interaktive Code-Ebenen oder strukturierte Designebenen in Figma. Nutze das, was du bereits ausgeliefert hast, anstatt neu zu entwickeln.
Bringe deine Live-Websites in Figma
Verwandle deine Live-Website in bearbeitbare Design- oder Code-Ebenen. Importiere HTML mit einem Klick in Figma mit der Figma-Chrome-Erweiterung.
Figma-Chrome-Erweiterung
- MIT PROD BEGINNENErweiterung installieren
- Seite für Prototyp
Bringe eine ganze Seite oder mehrere Elemente ein
Erweiterung installierenErfasse eine komplette Seite oder wähle die benötigten Elemente direkt im Browser aus und füge sie auf die Figma-Arbeitsfläche ein. Kein Codebase, Terminal oder Coding-Agent erforderlich.
- Riff nebeneinander
Prüfe Code und Design nebeneinander
Erweiterung installierenVergleiche die Ergebnisse und verfeinere die Ideen mit deinem Team. Interagiere mit Code-Ebenen oder bearbeite Text, Farben und Layout in Designebenen, alles auf derselben Arbeitsfläche.
Mit der Figma-Chrome-Erweiterung kannst du ganze Live-Websites erfassen oder Elemente davon direkt im Browser auswählen und in die Figma-Arbeitsfläche einfügen.
Installiere einfach die Erweiterung und melde dich mit deinem Figma-Konto an. Öffne die gewünschte Webseite, wähle „Capture Code“ oder „Capture Design“ und erfasse die gesamte Website oder nur die die benötigten Elemente. Füge die Erfassung dann in eine Figma-Datei ein. Dazu benötigst du keinen Zugriff auf den Website-Code und keinen Coding-Agenten.
Wähle eine von zwei Optionen basierend darauf, was du mit dem erfassten Inhalt machen möchtest:
- Capture code bringt deine Webinhalte als Code-Ebenen auf die Arbeitsfläche, damit du mit der vorhandenen Benutzererfahrung interagieren und darauf aufbauen kannst. Der erfasste Code reproduziert möglicherweise nicht vollständig die Interaktionen oder Funktionen der ursprünglichen Website.
- Capture design wandelt deine Webinhalte in editierbare Figma-Designebenen um. Verwende diese Option, wenn du Text ändern, Farben anpassen, das Layout neu anordnen oder neue visuelle Möglichkeiten ausprobieren möchtest.
Zum Beispiel kannst du eine erfasste Code-Ebene neben ein aktualisiertes Design-Erlebnis einfügen, um deine vorgeschlagenen Änderungen zu vergleichen. Beide befinden sich auf derselben Arbeitsfläche, sodass dein Team sie gemeinsam überprüfen kann.
Ja, die Figma-Chrome-Erweiterung kann kostenlos installiert werden. Das Importieren deiner erfassten Inhalte in Figma als Code-Ebenen befindet sich derzeit in der Beta-Version. Dieser Vorgang verbraucht keine KI-Credits. Allerdings können KI-Credits notwendig sein, wenn der Codiing-AgentFehler beheben oder Anpassungen vornehmen muss, damit der Code ordnungsgemäß funktioniert.