Für transjt designen

So richtest du deine Figma-Datei ein, damit transjt daraus saubere, bearbeitbare CMS-Blöcke macht.

Hol dir das Plugin. Das transjt-Plugin gibt es kostenlos in der Figma Community: transjt – Figma to HubSpot & WordPress Theme with AI. Öffne die Seite und starte das Plugin in deiner Figma-Datei, oder suche in Figma nach „transjt“ unter Plugins & Widgets.

Probier es mit unserer Playground-Datei aus. Der transjt Figma Playground in der Figma Community ist ein fertiges Design, das so aufgebaut ist, wie transjt es erwartet. Öffne ihn, dupliziere ihn in deine Entwürfe und importiere seine Komponenten, um den ganzen Ablauf zu sehen, bevor du dein eigenes Design verwendest.

Komponenten gestalten, keine Seiten

Importiere einzelne Komponenten wie einen Hero, ein Feature-Grid oder einen Footer statt einer ganzen Seite. Eine ganze Seite wird als ein Block importiert und nicht in Sektionen aufgeteilt. Getrennte Komponenten werden zu getrennten Modulen in HubSpot oder Blöcken in WordPress, die dein Team dann zu beliebigen Seiten kombinieren kann.

Video: So gestaltest du Komponenten in Figma

Auto Layout verwenden

transjt liest Auto Layout und Constraints aus Figma und macht daraus responsives CSS (Flexbox und Grid). Je sauberer dein Auto Layout, desto besser das Ergebnis auf Tablet und Smartphone. Du musst keine eigenen Layouts für Smartphone und Tablet gestalten.

Video: So fügst du in Figma Auto Layout hinzu

Ebenen gruppieren

Gruppiere Elemente, die zusammengehören, etwa Bild, Titel und Text einer Karte. Eine logische, einheitliche Struktur hilft transjt zu erkennen, was jeder Teil ist, und ihn als saubere Komponente zu exportieren.

Anweisungen für die KI hinzufügen

Du kannst der KI direkt im Design sagen, was du möchtest. Schreib die Anweisung in ein Textfeld der Komponente, und die KI setzt sie um.

Beispiel. Schreib „Hover-Zustand mit Hintergrundschatten“ an eine Überschrift, und die Hover-Animation wird für dich erzeugt.

Video: So fügst du Anweisungen für die KI in Designs ein

Mehrstufige Formulare

Lege jeden Schritt des Formulars in dein Design und benenne die Schritte „Step 1“, „Step 2“ und so weiter. Die KI fügt sie zu einem mehrstufigen Formular zusammen und verbindet es mit deinem CMS.