6-stufiger Workflow von Figma zu einer Live-HubSpot-Website

Published: Feb 15, 2026 6:20:58 PM

Der neue Arbeitsablauf "Figma to Live": Eine 6-stufige Blaupause

Jahrzehntelang war der Weg von einem Designkonzept zu einer Live-Website ein komplexer, zweistufiger Prozess. Zunächst erstellt ein Designteam ein schönes, statisches Bild. Zweitens verbringt ein Entwicklungsteam Wochen oder Monate damit, dieses Bild manuell in Code zu übersetzen.

Dieses alte Modell ist langsam, teuer und voller Reibungsverluste. Die "Live"-Seite sieht selten genauso aus wie der Figma-Entwurf, und die unvermeidlichen Überarbeitungszyklen kosten Zeit, Geld und die Moral des Teams.

Was, wenn dieser Arbeitsablauf einfach... falsch ist?

Dank KI-gesteuerter Tools wie transjt.ai ist ein intelligenter, gestraffter Workflow jetzt der neue Standard. Er ist nicht nur schneller, sondern auch eine wesentlich kollaborativere und profitablere Art, Websites zu erstellen. Dieser moderne, 6-stufige Arbeitsablauf sieht folgendermaßen aus.

Schritt 1: Das Konzept (Strategie, Wireframing, UX)

Diese erste Phase ist wichtiger denn je. Hier wird der primäre Wert der Agentur geschaffen. In diesem Schritt geht es nicht nur um Mockups, sondern um tiefgreifende UX-Forschung, User Journey Mapping und eine klare Strategie zur Optimierung der Konversionsrate. Das "Konzept" ist die strategische Grundlage für das gesamte Projekt.

Schritt 2: Die Blaupause (Entwurf in Figma)

Mit einem soliden Konzept geht das Team zu Figma über. In diesem neuen Modell ist die Figma-Datei nicht mehr nur ein "Bild" der Website, sondern die Blaupause.

Entscheidend ist, dass das Design nicht als flache Seiten, sondern mit einer komponentenorientierten Denkweise erstellt wird. Es wird mit Figma Auto Layout, einer klaren, komponentenbasierten Struktur und logischen Benennungskonventionen erstellt. Der Designer sorgt nicht nur dafür, dass es gut aussieht, sondern entwickelt ein wiederverwendbares visuelles System, das die KI für die Erstellung der Website verwenden wird.

Schritt 3: Die magische Brücke (Import in transjt.ai & Export in HubSpot CMS)

Dieser Schritt ersetzt die gesamte manuelle "Entwicklerübergabe".

Anstatt Redlines und Assets zu exportieren, importiert der Designer (oder Entwickler) den fertigen Figma-Entwurf direkt in transjt.ai. Die KI der Plattform analysiert das gesamte Design - jede Komponente, jedes Layout und jeden Stil.

Nach Abschluss dieser Analyse führt die KI die Konvertierung von Figma in HubSpot CMS durch. Sie generiert automatisch ein einziges, vollständiges HubSpot-Theme in Produktionsqualität, das Folgendes umfasst:

Ein animiertes und reaktionsschnelles Frontend.
Eine saubere, für Entwickler geeignete Codebasis.
Volle Integration mit allen HubSpot CMS-Feldern, die für Sie erstellt wurden.

Es handelt sich nicht um einen statischen HTML-Export, sondern um eine funktionale, zu 90 % fertige Website, die in wenigen Minuten fertig ist.

Schritt 4: Die Politur (Feinabstimmung des Codes in HubSpot)

Ihr Entwicklungsteam ist nun von der "Code-Übersetzungsfabrik" befreit. Ihre Rolle wird vom Arbeiter zum Architekten erhoben.

Ihre Aufgabe ist es, sich auf die hochqualifizierten "letzten 10 %" des Projekts zu konzentrieren. Sie nehmen das KI-generierte Thema und:

Sie überprüfen den hochwertigen Code.
Sie integrieren komplexe, hochwertige Systeme wie Salesforce, benutzerdefinierte APIs oder erweiterte Datenmodelle.
Sie fügen benutzerdefiniertes JavaScript hinzu oder polieren Mikro-Interaktionen auf.
Führen Sie abschließende Optimierungen der Leistung und Zugänglichkeit durch.

Schritt 5: Der Inhalt (Befüllen des Live-CMS)

Da das HubSpot-Theme von Anfang an mit bearbeitbaren CMS-Feldern aufgebaut ist, kann Ihr Content-Team fast sofort mit der Arbeit beginnen.

Es muss nicht gewartet werden, bis die Entwicklung "fertig" ist. Sobald das Theme in HubSpot exportiert wurde, kann das Marketingteam damit beginnen, die Seiten mit den echten Texten, Bildern und Blogbeiträgen zu füllen. Auf diese Weise können der Inhalt und die Entwicklung parallel laufen, nicht nacheinander.

Schritt 6: Das "Go-Live" (Start und Iteration)

Da der Engpass bei der Entwicklung beseitigt wurde, kann das Projekt in einem Bruchteil der Zeit live gehen. Der Kunde erhält seine Website schneller, die Agentur wird schneller bezahlt, und das Team kann sich dem nächsten Projekt widmen.

Das ist keine futuristische Theorie. Das ist der neue Standard. Im besten Fall ist der Workflow so gestaltet, dass die Roboterarbeit automatisiert wird und sich die Menschen auf das Wesentliche konzentrieren können: Strategie, Kreativität und Integration auf höchster Ebene.