Weswegen
Tippen, um zu suchen
    Esc zum Schließen · Sofortsuche auf der ganzen Website

    Webseiten mit Figma erstellen: Figma Sites, Code-Export

    · Weswegen-Redaktion
    Design

    Die kurze Antwort: Es kommt darauf an, was Sie unter „Webseite erstellen“ verstehen. Lange galt Figma als reines Design-Tool — Sie entwerfen das Aussehen, den Code schreibt jemand anderes. Seit Figma auf der Config-Konferenz 2025 die Funktion Figma Sites vorgestellt hat, stimmt das so nicht mehr: Sie können ein Design jetzt direkt als veröffentlichte, responsive Webseite publizieren. Nach diesem Text können Sie einschätzen, welcher der drei Wege — Figma Sites, Code-Export per Plugin oder klassische Entwicklung — zu Ihrem Projekt passt und wo jeder an seine Grenzen stößt.

    Zwei Bedeutungen von „Webseite erstellen“

    Hinter der Frage stecken zwei völlig verschiedene Dinge:

    1. Das Aussehen entwerfen — Layout, Farben, Typografie, Zustände von Buttons, ein klickbarer Prototyp. Das war schon immer Figmas Kerndisziplin.
    2. Eine echte, erreichbare Webseite ins Netz stellen — mit eigener Domain, funktionierenden Formularen, Hosting und Auffindbarkeit bei Google.

    Punkt 1 beherrscht Figma seit Jahren. Punkt 2 war bis 2025 nicht möglich und ist seitdem — mit Einschränkungen — erreichbar. Wenn Sie im Kopf beide Bedeutungen trennen, verschwindet die meiste Verwirrung.

    Was Figma klassisch kann: Design und Prototyp

    Im Standard-Workflow bildet Figma alles ab, was vor der Programmierung passiert:

    • Wireframes für die grobe Struktur, noch ohne Farben und finale Schriften.
    • Mockups mit dem echten visuellen Design.
    • Komponenten (wiederverwendbare Elemente wie Buttons oder Karten) und Auto Layout, das Abstände und Umbrüche automatisch anpasst — die Grundlage für sauberes, responsives Verhalten.
    • Interaktive Prototypen: Sie verbinden Frames, definieren Klick- und Hover-Reaktionen und testen so den Ablauf, bevor eine Zeile Code existiert.

    Wichtig ist der Unterschied zwischen Prototyp und Webseite. Ein Figma-Prototyp läuft nur innerhalb von Figma bzw. über einen geteilten Prototyp-Link. Formulare senden nichts ab, es gibt keine Datenbank, keine SEO, kein echtes Hosting. Für Nutzertests und Abstimmungen mit Kunden ist das ideal — als fertige Webseite taugt ein klassischer Prototyp nicht.

    Wenn Sie Figma noch nicht nutzen, klären Sie vorher die Praxisfragen: Kann man Figma kostenlos nutzen? und Kann man Figma offline nutzen? helfen bei der Einordnung.

    Neu seit 2025: Figma Sites

    Figma Sites ist der Grund, warum die alte Antwort „nur Design, keine echte Webseite“ überholt ist. Damit gestalten Sie eine Seite auf der vertrauten Figma-Canvas und veröffentlichen sie anschließend als echte Website.

    So läuft es grob ab:

    1. Sie legen eine Site-Datei an und entwerfen die Seiten wie gewohnt mit Frames, Komponenten und Auto Layout.
    2. Über Breakpoints definieren Sie, wie das Layout auf Desktop, Tablet und Smartphone aussieht.
    3. Sie ergänzen Interaktionen, Scroll-Effekte und Übergänge direkt im Editor.
    4. Per Publish geht die Seite live — zunächst auf einer Figma-Subdomain, alternativ auf einer eigenen Domain.

    Grenzen sollten Sie kennen: Figma Sites eignet sich gut für Landingpages, Portfolios und Marketing-Seiten. Für datenlastige Projekte — Onlineshop, mehrsprachiger Blog mit hunderten Beiträgen, komplexe Formularlogik — ist ein klassisches CMS oder eine eigene Entwicklung meist die bessere Wahl. Ob Funktionen wie ein integriertes CMS, Formular-Handling, eigene Domains und die Verfügbarkeit im kostenlosen Tarif für Sie ausreichen, prüfen Sie am besten am aktuellen Stand.

    Parallel gibt es Figma Make: Hier beschreiben Sie in einem Prompt, was entstehen soll, und die KI erzeugt eine funktionierende, code-basierte Vorlage. Das ist eher für Experimente und schnelle interaktive Prototypen gedacht als für eine produktionsreife Unternehmens-Website.

    Vom Design zum Code: Dev Mode und Export-Plugins

    Wenn am Ende echter, wartbarer Code stehen soll — etwa in einem bestehenden React- oder WordPress-Projekt — bleibt der Weg über Design plus Entwicklung der Standard. Figma unterstützt diesen Übergang:

    • Dev Mode: Entwickler sehen Maße, Abstände, Farben und Design-Tokens und können pro Element Code kopieren (CSS, teils iOS/Android). „Copy as code“ liefert brauchbares CSS für einzelne Elemente, aber keine fertige Seite.
    • Export-Plugins: Werkzeuge wie Anima, Locofy oder Builder.io (Visual Copilot) erzeugen aus Frames HTML/CSS, React oder Vue.

    Erwarten Sie von automatisch exportiertem Code keinen Selbstläufer. Die Ausgabe ist oft mit absoluter Positionierung oder tief verschachteltem Markup versehen und braucht Nacharbeit, bevor sie responsiv und barrierearm ist. Faustregel: Je disziplinierter Sie im Design mit Auto Layout, Komponenten und benannten Ebenen arbeiten, desto sauberer wird der Export.

    Konkreter Weg: von der Figma-Datei zur Webseite

    Entscheiden Sie zuerst, welches Ziel Sie haben:

    Weg A — schnell online, ohne Programmierung: Design in Figma Sites bauen, Breakpoints setzen, veröffentlichen. Passend für Landingpage, Portfolio, Eventseite.

    Weg B — echte Entwicklung: Design in Figma erstellen, Auto Layout sauber setzen, Datei per Dev Mode an Entwickler übergeben oder über ein Plugin exportieren, Code in Ihr Framework/CMS integrieren, Hosting und Domain separat einrichten. Passend für Shops, Portale und Seiten, die in eine bestehende Codebasis müssen.

    Reiner HTML/CSS-Handaufbau bleibt eine dritte Option — dafür brauchen Sie kein Figma, wie HTML-Website erstellen mit Notepad zeigt.

    Typische Fehler und Lösungen

    • Prototyp mit echter Webseite verwechselt. Ein geteilter Prototyp-Link ist keine Live-Seite. Für eine öffentliche Website nutzen Sie Figma Sites oder setzen den Export in Code um.
    • Exportierter Code ist nicht responsiv. Ursache ist meist fehlendes Auto Layout. Bauen Sie das Design mit Auto Layout statt mit frei positionierten Ebenen, dann kennt der Export Umbruchregeln.
    • Schriften oder Bilder fehlen nach dem Export. Betten Sie Web-taugliche Schriften ein und exportieren Sie Assets in passenden Formaten (SVG für Icons, WebP/AVIF für Fotos).
    • Falsches Werkzeug für datenlastige Projekte. Onlineshop oder umfangreicher Blog gehören in ein CMS oder eine eigene Anwendung — nicht in eine reine Figma-Sites-Seite.
    • Design nicht dokumentiert. Ohne benannte Komponenten und ein Tokens-/Style-System wird die Übergabe an Entwickler teuer. Legen Sie Farben, Abstände und Textstile als Styles an.

    FAQ

    Ist Figma kostenlos genug, um eine Webseite zu bauen? Für Design und Prototyp reicht der kostenlose Tarif in vielen Fällen. Beim Veröffentlichen über Figma Sites und bei eigener Domain hängt es vom Tarif ab — Details im Beitrag Kann man Figma kostenlos nutzen? und.

    Kann Figma HTML und CSS exportieren? Ja, aber unterschiedlich sinnvoll. Dev Mode liefert CSS für einzelne Elemente, Plugins wie Anima oder Locofy erzeugen komplette Seiten in HTML/CSS oder React. Rechnen Sie in beiden Fällen mit Nacharbeit, bevor der Code produktionsreif ist.

    Ersetzt Figma Sites einen Website-Baukasten wie Wix oder Webflow? Für Landingpages und Portfolios kann es das. Bei komplexem CMS-Bedarf, Shop-Funktionen oder starker SEO-Kontrolle sind spezialisierte Baukästen und Content-Management-Systeme weiterhin oft die reifere Lösung.