Entwickler und Designer arbeiten mit UXPin an einer einzigen Quelle der Wahrheit

Der Konflikt zwischen Webdesign- und Entwicklungstools war schon immer ein langjähriges Problem in der Branche. Das Endergebnis des Webdesigns ist normalerweise ein Modell, bei dem Entwickler Websites und Designer "Websites" als "bemalte Werke" herstellten, und diese Trennung führte zu großer Reibung. Welches ist die Quelle der Wahrheit?

Was ist, wenn es wirklich eine einzige Quelle von Tatsachen gibt? Was ist, wenn das Design -Tool genau den gleichen Code wie die Produktionswebsite verwendet? Das neueste Kapitel dieser langwierigen Diskussion ist UXPIN.

Lassen Sie uns zuerst einige Fakten erhalten, damit wir das alles besser verstehen können.

UXPIN: Code-basierte In-Browser-Design-Tool

UXPIN ist ein leistungsstarkes Design-Tool mit allen von Ihnen erwarteten Funktionen, die sich insbesondere auf digitales Bildschirmbasis und erweiterte Prototyping konzentrieren.

Die Tatsache, dass es auf Code basiert, ist besonders wichtig. Verwenden Sie alle visuellen Komponenten (die tatsächlich in Code verwurzelt sind), um die Website zu entwerfen und das Design näher an das Endprodukt zu bringen. Ihr Design sieht nicht nur wie eine Website oder App aus, sondern auch wie eine Website oder App. Anstelle einer statischen Box mit einem Umriss gibt das Eingabefeld beispielsweise das wahre Gefühl, es mit Text zu füllen.

Das Code-basierte Design hat alle Spezifikationen für jedes Element bereitgestellt-wie diese Kartenkomponente; In einigen Fällen ist es sogar möglich, präzisen Code von UI -Komponenten für die Verwendung von Entwicklern zu extrahieren.

Ania Kubów wird in einem Video über UXPin sehr gut in diesem Bereich ausgeführt.

Vor mehr als einem Jahrzehnt dachte Jason Santa Maria ernsthaft darüber nach, wie die nächste Generation von Designwerkzeugen aussah. Können wir den Browser direkt verwenden?

Ich glaube nicht, dass der Browser genug ist. Webdesigner springen in den Browser, bevor sie kreative und Informationstransferprobleme lösen, genau wie ein Architekt das Holz zusammenschlägt und es dann misst. Die Werkzeuge begrenzen die Vorstellungskraft, und die Fantasie oder Inspiration zu Beginn des Designs legt die Grundlage für alles, was folgt.

Jason Santa Maria , "Eine echte Webdesign -App"

Vielleicht nicht direkt mit dem Browser verwendet, aber codebasierte Tools können die Benutzeroberfläche wie Ihre Website oder Anwendung funktionieren, was das Beste aus beiden Welten sein kann:

Webseiten sind dynamisch und lebende Räume, und die Mindestinteraktionen von Besuchern können den Umfang der gesamten Website ändern. […] Da wir uns nicht mit statischen Medien beschäftigen, müssen wir in der Lage sein, den sich ändernden Sehvermögen von Interaktionen und Webseiten zu entwerfen. […] Anwendungen müssen Elemente und keine Farben oder Textblöcke anzeigen. Photoshop, Illustrator und Feuerwerk haben in dieser Hinsicht einige Merkmale auf niedriger Ebene, aber die Notwendigkeit einer dynamischeren und nicht zerstörereren Verarbeitung ist offensichtlich.

Sie können Ihre eigenen React -Komponenten in UXPIN verwenden

Dies ist die Magie der einzelnen Quelle der Tatsachen . Wenn ein Design -Tool reagierte (oder andere Framework) -Komponenten ausgeben kann, ist dies eine Sache. Dies ist ein kluger Trick. Aber es ist wahrscheinlich eine Einbahnstraße. Komponenten in realen Projekten sind mit anderen Inhalten gefüllt, die nicht ausschließlich im Bereich des Designs enthalten sind. Möglicherweise verwendet eine Komponente einen Haken, um die Berechtigungen des aktuellen Benutzers zurückzugeben. Wenn sie keinen Zugriff haben, ist eine Taste deaktiviert. Deaktivierte Schaltflächen haben bestimmte Designelemente, aber für die meisten Code nicht der Fall.

Wenn das Design -Tool einen anderen Code in dieser Komponente nicht respektieren kann und ihn im Grunde nur ignoriert, ist es unpraktisch. Wenn ein Design -Tool Komponenten als Code exportiert, aber nicht zuerst den Designer erlaubt, diese UI -Komponenten zu importieren, ist dies nicht sehr nützlich.

Hier kommt Uxpin zusammen.

Um fair zu sein, erfordert dies einige Arbeit, um sich einzurichten. Es kann nur einige Stunden oder Wochen dauern, um ein komplettes Systemdesign abzuschließen. Derzeit funktioniert UXPIN nur mit React und verwendet Webpack -Konfiguration, um sie zu integrieren.

Sobald Sie mit dem Laufen beginnen, sind die Komponenten, die Sie in UXPIN verwenden, wirklich die Komponenten, mit denen Sie Ihre Produktionswebsite erstellen.

Es ist wirklich beeindruckend zu sehen, dass ein Design-Tool vorgefertigte Komponenten verdaut und sie für Prototypen auf einer brandneuen Leinwand verwendet werden können.

UXPIN hilft Ihnen bei der Implementierung dieser Funktion in Ihrem Projekt, einschließlich:

• Dokumentation, die Ihre eigenen Komponenten integriert
• Beispiel-Repository: uxpin-merge-boilerplate

Wie erwartet kann dies die Art und Weise beeinflussen, wie Sie Komponenten erstellen

Komponenten haben häufig Aspekte wie Attribute, Attributsteuerungsdesign und interne Inhalt. UXPIN bietet Ihnen eine Benutzeroberfläche von Eigenschaften, was bedeutet, dass Sie die vollständige Kontrolle über die Komponenten haben.

 <code><linechart ...="" barcolor="green" data="{[" height="200" showxaxis="false" showyaxis="true" width="500"></linechart></code>

Wenn Sie dies wissen, können Sie eine Eigenschaftschnittstelle für die Komponente bereitstellen und viel Entwurfskontrolle bereitstellen. Zum Beispiel der integrierte Themenschalter.

Schneller mit Storybook

Ein weiteres Tool, das im Feld JavaScript -Komponenten sehr beliebt ist, um Komponenten zu testen und zu bauen, ist Storybook. Es ist kein Design -Tool wie UXPin - es ist eher ein "Zoo" von Komponenten. Möglicherweise haben Sie es eingerichtet oder es ist wertvoll, ein Storybook zu verwenden.

Was sind die guten Nachrichten? Uxpin Merge funktioniert perfekt mit einem Storybook. Es macht die Integration sehr schnell und einfach. Darüber hinaus unterstützt es alle Gerüstungen wie Angular, Sufle, Vue usw. - neben React.

Sehen Sie, wie schnell es ist:

UXPIN -CEO Marcin Treder hat eine starke Sicht:

Was wäre, wenn der Designer genau dieselben Komponenten verwenden könnte, die vom Ingenieur verwendet werden und alle in einem gemeinsamen Entwurfssystem (mit genauen Dokumentation und Tests) gespeichert wurden? Viele frustrierende und kostspielige Missverständnisse zwischen Designern und Ingenieuren werden nicht mehr existieren.

Und ein Plan:

1. Stellen Sie eine Verbindung zum GIT -Repository oder zum Storybook -Repository her.
2. Importieren Sie Komponenten von dort in das UXPIN -Design -Tool.
3. Alle Änderungen im Repository werden automatisch in UXPIN synchronisiert. Überwachen Sie alle Änderungen am Repository und synchronisieren Sie sie im visuellen Editor.
4. Lassen Sie Designer den Entwicklern genaue Spezifikationen und voll funktionsfähige Designs entwerfen und liefern.

Das machen sie hier.

Erleben Sie UXPIN Merge

Das obige ist der detaillierte Inhalt vonEntwickler und Designer arbeiten mit UXPin an einer einzigen Quelle der Wahrheit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!