Tutoriel d'esquisse

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

Je vais vous montrer comment combiner différents symboles pour créer des composants plus personnalisables.

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.

Construire vos composants

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 la création d'éléments de base tels que la couleur et la typographie, puis sur les symboles de base tels que les icônes et le texte, qui peuvent ensuite être implémentés dans d'innombrables autres symboles à mesure que vous avancez.

Dans la quatrième partie, je veux vous montrer comment combiner ces symboles plus petits, tels que Couleur, Texte, Icônes, Formes de boutons et États, pour commencer à créer de petits composants pour votre système de conception, avec en prime les contraintes de redimensionnement de Sketch pour les rendre adaptables. à différentes tailles d'écran.

Remarque: comme je l’ai mentionné dans les articles précédents, je ne vous montrerai pas comment créer des centaines de symboles ou de composants. Je vais simplement vous donner un bref aperçu de certains des éléments clés ici.

Laissez-nous plonger dans…

Pour les composants de bouton, j'ai opté pour 3 tailles (petite, moyenne et grande) pour me donner une certaine adaptabilité lors de la création d'illustrations pour différentes tailles d'écran.

J'ai également mis à nouveau en jeu le système de grille de 8 points que j'ai mentionné dans la première partie, afin de conserver un élément d'uniformité.

En commençant par les gros boutons, j'ai choisi de créer 4 variantes de composant -

  • Par défaut (pas d'icône)
  • Icône (pas de texte)
  • Icône de gauche (avec texte)
  • Icône de droite (avec texte)

Suffisamment de variété dans la conception pour s’intégrer à 99,9% des projets que vous créerez ultérieurement.

Donc, en commençant par le composant Bouton large / par défaut, j’ai tout d’abord laissé tomber le Shape / Fill / Radius - 4px que j’avais créé précédemment. Maintenant, vous pouvez choisir le symbole avec un rayon de 0px ou 100px qui sera votre choix par défaut.

J'ai ensuite renommé le calque simplement en bouton, et j'ai remarqué qu'avec ce calque en place, j'avais également à ma disposition les remplacements de symboles (état et couleur des boutons). Très pratique en effet!

A partir des symboles de texte que j'avais précédemment créés, j'ai ajouté le symbole Texte / Bouton / Grand / Centre / Blanc et j'ai simplement renommé le calque en texte.

Maintenant, voulant adhérer au système de grille de 8 pt, et en utilisant un peu de calcul, j’ai ajusté la largeur et la hauteur du calque de bouton de manière à ce que le calque de texte que je viens d’ajouter soit aligné de 8 pt en haut et en bas du bouton, et de 32 pt depuis les bords gauche et droit.

Lorsque le calque de boutons a été redimensionné en conséquence et que le calque de texte a été aligné correctement, j'ai sélectionné les deux calques et les ai convertis en un symbole le nommant ainsi: Bouton / Grand / Par défaut.

Travaillant maintenant avec le symbole de bouton fraîchement créé, j'ai sélectionné le symbole de texte à l'intérieur de celui-ci…

… Et à partir des contraintes de redimensionnement du panneau de l'inspecteur, épinglez-le sur les bords gauche et droit et fixez la hauteur. Maintenant, chaque fois que je redimensionne ce symbole de bouton à l'intérieur de mes projets, je sais que le texte à l'intérieur de celui-ci s'alignera parfaitement.

Maintenant, en insérant ce symbole dans un projet, je dispose d’une multitude d’options (dérogations) qui me permettent d’ajuster cette composante avec un minimum d’effort. Huzzah avec des pépites !!

Sur le bouton d'icône. A nouveau, j’ai simplement inséré le symbole Forme / Remplissage / Rayon - 4px que j’avais créé précédemment, l’a renommé et l’a ensuite ajusté à une forme plus carrée.

Puis, dans mes symboles, insérée dans l’une des icônes précédemment créées, le calque (icône) a été renommé, le changement de couleur a été remplacé par le blanc…

… Et ensuite, à l'aide de l'outil Echelle, sa taille a été augmentée à 32 x 32 pixels.

J'ai ensuite ajusté les dimensions du calque de forme afin que le symbole d'icône soit aligné à 8 points par rapport à tous les bords.

Avec le calque de boutons et le calque de texte alignés correctement, j'ai sélectionné les deux calques et les ai convertis en un symbole, en le nommant ainsi: Bouton / Grand / Icône.

Travaillant maintenant avec le symbole de bouton nouvellement créé, j'ai sélectionné le symbole d'icône à l'intérieur de celui-ci, et l'utilisation de contraintes de redimensionnement a fixé la largeur et la hauteur. Cela évite simplement la déformation de l'icône lorsque le symbole est redimensionné à l'intérieur de vos projets.

Passant sur le symbole icône Bouton / Grand / Gauche, en suivant les étapes similaires aux boutons précédents que j’avais créés, j’ai inséré un symbole Forme / Remplissage / Rayon - 4px puis en ajustant légèrement les dimensions (180px x 47px si vous vouliez connaître le dimensions exactes)…

J'ai ensuite inséré un symbole d'icône, l'a renommé, l'a redimensionné à 32 x 32 pixels et modifié le remplacement de couleur en blanc.

Et parmi les symboles de texte que j'avais précédemment créés, j'ai ajouté le symbole Texte / Bouton / Grand / Gauche / Blanc et renommé le calque en texte.

Et une fois de plus, en adhérant au système de grille de 8 points, j’ai aligné le symbole de l’icône, de sorte qu’il était à 8 points du haut, du bas et du bord gauche.

Et pour le symbole de texte, il était donc de 16 points à droite de l'icône, à 8 points du haut et du bas du symbole du bouton, et à l'aide des poignées de redimensionnement, réglez-le de sorte que son cadre de sélection se situe à 16 points du bord droit du symbole du bouton. .

Maintenant, avec tous les 3 calques sélectionnés (texte, icône et bouton), je me suis converti en symbole et l'ai nommé bouton / grande / icône gauche.

En travaillant à partir du symbole de bouton nouvellement créé, j'ai d'abord sélectionné l'icône, puis je l'ai épinglé sur le bord gauche, puis j'ai fixé sa largeur et sa hauteur.

Puis, avec le symbole de texte sélectionné, je l’ai épinglé aux bords gauche et droit et j’ai fixé la hauteur.

Enfin, pour le symbole Icône de bouton / Grand / Droite, j'ai suivi un processus similaire à celui des boutons précédents.

  • Insertion d'un symbole de remplissage de forme et ajustement de ses dimensions
  • Insérer un symbole d'icône, le redimensionner et changer sa couleur
  • Insérer un symbole de texte (en utilisant à nouveau la variante alignée à gauche)

Ensuite, alignez et redimensionnez (symbole du cadre) le symbole de texte afin qu’il se situe à 16 pt du bord gauche, à 8pt du bord supérieur et inférieur du bouton et à 16pt du bord gauche de l’icône.

Et pour le symbole de l’icône, il était donc à 8 pt des bords droit, supérieur et inférieur du bouton.

Ensuite, j'ai sélectionné les 3 couches (texte, icône et bouton), puis converti une fois de plus en icône / icône grande / droite.

Et enfin, avec les contraintes de redimensionnement, épinglez le calque de texte sur les bords gauche et droit et fixez sa hauteur.

Et pour l’icône, il a épinglé le bord droit et a fixé sa largeur et sa hauteur.

Après avoir mis en jeu les symboles de gros boutons, je suis ensuite passé à travers les variantes Moyenne et Petite en suivant un processus très similaire à celui que je vous ai montré, mais cette fois en insérant, par exemple, Texte / Bouton / Moyen / Centre / Blanc. Symbole, et redimensionner le symbole de l'icône en conséquence, tout en restant conforme au système de grille de 8 points.

Jusqu'à ce que je dispose de 12 composants plutôt fins maintenant. Oooh j'aime ça!

J'ai ensuite créé des composants tels que des éléments de formulaire, des menus et des listes déroulantes, une navigation, une pagination, etc. Les éléments clés de tout projet sur lequel vous travaillez sont présentés sous une forme désormais facilement personnalisable et qui me permet de rester au courant lorsque je travaille sur un projet.

Cela m'a ouvert les yeux sur la création de ces éléments fondamentaux plus petits tels que le texte, la couleur et les symboles d'icônes, puis vous permet de créer facilement des composants beaucoup plus volumineux, et comment ces petits blocs de construction sont la clé de tout type de système de conception. vous espérez construire.

Rejoignez-moi pour la partie 5 (que vous pouvez consulter ici)

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

Créateur, auteur, père et amoureux des chips (ou des chips, si vous êtes de l’autre côté de l’étang)