Comment utiliser des symboles dans Sketch

Les symboles dans Sketch sont des éléments spéciaux que vous pouvez utiliser à plusieurs reprises dans tout votre document, sur les pages et les plans de travail. C'est fondamentalement un groupe de calques magique, et il est indiqué dans la liste des calques par un dossier violet (au lieu du bleu habituel).

Les symboles autour de votre document restent automatiquement synchronisés, donc lorsque vous en changez un, tous les autres s'alignent instantanément. C'est un outil parfait pour le prototypage d'applications et de vues lorsque des éléments sont répétés encore et encore, comme un flux social, une boîte de réception ou une liste de pistes.

Du point de vue du développeur, les modules réutilisables ne sont pas nouveaux. Lorsque vous codez quelque chose, les meilleures pratiques (et le bon sens) indiquent que votre code doit être flexible et réutilisable. Cela permet non seulement de gagner du temps dans le développement lorsque vous réutilisez quelque chose, mais cela permet une construction plus cohérente.

L'utilisation de symboles lors de la conception vous fera gagner du temps et vous aidera à obtenir une vue d'ensemble plus rapidement et de manière plus réaliste que vous ne le pensiez auparavant.

Quelle (s) partie (s) de mon dessin doit être un symbole?

La partie la plus délicate est de décider quels éléments de votre mise en page doivent être convertis en symbole. La clé est de rechercher des pièces qui se répètent encore et encore et qui ne sont pas trop différentes dans chaque cas. Heureusement, Sketch vous donne le pouvoir d'ajuster certaines choses dans un seul symbole:

  • contenu textuel
  • opacité
  • ombre
  • mode de fusion

Si vous avez besoin de changer quoi que ce soit d'autre d'instance en instance, un symbole peut ne pas être le bon choix (ou, vous pourriez avoir besoin d'un symbole plus quelques autres groupes, ce qui serait parfait). Une chose importante que vous ne pouvez pas changer dans une seule instance de symbole est une image, alors faites des plans spéciaux lors de la mise en page d'éléments tels que des galeries de photos et des objets multimédias.

Penser comme un développeur est un excellent moyen de décider de ce que devrait être un symbole. Recherchez des styles et des positions répétés, quelque chose pour lequel vous écririez un CSS utilitaire. Des choses comme:

  • menus (et éléments de menu)
  • listes de messages
  • widgets
  • en-têtes et pieds de page
  • cartes

Les symboles sont la clé pour travailler plus intelligemment et plus rapidement. Changer la couleur d'arrière-plan de l'en-tête sur 56 pages ne devrait pas prendre 56 clics. Une fois que vous avez commencé, vous ne regarderez jamais en arrière.

Création d'un symbole dans Sketch

Créer un symbole est simple. Vous pouvez les créer à partir de groupes de calques existants ou de calques libres. Si vous sélectionnez un groupe de calques libres, Sketch les regroupe pour vous lors de la création du symbole.

Après avoir sélectionné le ou les éléments souhaités, cliquez sur l'icône Créer un symbole dans la barre d'outils ou sélectionnez Calque> Créer un symbole dans le menu. Si vous avez sélectionné un groupe, vous pouvez également cliquer avec le bouton droit de la souris dans la liste des calques et sélectionner Créer un symbole.

Gauche: deux calques sélectionnés, éléments qui composent un bouton. À droite: éléments convertis en symbole, bouton nommé

Gauche: deux calques sélectionnés, éléments qui composent un bouton. À droite: éléments convertis en symbole, bouton nommé

Pour utiliser le symbole que vous venez de créer - ou tout autre symbole du document - sélectionnez Insertion> Symbole dans la barre d'outils. N'oubliez pas: toute modification que vous apportez à votre nouveau symbole sera immédiatement reflétée dans les autres instances. Un grand pouvoir implique de grandes responsabilités.

Organisation des symboles dans Sketch

Une fois que vous avez un tas de symboles en jeu, les utiliser efficacement nécessite un peu d'organisation. Sélectionnez Insertion> Symbole> Gérer les symboles pour afficher une liste complète de tous les symboles contenus dans le document. Vous pouvez également renommer et supprimer des symboles de cette vue.

Création de groupes de symboles dans Sketch

Vous pouvez également créer des groupes de symboles imbriqués, ce qui est idéal pour organiser même la plus grande bibliothèque de conception. En ajoutant une barre oblique dans le nom du symbole, comme boutons / soumettre, vous vous retrouverez avec un symbole nommé submit contenu dans un dossier nommé boutons.

Lors de l

Lors de l'insertion d'un symbole, les dossiers offrent une organisation détaillée, ce qui facilite la recherche de ce que vous recherchez (parfois mes fichiers contiennent des centaines de symboles)

Il existe de nombreuses façons d'organiser vos symboles (tout comme le code!), Mais je les utilise généralement des trois manières suivantes:

  • Catégorie : diviser mes symboles par contexte, comme tous les éléments de formulaire dans un dossier, tous les éléments de galerie dans un autre
  • Résolution : diviser mes symboles par point d'arrêt, avec des symboles dans les dossiers par taille d'écran de l'appareil
  • Gestion des versions : lorsque je crée un nouveau symbole avec un style très différent, je le mets parfois dans un dossier de test ou d'expérimentation pour garder mes symboles de production propres

Permutation de symboles dans Sketch

Sketch offre également un moyen facile d'échanger un symbole pour un autre, parfait pour échanger des symboles qui se ressemblent (comme remplacer un en-tête solide par un transparent modifié).

Gauche: un symbole en place, Droite: Sélection d

Gauche: un symbole en place, Droite: Sélection d'un nouveau symbole, dans ce cas, permutation d'un espace réservé d'image pour un espace réservé vidéo

Une fois le symbole cible sélectionné, recherchez la liste déroulante des symboles dans l'Inspecteur (le panneau sur le côté droit de l'écran).

Modification des symboles individuels dans Sketch

Bien que la plupart des éléments concernant un symbole soient synchronisés autour de votre document, il existe une poignée de valeurs que vous pouvez modifier au niveau d'une instance, ce qui signifie qu'elles n'affecteront pas les autres copies de ce même symbole.

Modification du contenu du texte dans les symboles Sketch

Une clé pour créer un prototype réaliste consiste à utiliser du contenu réel (ou d'aspect réel) sur tous vos écrans. Une boîte de réception pleine de bla bla bla bla semble bien moins convaincante que des échantillons d'e-mails d'un type crédible nommé Steve.

Pour apporter des modifications à l'intérieur d'une seule occurrence d'un symbole, sélectionnez le calque de texte cible et cochez l'option Exclure la valeur de texte du symbole dans l'inspecteur. Désormais, toutes les modifications que vous apportez à cette couche de texte resteront locales à cette instance du symbole.

Lorsque l

Lorsque l'option Exclure la valeur du texte est cochée, vous pouvez faire des choses pratiques comme changer chaque légende ou changer la valeur d'un bouton d'une page à l'autre.

Remplir une maquette avec du contenu réel permet de gagner l'approbation du projet (désolé, lorem ipsum!), Donc je prends toujours le temps de faire varier les valeurs du texte d'un symbole à l'autre.

Modification des styles des symboles d'esquisse

Sketch vous permet de contrôler indépendamment quelques styles clés, ce qui est utile lors de la création de divers états (statut, actif / inactif, survol, etc.). Les modifications apportées à l'un des éléments suivants n'affecteront que l'instance spécifique, pas tous les symboles:

  • Opacité : modifiez le niveau d'opacité global du symbole et de tout le contenu
  • Ombre : ajouter une ombre (ou des ombres) au symbole dans son ensemble
  • Mode de fusion : changer le mode de fusion (superposition, écran, etc.) du symbole

Il s'agit d'un changement assez récent, à venir dans Sketch 3.3, mais je le trouve déjà utile pour réduire le nombre de symboles que je travaille à un moment donné. Parfois, un élément inactif ou terminé n'a besoin que d'une simple baisse d'opacité, pas d'un symbole complètement séparé.

Créer un symbole à partir de zéro

Notre exemple de projet est un site Web éditorial appelé Words. Nous souhaitons que le site soit en mesure d'afficher correctement une image, un groupe d'images, une vidéo, etc., chaque fois qu'un auteur en a besoin.

Donc, dans notre document Sketch, ce seront tous des symboles. Pour commencer, nous allons créer une galerie de mosaïques, quelque chose dont de nombreux articles et mises en page pourraient avoir besoin, et quelque chose que nous ne voulons certainement pas construire encore et encore.

Je choisis la galerie de mosaïques car cela implique un traitement soigné en utilisant des masques de calque, ce qui fera certainement gagner du temps lorsque vous travaillez avec des images aléatoires sur Internet.

01. Dessinez la grille

À l'aide de l'outil Rectangle (Insertion> Forme> Rectangle), dessinez la grille à l'endroit où vous souhaitez placer vos images. Notez que nous prévoyons avec des rectangles, pas avec des tailles d'image réelles. Si vous voulez être vraiment précis - et je l'ai fait - vous pouvez dimensionner les choses au pixel près en utilisant The Inspector.

02. Ajouter des formes

Avec la grille en place, ajoutez chaque forme à son propre groupe (sélectionnez la forme et appuyez sur Cmd + G ). À l'intérieur de chaque groupe, faites un clic droit sur la forme et sélectionnez Utiliser comme masque. Chaque rectangle est maintenant prêt à contenir une seule image de votre galerie.

03. Coller des images

Collez une image dans chaque groupe, en veillant à la conserver au-dessus du calque de masque. Les masques fonctionnent en contenant tous les éléments se trouvant au-dessus d'eux-mêmes dans le même groupe (c'est pourquoi je vous ai tout d'abord regroupé). L'utilisation de formes comme masques élimine l'énorme ennui d'avoir à dimensionner chaque image aléatoire spécifiquement, car vous avez déjà une grille prête et en attente.

04. Convertir en symboles

Sélectionnez tout ce que vous venez de créer et convertissez-le en symbole, soit en cliquant sur l'icône Créer un symbole dans la barre d'outils, soit en sélectionnant Calque> Créer un symbole dans le menu. Votre nouveau symbole est prêt à être inséré partout dans votre document (ci-dessus, j'ai utilisé des dossiers imbriqués pour tout organiser).

Je ne sais pas comment dire cela autrement: avoir un document Sketch avec une bibliothèque pleine de symboles prêts à l'emploi est un délice absolu. C'est comme une feuille d'autocollants glisser-déposer remplie de votre propre design haute fidélité.

Mots : Clark Wimberley

Vous voulez en savoir plus sur la conception avec Sketch? Obtenez le cours InVision en 10 parties de Clark Wimberly, Design Workflow with Sketch, directement dans votre boîte de réception. Gardez un œil sur le blog InVision pour être parmi les premiers à savoir quand vous pouvez vous inscrire.

Aimait ça? Lisez-les!