Es gibt eine Diskussion, die schon so lange köchelt, wie ich in der Webdesign- und Entwicklungsbranche tätig bin. Sie dreht sich um den Konflikt zwischen Design-Tools und Entwicklungstools. Das Endergebnis von Webdesign ist oft ein Mockup. Der alte Witz war, dass Webentwickler Websites erstellen und Webdesigner *Gemälde* von Websites. Dieser Bruch ist eine Quelle immenser Reibung. Was ist die Wahrheitsquelle?
Was wäre, wenn es wirklich eine einzige Wahrheitsquelle geben könnte? Was wäre, wenn das Design-Tool am exakt gleichen Code arbeiten würde wie die Produktionswebsite? Das neueste Kapitel in dieser epischen Konversation ist UXPin.
Lassen Sie uns die Fakten darlegen, damit Sie das alles nachvollziehen können.
UXPin ist ein Code-basiertes In-Browser-Design-Tool.
UXPin ist ein leistungsstarkes Design-Tool mit allen Funktionen, die Sie erwarten würden, insbesondere im Hinblick auf digitales, bildschirmbasiertes Design und fortgeschrittene Prototypen.
Die Tatsache, dass es codebasiert ist, ist hier besonders großartig. Websites mit all ihren visuellen Komponenten, die tatsächlich im Code verwurzelt sind, zu gestalten, bringt das Design der realen Endprodukte viel näher. Was Sie gestalten, wird nicht nur wie eine Website oder App *aussehen*, sondern sich auch so * anfühlen*. Zum Beispiel ist ein Eingabefeld keine statische Box mit einer Umrandung, sondern es vermittelt Ihnen die reale Erfahrung, Text darin einzugeben.
Codebasiertes Design liefert bereits alle Spezifikationen für jedes Element – wie bei dieser Kartenkomponente; exakte Farben (in den richtigen Formaten) sowie die exakten Pixelmaße usw. In einigen Fällen kann sogar der exakt richtige Code der UI-Komponente für Ihren Entwickler extrahiert werden.
Dies wird von Ania Kubów in einem Video über UXPin gut dargestellt.
Vor über einem Jahrzehnt dachte Jason Santa Maria viel darüber nach, wie ein Design-Tool der nächsten Generation aussehen würde. Könnten wir den Browser einfach direkt nutzen?
Ich glaube nicht, dass der Browser ausreicht. Ein Webdesigner, der sich in den Browser stürzt, bevor er die kreativen und nachrichtlichen Probleme angeht, ist vergleichbar mit einem Architekten, der Holzstücke zusammenschlägt und dann nachmisst. Der imaginäre Prozess wird durch die vorhandenen Werkzeuge abgekürzt; und es ist diese Vorstellungskraft – oder der Funke – am Anfang eines Designs, die den Weg für alles Folgende ebnet.
Jason Santa Maria, „Eine echte Webdesign-Anwendung“
Vielleicht nicht direkt der Browser, aber ein codebasiertes Tool, das UI wie Ihre Website oder App funktionieren lässt, könnte das Beste aus beiden Welten sein.
Webseiten sind lebendige, dynamische Räume, in denen die kleinste Interaktion eines Besuchers den Umfang einer ganzen Seite verändern kann. […] Da wir es nicht mit einem statischen Medium zu tun haben, müssen wir in der Lage sein, für Interaktionen und die sich wandelnden Landschaften einer Webseite zu gestalten […] **eine Anwendung muss Elemente und nicht nur Farbblöcke oder Text sehen. ** Photoshop, Illustrator und Fireworks verfügen in dieser Hinsicht über einige Low-Level-Funktionalitäten, aber der Bedarf an dynamischerer und nicht-destruktiver Handhabung ist offensichtlich.
Sie können in UXPin an *Ihren eigenen* React-Komponenten arbeiten.
Hier kann die Magie der **einzigen Wahrheitsquelle** geschehen. Es ist eine Sache, wenn ein Design-Tool eine React- (oder eine andere Framework-) Komponente ausgeben kann. Das ist ein netter Trick. Aber es ist wahrscheinlich eine Einbahnstraße. Komponenten in realen Projekten enthalten viele Dinge, die nicht ganz in den Bereich des Designs fallen. Vielleicht verwendet eine Komponente einen Hook, um die Berechtigungen des aktuellen Benutzers abzurufen und eine Schaltfläche zu deaktivieren, wenn er keinen Zugriff hat. Die deaktivierte Schaltfläche hat ein Designelement, aber der Großteil dieses Codes ist es nicht.
Es ist unpraktisch, ein Design-Tool zu haben, das andere Code-Teile in dieser Komponente nicht respektieren und sie im Wesentlichen ignorieren kann. Das Design-Tool ist im Grunde nicht sehr nützlich, wenn es Komponenten als Code exportiert, aber Designern nicht erlaubt, diese UI-Komponenten überhaupt zu importieren.
Hier kommt UXPin Merge ins Spiel.
Nun, seien wir fair, dies erfordert etwas Arbeit, um eingerichtet zu werden. Es kann ein paar Stunden dauern oder einige Wochen für ein komplettes Designsystem. UXPin funktioniert derzeit nur mit React und integriert dies über eine Webpack-Konfiguration.
Sobald Sie es am Laufen haben, **sind die Komponenten, die Sie in UXPin verwenden, buchstäblich die Komponenten, die Sie zum Erstellen Ihrer Produktionswebsite verwenden.**
Es ist wirklich ziemlich beeindruckend, zu sehen, wie ein Design-Tool vordefinierte Komponenten verarbeitet und sie auf einer völlig neuen Leinwand für Prototypen verwenden lässt.
UXPin hilft Ihnen bei der Implementierung in Ihrem Projekt, einschließlich
- Dokumentation zu Integration Ihrer eigenen Komponenten
- Beispiel-Repo: uxpin-merge-boilerplate
Wie es sein sollte, wird es wahrscheinlich beeinflussen, wie Sie Komponenten erstellen.
Komponenten haben oft Props, und Props steuern Dinge wie Design und den Inhalt darin. UXPin gibt Ihnen eine Benutzeroberfläche für die Props, was bedeutet, dass Sie die volle Kontrolle über die Komponente haben.
<LineChart
barColor="green"
height="200"
width="500"
showXAxis="false"
showYAxis="true"
data={[ ... ]}
/>
Wenn Sie dies wissen, könnten Sie sich eine Prop-Schnittstelle für Ihre Komponenten erstellen, die Ihnen viel Designkontrolle bietet. Zum Beispiel die Integration von Themenwechsel.
Das alles geht mit Storybook noch schneller.
Ein weiteres sehr beliebtes Tool im JavaScript-Komponenten-Bereich zum Testen und Erstellen Ihrer Komponenten ist Storybook. Es ist kein Design-Tool wie UXPin – es ist eher wie ein Zoo für Ihre Komponenten. Möglicherweise haben Sie es bereits eingerichtet oder finden möglicherweise auch Wert darin, Storybook zu nutzen.
Die gute Nachricht? UXPin Merge funktioniert hervorragend mit Storybook. Es macht die Integration superschnell und einfach. Außerdem unterstützt es dann jedes Framework, wie Angular, Svelte, Vue usw. – zusätzlich zu React.
Sehen Sie, wie schnell
UXPin CEO Marcin Treder hatte eine starke Vision
Was wäre, wenn Designer dieselben Komponenten verwenden könnten, die auch von Ingenieuren verwendet werden, und alle in einem gemeinsamen Designsystem gespeichert sind (mit genauen Dokumentationen und Tests)? Viele der frustrierenden und kostspieligen Missverständnisse zwischen Designern und Ingenieuren würden aufhören zu geschehen.
Und ein Plan
- Verbinden Sie sich mit dem Git-Repository oder der Storybook-Bibliothek.
- Importieren Sie Komponenten von dort in das UXPin Design-Tool.
- Alle Änderungen im Repository werden automatisch in UXPin synchronisiert. Beobachten Sie alle Änderungen am Repository und synchronisieren Sie diese Änderungen im visuellen Editor.
- Lassen Sie Designer genaue Spezifikationen und voll funktionsfähige Designs liefern.
Und das haben sie hier geschafft.