Prise en main pour les concepteurs
Bienvenue dans Jutro Design System et la structure d'interface utilisateur Jutro est le premier système de conception dédié uniquement au secteur de l'assurance IARD. Il a été conçu pour vous fournir toutes les ressources dont vous avez besoin pour créer des interfaces utilisateur conformément aux meilleures pratiques du secteur et en accord avec nos principes de conception Jutro.
Les normes de ce site vous aideront à conserver une apparence cohérente lorsque vous concevez des applications dans l'écosystème Guidewire. Elles comprennent des conseils détaillés sur :
- La documentation sur l'accessibilité
- Les composants à utiliser et quand les utiliser
- Utilisation des éléments d'interface utilisateur
- Modèles visuels et d'interaction
- Écriture d'une copie pour les interfaces de produit Guidewire
L'accès aux bibliothèques Jutro Figma
Les clients et partenaires de Guidewire
En tant que client ou partenaire, vous pouvez accéder à la bibliothèque de composants Jutro directement à partir de la communauté Figma à l’aide du lien ci-dessous.
Comment accéder à la bibliothèque de composants
- Accédez au fichier de la bibliothèque de composants Jutro sur la communauté Figma.
- Sélectionnez Ouvrir dans Figma. Un nouveau fichier sera ajouté à vos brouillons.
- Lorsque vous êtes prêt, déplacez le fichier vers le projet souhaité pour le publier ou le partager avec d’autres personnes.
Utilisation des jetons de conception (Tokens Studio)
Chaque version de la bibliothèque de composants Jutro que vous obtenez auprès de la communauté Figma est livrée avec ses jetons de conception intégrés dans le fichier. Ces jetons sont utilisés pour gérer le style visuel des composants pour la création de thèmes.
Pour utiliser ces jetons, vous aurez besoin du plug-in Tokens Studio for Figma.
Pour obtenir des instructions détaillées sur la configuration et l’utilisation de Tokens Studio avec votre référentiel, consultez la section Thèmes de notre documentation.
Se familiariser avec la bibliothèque Jutro
Une fois que vous avez accès à Figma, procédez comme suit pour vous familiariser avec la bibliothèque Jutro Design System :
- Créez un nouveau fichier dans Figma.
- Activez les bibliothèques Jutro. Tout d'abord, sélectionnez le panneau Ressources dans la barre latérale gauche de Figma. Ensuite, sélectionnez l'icône Bibliothèque d'équipe pour ouvrir la boîte de dialogue Bibliothèques et activer/désactiver ces bibliothèques : Jutro Design System, Styles Jutro et Icônes Jutro.
- Dans le panneau Ressources de la barre latérale gauche, vous trouverez la liste complète des composants Jutro actuellement disponibles. Les informations relatives à chaque composant sont affichées lorsque vous les survolez.
- En faisant glisser et en déposant des composants sur le canevas Figma, vous pourrez commencer à concevoir avec Jutro.
Vous pouvez examiner les propriétés et les états du composant après l'avoir déposé sur le canevas Figma et avoir sélectionné le composant.
Dans le panneau Conception de la barre latérale de droite, vous pouvez passer d'une variante à l'autre du composant.
Dans le panneau Inspecter de la barre latérale de droite, vous pouvez trouver un lien vers la documentation correspondante et les propriétés associées aux composants.
- Sélectionnez un composant principal ou un ensemble de composants.
- Dans le panneau Inspecter de la barre latérale de droite, cliquez sur Afficher la documentation.
Les variables de style liées aux composants apparaissent également dans le panneau Inspecter.
Formation à la conception Figma
Il y a beaucoup à apprendre pour tirer le meilleur parti des outils de conception. Voici une liste de ressources pour démarrer votre formation à Figma :
Vidéos/webinaires
- Inscrivez-vous pour une démonstration technique hebdomadaire en direct OU regardez la série de vidéos sur les principes de base de Figma.
Lecture recommandée
- Cadres dans Figma, et leur différence par rapport aux plans de travail
- Guide de transfert du développeur dans Figma
Fichiers pratiques
- Découvrez comment le kit de conception de référence de matériau est construit dans Figma
- Découvrez comment Smart Animate déverrouille un prototypage rapide et haute fidélité
- Apprenez à utiliser la disposition automatique pour créer des cadres dynamiques qui répondent à leur contenu
- Apprenez à utiliser les variantes de composant
- Recherchez, installez et utilisez votre plug-in Figma préféré à l'aide de la plate-forme de la communauté
Conseils d'utilisation supplémentaires
Compréhension de Jutro Design System
Jutro a été conçu en gardant à l'esprit les principes de conception modernes et en conformité avec les meilleures pratiques spécifiques à chaque domaine. Consultez les principes de conception de base Jutro pour en savoir plus sur les recherches que nous menons dans le but de prendre nos décisions en matière de conception, sur l'utilisation de la couleur et de la typographie, ainsi que sur notre philosophie d'utilisation des icônes.
Utilisation des blocs de construction
Si vous préférez plonger directement dans le vif du sujet, commencez dans ce cas par nos composants et nos modèles d'entreprise.
Les composants sont les éléments de base du système. Vous y trouverez des éléments tels que des boutons, des listes déroulantes et des liens, ainsi que des composants composites plus larges, comme l'en-tête global, qui combine des éléments d'interface multiples.
Les modèles correspondent à notre façon spécifique au domaine d'imaginer comment les cas d'utilisation les plus courants dans le secteur de l'assurance, comme l'ajout d'un véhicule à votre police, peuvent être représentés en tant qu'interface utilisateur. Les modèles sont développés à partir de composants plus petits, mais en tenant compte d'autres meilleures pratiques, comme les heuristiques de conception et l'accessibilité.
Nous contacter
Si vous souhaitez nous faire part de vos commentaires ou si vous avez des questions sur Jutro Design System et sur la façon dont il fonctionne avec vos produits Digital, contactez-nous à l'adresse feedback-jutro@guidewire.com.