Erste Schritte für Designer

Willkommen beim Jutro Design System und UI-Framework. Jutro ist das erste Designsystem, das sich ausschließlich auf die Schaden- und Unfallversicherungsbranche konzentriert. Es wurde entwickelt, um Ihnen alle Ressourcen zur Verfügung zu stellen, die Sie benötigen, um Benutzeroberflächen gemäß den bewährten Praktiken der Branche und in Übereinstimmung mit unseren Jutro-Designprinzipien zu erstellen.

Die Standards auf dieser Website sollen helfen, bei der Entwicklung von Anwendungen im Guidewire-Ökosystem ein einheitliches Erscheinungsbild sicherzustellen. Sie umfassen detaillierte Anleitungen zu Folgendem:

• Zugriff auf die Dokumentation
• Welche Komponenten wann zu verwenden sind
• Arbeiten mit UI-Elementen
• Visuelle und Interaktionsmuster
• Schreiben von Texten für Guidewire-Produktoberflächen

Zugriff auf Jutro Figma-Bibliotheken

Kunden und Partner von Guidewire

Als Kunde oder Partner können Sie über den nachfolgenden Link direkt in der Figma Community auf die Jutro-Komponentenbibliothek zugreifen.

Note: Guidewire stellt seinen Kunden keine Figma-Lizenzen zur Verfügung. Die Kunden sind selbst für den Erwerb von Figma-Lizenzen verantwortlich. Die Größe des Designteams bestimmt die Art und die Kosten der erforderlichen Lizenz.

Abrufen der Komponentenbibliothek

1. Navigieren Sie zu der Jutro Component Library-Datei in der Figma Community.
2. Wählen Sie In Figma öffnen aus. Dadurch wird eine neue Datei zu Ihren Entwürfen hinzugefügt.
3. Verschieben Sie die Datei in das gewünschte Projekt, um sie zu veröffentlichen oder mit anderen zu teilen.

Arbeiten mit Design-Token (Tokens Studio)

Jede Version der Jutro-Komponentenbibliothek, die Sie über die Figma Community abrufen, umfasst Design-Token, die in die Datei eingebettet sind. Diese Token werden verwendet, um den visuellen Stil von Komponenten für das Theming zu verwalten.

Um diese Token verwenden zu können, benötigen Sie das Plugin Tokens Studio for Figma.

Note: Guidewire stellt keine Lizenzen für Drittanbieter-Tools wie Tokens Studio bereit. Für die Pro-Funktionen des Plugins ist möglicherweise eine Lizenz erforderlich.

Ausführliche Anweisungen zum Einrichten und Verwenden von Tokens Studio mit Ihrem Repository finden Sie im Abschnitt Theming unserer Dokumentation.

Vertrautmachen mit der Jutro-Bibliothek

Wenn Sie Zugriff auf Figma haben, können Sie sich mit den folgenden Schritten mit der Jutro Design System-Bibliothek vertraut machen:

1. Erstellen Sie eine neue Datei in Figma.

2. Aktivieren Sie die Jutro-Bibliotheken. Wählen Sie zunächst den Bereich Elemente in der linken Seitenleiste von Figma aus. Wählen Sie dann das Symbol Team Library aus, um das Dialogfeld Libraries zu öffnen. Aktivieren Sie die folgenden Bibliotheken: Jutro Design System, Jutro Styles und Jutro Icons.

3. Im Bereich Elemente in der linken Seitenleiste finden Sie die vollständige Liste der derzeit verfügbaren Jutro-Komponenten. Informationen zu jeder Komponente werden beim Hovern angezeigt.

4. Durch Ziehen von Komponenten per Drag & Drop in das Figma-Canvas können Sie die Gestaltung Ihres Designs mit Jutro beginnen.

Tip: Alternativ können Sie eine Komponente aus einer Bibliothek in einem Dokument hinzufügen, indem Sie mit der Tastenkombination Umschalt + I (Großbuchstabe i) ein modales Fenster mit progressivem Suchfilter öffnen, um die gewünschte Komponente zu platzieren.

Sie können die Eigenschaften und Zustände der Komponente untersuchen, nachdem Sie sie im Figma-Canvas hinzugefügt und ausgewählt haben.

Im Bereich Design in der rechten Seitenleiste können Sie durch die Varianten der Komponente navigieren.

Im Bereich Inspect in der rechten Seitenleiste finden Sie einen Link zur entsprechenden Dokumentation sowie Angaben zu komponentenbezogenen Eigenschaften.

Tip: So greifen Sie in Figma auf die Dokumentation der Komponenten zu:

1. Wählen Sie eine Hauptkomponente oder eine Komponentengruppe aus.
2. Klicken Sie im Bereich Inspect in der rechten Seitenleiste auf View documentation.

Im Bereich Inspect werden auch komponentenbezogene Stilvariablen angezeigt.

Schulung zum Design mit Figma

Es gibt viel zu lernen, wenn es darum geht, das Beste aus Design-Tools herauszuholen. Hier ist eine Liste von Ressourcen, mit denen Sie Ihre Erkundung von Figma beginnen können:

Videos/Webinare

• Melden Sie sich für eine wöchentliche Live-Demo zum technischen Design an oder sehen Sie sich die Videoreihe zu den Figma Design-Grundlagen an.

Empfehlungen

• Rahmen in Figma, und warum sie sich von Zeichenflächen unterscheiden
• Guide to Developer Handoff in Figma

Praxisorientierte Dateien

• Erfahren Sie, wie das Material Baseline Design Kit in Figma erstellt wird.
• Entdecken Sie, wie Smart Animate ein schnelles und realitätsnahes Prototyping ermöglicht.
• Erfahren Sie, wie Sie mit Auto Layout dynamische Rahmen erstellen können, die automatisch an den jeweiligen Inhalt angepasst werden.
• Erfahren Sie, wie Sie Varianten von Komponenten verwenden können.
• Entdecken, installieren und verwenden Sie Ihr bevorzugtes Figma-Plugin über die Community-Plattform.

Zusätzliche Hinweise zur Verwendung

Grundlegendes zu Jutro Design System

Jutro wurde unter Berücksichtigung moderner Designprinzipien und in Übereinstimmung mit bewährten domänenspezifischen Praktiken entwickelt. In den grundlegenden Jutro-Designprinzipien finden Sie weitere Informationen zu den Untersuchungen, die wir für unsere Designlösungen heranziehen, zur Verwendung von Farben und Typografie sowie zu unserer Vorgehensweise bei der Verwendung von Symbolen.

Verwenden der Bausteine

Oder, wenn Sie lieber direkt loslegen möchten, beginnen Sie mit unseren Komponenten und Geschäftsmustern.

Komponenten sind die Grundbausteine des Systems. Sie finden Dinge wie Schaltflächen, Dropdowns und Links sowie einige größere zusammengesetzte Komponenten, wie die globalen Kopfzeile, die mehrere Elemente der Benutzeroberfläche kombinieren.

Muster sind unsere domänenspezifische Perspektive darauf, wie die häufigsten Anwendungsfälle im Versicherungswesen, z. B. das Hinzufügen eines Fahrzeugs zu Ihrer Police, als Benutzeroberfläche dargestellt werden können. Muster werden aus den kleineren Komponenten erstellt, aber unter Berücksichtigung zusätzlicher bewährter Verfahren wie Designheuristiken und Barrierefreiheit.

Kontaktaufnahme mit uns

Wenn Sie uns Ihr Feedback mitteilen möchten oder Fragen zum Jutro Design System und seiner Funktionsweise mit Ihren digitalen Produkten haben, wenden Sie sich bitte unter feedback-jutro@guidewire.com an uns.