Uno Cross-Plattform: Auf dem Weg zu mehr Figma-Unterstützung

Die neue dritte Vorabversion des Figma-Plugins für die Open-Source-Plattform bietet unter anderem überschreibbare Parameter und Layoutoptimierung.

Lesezeit: 3 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen 1 Beitrag
Moderne Design Systems mit Figma, Storybook und Angular (Teil 1)

(Bild: Blackboard/Shutterstock.com)

Von
  • Frank-Michael Schlede

Die Entwicklerinnen und Entwickler des Open-Source-UI-Frameworks Uno Platform treiben die Integration des Design-Tools Figma in ihre Plattform weiter voran und stellen die dritte Vorabversion des Figma-Plugins vor. Es bietet neben Parametern, die vom Benutzer überschrieben werden können, auch die Unterstützung von "Shapes" und eine automatische Verbesserung des Layouts.

Mit dem Webtool des erst kürzlich von Adobe übernommenen Unternehmens Figma lassen sich etwa Prototypen von Websites und Apps erstellen. Programmierer und Programmiererinnen können mit der Uno-Plattform Single-Codebase-Anwendungen mit C# und WinUI XAML erstellen, die sich nativ sowohl unter Windows als auch unter Android, macOS, iOS, Linux und WebAssembly nutzen lassen. Sie sollen durch die Kombination dieser beiden Softwarepakete nun ihre Designs in Figma erstellen und dann recht einfach in reaktionsfähigen XAML-Code exportieren können.

In das dritte Preview-Release seien viele Anregungen von Designern und Entwicklern aufgenommen worden, heißt es in einem Blog-Beitrag der Macher. Diese hätten dabei vielfach den Wunsch nach größerer Flexibilität in Bezug auf das Überschreiben von im Designsystem definierten Komponenteneigenschaften geäußert.

Die neuen Möglichkeiten zum Überschreiben bei der Preview-Version 3 geben Designern mehr Kontrolle und Flexibilität beim Vertauschen von Farbrollen (Bild: Uno Platform).

Ab dem aktuellen Preview 3 können Benutzerinnen und Benutzer nun die Eigenschaften von Komponenten überschreiben. Dadurch bekommen sie die Flexibilität, die sie benötigen, um Komponenten an ihren neuen Kontext anzupassen oder auch verschiedene Iterationen eines Designs zu untersuchen.

So haben Designer mehr Kontrolle und Flexibilität beim Vertauschen von Farbrollen. Mit der Vorschau 3 hat das Uno-Team das Überschreiben von Farbeigenschaften vereinfacht: So können Entwickler und Entwicklerinnen bei Vordergrundfarben jetzt alle Farbrollen austauschen, die Schaltflächenbeschriftungen und Symbolen zugewiesen sind. Bei Hintergrundfarben können sie zudem die Primär- und Oberflächenfüllfarben mit verschiedenen Farbrollen aus dem Toolkit ändern.

Unter anderem können sie mit Überschreibungen auch die in Uno Toolkit-Komponenten festgelegten sowie benutzerdefinierten Eckradiuswerte für Farbe und Strichstärke definieren. Eine vollständige Liste der Komponenten, die Overrides unterstützen und eine Anleitung zur Verwendung von Instanz-Overrides verwendet, finden Interessierte in der Override-Dokumentation.

Die AutoLayout-Funktion hat das Uno-Entwicklerteam mit diesem Preview aus dem bisherigem experimentellen Stadium herausgeholt. Wird diese Option aktiviert, werden die überflüssigen AutoLayouts im resultierenden XAML entfernt. Dadurch soll dann der XAML-Code weniger umfangreich, besser lesbar und leistungsfähiger werden.

Zudem haben sie Shape-Unterstützung für alle notwendigen Formen und Grundformen hinzugefügt, die Programmierer und Programmiererinnen benötigen: Sie können jetzt Polygone, Ellipsen und Pfade in ihre Designs einfügen und den entsprechenden direkt XAML-Code aus Figma generieren. Zu weiteren Produktivitätssteigerungen gehören:

  • Eine bessere Erkennung der verwendeten Komponenten.
  • Die Möglichkeit, den Seitennamen in der generierten Ausgabe anzupassen.
  • Leistungsverbesserungen bei der XAML-Generierung.
  • Sowie die zusätzliche Unterstützung für uneinheitliche Eckenradien, Textausrichtung und StatusBar-Eigenschaften.

Entwickler und Entwicklerinnen, die diese Neuerungen selbst ausprobieren möchten, können die Uno Platform für Figma Plugin und das Uno Platform Material Toolkit von der Webseite herunterladen.

(fms)