Teleport 2.0 – der kollaborative Low-Code-UI-Builder

Nach monatelangen Iterationen und dem Feedback unserer Nutzer freuen wir uns riesig, die neueste Version unserer Plattform vorzustellen!

Diese neue Version bietet zahlreiche Verbesserungen, darunter eine brandneue Collaboration-Engine, mit der Teams Benutzeroberflächen effizienter als je zuvor erstellen können. Außerdem ist sie ein wichtiger Schritt auf dem Weg zur Entwicklung vollwertiger Frontend-Anwendungen.

In diesem Blogbeitrag stellen wir einige der neuen Funktionen kurz vor und geben einen Ausblick auf weitere geplante Neuerungen.

Neue Echtzeit-Collaboration-Engine#

Die neue Engine ermöglicht gemeinsame Arbeitssitzungen mit Dutzenden von Nutzern. Außerdem kann unser Entwicklungsteam damit neue Funktionen schneller als je zuvor veröffentlichen!

Hinter dieser Engine steckt ein Jahr Arbeit an der technischen Basis. Statt die bestehende Engine einfach zu aktualisieren, haben wir uns entschieden, aufs Ganze zu gehen und die gesamte Plattform neu zu schreiben. Diese strategische Entscheidung stellte langfristige Vorteile in den Vordergrund.

Auf diese Entscheidung, die Herausforderungen und die Auswirkungen gehen wir in einem separaten Blogbeitrag ausführlicher ein.

Drag-and-drop-Funktionen auf einem neuen Niveau!#

Platzieren Sie Elemente an beliebiger Stelle, ändern Sie ihre Position, gruppieren Sie mehrere Elemente automatisch oder ordnen Sie sie frei an. Die Drag-and-drop-Funktion der Plattform ist jetzt deutlich leistungsfähiger, intuitiver und einfacher zu bedienen.

Du bist Designer und möchtest Elemente an der richtigen Stelle platzieren? Wir helfen dir dabei!

Du bist Entwickler und möchtest schnell arbeiten, ohne überlegen zu müssen, welche Flex-Eigenschaft du festlegen solltest? Ist es justify-content oder align-items? Platziere die Elemente einfach dort, wo du sie haben möchtest. Wir übernehmen die Anpassungen für dich.

Elemente in einem Container platzieren

Position ändern und Elemente gruppieren

Verbesserte Unterstützung für Komponenteneigenschaften#

Die Arbeit mit Komponenten und Komponenteneigenschaften wird einfacher. Eigenschaften für Texte, Links und Bilder werden ab sofort automatisch erkannt und erstellt.

Im nächsten Release ergänzen wir Stilüberschreibungen und Varianten für deine Komponenten.

Automatische Zuordnung von Komponenten-Props

Ein deutlich benutzerfreundlicherer visueller Inspektor#

Der visuelle Inspektor besteht jetzt nicht mehr nur aus CSS-Eigenschaften in einer grafischen Benutzeroberfläche – er ist benutzerfreundlich.

In der ursprünglichen Version musste man wissen, was die Anzeigeeigenschaften flex, block, inline, oder none bewirken und welche Auswirkungen sie haben. Man benötigte fundierte CSS-Kenntnisse, um die Funktionsweise zu verstehen.

Die neue Version bietet Designern und technisch weniger versierten Nutzern eine intuitivere Bedienung und ermöglicht Entwicklern zugleich, direkt mit CSS-Eigenschaften zu arbeiten.

Diese Verbesserungen sind Teil unserer fortlaufenden Forschung, mit der wir allen Teammitgliedern unabhängig von ihren technischen Kenntnissen eine individuelle und benutzerfreundliche Gestaltungserfahrung bieten möchten.

Vereinfachter visueller Inspektor

UI-Zustände#

Mit dieser neuen Version lassen sich ganz einfach die Zustände beim Darüberfahren mit der Maus, aktiv, deaktiviertsowie weitere Zustände im Inspektorbereich festlegen.

Interaktionszustände einfach festlegen

Design-Tokens#

Außerdem haben wir Design-Tokens ergänzt. Ein Design-Token kann eine Farbe, ein Schriftstil oder eine Abmessungseigenschaft sein. Für jedes Projekt lassen sich individuelle Token-Sets definieren.

Sobald ein Token erstellt wurde, steht es im gesamten Projekt als Variable zur Verfügung. Statt ähnliche Elemente wiederholt manuell mit Eigenschaften zu versehen, können Sie vorhandene Tokens verwenden. Wenn Sie den Wert eines Tokens ändern, werden alle davon abhängigen Elemente automatisch aktualisiert.

Neben den offensichtlichen Vorteilen – schnelleres Arbeiten und eine zentrale Übersicht über Ihre atomaren Stile – wird auch der Code im Hintergrund optimiert. Für jedes erstellte und verwendete Design-Token erzeugen die Codegeneratoren einen wiederverwendbaren globalen CSS-Stil, wodurch das Codepaket kleiner wird.

Farbpalette festlegen

Wie geht es weiter?#

Weitere Informationen zu unseren Zukunftsplänen, kommenden Veröffentlichungen und Funktionswünschen findest du in unserer öffentlichen Roadmap auf Trello.

Zu den hervorgehobenen Punkten gehören:

• Anonyme Sitzung
• Benutzeroberflächen erstellen, ohne ein Konto anlegen zu müssen. Ein Projekt mit einem Benutzer teilen, der kein Konto hat.
• Figma-Plugin
• Figma-Designs direkt in die Plattform importieren
• CSS-Klassen
• Eine lang ersehnte Funktion. Stile über mehrere Elemente hinweg teilen, ohne Komponenten erstellen oder Stile manuell von einem Element zum anderen kopieren und einfügen zu müssen. Dies ist die Grundlage für die Unterstützung externer Stylesheets wie Tailwind CSS, Bootstrap, Chakra UI, Material UI und anderer Bibliotheken.
• Interaktivität, Ereignisbehandlung und bedingtes Rendering
• Fügen Sie Ereignis-Handler für Klickaktionen hinzu, steuern Sie die Sichtbarkeit von Elementen anhand von Bedingungen oder Benutzeraktionen und vieles mehr.
• Daten abrufen und zuordnen
• JAMstack, wir kommen! Integrieren Sie Ihr bevorzugtes Headless-CMS und verknüpfen Sie die Daten mit Ihrer Benutzeroberfläche – und schon kann es losgehen.
• Wiederholbare Elemente
• Verwenden Sie Tabellen, Listen oder andere iterierbare Elemente.
• Workflow-Integration für Entwickler
• Integrieren Sie Ihr Projekt mit GitHub oder CodeSandbox. Wir fügen eine CLI hinzu, mit der Sie Ihr Design in eine bestehende Codebasis integrieren können.

Wir möchten allen unseren Nutzern für ihr wertvolles Feedback und die Zeit danken, die sie in Gesprächen mit uns verbracht haben. Diese Version wäre ohne ihren wertvollen Beitrag nicht möglich gewesen.