Créer des symboles complexes dans Sketch : Conseils et astuces

1. Introduction: Bonjour, je suis Karen, et je suis concepteur de produits à Panorama Education. Je suis concepteur professionnel depuis plus de 10 ans, et j'ai conçu une variété d'expériences numériques, y compris des APS mobiles, y compris des APS mobiles sites Web et des applications Web. J' ai également enseigné d'autres cours de partage de compétences sur vous ex dans le passé, en utilisant Photoshopped comme outil de choix. Mais depuis lors, je me suis entièrement converti à l'utilisation de croquis, et j'ai adoré apprendre à utiliser des symboles pour optimiser vraiment mon processus de conception. Dans cette classe, je vais vous montrer comment vous pouvez créer des symboles vraiment puissants pour concevoir mawr de manière efficace et cohérente. Je vais vous guider à travers la construction de différents composants. utilisation de symboles complexes fera une variété de boutons, une barre de navigation et un composant motile polyvalent. Je vais également partager beaucoup de trucs et astuces que j'ai appris en cours de route pour votre projet de classe . J' aimerais que vous créiez un ensemble de symboles complexes. Vous pouvez soit suivre avec moi et recréer ces exemples ou essayer les vôtres. Commençons 2. Commencer avec des Symboles à boutons: Dans cette première leçon, je vais vous expliquer comment créer un symbole de bouton simple et ensuite créer quelques autres variantes pour des boutons plus complexes utilisant des symboles imbriqués. Sautons en commençant par un avec la création de notre tout premier symbole de bouton. Donc la première chose que je vais faire est de monter pour insérer des moutons et je vais utiliser un rectangle arrondi pour mon bouton afin que je puisse aller de l'avant et dessiner n'importe quelle taille que je veux. Je vais juste te faire 1 30 x 36, et ensuite tu peux le coiffer de n'importe quelle façon que tu veux aussi religieux simplement en te débarrassant de la frontière et en choisissant Phil, euh, alors je veux le faire. Vous ajoutez un calque de texte pour l'étiquette de bouton a été appelé cette étiquette. Mettez-le au milieu. Maintenant, tout ce que j'ai à faire est de sélectionner les couches de cela. Je veux créer le symbole avec, et je peux le faire en faisant glisser. Ou il peut simplement les sélectionner ici dans le panneau Calques, puis cliquer sur Créer un symbole. Appelons ce bouton comme si c'est super facile à créer. Symbole très simple. Et ce que je peux faire maintenant, c'est que je peux changer cette étiquette pour dire ce que je veux. Donc si c'est peut-être inscrire ce que nous voulons que le bouton soit, euh alors je peux dupliquer le bouton et le faire dire autre chose. Donc peut-être que je veux ça, euh je ne dis pas juste créer compte. J' ai aussi la capacité de faire glisser cela, mais pour être grand ou petit est je le veux. Disons que je veux un putting similaire faire quelque chose comme ça. Donc, euh, c'est vraiment bénéfique comme nous en avons parlé plus tôt, parce que dans votre application ou site Web, beaucoup de fois vous avez des boutons standardisés que vous voulez pouvoir utiliser. Et c'est si facile d'aller et de saisir, et vous n'avez pas besoin de recréer ce symbole Est-ce que ce bouton encore et encore et vous inquiétez pour Oh, est-ce que j'ai la bonne taille de pensée ? Ai-je le droit mais dans la couleur ou la forme ou la taille er, rayon de coin. Mais après, donc, euh, pour passer au niveau suivant, ce que nous sommes aussi capables de faire, c'est que ce bouton fonctionne un peu plus dur pour nous. Donc, disons que nous avons ce standard mais le style avec sa même forme dans le même textile. Mais nous voulons changer la couleur de l'arrière-plan parce que nous avons peut-être deux ou trois couleurs de boutons que nous utilisons dans notre système de conception. Donc, ce que nous sommes en mesure de faire est en fait d'utiliser des symboles pour changer la couleur d'arrière-plan de ce bouton. Alors, nous allons voir comment nous pouvons commencer avec ça. Bon, donc si je double clique sur mon bouton, je vais sauter. Cela va à la page des symboles, et c'est le symbole du bouton pur lui-même. Donc si je reviens pour que ça ait rendu deux instances, ces airs juste des instances de ce symbole lui-même et d'accord, donc je vais y aller. Donc ce que je veux faire maintenant, c'est que je vais créer des nuances de couleurs de quelques couleurs que je veux utiliser pour les boutons, et ensuite nous allons les créer en symboles pour que nous puissions le faire très facilement. On monte juste en forme de rectangle, et je vais le dessiner. Peu importe la taille de la place. Il pourrait être un petit Il peut littéralement être un ou deux pixels si vous voulez qu'il soit, mais à nos fins, il sera un peu plus grand. Hum, et je vais utiliser la couleur de fond. Je l'ai fait, et je vais le dupliquer et choisir d'autres couleurs pour nous. Disons que nous avons ces trois couleurs dans notre système. Maintenant, ce que je veux faire est de les créer en symboles. Donc, même si je l'ai dessiné sur la page des symboles, ce ne sont pas en fait des symboles. Ce ne sont qu'un calque de forme, et vous pouvez voir la différence. Mais il y a cette petite icône ici qui est rose. Ça veut dire que c'est une simple petite chose qui étiquette sur ces ondes. Juste le rectangle se forme eux-mêmes. Donc, comme nous l'avons fait avec un bouton, je vais Teoh, cliquez sur un des carrés de couleur et cliquez sur créer un symbole. Donc maintenant une chose qui, um, c'est vraiment utile lorsque vous créez des symboles qui sont liés ou qu'ils ont la même taille ou que vous allez les utiliser de la même manière. Ce que nous pouvons faire pour la convention de nommage est en fait créé un préfixe. Alors ici, appelons juste cette couleur et ensuite si nous utilisons la barre oblique inverse et c'est bleu. Um, ajouter cette barre oblique inverse va en fait regrouper ces symboles qui sont tous nommés comme ça afin qu'ils soient vraiment faciles pour vous à trouver et une fois que nous aurons overrides simples, ça va être vraiment facile pour vous d'échanger. Donc, je vais dire, OK , vous maintenant, c'est mon exemple de mon symbole réel ici. C' est juste l'exemple de celui-ci. Je vais faire la même chose avec les deux autres couleurs, donc la couleur backslash sarcelle et la slash plus complète Ajanta. D' accord, donc j'ai mes trois couleurs juste pour que vous puissiez voir les choses un peu mieux. On va les aligner encore une fois. Ce sont les cas. Alors faisons semblant qu'ils ne sont pas là. Zoom avant un peu. Bon, donc maintenant ce que nous voulons dio est dans ce symbole de bouton, nous voulons ajouter une instance d'une de ces couleurs. Alors je vais y aller. Vous pouvez soit aller à insérer et choisir des symboles utilisés pour faire que vous avez, Mais ils ont récemment ajouté cela dans l'interface pour l'esquisse. Donc maintenant vous pouvez voir, j'ai cette section de couleur juste ici, parce que c'est ce que nous utilisons est notre petit préfixe. Et j'ai mes trois Cymbales ensemble. Si nous ne l'avons pas fait et nous avons juste besoin d'eux Blue, Magenta , sarcelle, ils apparaîtraient dans cette première liste, qui une fois que vous avez beaucoup de symboles qui commencent à devenir vraiment désordonnés. Donc j'aime vraiment faire ça dès le début. Bon, donc je vais choisir, Choisissons Teal, et je vais placer cette instance de symbole juste à l'intérieur de ce symbole, et ensuite je vais la faire glisser pour qu'elle se remplisse et je veux juste réorganiser les calques pour que toute évidence, mon étiquette pour que nous puissions le voir. Bon, donc maintenant si vous vous souvenez, nous utilisons une forme rectangulaire arrondie ici pour que vous puissiez voir ça par ici. Espérons que, euh et en plaçant ça, nous perdons ça. Donc, ce que nous voulons dio est en fait créer un masque. Donc nous avons notre symbole et notre fond de bouton. Ce que je vais faire, c'est sélectionner ces clics droit et choisir un masque, et donc ça va juste préserver ce joli coin arrondi que nous avons dans notre bouton Bon , donc maintenant, pour une raison quelconque, quand vous faire un masque, il le regroupe dans un petit dossier. Donc, vous pouvez retirer ça si vous le voulez, ou vous pouvez juste le laisser. Laisse-le ici et je pourrais juste dire l'arrière-plan de l'extracteur juste pour garder mon panneau de couches agréable et se rencontrer. Laisse-le ici et je pourrais juste dire l'arrière-plan de l'extracteur juste pour garder mon panneau de couches agréable Bon, Bon, maintenant nous avons cette année, revenons à l'instance de notre bouton. Vous pouvez également voir parce que nous changeons le simple lui-même qu'il a changé cette couleur sarcelle. Mais maintenant que se passe-t-il lorsque nous cliquons sur une instance ? Nous avons cette nouvelle option dans notre panneau de remplacement qui affiche la couleur. Et si je clique ici, nous voyons aussi que j'ai les trois couleurs que nous venons de créer, un symbole à choisir. Et si facile, c'est qu'on peut échanger ça. Dio n'importe quelle couleur que je veux et contre il est c'est sur Lee, y compris ce que cela fait est qu'il inclut des symboles de la même taille ou dimensions parce que ce sont probablement ce que vous allez échanger. Alors gardez ça à l'esprit et nous le couvrirons un peu plus tard. dans cette classe. Très bien, donc une chose à savoir sur notre, um notre panneau de remplacement ici, c'est que ça s'appelle les couleurs. Dernier accord. C' est ainsi que ça. Mais celui-là, on utilise du bleu. Donc, ce que nous voulons faire est de rendre cela un peu plus facile à lire sur son panneau. Donc si je retourne dans le symbole, tout ce qu'il fait est de tirer le nom du symbole ici pour que vous puissiez nommer ce que vous voulez. Donc, je vais juste appeler cette couleur pour maintenant et puis si je retourne ici maintenant, ça va juste dire tir de couleur, donc ça rend juste les choses un peu plus facile. Mais c'est tout. Et puis vous pouvez maintenant utiliser à nouveau ce bouton. Vous pouvez juste en certain, mais en vous pouvez dire ce que je veux appeler ça. C' est un signe de sortie. Vous pouvez le redimensionner de n'importe quelle façon, et je dirai que celui-ci est magenta euh, donc vraiment, vraiment facile et d'une excellente façon de réutiliser les boutons vraiment simplement avec un masque de couleur 3. Symboles et Symbols avec bouton avec bouton: D' accord. Donc la prochaine chose que nous voulons couvrir est que nous voulons réellement augmenter la complexité de nos symboles de boutons un peu plus en ajoutant une icône, et cela va créer ce qu'on appelle un symbole imbriqué. Donc, la première chose que vous voulez faire est de tirer mes graphiques que je veux utiliser pour mes symboles d'icônes . Et je vais insérer l'image et puis sélectionner mes trois icônes sur mon bureau. Et puis nous y voilà, répandre la bouche. Vous pouvez également simplement faire glisser n'importe quelle image PNG, Ajay Pagan spg droit dans votre croquis, notre planche si vous voulez le faire aussi. Alors, comme nous l'avons fait avec nos symboles de couleur avec les nuances entières, nous voulons simplement aller de l'avant et créer chacune de ces icônes en symbole. monter ici et puis aussi comme nous l'avons fait avec nos couleurs, allaient créer un préfixe et ensuite utiliser la barre oblique arrière pour pouvoir regrouper ces différentes icônes ensemble. Alors appelez ça. Téléchargez Paul, celui-ci supprime et nous appellerons celui-ci favoris. D' accord. Et puis si je vais ici, je peux voir toutes mes icônes bien se grouper ensemble. Donc maintenant, nous voulons faire est de double-cliquer dans l'un de nos symboles et d'aller nous sauter à la page la plus simple. Et puis je vais juste les rapprocher un peu plus pour qu'il soit plus facile pour nous de tout voir. Vous pouvez réorganiser cette page comme vous le souhaitez. Ça n'a vraiment pas d'importance. Sketches sorte de piège arbitrairement les choses dans la page des symboles. Bon, maintenant on a nos trois icônes, , et on veut les utiliser en blanc au lieu de noir. Donc, la première chose que je veux faire est juste de changer la couleur de remplissage pour qu'elle soit blanche. Alors allez-y et faites ça, et vous remarquerez que maintenant je ne peux pas voir mes icônes, ce qui est un peu ennuyeux. Donc ah, une façon que nous pouvons simplement rendre cela plus facile à voir est sélectionné les trois tableaux d'art et nous voulons ajouter une couleur d'arrière-plan. Il suffit donc de choisir un gris juste pour que vous puissiez les voir et ensuite assurez-vous que vous n'avez pas inclus l'exportation vérifiée et incluant les instances, car si vous avez ces cochées, il va inclure le gris, et nous ne veulent ça. Nous voulons juste rendre plus facile pour nous de voir ces symboles blancs. Okay, ensuite, ce qu'on veut faire, c'est qu'on va créer un autre symbole de bouton S qu'on en a un avec juste l'étiquette, et ensuite on en a un avec l'icône et l'étiquette. Donc parce que j'ai déjà tout mis en place, je vais juste dupliquer ce bouton. Et parce que maintenant j'en ai deux qui portent le même nom. On ne veut pas ça. Alors allons vite sur ce tableau d'art et je peux facilement renommer nos ports à tout moment. Donc c'est une autre chose de savoir que si vous pensez que vous avez foiré parce que vous nommez quelque chose de mal ou si vous avez appelé, hum, une de ces icônes au lieu d'icône, vous pouvez simplement changer l'un de ces icônes. Donc c'est vraiment sympa. Maintenant, ce que je veux faire est de double-cliquer dans le panneau de calque, et je vais utiliser le bouton comme préfixe, et je vais appeler celui-ci juste icône. Et puis si je vais apparaître CIA, avoir l'icône de bouton et de bouton. Ajoutons juste, hum, un nom primaire pour cet autre bouton juste pour que je les regroupe ensemble. C' est une bonne hygiène de croquis. Juste là. Bon, Bon, maintenant on a notre label. Nous avons créé nos icônes. Alors allons et insérons Icahn dans notre symbole, et vous pouvez placer ça quand même, où vous voulez. D' accord. L' autre chose que nous voulons faire est juste pour le simple lui-même. Je veux en quelque sorte maintenir la couture sur la gauche et la droite pour rendre ça un peu plus propre. Donc je vais traîner ça sur Eso là-bas, faire la même chose que mes antécédents, juste si bon. Ok, donc maintenant on a, um, l'étiquette et notre bouton. Donc l'autre chose que nous avons fait avec notre symbole de couleur est si vous voyez ici, euh, nous avons changé le nom du symbole pour aider avec les remplacements. Et je veux faire la même chose pour l'icône parce qu'on n' utilisera pas toujours ce nom. ce nom. Donc je vais juste appeler cette icône. Donc maintenant que si je vais par ici, je vais juste les supprimer parce qu'on n'en a pas besoin. Si j'insère une instance de mon symbole d'icône que je peux voir ici. J' ai une icône. J' ai une étiquette sur une couleur, et c'est juste très bien organisé ici. Une autre chose à savoir est que vous pouvez décider comment vous voulez que ces éléments apparaissent dans le panneau de remplacement, passant, qu'ils sont organisés dans les couches de symboles. Donc maintenant, nous avons l'icône d'abord, puis l'étiquette, ce qui a du sens parce que c'est comme ça qu'ils sont, vous savez, si vous le lisez de gauche à droite. Mais si nous décidons que nous voulons que l'étiquette apparaisse d'abord, je reviens. Maintenant, j'ai l'étiquette de bouton que l'icône, puis l'arrière-plan polaire. Eh bien, c'est juste quelque chose de savoir que je peux aider. On devient un peu plus facile à analyser. D' accord, hum, une autre chose que je veux couvrir avec la surmontée est que si je clique à nouveau sur cette planche d'art , j'ai ces options pour gérer mes remplacements. Et en fait, je peux décider si je veux autoriser ou non les remplacements, ce qui est en fait assez cool. C' est une chose plus récente que le croquis a fait récemment Donc si je veux que Teoh autorise Override, je peux alors décider si je veux avoir le texte trois icône dans la couleur ou si je veux dire, Oh, vous avez été changé ces choses, Mais pas ça et ça va juste se mettre à jour ici. Bientôt sorti, ce fond de couleur a disparu. Donc, comme une autre pièce supplémentaire, , ça peut vous aider à manipuler ces symboles de n'importe quelle façon qui vous semble logique. Bon, retournez à l'icône de l'inspecteur. Je ne peux pas bouton. Revenons à l'instance. Et maintenant, disons que nous voulons changer cette étiquette pour être ajoutée à vos favoris. Et puis allons-nous cette heure et vous verrez que des trucs d'os se passent ici. Eso d'abord. Notre graphique s'étire vraiment, ce que nous ne voulons absolument pas. Et puis on se fait comme, espacement bizarre qui se passe quand on étire ce bouton. Donc, nous allons corriger cela en utilisant le symbole, taille re et les contraintes. Alors nous allons vous montrer comment faire ça. La première chose que je voulais vous dire est que c'est en fait, donc si je saute dans ma page de symboles et que nous allons parler de cette section de taille ici, mais ce qui n'est pas vraiment utile, c'est d'essayer quelque chose La première chose que je voulais vous dire est que c'est en fait, donc si je saute dans ma page de symboles et que nous allons parler de cette section de taille ici, ici et puis a sauté en arrière et voir ce qu'il a fait. Je trouve ça vraiment, vraiment utile orteil, en fait. Prends cette instance ou n'importe quelle instance, je vais juste copier ça. Allez à ma page de symboles, et puis je vais juste coller pas à l'intérieur de la création du symbole de symbole, mais juste le coller ici. Et à chaque fois que je change quelque chose sur ce, euh, le symbole lui-même, les instances vont se mettre à jour. Et je peux voir comment mes changements sont, euh, comment ils se propagent pour que je pense que c'est de l'art vraiment utile. Donc, et je suis aussi laissez-moi juste changer la couleur de ceci. C' est juste un peu plus facile à suivre avec. C' est un symbole. C' est l'instance. Donc la première chose que je veux faire est d'aborder cette chose graphique extensible qui se passe ici. Donc, si je clique sur mon icône maintenant, Rachel, commande re dimensionnement ce que je veux faire est de l'avoir taille fixe. Donc tu as vu ce saut juste là. On y va, le mien. Vérifiez-le. Il s'étire si je le vérifie. , Ce que ça fait essentiellement,c'est de maintenir la hauteur dans le avec des icônes pour que vous n'ayez pas cet étirement bizarre. De cette façon, si je décide de rendre mon bouton plus grand, pour une raison quelconque, il ne cherche pas non plus. Bon, donc c'est la première partie. Hum, ça fait toujours un espacement bizarre quand je bouge mon bouton. Et donc ce que je veux ce bouton à Dio est en fait maintenir la quantité de rembourrage ici entre le bord du bouton et le bord de l'icône. Donc ce que je peux faire, c'est utiliser cette épinglette ici, et je veux dire, j'aimerais que cette chose reste à gauche où je l'avais. Et donc encore une fois, vous pouvez voir que ça a sauté là-bas, euh et oui. Ensuite, je veux également maintenir l'espace entre l'icône et l'étiquette. Donc, si je clique dessus, je peux aussi dire Pinned Edge. Maintenant, vous remarquerez que cela a sauté un peu, mais cela me donne toujours un espace flexible entre l'icône dans l'étiquette quand je suis quand je étire ça. Et donc si je reviens à cette étiquette de texte, texte, ce qui se passe, c'est qu'il est actuellement sur un alignement central, et ils sont tout ce que j'ai à faire est de changer ceci toujours aligné à gauche. Réponse. Maintenant, on y va. Maintenant c'est rester exactement où je le veux. Et je peux avoir ça. Je peux dire comment tu sais combien. Je veux que le bouton soit de cette façon. D' accord, pour voir ça en action une fois de plus. Faisons simplement l'assiette de cette instance et utilisons, um, l'icône de téléchargement. Appelons ça, mais en téléchargement et change-le en bleu et on y va. Donc maintenant je peux avoir beaucoup plus de liberté sur com Quelle taille je veux que mon bouton soit et maintenir ce beau regroupement de l'icône sur et le texte lui-même. Génial. Donc j'appelle ça test de stress le symbole parce que ce que vous faites essentiellement c'est dire, Ok, comment puis-je casser ce symbole ? Hum, comment puis-je si je déménage ? Si je décide que je veux que mon bouton soit plus grand pour une raison quelconque, est-ce qu'il reste centré ? Comme la façon dont je voulais Teoh ou beaucoup de fois, nous ne changeons pas réellement les boutons cette façon, donc vous verrez cela venir avec d'autres types de symboles que vous pourriez étirer ou modifier verticalement ou horizontalement. Super. Donc ça a couvert quelques choses différentes. Donc nous avons appris à Kurdes. Bouton simple. Nous avons appris à changer la couleur d'arrière-plan d'un symbole de bouton, et nous n'aurons pas d'icône pour que vous ayez beaucoup de flexibilité avec vos boutons eux-mêmes. 4. Conseils pour les Overrides et les symboles multiples: La dernière chose que je veux couvrir à propos de nos symboles de boutons est de vous aider à décider quand il est logique d'utiliser un symbole et de profiter de tous les remplacements. Donc, vous obtenez ah, beaucoup d'un simple par rapport à quand est-ce vraiment sensé de créer des symboles uniques et avoir plus d'un pour quelque chose comme nous l'avons fait avec ce bouton ici, où nous avons notre primaire mais dans et nous avons aussi notre avec l'icône. Donc ces symboles séparés de l'air, nous avons fait cela dans le cadre de la classe pour vous montrer que vous savez comment vous pouvez construire sur. Mais il y a des façons que j'aurais pu utiliser le bouton avec Icahn, euh, et ensuite j'ai juste choisi d'activer et désactiver l'icône pour certains boutons. Laissez-moi en parler un peu plus. La raison pour laquelle j'ai choisi orteil avoir des visas symboles séparés est qu'il est beaucoup plus facile d'en voir un. Quels types de boutons avez-vous dans votre système et à ce est en fait remplacements peut devenir peu difficile une fois qu'il commence à obtenir, hum, mais il y a plus de choses que vous pouvez manipuler. Il y a bien d'autres choses à retenir. Si quelqu'un n'est pas familier dans votre équipe de conception ou quelqu'un d'autre qui pourrait utiliser votre fichier n'est pas aussi familier avec les remplacements ou sait quelles options choisir si je peux l'être, Vous savez, pas Vous n'obtenez pas autant de bang pour votre argent par elle . Et ça ne fait pas vraiment mal à rien en ayant plus d'un symbole. Ah, en termes de boutons, l'autre chose que je peux vous montrer rapidement, c'est qu'il y a des moments où ça ne le fait pas. Ça n'a pas de sens non plus. Teoh. Utilisez un symbole quand nous devons trop changer pour le faire fonctionner. Laisse-moi traverser une chose. Disons que dans notre système de conception, nous avons, ah, bouton blanc avec, peut-être comme une super ligne. Donc ce que je veux faire pour démontrer c'est que je vais faire sur un double ce carré de couleur . Je vais appeler cette couleur blanche, et je vais juste changer ce blanc d'orteil. Alors, si j'utilise une petite ferraille, celle-ci, par exemple, , si je choisis,c'est pour White. Évidemment, je ne vais pas pouvoir lire mon étiquette parce que c'est blanc. Donc j'évite sur le blanc. Je peux faire ce truc de masquage de couleur. Ou cela pourrait être comme avec du texte, ou il peut aussi utiliser du textile. Il y a donc des moyens de contourner ça. Mais, vous savez, si j'ai un blanc mais que ce sera sur fond blanc, je veux probablement utiliser une sorte de bordure ou d'ombre ou quelque chose autour de ce bouton pour que vous puissiez voir le bouton. Hum, et ça va devenir vraiment délicat si j'essaie de faire tout ça dans ce seul bouton. Revenons à Magenta. Et dans ce cas, ce que je veux faire, c'est que je vais redupliquer ce bouton, et je vais appeler ce bouton secondaire. Et puis ce que je vais dio, c'est que je pourrais laisser ça et juste changer l'instance d'ici en remorque. Blanc, si je veux Teoh, je peux aussi choisir de ne pas utiliser le symbole de couleur et en fait simplement utiliser ce fond d'origine , qui est juste une forme d'attente pour que je puisse faire l'un d'entre eux. Je vais laisser ça avec le symbole allumé pour l'instant et ensuite je peux prendre mon étiquette, et ils voulaient probablement être une sorte de gris foncé. Et maintenant, ajoutons aussi, euh, en fait, tu sais quoi ? Parce que je veux ajouter une bordure. Je vais juste tuer ce masque démasqué et trouvé. Donc maintenant je vais ajouter cette frontière ici, hum, hum, quelque chose un peu plus tard. Bon, donc maintenant j'ai ce style différent, et si je retourne ici, regarde, on a un bouton normal, un bouton avec une icône, et maintenant secondaire ici. Et peut-être que c'est quelque chose comme se déconnecter. Hum, donc le voisin a un style différent. Donc dans mon système, je pourrais avoir quelque chose qui est, hum, bouton couleur un bouton avec une icône et puis un bouton blanc. Vous pourriez aussi obtenir un peu délicat ou deux. Vous pourriez avoir un bouton blanc avec une icône. Il y a beaucoup de choses avec lesquelles vous pouvez jouer. Mais pourquoi je trouve cela vraiment utile à nouveau orteil ont des symboles différents est parce que cela va aussi me permettre, Teoh, juste faire vraiment clair que ces air les types de boutons que j'ai dans mon système de conception vous pourrait également plaider pour um ne pas permettre que l'arrière-plan soit changé, comme le bouton simple si vous voulez vraiment affiner en disant comme chaque fois que vous utilisez cette primaire. Mais dans son toujours bleu, chaque fois que vous utilisez une icône. Mais dans son toujours sarcelle um, quelque chose comme ça. Et puis il n'y a pas de divergences. Quelqu' un ne peut pas interpréter ça d'une autre façon. Espérons que, cela vous aide en termes de pourquoi créer un simple quand vous devriez créer plusieurs et couvrant les différentes façons de manipuler ce bouton en utilisant des remplacements. 5. Créer un symbole de navigation complexe: dans cette leçon suivante, je vais vous montrer comment créer un composant de barre de navigation en utilisant plusieurs nids et symboles . Donc nous allons prendre ce que nous avons appris des exemples de boutons et appliquer certaines de ces techniques dans cette barre de navigation, mais le faire d'une certaine manière, nous combinons en fait beaucoup plus de Cymbales ensemble. Donc, dans cet exemple, nous allons réellement recréer la barre de navigation du site Web de Skill Shire. Donc j'en ai une capture d'écran juste ici, et puis je vais sauter à la page des symboles. Donc, ce que j'ai fait pour préparer, c'est que je viens de jeter ensemble des symboles pour les différentes parties de la barre de navigation. Donc, ce sont assez simples. Il y a quelques icônes avatar, barre de recherche. Le logo est juste une carte ou une image, un bouton, puis notre lien de navigation. Et donc nous allons parler plus de celui-ci dans la seconde parce que c'est la seule pièce que je n'ai pas tout à fait fini pour assembler cette barre de navigation. Alors remontons vite. Deux sont maintenant bar ici et nous allons zoomer un peu. Bon, donc nous avons deux styles différents. Sur sont deux variantes différentes des liens de navigation ici. Donc nous avons quelque chose comme chez nous. Nous sommes juste un lien texte et puis naviguer a cette petite icône de flèche ici. Donc, ce que je vais dio est d'utiliser un symbole et de vous montrer comment vous pouvez utiliser ce symbole pour les deux liens de navigation à l'intérieur. Sans la flèche, vous pouvez choisir de faire deux symboles distincts. Mais dans ce cas, puisque c'est assez facile de l'être, nous pouvons essentiellement activer et désactiver ce symbole que c'est juste une meilleure option. Alors, revenons en arrière et nous allons zoomer sur ce talent. Les demandeurs d'étiquettes peuvent le voir mieux. D' accord, la première chose que je vais faire est de jacher mon tableau d'art et de le rendre un peu plus grand pour qu'on puisse s'adapter. Um, une chose que je veux appeler est si pour une raison quelconque ce contenu d'ajustement sur le redimensionnement est vérifié avant de dessiner avant de modifier un tableau d'art ou de l'étirer, vous voulez probablement décocher cette cause il fait un genre de trucs funky. Je le décoche toujours parce que je ne veux pas que les choses bougent. Je veux décider où je les place, donc tant que ce n'est pas vérifié, c'est bon d'y aller. Très bien, on va entrer dans les symboles et on y va. Teoh, attrape la flèche. Avoir ça là-dedans. Et c'est tout. Donc maintenant ne sont jamais étiquette comprend l'euro. Et si je clique dessus, vous verrez que j'ai ce symbole ici. D' accord. La prochaine chose que je veux faire, c'est qu'on va aller Teoh, Um, essayons vite de tester ce symbole. Nous allons donc insérer sur l'instance de ce lien de navigation. Ok, ici. Et oh, j'ai créé juste un calque d'arrière-plan ici en ce moment. C' est gris. Je ne vois pas très bien ça. Alors faisons ça blanc, et on verra ce qui se passe. Vous pouvez juste voir la bordure du symbole. Donc maintenant, l'un de nos éléments de navigation était sourcils. Donc on va faire ça. Nous allons montrer comment ça marche, et notre petite flèche se déplace avec elle. Donc c'est génial. Mais que se passe-t-il quand je l'étire ? Très bien, donc c'est encore le test de stress. Certains voient mes sourcils. Le texte bouge et ma flèche s'étire, et nous ne voulons pas qu'aucune de ces choses se produise. Donc, ce que nous voulons faire avec notre étiquette de texte, c'est que nous voulons l'épingler sur le bord. Et avec notre, euh, flèche, je viens, nous voulons juste aller de l'avant et réparer cette taille. Voyons voir. Super. Et donc ça l'a bien réparé. Et puis vous pouvez choisir de l'aide. Comment ? Pourquoi voulez-vous que ce simple soit basé sur le texte et nous n'avons pas besoin d'avoir cette boîte blanche activée. On peut éteindre ça plus tard. Ce n'est pas une grosse affaire. Hum, mais pour l'instant, allons-y et laissons ça. Bon, alors nous allons faire un petit zoom arrière. Donc, le prochain dicton que nous voulons faire est de dessiner notre symbole de conteneur pour notre barre de navigation. Donc, ce n'est essentiellement que l'arrière-plan dans la barre elle-même. Donc je vais insérer un rectangle de forme, et je vais dessiner la forme ici, enlever la bordure, faire ce blanc ciblé. 01 chose que je n'ai pas mentionné, hum, quelque chose que je trouve vraiment utile. Donc, ce est juste une capture d'écran sont une limite de carte de bit. Copiez ceci. Donc, remettez ça à 100 um, collez-le ici, et puis je peux voir de quelle taille j'ai réellement besoin pour faire ça. Donc, ça fait 59. Allons-y et faisons ce 60 pour avoir un nombre pair. Et c'est 11 72. Donc on va faire ça 11 72. Et puis on a cette petite ombre tout en bas. Alors ajoutons juste que j'ai dit quelques choses ici. C' est un peu plus grand. On y va. D' accord ? lettre de Blewitt vient de mettre cette tenue à 10. Ça n'a pas vraiment d'importance. Bon, Bon, maintenant nous avons la forme qui correspond à notre couleur de navigation et à notre style. Maintenant, allons de l'avant et créons un symbole à partir de ça, et on peut juste l'appeler si loin, accord ? Maintenant, c'est le montant pour une seconde. Et voici ma véritable sieste. Notre symbole. Ce n'est qu'une instance de celui-ci. Donc je vais me débarrasser de ça. Je vais déplacer cette capture d'écran et revenir. Bon, Maintenant, commençons à compiler ou à assembler cette barre de Naff. Alors quoi ? On va encore dio ? On est sur la page des symboles. Ce sont les symboles réels eux-mêmes. Donc on ne veut pas l'utiliser. Nous voulons utiliser des instances d'eux. Donc, comme ce type le mieux est un exemple de ça. Donc on peut l'utiliser. Commençons par le logo. On va juste aller à gauche de droite. Alors mettez ça là. Nous pouvons une sorte de finesse et revenir en arrière pour décider où les choses devraient se dérouler ou mettre en page. On peut le faire en une seconde. Je vais aussi verrouiller ce calque rectangle, parce que chaque fois que je souris dessus, il devient bleu. Et parfois ça me dérange et je le verrouille, et ensuite ça ne fait pas ça. Ok, maintenant, voici une de mes instances du lien de serrage, donc je vais juste mettre ça dedans, et puis je vais juste dupliquer ça va revenir et changer ces choses après. Et là, j'ai deux autres exemples. Oui. Tu sais, il y en avait un autre, comme je ne l'ai pas dupliqué deux fois. Arias. Il y en a deux de plus, alors je veux insérer ma barre de recherche soudainement saisir ça juste ici. Et enfin, il y a eu que je l'ai attrapé. Mon icône de notifications, mon avatar et mon bouton. Très bien, donc ce sont toutes les pièces que l'on peut voir là-bas. Euh, évidemment, on doit revenir en arrière et juste modifier certaines de ces choses. Donc maintenant, ce que nous voulons faire, c'est la maison. J' ai donc changé l'étiquette orteil, la maison, la navigation et les ateliers. D' accord. Maintenant, je veux juste étendre ça. Donc maintenant, vous pouvez voir la maison et les ateliers. On ne veut pas utiliser la flèche. Donc, ce que je peux faire est dans le panneau de remplacement, il y a l'option de cliquer, et généralement cela me montre différents symboles que je peux basculer entre et montrera à nouveau des symboles des mêmes dimensions. Mais c'est le seul de cette taille, donc seulement celui. Mais nous avons également cette option de ne sélectionner aucun, et tout ce qu'il fait est de l'éteindre. Donc c'est génial. C' est exactement ce dont nous avons besoin. Maintenant, je peux commencer ça et le rendre un peu plus petit. Je vais bouger, parcourir les ateliers plus, et je vais faire la même chose pour les ateliers sur une sélection Aucun. Faites glisser ça, mais plus petit. Parfait. Maintenant, je pense que la ligne est comptable. Um, je peux aligner les choses comme ça et utiliser, euh, utiliser ces guides ou je peux juste mettre des choses Oh, ça je peux aussi prendre cette image et la mettre dans le symbole et ensuite juste aligner les choses. Mais je pense que ça marchera bien pour nous. Rapidement. Ensuite, nous irons à la navigation. C' est quoi, à la maison ? Mm. Partage de compétences filles basses. C' était assez proche. Très bien, il y a ça. Maintenant, nous allons sauter par ici. Notre cerveau est à peu près au même endroit. Hum, on est Avatar. Plus. Ok, donc ce sont les cours qui vont changer ça. On va se débarrasser de la flèche. Tu rends ça plus petit. C' est mes cours. Spooks. Maintenant, nous allons nous aligner ici et enseigner les faits, d'accord, dans la dernière chose que nous voulons dio, c'est que cette barre de recherche est en fait un peu plus large, donc nous pouvons aller de l'avant et faire ça. Et en étirant ça, vous verrez que je n'ai pas encore défini les contraintes. Laisse-moi aller à mon symbole d'origine. Je vais cliquer sur l'icône sur la taille du choix, et je vais faire cette épingle à gauche. On y va. Alors maintenant, quand je redimensionne ce symbole qui s'est levé là-dedans ? Ici, nous allons, c'est pourquoi nous essayons de stress. Et tu vas être ça aussi à gauche. Ok, parfait. Donc, peu importe la taille que nous faisons. Très bien, Donc c'est que nous avons nos nab sont assemblés. Oh, la seule chose qu'on doit changer. Va prime. Bon, maintenant nous sommes tous prêts. Um, d'accord. Donc, dans la leçon suivante, nous allons marcher à travers la taille de ce tout en dehors loin ensemble. 6. Redimensionner les Symbol de Nav en barre de Nav et la Constraints Resizing, à l'organisation: Très bien, Nous avons juste mis en place notre barre de navigation avec tous nos symboles et toutes nos pièces. C' est notre capture d'écran où nous faisions référence. Donc je suis qu'on est tous prêts avec ça. En fait, je vais aller de l'avant et supprimer ça. Maintenant, ce que nous voulons faire est de nous assurer que cette barre de navigation est capable d'évoluer correctement. Ce que je vais faire, c'est que je vais aller de l'avant et dans certains cas de cette barre de naff dans mon fichier e. Et maintenant, comme tout le reste, je vais aller de l'avant et étirer, et pourtant peu de contraintes ont de nouvelles défauts. Très bien, allons plonger et voir ce qu'il faut affronter. D' accord ? Donc, tout de suite, notre logo est écrasé. Donc on va monter ici, on va dire, réparer la taille. Et nous voulons aussi épingler cela à gauche, parce que tout fondamentalement, comment cette barre fonctionne maintenant chose si horrible à nouveau est tout sur la gauche est veut coller à la gauche. Tout ce qui est à droite veut essentiellement rester droit, aligné. Et puis l'espace au milieu change juste au fur et à mesure que vous allez. Bon, donc on va l'épingler là. Quatre sur les liens de navigation allaient aussi épingler tous ces éléments, donc ils devraient revenir au bon endroit. C' est parfait. Donc on est en quelque sorte en train de prendre le coup de ça. C' est fini de faire la même chose encore et encore. Une fois que tu comprendras comment ton symbole doit fonctionner, on va l'épingler avec la barre de recherche et de l'autre côté. Une fois que tu comprendras comment ton symbole doit fonctionner, Allons de l'avant et assurez-vous que cet avatar reste fixe que les jours icônes fixes. Et maintenant ces deux-là sont contre. Au lieu d'épingler à gauche, nous voulons les épingler à droite. On y va. Um, je vais y revenir dans une seconde. Assurez-vous également que ceux-ci sont épinglés vers la droite. Super. Et OK, donc quelques choses se passent encore de ce côté-ci. Donc nous avons épinglé les choses à droite, donc ils restent, mais ils n'agissent toujours pas exactement comme nous le voulons. Donc des choses que ces gars espacent un peu plus que ce qu'on voulait. Et notre bouton change de taille quand nous ne voulons pas que cela se produise. Donc ce que nous allons dio c'est que nous allons commencer sur le côté droit et cliquer sur mon bouton et ce que je veux faire parce que nous avons déjà nommé ceci, mais dans exactement ce que nous voulons et ce nom ne va pas changer, je vais aller de l'avant et fixer la taille horizontalement. Et tu as vu comment ça vient de surgir ? Oui, c' est ce que je veux. Je veux aussi épingler ceci sur le bord droit. Et maintenant, cela devrait maintenir ce bouton devrait rester au même endroit et rester le même avec parce que nous ne voulons pas que cela variable. Et maintenant, mon avatar et mon icône de notification, ils restent aussi. Ils font exactement ce que je voulais faire. L' autre chose est, voyons, laissez-moi entrer dans ce symbole original une seconde, et ensuite je vais changer cette couleur pour être un gris plus foncé pour que vous puissiez voir ce qui se passe quand on étire ça. Bon maintenant, vous pouvez aussi voir que ces liens s'étirent aussi quand nous ne voulons pas cela aussi. Et encore une fois, comme nous l'avons fait avec le bouton. Parce que nous avons déjà renommé Thies en ce que nous voulons utiliser et nous ne allons pas les changer nulle part. Nous voulons en fait corriger le avec de ceux-ci aussi. Donc je vais le faire ici, et je vais le faire ici et ça a sauté en arrière. Donc maintenant, ils sont également au même endroit, restant le même. Et je veux sauter ici et faire la même chose pour ces autres liens pour moi. Cool. Viens à ces airs. Juste près ensemble. Éteignons cette couche grise. On est juste que je vais le cacher. On y va. Donc, encore une fois, pendant que je m'étire, rien n'est changé. Euh, ces gars vont rester le même temps quand on ne voudrait pas utiliser le fixe avec pour des symboles comme ça. On ne voudrait pas l'utiliser si on changeait les noms de ces étiquettes à la volée. Donc si j'allais changer ça, hum, dans mon design et que ça ne fasse pas partie de ce plus grand symbole, alors je vais vouloir Teoh. Assurez-vous que je ne fixe pas la taille parce que vous pourriez voir ici la maison est plus courte que ateliers. Nous voulons que cela soit simple pour être en mesure de flexion quand nous en avons besoin pour accommoder pour quoi ? On est en train de montrer. D' accord, la dernière chose que vous avez probablement remarqué, c'est que ma barre de recherche change de taille, donc ça devient plus large et plus court, et c'est OK ici. C' est en fait un modèle commun sur de nombreux sites Web où la barre de recherche va juste devenir plus large et sorte de s'adapter à l'écran avec. Donc je pense que c'est très bien. On peut le faire. Et puis, à un moment donné, si cela devenait plus petit, ce que nous voudrions qu'il fasse, c'est de ne pas laisser ce chevauchement. Hum, mais on pourrait le dimensionner ici si on voulait Teoh. Si vous vouliez réparer le avec de ceci ou choisir un spécifique avec, disons que nous voulions juste que ce soit, euh, vous savez, être est pourquoi est-ce que ça devait être Nous pourrions réparer le avec et ensuite ne pas rester. Mais je pense que dans ce cas, c'est un orteil très fin. ce soit un peu plus large, et nous n'avons pas besoin de fixer la taille, et alors cela peut s'étirer tellement à vous. D' accord, couvrons aussi une organisation dans ce dossier. Très bien, quand je clique sur cette instance de la barre de navigation, regardons dans mon panneau ovaire c'est un peu fou. Il se passe beaucoup de choses ici, et c'est un peu compliqué à analyser. Alors parlons de comment nous pouvons travailler pour nettoyer tout ça. C' est cette organisation qui commence par le symbole lui-même. Donc, si je clique sur cette barre de sieste pour récupérer Lizzie, cela montre tous les calques dans les symboles que j'ai à l'intérieur de ce symbole principal moi , pas notre symbole sur. Et ceux-ci sont ordonnés comme je viens de les créer. Mais je peux voir que si je clique sur l'instance du symbole the, ils seront dans le même ordre qu'ils sont répertoriés dans mon panneau Calques. Donc parce que Button s'affiche en premier ici, c'est parce que c'est la première chose dans ce calque. Donc ce que je veux faire, c'est nettoyer un peu ça. Je veux essentiellement Teoh, voir s'il y a quelque chose que je veux renommer et re organiser dans le symbole. Je trouve toujours plus facile d'organiser mes couches de gauche à droite. Donc ici ma sculpture Lugar serait le premier. Donc, nous allons juste réorganiser certaines de ces pièces en cliquant et en faisant glisser um, aussi Maintenant, j'ai tous mes liens de ma main, qui dans le panneau des symboles il nommé lien Knave. Laisse-moi déplacer celui-ci pour qu'on puisse le voir. Hum, et je vais cliquer sur l'instance, alors allons-y. , Maintenant,je peux voir ça dit Knave Ling ici et innocents roman ici. Mais ce qu'il ne fait pas n'est pas super utile, parce que je ne suis pas sûr de quel lien il s'agit. Donc, il y a quelques choses que je pourrais dio Mais ce que mes principales préférences est de cliquer dessus et encore parce que nous avons déjà configuré et personnalisé ces symboles dans cette barre de navigation. Et nous ne changerons pas le nom de ces symboles. Euh, avec chaque instance comme celle-ci va rester ce qu'ils sont. Je vais vraiment renommer ce lien de bidon ici à la maison et ensuite me laisser prendre la carouse, et je vais juste mettre ça en ordre des ateliers. Ok, alors commençons par ces trois. Maintenant, quand je clique sur l'instance, allez ici. Je vois les ateliers de navigation à la maison. Donc c'est dans l'ordre. Ça me montre aussi, euh, de quel lien de navigation je parle. Vous pouvez également les voir en survolant. Il les met en évidence. Mais j'ai l'impression que c'est beaucoup plus facile à savoir. Oh, je parle de la maison juste ici, et je vais te montrer quelque chose qui est, Ah, un peu plus tard, quand on regarde différents états de navigation que ça va être bien pour nous de le faire. Bon, revenons en fait à ce logo une seconde. Donc, si je regarde dans ce panneau, je vois le logo, cela me permet d'avoir l'option d'un remplacement. Ai-je besoin d'un remplacement pour le logo ? Il est très probable que je ne pense pas que dans ce cas, je ne pense pas que ça va changer du tout. Ça va juste être là et être statique pour que je puisse avoir la possibilité de me débarrasser de ce logo en termes de remplacement. Vous vous souvenez donc que lorsque nous avons cliqué sur le tableau d'art du symbole, vous avez géré les remplacements et vous avez la possibilité d'autoriser les remplacements tous ensemble. Mais ce que je peux faire, c'est d'aller individuellement ici et dire logo. Décochez. On dirait la carte des bits. Je dois aussi décocher parce que ce type est inventé. J' ouvre ça. Ça veut dire qu'il n'y a qu'un peu. Carte. Retourne ici. Décochez cela aussi. Et maintenant, si je reviens à mon instance, ce logo n'était plus du panneau de remplacement. Et donc je pense que cela aide à être capable de nettoyer comme une nouvelle chose. Ce croquis est fait assez récemment, et je pense que c'est une grande amélioration. Très bien, si je ne voulais pas que Teoh cache quelque chose, , il y a une autre chose dont je veux parler ici, , donc il y a l'étiquette de flèche, donc naviguer a le activée et montrant la carte binaire ici. Donc, quand vous avez des icônes qui sont des cartes binaires, qui sont essentiellement juste un fichier d'image sonore J pay Gershom, vous pouvez choisir d'échanger cette image avec n'importe quoi d'autre. Et parfois c'est utile. Way ferait probablement ça avec notre avatar, mais ici, ces icônes ne changeront pas. Laissons ça tranquille et je vais ici, en fait, laissez-moi encore. Vous devez cliquer sur le symbole Monde de l'art ensemble maintenant, donc j'ai sauté mon logo. Um, j'ai la maison. J' ai naviguer, et voici les cartes de bits. Tu dois juste regarder en bas de la liste des choses. J' ai donc le symbole de navigation. Ayez la flèche à l'intérieur de celui-ci, que je veux garder le symbole de flèche allumé, parce que c'est ainsi que je l'allume et l'éteins. Mais la carte des bits elle-même. Je n'ai pas besoin de pouvoir changer cela pour que je puisse décocher ça ici et maintenant. Revenons en arrière et en dessous de la navigation. Ils n'ont plus cette de cartedeflèches qui s'affiche. Donc c'est bien. Ça nous aide. D' accord, ateliers ont l'air bien. Et puis continuons à réorganiser dans l'ordre. Donc prochaine serait notre barre de recherche. Retournons ici. Voici notre recherche qui est déjà nommé pour nous. Donc c'est bien. Mais regardons ici pour que je puisse voir, hum, icône Recherche, que je peux aussi renommer. Si j'aimerais vraiment renommer les choses, je vais devoir revenir à mon symbole d'origine, donc je n'ai pas vraiment besoin de m'inquiéter pour ça maintenant. Ce n'est pas une affaire énorme, mais j'ai aussi la carte des bits ici pour cette icône de loupe de recherche . Et encore une fois, je ne vais pas échanger ça. Alors, cliquez sur le tableau d'art de la barre de Nash, faites défiler la barre de recherche vers le bas. Il y a cette carte. Décochez ça génial. Et ensuite, allons-y. Alors maintenant, je veux continuer avec mon prochain lien de sieste. Donc, après la barre de recherche, j'ai enseigné et ensuite j'ai mes cours. Et ensuite, j'ai mon icône de notifications. J' ai mon avatar et enfin, mon bouton pour que je puisse renommer l'une de ces couches si je pense que c'est utile, Um, je pourrais juste garder Button nommé son nom, mais je pourrais aussi nommer une prime go, mais si je veulent. Mais je pense que rester simple ici est totalement bien pour les notifications de barre oblique Icahn. Peut-être que nous pourrions simplement simplifier cela en disant des notifications. Hum, donc il y a ça. Et pendant que nous sommes là, revenons à nos droits. Nous voyons que nous avons encore la carte des bits ici. Alors allons par ici et éteignons à nouveau ces cartes binaires dont nous n'avons pas besoin. Donc, nous avons la flèche à nouveau et enseigner se débarrasser de ce cours et des navigations. Voici cette autre carte et j'en ai aussi une pour mon avatar. Alors, allons en avoir un pour une seconde. Je vais cliquer ici pour voir vite. C' est encore beaucoup de choses à regarder à travers, et c'est encore un peu désordonné, mais c'est une énorme amélioration par rapport à ce que nous avions avant. Hum, donc je suis rentré. Parcourir les ateliers, barre de recherche, enseigner mes lunettes. Notifications, Avatar. Maintenant, pour cet avatar, j'ai la possibilité de choisir l'image. Ce que je pourrais dio, c'est qu'il pourrait y avoir un moment où je veux réellement échanger cette image en fonction de l'endroit où j'utilise cette barre de navigation. Donc, cela montre essentiellement l'utilisateur qui est connecté. Dans ce cas, c'est moi. Si je faisais une maquette pour un autre utilisateur et qu'il était important d'échanger ce graphique , je pourrais juste choisir n'importe quelle image de mon ordinateur et l'utiliser pour échanger, et ça va le masquer de la même manière. Donc, il va juste échanger cette image, et vous pouvez le faire aussi souvent que vous le souhaitez. Vous pouvez le faire avec chaque instance du symbole si vous le souhaitez. , Pour qu'on puisse,on peut choisir de partir que tu peux. Aussi, Si vous pensez que vous voulez Teoh, vous pourriez vouloir orteil laisser ou pas. Laisse-le. Vous pouvez toujours changer d'avis par la suite et décocher ces choses parce que c'est une simple activation et désactivation. D' accord, alors on a notre bouton. Donc, ça a l'air beaucoup mieux qu'il ne l'a fait. Une autre chose que je trouve utile est qu'il y a d'autres choses que vous pouvez faire, euh que vous pouvez faire pour différencier les noms des symboles. Donc tu pourrais aussi cliquer sur la maison, par exemple, et on pourrait faire quelque chose comme, hum, juste en mettant quelque chose en face. Comme si je faisais des petits tirets, je vais te montrer à quoi ça pourrait ressembler. Um, cliquez ici, et ça aide parfois, à cliquez ici, et ça aide parfois, à trouver quels sont les 1 000 000 symboles contre, comme, quelles sont les choses à l'intérieur de ceux-ci ? trouver quels sont les 1 000 000 symboles contre, comme, comme, Une autre chose qui est assez agréable à faire est d'utiliser un emoji. Donc, s'il y avait quelque chose qui représentait une navigation et que vous vouliez juste utiliser un emoji ici, ça pourrait être vraiment utile, juste pour, genre, plus sec. J' ai vite orteil. Oh, c'est là que je dois aller orteil pour échanger ces dérogations. D' accord, je vais enlever ça pour l'instant, mais juste un petit conseil pour toi. Donc, nous avons sont maintenant loin tous mis en place. Tous assemblés. Nous avons notre panneau de remplacement bien organisé le mieux possible, euh, euh, sont les couches sont bien organisées ici à tour de rôle. Et maintenant, je peux l'utiliser partout où je veux, et nous l'avons réparé pour que je puisse mettre à l'échelle correctement. Um, si j'utilise cette barre Nath sur différentes tailles d'écran ou différentes tailles, nos planches sont super faciles. Maintenant, juste pour dire OK, ce type doit être un peu plus large. Il doit être un peu plus court. Il pourrait être l'utiliser pour montrer sur comme une maquette iPad ou quelque chose comme ça. Je suis pour que je puisse faire tout ça. Et juste une note aussi. Parfois, lorsque vous passez du bureau au mobile, en particulier sur la tablette. Parfois, vous avez différentes options disponibles en termes de navigation, vous ne voyez pas toutes les choses. Donc s'il y avait quelque chose que tu ne voulais pas montrer, , disons qu'on n'a pas montré les fesses. Oups, disons que nous n'avons pas montré le mais dans l'expérience mobile ou pour une raison quelconque, nous pouvons simplement aller ici et nous pouvons éteindre ce bouton. Donc, nous avons encore toutes ces façons de manipuler ce symbole. Il y a une autre chose que je veux vous montrer à propos de cette barre de navigation, alors passons dans la vidéo suivante. Il y a une autre chose que je veux vous montrer à propos de cette barre de navigation, 7. Plus de conseils pour les Tips de symboles: Parlons d'une autre chose que nous pouvons faire avec nos symboles de barre de navigation si souvent temps où vous avez un site Web, nous voulons montrer quelle page l'utilisateur est actuellement sur. C' est quelque chose que nous pourrions appeler soit un état sélectionné, soit un état actif. Et en ce moment, nous n'avons qu'un état de défaut. Donc, ajoutons un état actif afin que nous puissions basculer entre les deux afin que si je conçois, disons que la page d'atelier dans mon fichier je peux basculer ce symbole pour montrer que c'est une page de navigation de thème que parmi All right, nous allons commencer par dupliquer cette étiquette maintenant. Et maintenant encore une fois, la première chose que je veux dio yeux assurez-vous que je renomme les symboles. Donc, ils ont un nom unique depuis un roman ing actif et je vais changer celui-là c'est ça. Il a aussi cette structure d'arbre Teoh de voûte. Bon maintenant, je peux faire tout ce que je veux en termes de comment je veux représenter visuellement l'état actif ? Commençons par changer la couleur avant pour être un peu plus foncée, mais ce n' est pas une différence, surtout si on n'aime pas changer la couleur. Commençons par changer la couleur avant pour être un peu plus foncée, mais ce n' est pas une différence, Mais disons que je veux ajouter peut-être un peu de sous-jacent ici. C' est un modèle que nous avons vu beaucoup de fois. Donc si je veux avoir une petite barre de couleur ici, je vais devoir agrandir ce symbole. Maintenant. Je ne veux pas vraiment le faire d'ici. Ça va juste étirer les choses. Rendons le symbole de base lui-même un peu plus grand. Ça va juste nous rendre les choses plus faciles. Tout ce que je veux faire, c'est prendre des ateliers,par exemple, et changer le symbole que nous utilisons. , Tout ce que je veux faire, c'est prendre des ateliers, par exemple, Nous utilisons la valeur par défaut en ce moment, comme vous pouvez le voir ici, et passons à l'état actif. Alors que je construis le symbole, je peux voir ce qui se passe. Je me laisse aussi aussi juste appeler. Je veux le faire non pas à partir du symbole de la barre de navigation, mais en fait à partir de l'instance de celui-ci. D' accord, donc nous sommes des ateliers amusants qui se déroulent ici. C' est incroyable. T chute. Changeons cet orteil actif Maintenant ce qui s'est passé ici, j'ai cette étiquette de valet essentiellement retournée en arrière. Donc, si je retourne à la valeur par défaut, sont les remplacements que j'ai déjà fait. Mais parce que j'utilise un symbole différent pour cet actif, je vais devoir refaire ce que j'ai déjà fait. Donc je peux aller ici et changer les ateliers de Teoh, et je vais devoir me débarrasser de ma flèche. Bon, donc il y a ça. Donc c'est une chose qui est un peu ennuyeuse, mais c'est assez rapide. Tu peux le faire assez vite. Bon, alors on y va. Maintenant, j'utilise ça. Et si je change de couleur, je peux voir que ça va se mettre à jour. Mais pas dans le symbole original. On va revenir en arrière. Ok, donc maintenant quand tu cliques dessus, je veux dire, je veux étirer cette planche d'art pour qu'elle touche réellement le fond. Je pourrais tester ici. De quelle taille avons-nous besoin de ce truc ? Peut-être 42 pixels. On dirait que c'est Annuler ça. Donc, si j'ai étiré ça et que ça codé 42 maintenant, je ne veux pas que cela arrive. Rappelez-vous donc comment nous avons parlé d'ajuster le contenu lors du redimensionnement en vérifiant cela. C' est l'une des raisons pour lesquelles nous allons annuler cela. Je vais décocher Ajuster le contenu. Et maintenant je vais juste frapper ça à 42 pixels. Dis-le maintenant que ce type a déménagé. Alors disons qu'on veut ça. D' accord ? Donc, nous voulions vraiment aller et épingler ça sur le bord. Donc, encore une fois, vous pourriez être des symboles de test de stress tout le temps à tout moment. Donc toujours genre de assurez-vous que votre que vous vérifiez ces choses que vous allez afin que vous n'ayez pas de conséquences involontaires. D' accord ? Tout ce que je veux faire, c'est dessiner un peu de forme ici. Fais une petite boîte. Je vais que ça soit bleu. Ouais, Lotus un peu plus court de là. Ok, maintenant c'est le canard apparaît. Et ce que je veux aussi appeler, c'est quand je change la taille de ça. Maintenant, si je retourne ici deux ateliers, ça me donne toujours la possibilité de revenir. Oh, mais maintenant, je n'ai plus la possibilité de cliquer sur l'actif. Et c'est parce que les remplacements dans votre panneau ne vont choisir que des symboles de la même taille. Donc, nous voulons réellement prendre ce symbole par défaut et peut obtenir la même hauteur que l' autre . Quelqu' un déclipse, ajuste le contenu. Je vais traîner ça vers le bas. Enfilons ça en haut, juste pour ça. Je vais aussi faire cette année, Hillary. Et maintenant, si je clique ici, retournez aux ateliers maintenant, j'ai aussi cette option pour actif. On y va. Ok, mais faire quelque chose d'un peu funky. Donc peut-être que nous voulons déplacer ça pour pouvoir jouer avec ça. Ça dépend de l'endroit où tu veux ce bar. Tu veux qu'elle soit assise sur cette couche grise ? Tu veux au-dessus de cette couche grise ? Allons le faire ici, accord ? Autre chose, c'est que ça va être aussi large que ton symbole lui-même. Donc ici, vous savez, nous avons 88 pixels de large, alors voyons ce qui se passe si je redimensionne ce symbole. Si ça va rester. Oui. Donc c'est rester fixe, parce que là-haut, on répare la taille. Si nous n'avons pas corrigé la taille ici et si nous sommes à l'échelle, cette barre va changer de taille, qui est ce que nous ne voulons pas avoir lieu, donc nous allons nous assurer que c'est corrigé. Génial. Donc c'était vraiment facile. Hum, donc maintenant j'ai l'option ici de dire que je veux réellement utiliser la valeur par défaut. Peut-être que je veux changer de maison et utiliser l'acte d'État ici. Maintenant encore. On avait déjà changé les noms dans les étiquettes et tout, donc je vais devoir recommencer et dire, Pas de flèche. Et quelle est la dernière chose qui se passe ici ? Donc ce symbole éteint, pour une raison quelconque, il était encore large. Alors amenons ça. OK, et on y va. Maintenant, faisons encore une chose. Retournons pour copier ça. Donc, vous voulez créer à nouveau avec copier cette instance ? Retour chaud, Teoh, notre page principale. Encore une fois, ce n'est que la capture d'écran. Alors cachons ça. Et nous allons coller sont Knave bar ici. Maintenant, vous pouvez le voir un peu plus en contexte. Évidemment, ce n'est pas une page complète. Je le suis, mais vous pouvez voir ça ici. Donc, basculez par défaut. On y va. Peut-être que je veux cliquer sur mes classes et changer cela à l'acte d'état à nouveau. Et une fois que vous aurez nommé ces choses et que vous vous débarrasserez des symboles comme vous le souhaitez, ça restera. Donc maintenant, si je prends mes cours et retourne à la valeur par défaut Et maintenant, si je reviens à actif, ça va juste maintenir parce que j'ai déjà changé les remplacements là-bas. Alors on y va. C' est une jolie, hum, barre de navigation flexible et personnalisable. 8. Utiliser un symbole de base pour un composant modex: dans notre dernier exemple, je veux vous montrer comment les symboles complexes peuvent vous permettre d'être flexibles avec vos conceptions tout en adhérant à votre système de conception et en étant en mesure de maintenir la cohérence. Je vais également expliquer quand il y a des moments où vous ne devriez pas réellement utiliser des symboles pour certains composants. Alors parlons de ça. C' est un composant motile également connu sous le nom de pop-up, et ici j'ai trois exemples de la façon dont un motel pourrait être utilisé dans un système de conception. Dans ce 1er 1, c'est plus une confirmation, donc c'est juste une sorte de texter quelques boutons pour laisser l'utilisateur choisir. Dans le deuxième exemple, j'ai un motile de compte créer, où nous avons un formulaire. Et dans le troisième exemple, nous avons plus d'un motile informationnel qui pourrait juste apparaître et permettre à l'utilisateur de lire quelques informations puis de rejeter. Donc, à première vue, il ne semble pas vraiment qu'il y ait un moyen d'utiliser un symbole complexe pour réaliser chacun de ces trois designs. Alors, pourriez-vous créer des symboles séparés pour chacun d'entre eux ? Vous n'avez pas vraiment Teoh et personnellement je ne le ferais pas dans ce cas, alors passons à travers cela et parlons de pourquoi les symboles fonctionnent merveilleusement pour les composants qui seront réutilisés encore et encore, surtout quand vous n'avez pas affaire à beaucoup de variété avec ces composants. Maintenant, le composant Motile est quelque chose que nous utiliserions, probablement encore et encore. Mais il y a une certaine variation au sein de chacun de ces modèles. Parfois, vos conceptions ont besoin de cette variété, mais vous continuez à adhérer à un système de sorte que ces modèles ne semblent pas être issus de systèmes complètement différents. Il y a quelques points communs ici, et c'est là la clé. La clé est de trouver l'eau les points communs entre les variations et de centrer sur cela. Alors regardons ces trois modèles. Chacun d'eux a un titre et un ex pour rejeter le point de la composante motile. Certains d'entre eux ont des boutons, d' autres pas. Certains d'entre eux ont plus d'un corps de texte, et celui-ci ne le fait pas. Celui-ci est un formulaire. Celui-ci a une image, donc il y a des similitudes. Mais il y a aussi des différences. Ce que je peux faire ici est de créer un symbole complexe en tant que base, puis de construire dessus pour créer ces différentes configurations. Nous voulons que le conteneur de la motile dans certains éléments soit normalisé, tout laissant la souplesse nécessaire pour inclure tout contenu dans ce conteneur. Donc, dans cet exemple, où j'ai cette image, je pourrais avoir une image complètement différente. J' ai peut-être beaucoup de textos. Je pourrais vouloir inclure des boutons sur ce sujet parfois et parfois pas avec des formulaires. Il y a beaucoup de variations qui viennent avec un formulaire. Il ne sera pas toujours disposé de cette façon. Et puis avec les modèles de confirmation, il y a parfois plus d'options. Parfois, il y a plus de texte. Il y a encore une certaine flexibilité et des variations qui viennent avec chacun de ces styles. Donc, nous allons sauter dans le symbole de base que j'ai créé. Aller à ma page de symboles. Maintenant vous pouvez voir ici que j'ai quelques choses qui se passent. J' ai déjà créé des symboles pour nos boutons. J' ai des couleurs. J' ai certains de ces champs de texte et ensuite j'ai notre symbole mobile lui-même. Donc, ce que j'ai ici, c'est que j'ai rassemblé les points communs dont nous avons parlé. J' ai notre titre. J' ai une boîte de texte. J' ai nos boutons et l'icône X. Je veux donc vous guider à travers la façon dont nous pouvons utiliser ce symbole de base de plusieurs façons différentes pour créer toutes ces différentes variations. Ce 1er 1 est le plus étroitement aligné sur le symbole de base lui-même. Il a essentiellement toutes les pièces que nous venons de traverser. Et si je clique sur le symbole mobile, regardez le panneau de remplacement. Tout ce que j'ai fait est fondamentalement échangé le texte ici ajouté des étiquettes pour nos boutons, et c'est tout. C' est simple, c'est que j'ai beaucoup de flexibilité ici avec la quantité de texte, parce que la façon dont notre Symbolist a mis en place, nous pouvons le mettre à l'échelle aussi haut que nécessaire. On peut aussi le mettre à l'échelle comme pourquoi ça doit l'être et ces choses, euh, juste une sorte de réparer eux-mêmes. J' ai donc déjà mis en place ces contraintes et re dimensionnement. Je ne vais pas passer en revue cette partie maintenant parce que nous avons couvert ça dans les leçons précédentes . Donc, si vous avez besoin d'un rafraîchissement, il suffit de revenir en arrière et de regarder les autres vidéos de la barre de navigation en particulier dans ce prochain motile. Je vais ouvrir ce groupe donc j'ai le modèle de base ici, et si je cache cette autre section. Ce qui a essentiellement fait, c'est que j'ai utilisé les mêmes pièces que ce 1er 1 mais vous remarquerez n' y a pas de texte ici. En fait, je peux voir. Il veut me montrer qu'il y a quelque chose. Alors parlons de ça et vous remplacez. Fondamentalement, je n'ai rien dans le champ de texte là-bas, et un petit piratage pour que cela arrive, c'est que vous verrez que j'ai un espace. Je vais supprimer cet espace et vous verrez la boîte de texte mobile ici. C' est donc l'alignement sur ce qui se trouve dans le symbole de base. Mais pour pouvoir, si je ne veux pas ce texte là, tout ce que j'ai à faire est de cliquer ici et d'ajouter un clic d'espace. La barre d'espace a frappé le retour et il a disparu, donc c'est une façon vraiment agréable de permettre plus de flexibilité là-bas. J' ai aussi les boutons, donc c'est bon. Et puis j'ai sous cette forme des éléments. J' utilise les symboles que je vous ai montrés à partir de la page Symboles pour ces formulaires de champs de texte , et je les ai regroupés, donc c'est toujours un symbole complexe ou imbriqué. Mais toute cette chose n'est pas un symbole dans la troisième option ici, laissez-moi l'ouvrir à nouveau. Laissez-moi cacher ceci dans cet exemple, j'ai du texte et j'ai un peu plus de texte mais j'ai ici Mais ici, nous n'avons pas les boutons. Et donc si vous vous souvenez comment nous sommes en mesure de choisir quel bouton utilisaient, je peux parler basculer entre primaire et secondaire parce que j'ai déjà ces symboles vers le haut. Mais ici, je dis aucun parce que je ne veux plus de boutons dans celui-ci. Cela nous donne la flexibilité. Alors ce que je peux dio est dans le but de ma maquette. Si j'ai besoin d'inclure une image ici, je peux faire tout ce que je veux. Si cette image est à nouveau plus grande, je peux cliquer sur ce motile et je pourrais l'étirer. Peut-être que ce texte est plus long ou plus court. Peut-être que cette image est plus grande. J' ai toute la souplesse nécessaire pour le faire aussi. Non, juste parce que nous utilisons un symbole de base et même d'autres symboles imbriqués dans cela cela ne signifie pas que vous devez prendre chacun de ces modèles et en faire un symbole qui n'a pas vraiment d'importance. Utilisaient les blocs de construction qui créaient pour avoir la cohérence dans nos conceptions pour être en mesure d'utiliser les différentes pièces. Mais ça n'a pas de sens. Nous n'avons pas besoin de reproduire tout ce motile spécifique ou tout ce motile spécifique. Et c'est la beauté de ça. Cette méthode permet également plus de flexibilité par la suite, s'il y a d'autres types de modèles ou de configurations que vous voulez créer à nouveau, nous avons notre base ici et c'est suffisant. Donc ça nous fait commencer. Cela nous permet d'avoir cette cohérence au sein de notre système de conception. Nos boutons sont donc toujours au même endroit. Peut-être que parfois j'en ai juste besoin. Mais parfois, il n'y a pas de X. Je peux le cacher aussi. Mais en fin de compte, je reçois beaucoup de flexibilité et j'obtiens beaucoup de bang pour mon argent à partir de ce symbole unique. 9. Réflexions finales: J' espère que vous avez trouvé ces tutoriels et astuces utiles. Il y a tellement de façons d'utiliser des symboles complexes, des symboles imbriqués et des remplacements pour rendre la conception plus rapide et plus efficace. que les symboles fonctionnent pour vous, c'est une question d'essai et d'erreur. Alors n'ayez pas peur d'expérimenter. Et si vous êtes coincé, n' hésitez pas à poster des questions ici et moi-même, car vos camarades de classe peuvent vous aider. Merci beaucoup d'avoir pris ce cours.