Tutoriel d'esquisse

Comment créer un système de conception dans Sketch (cinquième partie)

Ici, je vais plonger dans les symboles imbriqués et vous montrer comment créer des composants complets pour votre système de conception.

Vous souhaitez améliorer considérablement votre flux de travail avec mon système de conception Premium pour Sketch? Vous pouvez vous procurer un exemplaire de Cabana ici.

Utilisez le code d'offre MEDIUM25 pour recevoir 25% de réduction.

Création de composants à l'aide de symboles imbriqués

Dans les articles précédents, je vous ai montré comment construire les fondations de ce qui deviendra votre système de conception dans Sketch, notamment en créant des éléments de base tels que Couleur et Typographie, des symboles de base tels que des icônes et du texte, et en créant des composants plus petits à utiliser dans le système.

Dans la quatrième partie, je n’ai abordé que brièvement les composants. Dans la cinquième partie, je voulais vraiment approfondir un peu plus la construction de composants complets avec la puissance des symboles imbriqués derrière eux.

Laissez-nous plonger dans…

Champ de formulaire (avec étiquette et message)

Ok, laissez-moi vous montrer comment j'ai construit quelque chose que les gens classeraient davantage comme un élément complet, chantant, dansant, avec une composante supplémentaire de pépites.

Et tout cela avec le pouvoir des symboles imbriqués. Oui, nous allons sur 3 niveaux. Christopher Nolan serait tellement, tellement fier!

Bien, c’est un champ Formulaire pour être exact, rien d’exceptionnel, mais comme je vais vous le montrer, vous verrez comment un assortiment d’éléments plus petits (Symboles) composent cet élément, et je vais le décomposer en tant que nous allons le long.

Voyons voir ce que nous allons…

Comme vous pouvez le voir ici, le composant fini est un simple champ de formulaire, avec une étiquette et un message…

Ce que j’ai étiqueté dans l’état final de son symbole en tant qu’icône d'entrée / de droite + libellé + message (je l’avoue, me laisse deviner, mais plus facile à trouver dans la liste déroulante des symboles plus tard, croyez-moi).

Et ici, vous pouvez le voir dans son état Symbole intact, avant que les nombreuses dérogations à sa disposition aient été modifiées…

Avec le composant final composé de 3 symboles distincts…

  • Étiquette
  • Contribution
  • Message

D'accord. Laissez-moi vous montrer comment j'ai assemblé ce composant…

Symbole d'entrée

Oh. Le symbole de l'étiquette? Eh bien, c’était simplement un symbole de texte que j’avais déjà créé, alors nous y reviendrons dans un instant.

Le symbole d'entrée était composé de 4 symboles distincts…

  • Le curseur
  • Texte
  • Icône
  • Etat

Alors tout d’abord, j’ai ajouté un des symboles d’état que j’avais déjà créés (vous en saurez plus à ce sujet dans la troisième partie ici).

Il a simplement renommé le calque en état et l'a redimensionné à 160x40.

J'ai ensuite inséré un symbole de curseur que j'avais également créé précédemment (il s'agissait simplement d'un calque de forme à 1x24 construit à partir d'un symbole de couleur de remplissage. Rien de trop zélé.), Je l'ai renommé simplement en Cursor et je l'ai positionné à 8 points de la gauche, Haut et bas du symbole d'état.

Pour le texte d'espace réservé, j'ai inséré l'un de mes symboles de texte existants et opté pour la couleur gris clair.

Renommez le calque, puis positionnez-le en conséquence.

Ensuite, j'ai augmenté la largeur de son cadre de sélection afin qu'il soit situé à 40 points du bord droit du symbole d'état, ce qui le rendrait également à 8 points du bord gauche du symbole d'icône que j'ai ajouté ensuite. Vous pouvez voir où je vais bien?

Et finalement, j'ai inséré un de mes symboles d'icône, je l'ai renommé, puis je l'ai positionné à 8 points à partir du bord supérieur, inférieur et droit du symbole d'état.

Ensuite, pour terminer, j'ai sélectionné tous les calques, les a convertis en symboles et les ai nommés Icône Entrée / Droite.

Avec mon symbole fraîchement fabriqué en place, j'ai simplement ajouté quelques contraintes de redimensionnement pour finir.

Pour le curseur, je l'ai épinglé sur le bord gauche et j'ai fixé la largeur et la hauteur…

Pour le texte, je l'ai épinglé sur le bord gauche et fixé la hauteur…

Et pour l'icône, je l'ai épinglé sur le bord droit, et fixé la largeur et la hauteur…

Symbole de message

Le symbole de message était composé d'une icône et d'un symbole de texte. Mort simple.

Permettez-moi de vous montrer rapidement comment je réunis ces éléments.

Tout d’abord, j’ai inséré un symbole d’icône que j’avais déjà créé, puis je l’ai renommé, puis réduit à 16x16.

Ensuite, j'ai ajouté l'un des symboles de texte, optant pour une taille de texte plus petite ici en raison du contexte dans lequel elle devait apparaître.

J'ai ensuite renommé le symbole texte, sélectionné les deux couches et converti en symbole, en le nommant Entrée / Message.

Avec mon nouveau symbole à la main, c’était à nouveau, comme je vous l’avais déjà montré, un cas d’ajustement de la taille de la planche d’art pour s’adapter à la hauteur de l’icône (16 pt)…

… En ajustant le libellé (via les remplacements) du symbole de texte et en ajustant la largeur de la planche graphique en conséquence…

… Puis, pour terminer, c’était un simple cas d’ajout de contraintes de redimensionnement.

Pour l'icône, je l'ai épinglé sur les bords supérieur et gauche, et fixe la largeur et la hauteur…

Et pour le texte, je l'ai épinglé sur les bords supérieur, gauche et droit…

Donc, avec les 3 symboles à portée de main…

  • Étiquette
  • Contribution
  • Message

… Nous pouvons les imbriquer pour créer un symbole puissant, et composant ensuite. Laissons-les tous ensemble.

Donc, tout d’abord pour l’étiquette, j’ai inséré un symbole de texte, optant à nouveau pour une taille de texte plus petite, et renommé le calque en étiquette.

J'ai ensuite inséré le symbole d'entrée, l'ai renommé simplement en entrée et placé sous l'étiquette.

Puis finalement, inséré le symbole de message, renommé Message et placé sous l’entrée.

Je ne me suis pas préoccupé de l’alignement ni de l’espacement. Tout cela pourrait être traité une fois que les 3 symboles ont été emballés dans un nouveau symbole.

Tout ce que j'ai fait est de m'assurer que les couches sont organisées de manière logique…

  • Étiquette
  • Contribution
  • Message

Ce qui à son tour place les dérogations dans un ordre plus gérable pour vous plus tard.

J'ai ensuite sélectionné les 3 symboles et créé un nouveau symbole.

Avec le symbole final construit (à partir des 3 symboles imbriqués), il s’agissait simplement, comme avant, de redimensionner un peu Artboard, d’ajuster les contraintes de redimensionnement et d’autres modifications mineures.

Et ça s'est passé un petit truc comme ça. Frappe le…

Tout d'abord, j'ai redimensionné l'Artboard afin qu'il s'accroche aux bords gauche et droit de l'entrée…

… Puis avec le symbole d'entrée toujours sélectionné et en utilisant les contraintes de redimensionnement, il l'a épinglé à toutes les arêtes.

Et pour le symbole de l’étiquette, la largeur de ce dernier a été augmentée jusqu’à la largeur totale de l’artboard, puis ajustée au bord supérieur.

Ensuite, ajustez le texte Remplacer pour lire le libellé, puis épinglez-le aux bords supérieur, gauche et droit, puis corrigez la hauteur à l'aide des contraintes de redimensionnement.

Pour le symbole de message, et comme pour l’étiquette précédente, sa largeur a été augmentée jusqu’à la largeur totale de la planche graphique, puis accrochée au bord inférieur.

J'ai ensuite ajusté le texte de substitution pour lire Message, puis l'a épinglé sur les bords inférieur, gauche et droit, puis a fixé la hauteur à l'aide des contraintes.

La dernière chose à faire était alors simplement d’aligner les éléments verticalement les uns sur les autres en utilisant 8 points entre chaque élément, et de réajuster la taille de la planche graphique si nécessaire.

Avec cette composante finalement construite, j'avais maintenant une abondance de dérogations à portée de main…

… Et cela m'a permis de personnaliser avec la plus grande facilité lors de la réalisation d'un projet.

Oh. Et avant de partir (et si vous êtes toujours avec moi), voici un petit bonus supplémentaire sur la façon dont j'ai construit les cases à cocher, les boutons radio et les commutateurs dans mon système de conception…

Case à cocher

Pour les cases à cocher, il s'agissait simplement de réunir deux éléments existants de l'intérieur de mon système; Icône et symboles de texte, créant les substitutions nécessaires, puis appliquant les contraintes de redimensionnement requises.

Les 5 États différents que je visais sous forme de composant étaient les suspects habituels…

  • Ordinaire
  • Flotter
  • Indéterminé
  • Vérifié
  • désactivé

Laissez-moi vous montrer comment j'ai mis la case à cocher ensemble…

Tout d’abord, j’ai fait référence aux symboles icône / case à cocher que j’avais déjà créés…

… Et de ceux que j'ai insérés la case à cocher / état normal.

J'ai ensuite fait référence aux symboles de texte que j'avais déjà créés précédemment…

… Et est tombé dans l'un de ceux…

J'ai ensuite renommé les calques en quelque chose d'un peu plus maniable (icône et texte), sélectionné les deux et converti en un nouveau symbole (entrée / case à cocher + libellé).

Une fois que j'ai eu ce nouveau symbole prêt et prêt, il était alors nécessaire de faire un peu de peaufinage pour obtenir le dimensionnement et l’espacement exacts.

J'ai ajusté l'Artboard de manière à ce qu'il corresponde à la hauteur du symbole de l'icône (24 pt)…

Ensuite, en utilisant les remplacements sur le symbole du texte, renommé le en "Etiquette" et (une fois de plus appelant le pouvoir tout-puissant de Grayskull, je veux dire système de grille de 8 pt) le positionnait à 8 pts à droite de l'icône, puis ajustait la largeur de l'Artboard afin le bord droit s’aligne sur le bord droit du symbole de texte…

Enfin, pour que tout reste en mode de redimensionnement satisfaisant, j’ai épinglé l’icône aux bords supérieur et gauche, et fixé la largeur et la hauteur.

Et pour le symbole de texte, il a épinglé les bords supérieur, gauche et droit.

J'avais maintenant un composant Checkbox que je pouvais facilement (avec un certain nombre de remplacements à ma disposition), ajuster les états, éditer le texte, redimensionner facilement, et plus encore…

Jours heureux!!

J'ai ensuite suivi un processus très similaire pour le bouton radio et les composants de commutateur à bascule…

Choisir 4 états pour les boutons radio…

  • Ordinaire
  • Flotter
  • Vérifié
  • désactivé

… Et pour le commutateur à bascule…

  • De
  • Sur
  • désactivé

J'espère qu'avec cet examen plus approfondi des symboles à l'intérieur d'un système de conception, en particulier des symboles imbriqués (connus pour effrayer certaines personnes lorsqu'il s'agit de comprendre leur fonctionnement correct), vous avez maintenant une meilleure compréhension de la Construisez des composants complets, prêts à être personnalisés et avec la plus grande facilité.

Vous ne voulez pas construire un système de conception vous-même? Vous pouvez vous procurer un exemplaire de Cabana ici.

Utilisez le code d'offre MEDIUM25 pour recevoir 25% de réduction.

Merci d'avoir lu l'article,

Marc

Concepteur, auteur, père et amoureux de superbes suites (Blade Runner 2049, je te regarde)