Melta
Blog
Figma zu Website: was der Export kann und was fehlt
Figma zu Website heisst: aus einem Entwurf wird eine Seite, die lädt, Formulare verschickt und auf dem Handy hält. Das File liefert Farben, Abstände und Aufbau, alles andere baut jemand dazu. Was das Beschreiben statt Zeichnen bedeutet, ordnet [Was ist Vibe Coding? Erklärung, Grenzen und was danach kommt](/blog/was-ist-vibe-coding) ein.
Der Haken zuerst: ein Entwurf ist noch keine Seite
Ein Figma-File sieht aus wie die fertige Seite. Es ist keine. Du siehst Rechtecke, Texte und Bilder, sauber ausgerichtet, in genau der Breite, für die du sie gezeichnet hast. Was fehlt, zeigt sich erst beim Bauen: Was passiert, wenn die Überschrift eine Zeile länger wird? Wohin rutscht die Spalte rechts auf einem schmalen Schirm? Was zeigt die Liste, solange noch kein Eintrag drin steht?
Ein Mockup zeigt den guten Fall. Die Texte haben die passende Länge, jedes Bild hat das richtige Seitenverhältnis, der Warenkorb ist gefüllt. Die Website muss den Rest auch können: das leere Suchergebnis, die abgelehnte Karte, den sehr langen Firmennamen, die Bedienung nur mit der Tastatur.
Der teuerste Satz im Projekt lautet deshalb: Das Design steht, jetzt ist es nur noch Umsetzung. Das Design ist die Hälfte, die man sehen kann.
Was fehlt auf dem Weg von Figma zur Website?
Der Unterschied lässt sich Zeile für Zeile auflisten. Links steht, was im File liegt. Rechts steht, was jemand dazubauen muss, bevor die Seite online geht.
| Im Figma-File | Was die Website zusätzlich braucht |
|---|---|
| Frame für Desktop und Frame für Handy | Was zwischen den beiden Breiten passiert, auch bei langen Wörtern |
| Text in fester Länge | Text, den jemand später ändert und der dann umbricht |
| Formular als Zeichnung | Versand, Prüfung der Eingaben, Schutz vor Spam, Bestätigungsmail |
| Produktkarte, mehrfach kopiert | Eine Karte, die so oft erscheint, wie Datensätze da sind |
| Hover-Zustand als Frame daneben | Zustände für leer, lädt, Fehler, kein Ergebnis |
| Schrift aus der Bibliothek | Lizenz für den Web-Einsatz und ein Laden ohne Textsprung |
| Logo als Vektor auf der Fläche | Exportierte Dateien in den Grössen, die Browser und Vorschaubilder brauchen |
Keine dieser Zeilen ist schwer. Zusammen sind sie der Grund, warum aus einem fertigen Entwurf selten über Nacht eine Website wird.
Wie komme ich von Figma zu einer Website?
Es gibt vier Wege. Sie unterscheiden sich vor allem darin, wer die Arbeit macht, wenn der Entwurf auf die Wirklichkeit trifft.
Von Hand nachbauen. Eine Entwicklerin nimmt das File als Vorlage und schreibt den Code dazu. Das Ergebnis sitzt, die Abstände stimmen, jede offene Frage wird unterwegs geklärt. Dieser Weg dauert am längsten, und du bezahlst die Stunden.
Export per Plugin. Erweiterungen machen aus Frames HTML und CSS. Für eine einzelne Seite ohne Logik trägt das manchmal. Sobald Anmeldung, Daten oder ein Formular mit Bestätigungsmail dazukommen, hast du eine Hülle, die aussieht wie der Entwurf, und darunter nichts. Der Code, der dabei herausfällt, ist meist so verschachtelt, dass ihn später niemand gern anfasst.
Im Baukasten nachbauen. Du suchst eine Vorlage, die deinem Entwurf nahekommt, und schiebst sie zurecht. Solange der Entwurf in die Vorlage passt, geht das schnell. Wo er nicht passt, gewinnt die Vorlage, und dein Design verliert genau die Details, für die du es gezeichnet hast.
Beschreiben statt übersetzen. Du sagst, was die Seite tun soll, und ein Agent baut sie. Der Entwurf ist dann Referenz für Farben, Schriften und Aufbau, nicht Bauanleitung Pixel für Pixel. Wie ein solcher Lauf abläuft, steht in Wie erstelle ich eine Website mit KI? Anleitung in fünf Schritten.
Figma zu Website per KI: was ein Agent übernimmt
Ein Agent liest deinen Entwurf nicht wie ein Mensch, der Absicht erkennt. Er arbeitet mit dem, was du ihm gibst: ein Bild des Entwurfs, Farbwerte, Schriftnamen, die Abstandsskala, dazu die Beschreibung, was auf jeder Seite passieren soll. Je genauer diese Beschreibung, desto näher kommt das Ergebnis an das Bild im Kopf. Wer nur schreibt, es solle aussehen wie im Entwurf, bekommt eine Auslegung davon.
Bei Melta zum Beispiel beschreibst du die Idee in eigenen Worten und bekommst ein Konzept in zwei Teilen, eine Kundensicht ohne Technik und einen Bauplan. Nach der Freigabe läuft der Bau, er dauert bis zu 24 Stunden, danach liegt das Ergebnis in einer privaten Vorschau mit Demodaten. Hosting, Wartung und Änderungen per Chat gehören zu jedem Produkt. Eine Vorlagen-Galerie gibt es nicht, jedes Produkt entsteht aus seinem Konzept, was einem eigenen Entwurf eher hilft als schadet.
Wo die Grenzen dieser Arbeitsweise liegen und was nach dem ersten Lauf zu tun bleibt, ordnet Was ist Vibe Coding? Erklärung, Grenzen und was danach kommt ein. Wer den Weg über ein Chatfenster ausprobieren will, sieht in Website mit ChatGPT erstellen: was geht und was fehlt, wo dieser Weg endet.
Assets, Spaltenraster und Schriften sauber übergeben
Drei Dinge entscheiden, ob der Entwurf im Browser wiedererkennbar bleibt.
Die Dateien. Logo und Icons gehen als SVG heraus, Fotos in der Grösse, in der sie später erscheinen, nicht in der Auflösung aus der Kamera. Dateinamen wie entwurf-final-final kosten dich am Tag der Übergabe Zeit, weil niemand weiss, welches Bild gemeint ist.
Das Raster. Das Spaltenraster aus Figma lässt sich im Code nachbauen, wichtiger als die Zahl der Spalten ist aber die Abstandsskala. Wenn jeder Abstand ein Vielfaches des kleinsten ist, sitzt später fast alles von selbst. Auto Layout entspricht ungefähr dem, was Flexbox im Browser macht, es ist aber kein Code, sondern eine Absicht, die jemand übersetzt.
Die Schrift. Eine Schrift aus der Figma-Bibliothek darf nicht automatisch auf einer Website laufen. Prüfe die Lizenz für den Web-Einsatz, lege eine Ersatzschrift fest und achte darauf, dass der Text beim Laden nicht springt.
Was passiert mit Animationen aus dem Entwurf?
Der Prototyp in Figma ist eine Vorführung, kein Code. Smart Animate rechnet nicht das, was ein Browser rechnet. Dort kostet jede Bewegung, die Grösse oder Position ändert, eine Neuberechnung des Layouts, und auf einem älteren Handy sieht man das.
Praktisch heisst das: Jede Bewegung wird neu gebaut, meist als Übergang in CSS. Vorher lohnt sich eine Sortierung. Bewegung mit Aufgabe bleibt, also das Menü, das aufklappt, der Knopf, der zeigt, dass er gedrückt wurde, die Fehlermeldung, die auffallen soll. Bewegung als Schmuck fällt weg oder wird kürzer, vor allem beim Scrollen. Und wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie auch nicht. Das ist eine Regel im Stylesheet und gehört in den Bauauftrag, nicht in die Wunschliste.
Figma Website Templates und Beispiele richtig lesen
Ein Template sieht fertig aus, weil sein Inhalt fertig ist. Die Texte sind auf die Boxen geschrieben, die Bilder auf das Raster geschnitten. Sobald dein eigener Text hineinkommt, verschiebt sich die Balance, und du merkst, dass du keine Seite gekauft hast, sondern eine Reihe von Entscheidungen, die jemand für ein anderes Angebot getroffen hat.
Beispielseiten liest du am besten mit einer einzigen Frage: Welche Reihenfolge der Abschnitte führt einen Fremden bis zum Kontakt? Das ist übertragbar. Bildsprache und Textlänge sind es selten. In der Beispielgalerie stehen fertige Produkte wie Fahrschule Startklar oder Bäckerei Mühlebach, an denen sich dieser Aufbau ablesen lässt: Beispiele gebauter Websites und Shops.
Wo läuft die Seite nach dem Umzug aus Figma?
Der Entwurf endet an der Bildschirmkante. Eine Website endet erst, wenn sie unter deiner Adresse erreichbar ist, und dazwischen liegen Aufgaben, die im File nicht vorkommen: eine Domain, ein Zertifikat, damit das Schloss im Browser erscheint, ein Weg für die Formularmail, der nicht im Spam landet, Sicherungen, und jemand, der sie zurückspielt, wenn etwas kaputtgeht.
Der Mailversand wird am häufigsten unterschätzt. Eine Bestätigungsmail kommt nur zuverlässig an, wenn die Domain dafür eingerichtet ist, mit den passenden Einträgen im DNS. Dass ein Formular abschickt, siehst du im Test. Dass die Mail im Posteingang liegt statt im Spam, siehst du erst, wenn die erste Anfrage ausbleibt.
Danach läuft die Seite weiter. Abhängigkeiten bekommen Updates, Zertifikate laufen ab, Preise ändern sich, ein Bild muss getauscht werden. Wer den Betrieb nicht eingeplant hat, hat nach einer Saison eine Seite, die nicht mehr stimmt, und einen Entwurf, der zu ihr nicht mehr passt.
In welcher Reihenfolge du vom Entwurf zur Seite kommst
Der Weg wird kürzer, wenn vor der Übergabe klar ist, was gebaut wird.
Fang mit der Seitenliste an: welche Seiten es gibt, was auf jeder passiert und was eine Besucherin am Ende tun soll. Dann die Inhalte, denn echte Texte und echte Bilder verändern jeden Entwurf, und zwar besser vor dem Bauen als danach. Danach die Zustände: leer, voll, Fehler, lädt, angemeldet, abgemeldet. Wer sie einmal benennt, spart sich die Rückfragen.
Erst dann die Übergabe. Farbwerte, Abstandsskala, Schriften mit Lizenz, exportierte Dateien, dazu ein Satz je Seite, was sie leisten soll. Was folgt, ist Bauen, Ansehen, Ändern, in kurzen Runden und an einer Vorschau, die noch nicht öffentlich ist.
Von Figma zur Website ist damit weniger eine Frage der Übersetzung als eine Frage der Vorbereitung. Das File sagt, wie es aussehen soll. Alles, was danach passiert, sagst du mit Worten, und je genauer diese Worte sind, desto weniger Runden brauchst du.
FAQ
Kann ich ein Figma-Design direkt als Website exportieren?
Plugins erzeugen aus deinen Frames HTML und CSS. Für eine einzelne Seite ohne Logik reicht das manchmal, für Formulare, Anmeldung oder Daten aus einer Datenbank nicht.
Brauche ich Figma noch, wenn eine KI die Website baut?
Nicht zwingend. Der Entwurf hilft als Referenz für Farben, Schriften und Aufbau, aber eine genaue Beschreibung, was jede Seite tun soll, bringt mehr als eine Zeichnung Pixel für Pixel.
Übernimmt die Website die Animationen aus dem Prototyp?
Nein. Der Prototyp ist eine Vorführung, jede Bewegung wird im Browser neu gebaut, meist als Übergang in CSS.
Welche Dateien soll ich aus Figma exportieren?
Logo und Icons als SVG, Fotos in der Grösse, in der sie erscheinen, dazu die Farbwerte, die Abstandsskala und die Schriftnamen mit ihrer Lizenz.
Wie lange dauert der Weg von Figma zur Website?
Das hängt vom Umfang ab: eine Seite ohne Logik ist schnell gebaut, ein Shop mit Anmeldung und Zahlung braucht länger. Den grösseren Teil frisst meist nicht das Bauen, sondern das Zusammentragen der Inhalte.
Themen: Figma, Webdesign, Website erstellen, KI, Vibe Coding
Quellen
Weiterlesen
Beschreib dein Produkt - den Rest übernimmt Melta.
Ein Konzept kostet nur wenige Credits. Gebaut, online gestellt und betrieben wird es, sobald du es freigibst.
Frühzugang sichern