Tutorials

How to Import HTML into Figma: Der vollständige Guide

Melden

Hier ist ein umfassendes Tutorial, wie du HTML-Inhalte direkt in Figma importierst, um Webdesigns schnell zu bearbeiten oder Prototypen auf Basis bestehender Seiten zu erstellen.

Das manuelle Nachbauen von bestehenden Webseiten in Figma kostet Zeit. Dank moderner Plugins kannst du heute ganze Webseiten mit nur einem Klick in editierbare Figma-Ebenen umwandeln. In diesem Guide erfährst du, wie das funktioniert.

1. Das beste Tool: html.to.design

Obwohl es verschiedene Methoden gibt, hat sich das Plugin "html.to.design" als Industriestandard etabliert. Es erkennt Ebenen, Schriftarten und Auto-Layout-Strukturen erstaunlich präzise.

Schritt 1: Plugin installieren

  1. Öffne Figma.
  2. Gehe im Seitenmenü auf "Resources" (das Diamant-Symbol) oder drücke Umschalt + I.
  3. Klicke auf den Reiter "Plugins".
  4. Suche nach "html.to.design" und klicke auf "Run".

2. Eine Live-Website importieren

Dies ist der häufigste Anwendungsfall: Du möchtest eine existierende URL in Figma ziehen.

  1. URL kopieren: Kopiere die Adresse der Website, die du importieren möchtest.
  2. Plugin konfigurieren:
    • Füge die URL in das Textfeld des Plugins ein.
    • Viewport wählen: Wähle aus, ob du die Desktop-, Tablet- oder Mobile-Ansicht importieren möchtest.
    • Theme: Wähle zwischen Light- oder Dark-Mode (falls die Seite dies unterstützt).
  3. Importieren: Klicke auf den Button "Import".
  4. Ergebnis: Figma erstellt nun einen neuen Frame, der alle Elemente der Website (Bilder, Texte, Buttons) als bearbeitbare Vektoren und Ebenen enthält.

3. Lokalen HTML-Code importieren

Falls du an einer Website arbeitest, die noch nicht online ist, oder nur ein bestimmtes Code-Snippet importieren willst, nutze die Chrome Extension von html.to.design.

  1. Installiere die html.to.design Chrome Extension aus dem Web Store.
  2. Gehe auf deine lokale Website oder die gewünschte Unterseite.
  3. Klicke auf das Extension-Icon und wähle "Full page" oder "Selection".
  4. Die Extension lädt eine .h2d-Datei herunter.
  5. Ziehe diese Datei einfach per Drag-and-Drop in dein Figma-Fenster, während das Plugin geöffnet ist.

4. Alternative: Builder.io (HTML to Figma)

Ein weiteres mächtiges Tool ist das Plugin von Builder.io. Es ist besonders nützlich, wenn du Designs in echten Code zurückverwandeln willst, funktioniert aber auch hervorragend in die andere Richtung.

  1. Suche in den Figma-Plugins nach "Builder.io".
  2. Wähle "Import from Web".
  3. Gib die URL ein.
  4. Builder.io versucht, die Struktur so sauber wie möglich in Auto-Layout umzuwandeln, was die spätere Bearbeitung erleichtert.

5. Tipps für perfekte Ergebnisse

Fehlende Schriftarten

Wenn die Website Schriftarten verwendet, die du nicht auf deinem Computer installiert hast, wird Figma diese durch Standardschriftarten ersetzen.

  • Lösung: Installiere die entsprechenden Google Fonts oder System-Schriften lokal, bevor du den Import startest.

Auto-Layout nutzen

Die meisten Plugins versuchen, die Web-Struktur in Figma-Ebenen zu übersetzen. Dennoch ist das Ergebnis oft eine flache Hierarchie.

  • Tipp: Markiere nach dem Import wichtige Sektionen und drücke Umschalt + A, um manuell Auto-Layout hinzuzufügen und das Design responsiv zu machen.

Komplexe Grafiken (SVGs vs. Canvas)

Bilder und einfache SVGs werden meist perfekt übernommen. Komplexe Animationen oder HTML5-Canvas-Elemente werden oft nur als statische Bilder importiert. Diese musst du ggf. manuell nachbearbeiten.

Fazit

Der Import von HTML in Figma ist heute kein mühsamer Prozess mehr. Mit Tools wie html.to.design sparst du Stunden an Arbeit beim Redesign von Webseiten oder beim Erstellen von UI-Kits auf Basis bestehender Produkte.

Pro-Tipp: Nutze den Import für Competitor-Analysen. Importiere die Seiten deiner Wettbewerber, um Abstände, Schriftgrößen und Farbschemata direkt in Figma zu analysieren!

0