Création d'interface utilisateur plus rapide avec des «symboles» et des «styles partagés» dans Sketch

Ce que vous allez créer

Dans ce tutoriel, vous utiliserez un modèle de panier d'achat mobile pour vous entraîner à utiliser deux fonctionnalités très importantes de Sketch. Nous porterons une attention particulière à: "Symboles" et "Styles partagés".

Symboles d'esquisse

Les symboles vous permettent de dupliquer des éléments de votre conception et de les réutiliser. Toute modification apportée au contenu d'un symbole sera répercutée à toutes les occurrences de ce symbole..

Pour en créer un, avec une grappe d'objets sélectionnés, cliquez sur Créer un symbole:

Il existe deux conseils importants pour une utilisation efficace des symboles. Tout d’abord, assurez-vous que vos symboles ne sont pas compliqués. Prenons l'exemple de mon entête symbole:

Vous verrez l’arrière-plan, la barre d’état, l’étiquette de titre et les icônes, tous affichés ici dans leurs sous-dossiers dans le symbole de la barre d’en-tête: 

La barre de progression ne sera pas incluse dans le symbole car son état change sur chaque écran..

La deuxième chose est de vérifier l'option Exclure Texte Valeur des symboles pour chacun de vos calques de texte à l'intérieur de vos symboles. De cette façon, vous pouvez modifier le texte pour chacun des symboles dupliqués sur une base individuelle.

Esquisse styles partagés

La fonctionnalité «Styles partagés» est aussi simple que «Symboles». Il est utile de changer l'apparence de plusieurs éléments, à travers divers symboles et objets, en un seul clic. Examinons à nouveau l'en-tête et la barre de progression. Ici, vous pouvez voir que j'ai changé l'arrière-plan de la barre de progression, mais qu'elle n'a pas l'air géniale par rapport à l'arrière-plan de l'en-tête:

Pour éviter de modifier manuellement chaque arrière-plan de barre de progression, vous pouvez définir un style partagé. Ici, nous appliquons le header-bg style que j'ai préparé plus tôt, en cliquant Créer un nouveau style partagé quand le fond d'en-tête a été sélectionné:

Nous appliquons ensuite la même chose pour chaque couche qui doit refléter le même style. Maintenant, lorsque vous modifiez l'arrière-plan de la barre de progression, l'arrière-plan de tous les éléments avec le style partagé est modifié:

Conclusion

Avec ces deux fonctionnalités dans votre boîte à outils, la conception de votre prochaine interface utilisateur dans Sketch devrait prendre beaucoup moins de temps!

Merci de votre lecture et n'hésitez pas à poser des questions dans les commentaires ci-dessous.