L’iconographie est un art perdu. L’illustration prend beaucoup de temps et il existe déjà une abondance de ressources. Il ne vaut donc pas toujours la peine de réinventer la roue. Mais nous pouvons avoir besoin d’un style artistique spécifique, ou le cadre d’icônes que nous utilisons peut ne pas avoir l’icône que nous voulons, il vaut donc la peine de se plonger un peu dans le fonctionnement de l’illustration dans Figma. Dans ce didacticiel, nous apprendrons à dessiner et à manipuler des vecteurs dans Figma en créant une icône en forme de cœur pour accompagner le bouton.
Commencez par créer un cadre 16 × 16, qui sera le cadre de délimitation de notre icône. Paul Wilshaw explique pourquoi il est préférable d’utiliser 16×16 dans son article sur la conception d’icônes.
Ensuite, cliquez sur le + à côté de « Grille de mise en page » dans le panneau Conception pour ajouter une grille au cadre, cliquez sur l’icône « Paramètres de la grille de mise en page », puis changez la « Taille » en 1 pour rendre les pixels carrés individuels plus clairs. Pour garantir que l’icône s’affiche clairement dans la plupart des tailles et des résolutions d’écran, l’objectif sera d’aligner l’icône avec les lignes de la grille autant que possible.
Passons maintenant à l’icône elle-même. Commencez par créer une forme Rectangle et spécifiez le « W » comme 16 et a 10puis cliquez sur l’icône « Coins indépendants » avant de spécifier les rayons des coins comme 0, 5, 5et 0 dans cet ordre (c’est-à-dire dans le sens des aiguilles d’une montre à partir du coin supérieur gauche).
Ensuite, dupliquez le calque et changez la « Rotation » en 90.
Après cela, alignez le calque sur le bord gauche du cadre et l’autre calque sur le bord inférieur du cadre, puis, avec les deux calques sélectionnés, cliquez sur l’icône « Union sélection » dans la barre d’outils horizontale pour fusionner les calques en une seule couche.
Changez la « Rotation » en 45– et c’est la forme de coeur faite.
Avant de faire tenir la forme du cœur dans le cadre, ajoutez un trait (bordure) en cliquant sur le + icône à côté de « Trait » dans le panneau Conception, en choisissant 2 pour la « Largeur du trait ». Plus tard, cela nous offrira la possibilité d’utiliser des icônes décrites ainsi que des icônes remplies.
Remarque : pour afficher les icônes à une taille différente, il est préférable de les mettre à l’échelle plutôt que de les redimensionner. La différence est que l’outil Échelle—sous l’icône « Déplacer les outils » dans la barre d’outils horizontale (K) : met également à l’échelle proportionnellement les tailles telles que la largeur du trait, tandis que le redimensionnement n’affecte pas les tailles telles que la largeur du trait.
Ensuite, faites un clic droit sur l’icône, puis choisissez aplatir (commande + E / ctrl + E). Nous verrons que, bien que la rotation ne soit plus en vigueur, le calque reste tel que nous l’avons défini, ce qui signifie que nous pouvons maintenant le redimensionner horizontalement et verticalement au lieu de diagonalement (ce qui donne un effet étrange).
Après cela, cliquez sur l’icône « Contraindre les proportions » dans le panneau Conception, définissez la plus grande dimension (qui devrait être « W ») sur 16cliquez à nouveau sur l’icône « Contraindre les proportions » (pour que les dimensions ne soient plus contraintes), arrondissez le « H » à 14 (pour que l’icône ne remplisse que pixels complets), faites-le glisser et accrochez-le au centre du Cadre, puis cliquez sur le — icône dans la section Remplissage pour supprimer le remplissage.
Lors de la conception d’icônes, nous devrions essayer d’utiliser tout l’espace Frame disponible afin que plusieurs icônes puissent être alignées horizontalement ou verticalement si nécessaire. Cependant, ce n’est pas toujours faisable, vous pouvez donc redimensionner légèrement les icônes si nécessaire. Cela n’affecte pas la largeur du trait, nous n’aurons donc pas à nous soucier de leur apparence incohérente. Pour vous assurer qu’une icône est mise à l’échelle avec un cadre lorsque nous redimensionnons le cadre, changez « Gauche » et « Haut » en « Échelle » dans le panneau Conception (dans la section Contraintes).
Enfin, sélectionnez le cadre, puis cliquez sur l’icône « Redimensionner pour s’adapter » pour couper l’espace négatif, redimensionnant ainsi le cadre.
Nous avons maintenant l’icône complète ! Nous pouvons également nous essayer à dessiner à partir de rien et/ou à utiliser des formes et à les modifier. Cependant, cela demande un certain savoir-faire et temps d’apprendre. La conception d’icônes elle-même prend également beaucoup de temps, surtout lorsqu’il existe de nombreuses ressources de conception gratuites. Figma a un didacticiel vidéo qui nous guide à travers cela, mais le Plugin Font Awesome est probablement la meilleure solution pour implémenter des icônes aujourd’hui.
Cet article est un court extrait de Le guide du concepteur de Figmadisponible sur SitePoint Premium.
Source link