Figma-Plugin

Installiere das transjt-Plugin, logge dich ein und schicke deine Figma-Komponenten an ein transjt-Projekt.

Auf einen Blick

Preis: Das Plugin ist kostenlos. Importe verbrauchen Tokens aus deinem transjt-Plan, und der Starter-Plan ist kostenlos.
Wo: in der Figma Community oder in Figma unter Plugins & Widgets (Suche nach „transjt“).
Du brauchst: ein Figma-Konto mit einer Design-Datei, die du bearbeiten kannst, und ein transjt-Konto.
Exportiert nach: HubSpot CMS und WordPress, über die transjt-App.

Was das Plugin macht

Das transjt-Plugin verbindet Figma mit der transjt-App. Du wählst Ebenen in deiner Figma-Datei aus und schickst sie an ein transjt-Projekt. Dort werden sie in Komponenten umgewandelt, die du in der Vorschau ansiehst und dann nach HubSpot oder WordPress exportierst.

Die Umwandlung ist pixelgenau. Die Komponenten, die transjt baut, entsprechen deinem Figma-Design: Layout, Abstände, Typografie und Farben. Layouts für Desktop, Tablet und Smartphone sind enthalten.

A section with four statistics and a photo of a holiday house, with the transjt result laid over the Figma design: the red outlines of the design sit on the numbers, labels, icons and photo of the result — Das Ergebnis von transjt über dem Figma-Design (rot): Zahlen, Text, Icons und das Bild liegen genau übereinander.

Plugin holen

Option 1: aus der Figma Community

Öffne die Seite des transjt-Plugins in der Figma Community.
Öffne es von dort aus in deiner Figma-Datei.

Option 2: direkt in Figma

Öffne die Design-Datei, die du konvertieren möchtest.
Öffne das Aktionsmenü (Cmd + K auf dem Mac, Strg + K unter Windows) und wechsle zu Plugins & widgets.
Suche nach „transjt“ und klicke auf das Plugin, um es zu starten.

Sobald du es genutzt hast, listet Figma das Plugin unter deinen zuletzt verwendeten Plugins, sodass du es mit einem Klick wieder starten kannst. Den Link findest du auch in der transjt-App unter Plugins.

Noch kein Design? Probier das Plugin mit der kostenlosen Datei transjt Figma Playground aus. Sie ist so aufgebaut, wie transjt es erwartet.

Einloggen

Das Plugin nutzt dasselbe Konto wie die transjt-App. Melde dich mit Figma, Google, HubSpot, GitHub oder deiner E-Mail-Adresse und deinem Passwort an. Noch kein Konto? Klicke im Plugin auf Sign Up.

Unten im Plugin siehst du die Plugin-Version und das Konto, mit dem du angemeldet bist, und kannst dich dort abmelden.

Design importieren

Wähle unter Select type, was du importierst:
- Component für eine Sektion einer Seite, etwa einen Hero, ein Feature-Grid oder einen Footer.
- Blog für das Layout der Blog-Übersicht.
- Blog Detail für das Layout eines einzelnen Beitrags.
Wähle unter Projects das Projekt, in das du importierst, oder klicke auf Create Project und gib ihm einen Namen.
Wähle in Figma die Ebenen aus, die du konvertieren möchtest.
Klicke auf Import to transjt.

The transjt Figma plugin with Select type (Component, Blog, Blog Detail), the project list with Create Project, and the Import to transjt button — Wähle unter Select type den Typ und dann ein Projekt und klicke auf Import to transjt.

Die ausgewählten Komponenten werden in dein Projekt in der transjt-App übertragen. Dort geht es mit Preview und Export weiter.

Wähle Ebenen in Figma aus und klicke auf Import to transjt.

Nach Designänderungen erneut importieren

Du hast eine Komponente in Figma geändert? Importiere sie auf dieselbe Weise erneut. Wenn die Komponente in HubSpot schon existiert, fragt transjt in Tasks, ob sie ersetzt oder die bestehende behalten werden soll. Klicke auf Continue, um fortzufahren.

Tokens

Jeder Import verbraucht Tokens aus deinem Abo, je nachdem, wie komplex das Design ist. Exporte verbrauchen keine. Mehr unter Tokens.

Tipps für bessere Ergebnisse

Importiere Komponenten, keine ganzen Seiten. Eine ganze Seite wird nicht in Sektionen aufgeteilt.
Verwende Auto Layout und gruppiere und benenne deine Ebenen.

Mehr unter Für transjt designen.

Das Plugin im Zusammenspiel mit deinem CMS: Figma-zu-HubSpot-Plugin und Figma-zu-WordPress-Plugin.