Für Freelancer, Digitalagenturen und Marketingteams

So arbeitest Du mit transjt.ai und HubSpot CMS

Mit transjt.ai kannst Du einzigartige Figma-Designs sofort in HubSpot-kompatible Design-Komponenten umwandeln. Erfahre hier wie Du den Workflow optimierst, Zeit sparst und Deinen Kunden übersichtliche, responsive HubSpot-Websites liefern kannst.

Registrieren

Wie erstelle ich ein transjt.ai-Konto?

Registriere Dich mit Deinem Google- oder Figma-Account oder direkt mit Deiner E-Mail-Adresse auf transjt.ai. Du benötigst das Konto, um sowohl das Plugin als auch die App nutzen zu können.

Zur Registrierung

Wie lade ich das transjt-Plugin für Figma herunter?

Du kannst das transjt-Plugin entweder über die transjt.ai-App oder direkt in Figma erhalten, indem Du in Figma nach „Plugins & Widgets“ nach „transjt“ suchst.

Zum Plugin

Wie verbinde ich transjt mit HubSpot ?

Melde Dich bei transjt.ai an, gehe zu „Settings“ > „Integrations“, klicke auf „Add Account“, wähle „HubSpot“ aus und folgen den Anweisungen. Du benötigst Administratorrechte in HubSpot.

Seite Integrationen aufrufen

Wie erstelle ich ein Projekt in transjt.ai?

Öffne transjt.ai, gehe zum Abschnitt „Projects“ und klicke auf das Symbol „+“, um ein neues Projekt zu erstellen. In derselben Übersicht kannst du auch Projekte löschen.

Seite Projekte aurufen

Wie kann man transjt-Projekte mit HubSpot verknüpfen?

Öffne ein Projekt und klicke auf das Zahnrad-Symbol in der oberen linken Ecke. Füge unter der Registerkarte „Integrations“ entweder ein neues HubSpot-Konto hinzu oder wählen ein bestehendes Konto aus der Liste aus, um es zu verknüpfen.

Wie kann man ein anderes HubSpot-Konto verknüpfen?

Öffne ein Projekt und klicke auf das Zahnrad-Symbol. Wenn Du mehrere HubSpot-Konten hinterlegt hast, wähle das gewünschte aus. Wenn nicht, füge ein neues Konto hinzu, indem Du die zuvor beschriebenen Schritte befolgst.

Verwalte Dein Abonnement

Wir bieten vier Abonnementmodelle an: Free, Creator, Professional und Enterprise (nur auf Anfrage). Du kannst Dein Abonnement jederzeit unter „Settings > Subscription“ verwalten.

Abos öffnen

Was sind „tasks“ in transjt?

Der Abschnitt „Tasks“ bietet einen Überblick über alle aktiven Aufgaben, einschließlich Import aus Figma und Export nach HubSpot. Wenn eine Aufgabe abgeschlossen ist, wird sie als „Bereit zum Exportieren“ markiert. Wenn die Komponente bereits in HubSpot vorhanden ist, kannst Du wählen, ob Du sie ersetzen oder die vorhandene beibehalten möchten. Vergesse nicht, auf „Weiter“ zu klicken, um fortzufahren.

Verwendung von Token: Wann werden Token verwendet?

Token werden immer dann verwendet, wenn Designs von der KI verarbeitet werden – sowohl für den Import als auch für den Export. Jeder Import aus Figma und jeder Export zu HubSpot verbraucht Tokens.

So wählst Du das transjt-Theme in HubSpot aus und erstellst Seiten

Erstelle ein neues Website-Projekt oder eine neue Seite in HubSpot CMS. Wähle das transjt-Theme aus, indem Du nach dem Vorschaubild und dem Projektnamen von transjt.ai suchst. Beachte, dass das transjt-Theme erst nach dem ersten Export zu HubSpot angezeigt wird.

Entwerfe Komponenten anstatt Seiten für den Export (figma-transjt)

Vermeide es, ganze Seiten in transjt.ai zu importieren, da diese nicht in einzelne Komponenten aufgeteilt werden. Importiere stattdessen einzelne Komponenten – dies erleichtert später die Erstellung von Seiten in HubSpot.

Verwende die Auto-Layout-Funktion von Figma

Das Auto-Layout von Figma ist ein leistungsstarkes Tool: Bei korrekter Einrichtung arbeitet es nahtlos mit transjt.ai zusammen, um hervorragende Ergebnisse zu erzielen und sowohl bei der Frontend- als auch bei der Backend-Entwicklung viel Zeit zu sparen. Denke daran, logische Elemente zu gruppieren, damit das Design übersichtlich bleibt und sich leicht exportieren lässt.

Wie man Anweisungen für die KI in Designs hinzufügt

Du kannst Anweisungen für die KI direkt in Deinem Figma-Design hinzufügen. Schreibe einfach Anweisungen in das Textfeld einer Komponente, und die KI interpretiert und wendet sie an. Beispiel: Füge zur Überschrift „Hover-Zustand mit Hintergrundschatten” hinzu, und die Hover-Animation wird automatisch generiert.

Wie erstellt man ein mehrstufiges Formular in Figma für das HubSpot CMS?

Füge einfach beide Schritte – beispielsweise in einem Formularablauf – in das Layout ein und benenne sie „Schritt 1“ und „Schritt 2“. Die KI kombiniert sie dann zu einem nahtlosen mehrstufigen Formular und integriert es automatisch in das HubSpot CMS.