Prototypez plus intelligemment : Création d'une bibliothèque de symboles Sketch

1. Rencontre et accueil: [ Musique] Le design évolue rapidement. Nous travaillons sur des équipes Agile et itérons rapidement en fonction des commentaires des utilisateurs et des parties prenantes. Malheureusement, nous passons beaucoup plus de temps à apporter des modifications aux maquettes que nous ne pensons aux gros problèmes auxquels les utilisateurs sont confrontés. Je m'appelle Tina Musich et je suis designer UX. J' utilise Sketch presque tous les jours depuis quelques années. J' ai vraiment appris à connaître les tenants et les aboutissants. Juste l'année dernière, j'ai cherché à convertir la bibliothèque de modèles UX de nos équipes en éléments réutilisables en croquis avec beaucoup de succès. Je veux partager ce que j'ai appris avec vous dans cette classe. Grâce à ces leçons, vous apprendrez à prototyper et itérer plus rapidement en utilisant une bibliothèque de symboles dans Sketch. Que vous utilisiez un système de conception ou que vous créiez des modèles au fur et à mesure, bibliothèques similaires vous aident à rationaliser votre processus et à assurer la cohérence de vos projets. Vous pouvez créer un élément comme un bouton une fois et l'utiliser pour toujours et jamais dans Sketch. Si vous travaillez sur une équipe disposant d'une bibliothèque de symboles est crucial pour garder vos maquettes synchronisées. Commençons. 2. Quels sont les symboles ?: Alors d'abord, parlons un peu de ce que sont les symboles. Un symbole sur le croquis est une source unique de vérité, c'est un élément qui existe dans un endroit et qui est maintenu à endroit, mais qui peut être utilisé dans plusieurs autres tableaux ou projets d'art et c'est ainsi qu'ils fonctionnent. Donc, vous avez votre symbole et c'est la seule source de vérité , mais vous pouvez également utiliser ce symbole à différents endroits et quand vous faites cela, ce sont des instances du symbole. Lorsque vous mettez à jour un symbole, la modification exclut toutes les instances où vous avez utilisé ce symbole et pour le modifier à nouveau, il se met à jour dans toutes les instances. Alors maintenant vous comprenez ce que font les symboles, mais pourquoi devriez-vous les utiliser ? Le premier est qu'il maintient la cohérence dans l'ensemble de votre projet. Disons que vous travaillez sur votre projet et que vous avez deux tableaux d'art qui sont assez similaires et que vous voulez apporter un changement. Donc, normalement, ce que vous faites est que vous pouvez ajouter des liens supplémentaires à votre navigation supérieure. Vous pouvez changer la couleur. Peut-être que vous faites des éléments plus grands que vous devez prendre ces changements et les coller ou les refaire dans tous les autres tableaux. Donc oui, c'est faisable, mais ça prend du temps et c'est juste ennuyeux de devoir continuer à faire. Si vous avez une bibliothèque de symboles, vous pouvez faire quelque chose comme ça. Je souhaite ajouter quelques liens à ma navigation et à mes mises à jour dans tous mes tableaux d'art. Maintenant, je veux changer la couleur et continue à les mettre à jour tableaux d'art. Enfin, je veux changer la taille de cet élément et la chaîne exclut tous les tableaux d'art. Je ne peux pas vous dire combien de fois je veux déplacer quelque chose, peut-être même quelques pixels. Je veux échanger les choses et en construisant des symboles à mon travail, je peux faire que ces changements passent à travers tout mon art près vraiment facilement sans utiliser de symboles et de croquis, je vais faire beaucoup de copie, de collage, créer de nouveaux tableaux d'art et généralement juste animée avec beaucoup d'éléments encore et encore et encore. Lorsque je travaille sur des projets, je suis toujours en train d'expérimenter et de changer les choses et utiliser les symboles me permet de le faire très rapidement et sans cette peine de copier et de coller 1000 fois. Une autre raison d'utiliser des symboles et des esquisses est de maintenir la cohérence dans l'ensemble des projets de votre équipe. Nous avons donc parlé de garder tous vos tableaux d'art dans votre projet en synchronisation. Mais vous travaillez peut-être sur une équipe et il pourrait y avoir des symboles que vous partagez en équipe, peut-être que la navigation supérieure sur votre application est toujours la même ou que vous avez un guide de style avec boutons, des couleurs et des formes et tous les éléments que vous partagez tous en tant qu'équipe avec une bibliothèque de symboles, si quelqu'un de votre équipe le fait, disons que l'ajout d'une chose à la navigation supérieure se propagera dans tous les fichiers utilisant cette bibliothèque de symboles. Si vous décidez de changer la couleur, les fichiers de Neha et de Kevin seront mis à jour et auront la bonne navigation en haut. Si votre équipe de projet ou équipe de conception a le problème où toutes vos maquettes sont légèrement différentes et que cela peut causer de la confusion avec vos équipes d'ingénierie ou causer de la confusion et au sein de votre propre équipe, l'utilisation de votre bibliothèque de symboles peut vous aider à vous assurer que tous les membres de l'équipe tirent des mêmes éléments et à créer ainsi une conception plus cohérente dans l'ensemble de votre entreprise. Le dernier élément est qu'il vous aide à prototyper plus rapidement et plus efficacement. Je ne sais pas pour vous, mais je reçois toujours des commentaires de différentes personnes au sein de l' équipe de conception, de l'équipe produit et des parties prenantes. Parfois, j'entends quelque chose de notre équipe d'ingénierie sur ce qui est plus difficile à construire et je dois faire des ajustements ou ce qui ne correspond pas aux données que nous utilisons et avant de commencer à utiliser des symboles, je voudrais doivent constamment changer plusieurs éléments sur chaque page chaque fois que j'ai des commentaires. Je créais aussi beaucoup d'éléments encore et encore et encore. Il n'y avait pas vraiment un bon endroit pour les garder et je tirais de vieux fichiers et toutes ces choses contribuent à ralentir votre prototypage. Rendre plus difficile pour vous de créer des filaires et maquettes et de les mettre entre les mains des utilisateurs afin que vous puissiez faire vos tests. Donc, si vous avez une bibliothèque de symboles, vous avez tous ces éléments que vous pouvez simplement tirer au besoin. Ils seront vraiment faciles à redimensionner, à modifier si vous voulez apporter des modifications et cela aide à accélérer l'ensemble du processus de conception, d' itération, etc. 3. Créer un symbole: Allons dans la collection de la bibliothèque de symboles minutieux. Si vous avez un guide de style à différents composants comme les boutons et les champs de formulaire, alors vous avez déjà une longueur d'avance et créer une bibliothèque, va être beaucoup plus facile. Quant à moi, je crée souvent des symboles comme j'en ai besoin. Je vais travailler sur une maquette, en ajoutant également des symboles, je vais éditer ces symboles déjà sur mes maquettes. La première chose que je veux faire est d'ajouter des couleurs en tant que symboles. C' est super facile et nous allons apprendre les bases. J' ai déjà cette palette de couleurs ici. Pour créer un symbole, tout ce que vous avez à faire est de sélectionner ce que vous voulez être dans ce symbole. Donc celui-ci est rectangle copie 13. Je ne l'ai pas renommé. Vous n'avez pas besoin de le renommer non plus parce que nous pouvons le nommer quand nous créons le symbole. Tout ce que vous pouvez faire avec ce symbole est juste de cliquer sur ce que vous voulez être dans le symbole. Dans ce cas, un seul élément. Ensuite, je veux faire un clic droit et ouvrir ce menu et je vais descendre pour créer un symbole. Pour l'instant, je vais appeler ça noir. Je peux nommer mon symbole comme je veux ici. [ inaudible] en nommant un peu plus tard, puis je vais aider à organiser votre bibliothèque, mais pour l'instant gardons les choses simples et nous allons simplement l'appeler noir. Ensuite, il y a ce bouton, envoyer le symbole à la page des symboles. Je vais garder ça vérifié. Cela va créer pour nous une page qui contient tous nos symboles. Tout ce que je vais faire, c'est cliquer sur « OK ». Maintenant, quelques choses ont changé. Vérifions ça. Sur le côté gauche, vous pouvez voir énorme rectangle copie 13 dit noir, et c'était le nom que nous avons choisi pour notre symbole. Vous savez que c'est un symbole parce qu'il a cette icône avec les deux flèches. C' est l'icône des symboles. Quoi d'autre a changé. Sur le côté droit, nous pouvons voir cette zone de symbole. Je peux le fermer si je veux. C' est là que vous pouvez échanger des symboles. Si j'ouvre ceci, il me montre tous les symboles que j'ai dans ma bibliothèque de symboles. Nous venons de faire notre premier, donc nous n'avons qu'un seul symbole et c'est la couleur noire. Je peux faire quelques choses ici, mais j'y arriverai un peu plus tard. Enfin, nous avons la page des symboles et c'est là que vivent tous nos symboles. Si nous cliquons dessus, vous pouvez voir cette page et nous avons essentiellement un plan de travail et tout ce qui est sur le plan de travail est juste cette couleur noire. Nous avons du noir mais nous voulons ajouter les autres couleurs. Je vais revenir à ma page 1. Sauf si vous ajoutez le reste de ces couleurs, cliquez avec le bouton droit de la souris sur Créer un symbole. On appellera ça gris 4 et on ira ici, et j'appellerai ça gris 3. Voyons à quoi ressemble la page simple. J' ai toutes mes couleurs, toutes empilées ici et elles sont nommées. Ensuite, nous les verrons à gauche. Tous les plans de travail avec les rectangles. Si je vais à ma page, je peux voir tous ces symboles parce qu'ils ont les doubles flèches. Dans la leçon suivante, nous allons utiliser ces symboles colorés pour rendre notre design plus flexible. 4. Ajouter et retoucher les symboles: Nous avons ces symboles qui vivent sur notre page de symboles. Mais lorsque nous les utilisons dans une autre page, ils sont appelés Instances. Voyez que vous pouvez avoir plusieurs instances d'un symbole, et c'est l'idée. Il y a une source de vérité qui vit sur la page des symboles. Vous pouvez modifier des éléments sur une page de symbole et mettre à jour partout où il y a une instance de ce symbole dans votre document. Même lorsque nous approfondissons les bibliothèques de symboles, il peut s'enchaîner sur plusieurs documents. Passons à notre document. Vous pouvez voir que j'ai cet en-tête gris plus foncé que je veux utiliser l'un de mes grands symboles de couleurs à la place. Je vais supprimer cet en-tête, et je veux aller en haut à gauche et descendre aux symboles. Je peux voir tous ces symboles dans mon document ici, ils sont noirs, saleté pêche. Je voulais Gray aussi, alors je vais mettre sur cette place. Vous pouvez voir dans ma page d'accueil, j'ai mon symbole gris deux. Je vais prendre ça, et je vais juste le traîner à la taille que je veux. Alors je vais l'envoyer à l'arrière pour qu'il soit en dessous. Ce que je peux faire maintenant, c'est deux choses. Maintenant que c'est simple, pour ma part, je pourrais éditer ce symbole et je pourrais changer cette couleur. Je peux double-cliquer sur n'importe quel symbole et me mène directement à la page des symboles et à ce symbole. Je peux entrer, cliquer sur le rectangle, aller ici pour remplir, et je peux le changer en bleu vif. Ensuite, je peux revenir à l'instance. Maintenant, mon en-tête est bleu, mais je vais annuler cela parce que j'aime la couleur [inaudible]. On y va, on l'annule, on le renvoie. Une autre chose que je pourrais faire est de tirer de toutes les couleurs que nous venons de créer ici en tant que symboles. Je peux cliquer dessus et je peux aller à la zone de symbole. Cliquez sur la « liste déroulante », et je peux choisir parmi n'importe quelle couleur que je veux avoir un en-tête pêche, en-tête pêche foncée. Cela me donne la flexibilité de m' amuser et de voir comment les choses fonctionnent d'une manière très légère. J' ai quelques icônes ici. J' ai cette icône utilisateur qui est étoile flèche déroulante que je veux transformer en symboles afin de pouvoir les utiliser dans mon projet. La première chose que nous allons faire est de cliquer sur mon icône, cette icône en étoile. Je vais faire un clic droit et créer un symbole. Appelons ça statique. Mais je ne veux pas que cette icône soit noire, je voulais peut-être des couleurs différentes dans des endroits différents. Je vais entrer dans ce symbole, double-cliquez dessus. Je vais faire quelque chose appelé symbole Inception, où je prends un symbole et je le mets dans un autre symbole. Ça a l'air déroutant, mais c'est super puissant et je vais vous aider à le traverser. Ce que je veux, c'est que ce symbole soit une certaine couleur. Je vais monter ici, petit mes symboles. Je veux que ce soit de la pêche noire. Carré Spiegel, arrachez-le. En fait, je fais juste la taille plus petite, donc ça ne gênera pas le chemin. Ça n'a pas besoin d'être parfait. Maintenant, ce que je vais faire, c'est déplacer ce dossier. Je veux que tout soit hors des dossiers. Je vais le dégrouper sélectionner à la fois cette forme d'étoile et cette couleur. Je vais cliquer avec le bouton droit de la souris, et je vais aller au masque. Maintenant, ce que j'ai c'est ma couleur de pêche foncée avec un masque d'étoile au-dessus. Vous pourriez dire, « Tina, pourquoi n'as-tu pas changé la couleur de l'étoile ? Vous auriez pu simplement cliquer sur l'étoile vectorielle, changer la couleur notée en très facile. » Je le fais certainement parfois, il y a des symboles que je ne vais pas changer de couleur si souvent. Je peux venir ici et le changer partout où je veux qu'il soit. Mais je vais te montrer pourquoi j'ai fait ça. Je vais revenir à l'instance, et maintenant j'ai ma star de pêche. Maintenant, je peux aller ici et je peux ajouter plus d'étoiles dans mon document, voir icône étoile. Ou je peux maintenir Shift, glisser, faire quelques étoiles de plus. Elles sont toutes reliées à cette icône d'origine. Vous pouvez voir ici est une icône d'étoile. Le livre était bon mais pas génial et seulement vraiment obtenu quatre étoiles. Si vous regardez ici, pour remplacer. C' est là que vous pouvez éditer une instance d'un symbole de manière très particulière, en fonction de la façon dont vous l'avez construite. Pour le texte, vous pouvez remplacer et y placer un texte différent. Pour cette icône, je peux remplacer cette couleur et ajouter une couleur différente. C' est le même symbole, la même icône d'étoile. Pour ce cas, c'est une pêche légère si je le voulais, je pourrais ajouter plus d'étoiles. Ils peuvent être n'importe quelle couleur que nous avons ajoutée. De cette façon, quand vous faites vos maquettes, vous pouvez échanger les couleurs des choses. Cela vous donne vraiment beaucoup plus de flexibilité. C' est vraiment facile d'essayer différentes choses, et c'est une grande partie du prototypage. Vous voulez être en mesure de réagir aux commentaires des parties prenantes, nous devons utiliser vos commentaires, changer les choses à la volée. Si vous avez une bibliothèque de symboles vraiment robuste que nous allons construire, vous pouvez apporter ces modifications très facilement. 5. Redimensionner les symboles: Bienvenue dans cette leçon sur le redimensionnement des symboles. On y est allés et on a fait quelques symboles. Nous avons nos couleurs ici, tous nos symboles et ensuite nous avons une icône. Si nous revenons à notre fabricant, il était vraiment facile pour nous de cocher un symbole de couleur grise, étirer et de le faire dans notre en-tête. Une fois que vous commencez à entrer dans des symboles plus complexes comme du texte sur un bouton, par exemple , ou un champ de formulaire, quelque chose qui combine plusieurs éléments, vous voulez vraiment apprendre à redimensionner et vous assurer que vous le faites correctement. La valeur qui vient de la possibilité de redimensionner les symboles est que vous pouvez créer de la cohérence au sein de votre équipe. Vous pouvez vous assurer que tous vos boutons sont de la même hauteur, vous pouvez vous assurer qu'ils sont tous de la même largeur. Vous pouvez vous assurer que toutes vos icônes restent dans le bon rapport d'aspect. Ce sont des choses qui faciliteront la tâche pour toute votre équipe de rester alignée. Essayons de redimensionner avec ce bouton que nous avons ici. Nous avons ce bouton Ajouter une mise à jour et à partir de maintenant, je vais sortir l'icône pour rendre les choses un peu plus faciles pour nous. Commençons par un bouton centré. J' ai mon texte et j'ai ma forme. Pour faire ce symbole, je vais sélectionner les deux. Je vais cliquer avec le bouton droit de la souris, créer un symbole. Appelons le bouton. Voyons ce qui se passe maintenant qui est un symbole lorsque nous essayons de redimensionner. Il arrive des choses bizarres. On peut faire ce bouton vraiment gros. On peut le faire inverser. On peut faire un tas de choses. Pour certains éléments, un comportement comme celui-ci est génial. Mais pour ce bouton, nous voulons nous assurer qu'il est toujours de la même hauteur et que le contenu reste au bon endroit. Je vais double-cliquer pour modifier ce symbole. C' est de retour à la taille qu'il était parce que lorsque nous avons créé ce symbole, nous avons spécifié que ce serait cette hauteur et cette largeur. abord, je vais ajouter dans une instance de ce symbole. Juste pour qu'on puisse regarder ce qui se passe quand on change les choses. Je veux aller au document et trouver mon bouton. Je vais juste le mettre juste en dessous pour que vous puissiez regarder ce qui se passe. Laisse-moi juste rapidement étiqueter ça pour ne pas être confus. Assurez-vous que vous savez que c'est le symbole. La première chose que nous voulons faire est de nous assurer que pour ce bouton, je veux toujours qu'il soit de la même hauteur. Je ne veux pas que ce soit 50 pixels à certains endroits ou 30 pixels à d'autres endroits. Je veux ce 41. Faisons 40 juste pour rendre les choses un peu plus faciles. J' ai juste rétréci un peu le tableau d'art pour le rendre en forme. Maintenant, nous avons un bouton de hauteur de 40 pixels. Ce que je veux faire, c'est que je veux aller de côté. Ça dit le redimensionnement. J' ai quelques options différentes ici. Nous avons broche à bord, nous avons une taille fixe et Sketch a cette façon vraiment cool de voir ce qui va se passer lorsque vous développez ou rétrécir votre symbole, selon ce que vous sélectionnez. Les choses que vous pouvez sélectionner ici, vous pouvez sélectionner ce haut, cette gauche, en bas, et la droite et épingler à bord, ou vous pouvez sélectionner tout, si vous cliquez au milieu, désélectionnez, vous cliquez dans le milieu aussi. Vous pouvez également fixer la taille verticalement ou la fixer horizontalement, ou fixer la taille des deux en fonction de l'endroit où vous cliquez. Si vous cliquez au milieu, il fixera la taille dans toutes les directions. Si je fais un élément et que je veux toujours qu'il reste la même hauteur, développez ce bouton afin que nous puissions voir comment les choses changent. Pour mon bouton, je veux que la largeur soit flexible. Je veux pouvoir être un bouton large s'il y a beaucoup de textes, je veux qu'il soit plus court pour moins de textes. Je veux toujours que la hauteur soit de 40 pixels. Je vais passer ici à Fix Size, et je vais corriger le contenu verticalement. Maintenant, vous pouvez voir sur notre instance du bouton, que même si j'avais fait glisser ce bouton pour être plus grand, le bouton mesure toujours seulement 40 pixels de hauteur, mais nous pouvons aussi voir que lorsque vous développez ce bouton, il est centré dans cette boîte, ce qui rendrait difficile l'alignement. Vous pouvez voir que les guides rouges se concentrent sur la zone rectangle et non sur ce rectangle arrondi, le bouton pêche. Ce n'est pas ce que je veux non plus. Nous avons la hauteur, mais je veux aussi que ce bouton tienne le bord supérieur gauche afin qu'il soit plus facile à aligner. C' est là que l'autre option de redimensionnement, Pin to Edge, est très pratique. Nous avons le haut, le bas, la gauche et la droite. Cela vous permet essentiellement de sélectionner un élément dans votre symbole et vous pouvez avoir cet élément étreindre un bord différent. Vous pouvez l'avoir avec juste la droite, vous pouvez l'avoir embrasser en bas à droite. Vous pouvez l'avoir embrasser l'extrémité supérieure droite en bas pour tous les bords. Jouons et voyons ce que sont ces différents effets. Si je tenais le haut, je peux voir ça ici, mon rectangle a sauté au sommet de la boîte. Si je embrasse le fond, il saute au fond de la boîte. ce moment, parce que notre rectangle n'est pas une largeur fixe, il s'étend à la pleine taille du conteneur, donc cela ne fait pas vraiment de différence si nous embrassons le côté gauche ou droit. Lorsque je fais des éléments, j'utilise beaucoup d'alignement en haut à gauche ou en haut à droite pour les choses. Si je prends ce rectangle, je vais l'avoir en haut à gauche et maintenant que je commence à redimensionner ce bouton, vous pouvez voir que la forme du bouton reste la même hauteur et au bon endroit. Mais notre texte fait encore quelque chose de drôle. Je veux que ce texte soit centré, donc je vais cliquer sur le texte et je vais passer à l'alignement et m'assurer qu'il est centré dans la zone de texte. Je veux que ce texte reste avec le bouton, mais reste au centre du bouton, je vais épingler ce texte en haut. Maintenant, quand je l'épingle en haut, je peux étendre mon bouton ou même rétrécir mon bouton, et mon texte reste là où je voulais qu'il aille, et j'ai mon bouton exactement comme je voulais. Lorsque vous modifiez un symbole, gardez à l'esprit que chaque élément de votre symbole peut avoir ses propres paramètres de redimensionnement. Vous avez également des paramètres pour le symbole dans son ensemble. Si je clique sur le tableau et juste que je sélectionne le bouton. Maintenant, je peux changer si je veux ajuster le contenu lors du redimensionnement, ce qui est utile, puis je peux également activer ou désactiver le remplacement. Nous avons vu le remplacement un peu avec notre symbole d'étoile, où dans une instance de l'étoile nous pouvions changer la couleur. Pour ce bouton, le seul remplacement que nous avons actuellement est de pouvoir modifier ce texte. Vous pouvez voir qu'il est dit, « Ajouter une valeur de texte de mise à jour », avoir ce clic nous permettra de changer le texte du bouton n'importe où dans notre projet. Je vais vous montrer à quoi ça ressemble. Si je vais ici à l'instance du symbole, je ne l'ai pas remplacé, cela me permet de changer le texte dans le bouton. Je peux dire « Ok » ou « Save ». Si je ne veux pas qu'il ait de texte, et cela est très pratique pour faire un symbole où parfois il y a du contenu et parfois il n'y en a pas, vous pouvez ajouter un espace. Cela va juste s'assurer que le texte est vide. J' ai ce bouton, mais revenons à la marque. À l'origine, je voulais avoir une icône plus sur mon symbole. Quand je vais copier cette icône que je voulais, je vais double-cliquer sur ce symbole. Je veux avoir la possibilité d'avoir un bouton qui est juste du texte, mais je veux aussi avoir ce bouton plus. Je vais dupliquer ce bouton, je peux aller ici et je peux dire « Dupliquer ». Vous pouvez également cliquer sur le symbole, auto-dupliquer, là nous allons. J' ai un bouton ici et j'ai la copie du bouton, puis j'appelle ce bouton plus, coller dans l'icône. Je veux que l'icône reste sur le côté gauche du bouton, et je veux que ce bouton accroche sur le côté gauche. Je vais, épingler sur le bord gauche. Je vais également ajouter, l' instance du bouton juste pour que vous puissiez regarder ce qui se passe. J' ai cette icône plus mettant le côté gauche, voyons ce qui se passe lorsque je développe le bouton. J' ai la bonne position, mais ce qui se passe, c'est que je développe le bouton, l'icône se déforme. Ce que je veux faire, c'est que je veux venir ici à cette icône et je vais corriger la taille parce que peu importe comment je la redimensionne, je ne veux pas que cette icône devienne plus grande, plus large, plus tirée de toute façon. Donc je vais juste cliquer sur le centre, ça va corriger la taille. Vous pouvez voir dans notre cas que l'icône s'accroche à la bonne taille. Mais quand vous regardez le texte, le texte est séparé du bouton d'une manière bizarre et y pénètre également. Au lieu que le texte soit centré, je veux que le texte soit aligné à gauche. On va l'aligner là, et je vais aussi épingler le texte sur le côté gauche. De cette façon, l'espace entre cette icône et ce texte est toujours le même, peu importe comment je développe le bouton. Laissez-moi juste réajuster ça un peu. Nous voulons le rendre un peu plus petit, et je veux que la planche soit de la même taille. Vous pourriez rencontrer cela parfois, j'ai cette case à cocher qui dit « Ajuster le contenu lors du redimensionnement », et c'est pourquoi quand je change la taille de la carte, il ne rétrécit pas notre carte pour coïncider avec la fin de ce rose bouton. C' est juste l'étirer. Ce que vous devez faire est de décocher cela. Maintenant, il vous permettra de rétrécir toute la planche afin qu'elle épouse le bord du bouton. Voyons ce qui se passe maintenant au bouton quand il dit ajuster le contenu au redimensionnement et que c'est l'objet, cela fonctionne toujours. Je passe beaucoup de temps à tester mes symboles pour m'assurer que le redimensionnement fonctionne correctement. Tu n'auras peut-être pas le premier essai, c'est bon. Je vais aller ici et changer ce texte, puisque c'est le bouton Ajouter. Je vais juste faire ça, dire « Sauvez ». Si nous revenons à notre dossier, laissez-moi me débarrasser de ce signe plus, nous avons notre bouton régulier que le premier que nous avons fait ce changement pour dire « Enregistrer ». Mais maintenant, je veux utiliser le bouton plus. Ce que j'ai dû faire, c'est aller ici à la liste déroulante de mon symbole et je vais le changer en bouton plus. Que s'est-il passé ici ? La zone de symbole du bouton que nous avons échangé est étendue à cette hauteur. Quand j'ai fait ce symbole, j'ai eu cette icône embrasser le côté gauche, mais elle n'a pas embrassé le haut à gauche. Donc, il est en proportion du côté gauche du bouton, mais pas en proportion du haut. Je vais y retourner et arranger ça. Je vais double-cliquer, et je vais sélectionner cette icône et je vais l'épingler en haut aussi. Revenons voir si ça l'a réparé. Parfois, si vous remplacez un symbole par un autre, peut-être que c'est un symbole plus grand remplacé par un symbole plus petit ou un symbole plus petit remplacé par le plus grand symbole, les choses peuvent sembler un peu funky. Il suffit d'entrer et de cliquer avec le bouton droit sur le symbole et descendre à la taille d'origine, puis je vais le réduire jusqu'à la taille du symbole. Je vais aussi tirer ça dans un petit peu. Nous avons donc notre bouton Ajouter une mise à jour, et c'est un symbole. Nous nous rapprochons de la simplification de cet objectif macro. 6. Créer des symboles complexes: Bon, maintenant on va travailler sur un symbole plus complexe. J' ai ici cette nouvelle colonne de recommandations. Ce rectangle, je veux que ce soit pour montrer les couvertures de livres, il y a du texte pour le titre, l'auteur. J' ai une ligne de séparation ici. Alors j'ai qui me l'a recommandé. Voici un endroit pour une photo de quelqu'un, puis le nom de l'ami et un autre séparateur. Lorsque vous créez des symboles, c'est à vous de décider du nombre d'éléments que vous souhaitez transformer en symboles. Nous pouvons le décomposer jusqu'au point où chaque morceau de texte de ce symbole et travailler votre chemin jusqu'à rendre vos symboles vraiment larges aussi. Je suis généralement quelque part entre les deux et au fur et à mesure que vous traversez, vous apprendrez quels éléments sont les symboles les plus utiles et d'autres. Nous allons faire quelques symboles à partir de cela, je vais faire de cette ligne de séparation un symbole, va augmenter le symbole ici. Je veux utiliser ce symbole de lignes de séparation aussi pour cette ligne de séparation. Je vais supprimer celui-ci, puis faire glisser celui-ci vers le bas. Maintenant, c'est assez bon. Je vais prendre tous ces éléments maintenant. Sélectionnez-les tous et faites-le en un seul symbole complexe. Je vais cliquer avec le bouton droit de la souris, « Créer un symbole » pour être. Maintenant, j'ai mon symbole. Je peux faire glisser plusieurs, je vais tourner ma page. Ils sont très génériques en ce moment. Il dira « Titre du livre », « Auteur » et je n'ai pas de photos. Mais il y a un plugin appelé Craft, fait par Envision, et c'est vraiment pratique. J' ai ce plugin installé et il me donne ces options sur la droite. Un qui est vraiment soigné pour utiliser les symboles est les données. Avec un autre onglet de données, vous verrez tous ces différents types de données, certains d'entre eux que j'ai ajoutés, mais ce sont les génériques. D' abord, je veux faire les couvertures de livres. Je suis entré et j'ai fait un dossier, en tirant des photos sur Internet d'un tas de couvertures de livres et je l'ai tiré dans Craft. Je suis allé dans ma section photo et j'ai ajouté un dossier et je l'ai appelé Couverture de livres. Tout ce que je pouvais faire, c'est sélectionner mes instances du symbole et aller ici pour les couvertures de livres. Maintenant, il m'a demandé quelle mise en page dans ce symbole je veux remplir. Je n'ai pas fait le travail de nommer mes symboles, je suis désordonnée de cette façon. Mais si vous deviez les nommer, ce serait beaucoup plus facile. Parce que c'est une image, ça me montre seulement quel contenu pourrait être rempli par une photo. J' ai un rectangle, et ovale, et deux lignes. Les deux lignes sont les lignes de séparation que nous avons créées. L' ovale est ce cercle et le nom d'ami supplémentaire, et le rectangle est la zone que je voulais pour les couvertures de livres. Je vais sélectionner « Rectangle Copy 6 », je vais frapper « Ok ». Il a tiré trois couvertures de livres au hasard de ma liste. Étape peut se moquer peut sembler un peu plus réel. Maintenant, je peux entrer dans mon symbole et regarder mes remplacements. L' image a déjà été remplacée à l'aide de Craft. Mais je peux remplacer le titre du livre pour correspondre à l'image maintenant. Vous pouvez voir que ce contenu a été mis à jour. Je vais juste passer par là et finir le reste de tout ça. Je n'aime pas la hiérarchie entre le titre et l'auteur. Je vais entrer dans mon symbole, je ne suis pas habitué à cela, éditer ça un peu. Je vais faire ce médium, pas assez, le rendre lourd. Je vais faire le texte de l'auteur. Ça peut être une couverture, voyons à quoi ça ressemble. Bien mieux, le titre se démarque beaucoup plus. Je vais même rendre l'auteur un peu plus petit. D' accord. Nous avons aussi un dossier amis photos, et je peux ajouter ici. Je vais sélectionner à nouveau les symboles. [ inaudible]. Va ici. Je vais ajouter ce dossier. Cette fois, je veux remplacer l'ovale. Ces photos ne se distinguent pas assez. Je vais y ajouter une petite bordure. Liste les noms d'amis. Les noms sont un peu loin des images, donc je peux juste revenir dans mon symbole, peut fusionner ça. Espérons qu'il est facile d'apporter des modifications lorsque vous utilisez des symboles. Quelque chose que nous pouvons faire à cause de la façon dont j'ai construit ce symbole, c'est que je ne peux désactiver aucune de ces lignes de séparation. Si je ne veux pas que la dernière image ait une ligne en dessous. Ceci est vraiment utile pour les tables, les accordéons, beaucoup de lignes répétées, je peux cliquer dans cette instance et je peux aller sur la ligne de séparation. Je crois que c'est la copie. En fait, vous pouvez voir qu'il met en évidence le bleu quand je survole, et je veux sélectionner, « Aucun ». Juste pour ce cas, il n'y a pas de résultat. C' est parce que j'ai construit ces lignes en tant que symboles et les ai incluses dans le symbole afin que je puisse le remplacer. Avec cela, nous sommes un pas de plus vers une superbe bibliothèque de symboles. 7. Nommer et Organisation: Je suis allé de l'avant et j'ai ajouté quelques symboles supplémentaires et nous pouvons les regarder ici. Mais c'est devenu un peu désorganisé, tu ne crois pas ? Les éléments velars sont tous mélangés et il y en a beaucoup. Je vais vous montrer comment mieux les organiser. Ce que vous voulez faire est d'aller à notre page de symboles et la façon dont esquisser les symboles est d'utiliser une barre oblique dans le titre. Vous nommez le groupe que vous voulez. Pour cette première colonne, je vais faire un groupe de couleurs. Slash de couleur, puis vous nommez la barre oblique de couleur ou d'icône et nommez l'icône. Ensuite, je vais au noir et je le nomme, couleur slash noir et aller à notre gris et nommez-le, couleurs slash gris-4. Je suis juste en train de renommer le [inaudible]. Vous pouvez cliquer sur [inaudible] dans la gauche, ou vous pouvez cliquer avec le bouton droit, « Renommer », et maintenant regardons ce qui se passe. Il y a les documents et nous voyons, maintenant nous avons un groupe de couleurs, c'est noir et gris. Je peux faire la même chose avec les icônes. Je peux appeler cette icône slash star. Voici notre icône de recherche, appelez-le icône Slash search. Maintenant, quand je monte ici, vous pouvez voir que j'ai ces icônes. Celui-ci que j'avais déjà nommé et je peux aussi le faire. Je veux faire un groupe d'entrées effectue et des choses comme ça. recherche de barre oblique d'entrée et dans la case à cocher fait partie de nos entrées, donc je vais faire la barre oblique de la case à cocher d'entrée décochée. C' est l'état de la case à cocher. Je vais nommer celui-ci, barre oblique d'entrée coche cochée. Ce que cela veut dire, c'est que je veux un groupe de symboles qui sont toutes les entrées, alors je veux grouper seulement les cases à cocher, puis cet appel à la vérification d'état spécifique là, décoché. Vous allez ici, allez à mes symboles, allez à l'entrée, et j'ai ma recherche, et j'ai aussi la case à cocher, et je peux choisir coché ou non coché. Nommer vos symboles est pratique pour l'organisation, mais il aide également à trier tous vos prototypes. Prenons deux symboles. Nous avons notre case à cocher, non cochée, et je vais aussi tirer sur notre bouton radio et le sélectionner. De travailler sur un flux de travail, et je veux afficher une case à cocher, décochée, puis cochée. Je peux aller ici, cliquer sur la « Checkbox », aller sur mon symbole et le côté droit, et je peux choisir et juste le changer à coché. Mais si je ne nomme pas mes symboles et ne les organise pas d'une manière facile d'accès, quand je vais ici pour changer mon bouton radio pour dire qu'il a été sélectionné, je fais simplement défiler tous les symboles pour sélectionner le bouton radio sélectionné. attribution de noms est utile pour l'organisation, pour vous et votre équipe pour comprendre comment trouver ce que vous cherchez, mais il est également utile pour le prototypage et s'assurer que vous pouvez vous déplacer très rapidement lorsque vous itérez. Maintenant, je veux passer par et renommer tous ces symboles. Je suis de retour après avoir renommé tous mes symboles et vous pouvez voir qu'ils sont tous bien organisés en groupes. Mais sur ma page de symboles, rien n'est vraiment regroupé comme ça pourrait être pour le rendre plus facile. J' ai utilisé ce plugin vraiment cool appelé organisateur de symboles. Tout ce que vous devez faire est de configurer l'organisateur de symboles. Il existe différentes options pour regrouper vos symboles. Vous pouvez afficher les titres sur les symboles, vous pouvez changer l'espacement, et je vais vous montrer ce qui se passe. Organisons et maintenant, tous mes symboles sont regroupés sous ces en-têtes, et les en-têtes correspondent à ces dossiers que nous avons créés. Maintenant, quand je regarde ma seule page, il est vraiment facile de trouver ce que je cherche. Ajoutez quelques informations de ce plugin au cours, et au fur et à mesure que vous créez de nouveaux symboles, tout ce que vous avez à faire est d'aller à votre simple organisateur, de lancer votre simple organisateur et tout se regroupera comme vous le souhaitez. 8. Utiliser votre bibliothèque: On a un tas de symboles. Nous avons construit notre bibliothèque, nous l'avons nommée, nous l'avons organisée. Maintenant quoi ? C'est la partie la plus courte et la plus facile de tout ce que nous faisons. Disons que vous êtes entré et que vous avez créé toute votre bibliothèque de symboles. Peut-être que c'est juste pour vous de l'utiliser, peut-être que c'est pour vous et votre équipe, et que vous voulez le mettre dans quelque chose sur lequel vous travaillez, afin que vous puissiez utiliser tous les symboles que vous avez créés. Je vais créer un nouveau fichier d'esquisse. Vous pouvez également l'extraire dans n'importe quel fichier d'esquisse existant. Allez dans « Sketch », « Préférences », et vous avez tous ces onglets. Nous allons aller à « Bibliothèques », et nous allons à « Ajouter une bibliothèque ». Je vais trouver le fichier que nous avons créé pour construire cette bibliothèque. On l'appelait la bibliothèque des symboles. Vous pouvez voir que ce sont nos balises et quelques symboles. Puis je l'ouvre, et maintenant c'est vérifié. Ce que cela signifie d'être vérifié, c'est que si je passe ici à mon plus, j'ai la possibilité d'utiliser tous ces symboles que j'ai créés dans un autre document. Voici m couleurs. Maintenant, je peux utiliser cette bibliothèque que nous avons créée à plusieurs endroits. Si jamais je veux éditer quelque chose. Donc, si je veux prendre créer deux et je veux le changer en un gris différent. Je peux double-cliquer et j'obtiens ce menu, dit que le symbole appartient à une bibliothèque externe, les bibliothèques externes étant le fichier que nous avons créé. Je peux soit le dissocier de la bibliothèque, donc il n'est plus connecté de cette façon ou je peux l'ouvrir dans ce document. Si vous avez accès au document, il l'ouvrira pour vous. Ça nous amène au symbole. Je peux aller ici et je peux changer la couleur légèrement si je veux. Je vais le faire peut-être un gris plus foncé, et ça me dit que ce document est une bibliothèque. Je peux le sauver. Donc j'ai juste Apple S, je l'ai sauvé. Si j'ai retourné mon nouveau document, j'ai cette mise à jour en haut à droite. Il dit que les mises à jour de bibliothèque sont disponibles Je vois qu'il y a eu un changement. J' avais cette vieille couleur, c'était le gris clair. Maintenant, la nouvelle couleur est le gris et je peux choisir de mettre à jour cela et m'assurer que ma bibliothèque est à jour. Si je suis dans un fichier et que je ne veux pas utiliser cette bibliothèque, je peux y aller et je peux le décocher et il ne s'affichera pas dans ma gauche. Vous pouvez voir ici cependant, puisque j'ai ajouté dans ces symboles en tant que symboles, ils collent dans mon document même si je dissocie cette bibliothèque. Mais si je le retire et que je le relie à nouveau, ils retournent directement dans la bibliothèque de symboles. 9. Utiliser des symboles à l'échelle des facteurs de forme: J' ai parlé de la façon dont les symboles rendent votre prototypage plus rapide. Je voulais juste vous montrer comment vous pouvez prendre une maquette que peut-être c'est bureau et convertir en une page mobile. Les symboles, ça peut être beaucoup plus facile. J' ai cette page de profil qui n'est pas vraiment construite. J' ai reporté notre en-tête, je pourrais même en faire son propre symbole à un moment donné, et je vais ajouter des champs. Celle-ci que je veux appeler, dire nom, e-mail. Je veux en faire une qui concerne vous. Vous pouvez voir que je n'ai pas encore travaillé sur le redimensionnement de ces symboles. Il y a un espace entre le nom et le côté gauche du symbole, j'ai juste besoin d'entrer et je vois que le texte est centré et non aligné à gauche ici dans la zone d'alignement. Je vais cliquer dessus. On y va. J' ai ceci à propos de vous entrée mais ne nous donne pas beaucoup de place à taper. Je veux faire un nouveau symbole qui est une zone de texte plus grande. Ce que je peux faire, c'est prendre une instance d'un symbole et le détacher, puis faire un nouveau symbole. Je veux que vous cliquiez sur ce « À propos de vous » Je veux descendre à « Détacher du symbole ». Si nous regardons à gauche, c'est un dossier, pas un symbole parce que nous n'avons pas l'icône double flèche. De là, je vais faire ça, je ne vais pas dégrouper ça pendant une seconde. Je veux agrandir quelque chose comme ça. Je vais regrouper cela, cliquez avec le bouton droit de la souris, « Créer un symbole » l'appeler entrée/grand texte. J' ai aussi cette photo de profil, modifier l'option d'image. Prenons cette page de profil de base et voyons à quoi elle ressemble sur mobile. Je sais qu'il y a aussi un mobile de travail d'abord, la conception d'abord sur mobile, puis de bureau. Je vais prendre ce titre, et je veux qu'il soit centré sur cette page. Ensuite est la photo de profil, j'ai envoyé à cela aussi. Je vais tirer dans ses champs. Vous pouvez voir que ce champ est un peu trop long pour que je puisse l'encaisser pour qu'il s'adapte mieux. Voyons voir. Je ne peux pas ajuster sa taille en ce moment, mais c'est peut-être quelque chose que je veux faire, donc je vais entrer et modifier mon symbole et je l'ai à une hauteur fixe. Je vais décocher ça. Maintenant, cela devrait me permettre d'étendre cela autant que je le veux. Quelque chose que je n'ai pas ajouté à ces entrées que je recommande vraiment, voyons, je vais éditer ceci et je vais ajouter du texte. Infos sur le champ. Je vais fixer la hauteur, mais je veux que ça puisse être aussi longtemps que je veux remplir l'espace. Je veux ajouter le champ supérieur à gauche. Maintenant, je reviens. J' avais ces champs modifiables. Je peux dire par nom et dire, Tina Musich, c'est moi. E-mail. Si je voulais simuler un profil vide, entrons ici et ajoutons simplement un espace à mon texte de champ. Ajoutez un espace ici et il s'affichera vide. Je vais dans cette image et je peux en faire un symbole si je le voulais. On va changer ça en gris. Tout comme ça, j'ai un exemple de profil non modifié et un profil modifié et j'ai la version de bureau. 10. Il est temps de passer au projet !: Maintenant que vous avez le bas et la création de la bibliothèque d'assemblage, il est temps de mettre vos compétences au travail. Prenez un projet sur lequel vous travaillez et essayez de convertir certains de ces éléments en symboles. Entraînez des symboles avec des symboles pour rendre les choses encore plus puissantes. Incluez le fichier à utiliser au cas où vous auriez besoin de quelque chose à symboliser. Vous avez des questions ? S' il vous plaît poster dans le conseil de la communauté et je vais vous aider. Lorsque vous avez terminé, n'oubliez pas de partager vos bibliothèques, alors soyez tous peuvent les consulter. Sois à voir ce que tu as fait.