Créer d'un pixel art dans Figma design
- Produit : Figma design
- Sujets : cadres, grilles de mise en page, grille de pixels, formes, couleur
- Durée : 20 minutes
Dans ce projet, nous allons créer un pixel art à l'aide de Figma design.
Un pixel art est une forme amusante de création numérique créée en utilisant des pixels comme blocs. Un pixel art est un support convenant aux débutants et accessible à presque tout le monde, même si vous n'avez aucune expérience artistique.
Il est possible d'utiliser un pixel art pour créer des illustrations amusantes, des modèles de point de croix ou des animations rétro. Ce projet est idéal pour apprendre à utiliser les grilles de mise en page et de pixels, outils importants pour créer des designs précis.
Dans ce projet, vous apprendrez à illustrer un cœur en pixels. Pour créer ce design, nous allons effectuer les opérations suivantes :
- Ajouter un cadre
- Configurer les grilles de mise en page et de pixels
- Créer une palette de couleurs
- Dessiner le contour du cœur
- Remplir le cœur
Si vous suivez les instructions étape par étape, votre illustration finale ressemblera à ce qui suit :
Ajouter un cadre
Commençons par créer un cadre.
Qu'est-ce qu'un cadre ?
Les cadres constituent les principaux blocs de Figma. Un cadre est un contenant qui renferme des éléments de design (formes, texte et images, par exemple). Vous pouvez les utiliser pour organiser et structurer les éléments de design sur le canevas.
Un cadre peut être de n'importe quelle taille et peut contenir un nombre indéfini d'éléments de design. Les cadres peuvent également être imbriqués dans d'autres cadres pour créer des designs complexes composés de plusieurs niveaux de hiérarchie.
- Cliquez sur l'outil Frame dans la barre d'outils ou appuyez sur F.
- Cliquez sur le canevas. Par défaut, Figma ajoute un cadre de 100 x 100. Lorsque vous ajoutez un cadre, notez qu'il est ajouté au panneau Layersde la barre latérale gauche.
- Dans le panneau Design de la barre latérale droite, redéfinissez la largeur et la hauteur, respectivement, sur 120 et 110.
C'est ici que nous allons créer le cœur en pixels. Pour nous assurer que notre cœur est parfait au pixel près, activons une grille de mise en page pour le cadre.
Configurer les grilles de mise en page et de pixels
Les grilles de mise en page permettent d'aligner les objets dans un cadre. Elles donnent également une structure visuelle pour que les designs restent logiques et cohérents entre les différentes plateformes et les différents appareils.
Pour activer une grille de mise en page, sélectionnez le cadre que vous venez de créer, puis cliquez sur le symbole plus en regard de Layout grid dans la barre latérale droite. Une grille rouge apparaît dans le cadre. Cliquez sur Layout grid settings pour ouvrir les paramètres de la grille de mise en page et vous assurer que la taille de votre grille est de 10 points. Vous pouvez également y modifier la couleur et l'opacité de la grille, si vous le souhaitez.
Si vous effectuez un zoom avant, vous verrez que la taille de chaque espace de la grille est de 10 pixels x 10 pixels, ce qui est parfait car nous allons utiliser des carrés de 10 x 10 comme blocs.
La grille de mise en page vous aidera à vérifier visuellement que tout est conforme. Toutefois, nous pouvons aller encore plus loin et utiliser la grille de pixels pour être vraiment organisé.
Quelle est la différence entre les grilles de pixels et de mise en page ? La grille de pixels est une grille statique en imagerie numérique qui ne peut pas être modifiée. Chaque carré de la grille de pixels représente un seul pixel, une fois exporté à une résolution de 1x. Les grilles de mise en page ne dépendent pas de la grille de pixels, ce qui signifie qu'elles ne dépendent donc pas de résolutions ou dimensions spécifiques. Vous pouvez modifier les grilles de mise en page en fonction des besoins de vos designs (grille à 8 ou 10 points, par exemple).
Utilisez le raccourci suivant pour activer ou désactiver la grille de pixels :
- Mac : ⌘ Command ‘
- Windows : Ctrl ‘
Vous voyez la différence ?
Pendant que nous y sommes, assurons-nous que le paramètre Snap to pixel grid est activé pour mettre plus facilement les éléments au bon endroit. Cliquez sur Main menu, passez le curseur de la souris sur Preferences, puis assurez-vous qu'une coche apparaît en regard de Snap to pixel grid.
Créer une palette de couleurs
Nous allons utiliser des carrés de 10 x 10 pour créer notre cœur. Pour ajouter un carré au canevas, sélectionnez l'outil Rectangle dans la barre d'outils ou appuyez sur R et cliquez sur le canevas.
Par défaut, Figma ajoute un carré de 100 x 100. Vous pouvez le redimensionner en sélectionnant une poignée et en faisant glisser le curseur de votre souris tout en maintenant la touche Maj enfoncée ou en saisissant les dimensions souhaitées dans les champs Width et Height dans le panneau Design. Quelle que soit la méthode utilisée, redimensionnez le carré en 10 x 10.
Notre premier bloc est créé ! Étant donné que notre cœur sera composé de quatre couleurs, dupliquons ce bloc pour que notre palette de couleurs soit prête. Sélectionnez le carré et utilisez le raccourci Duplicate :
- Mac : ⌘ Command D
- Windows : Ctrl D
Par défaut, Figma place le carré dupliqué directement au-dessus du carré d'origine. Faites-le glisser sur le côté et dupliquez-le encore deux fois. Alignez les quatre carrés au-dessus du cadre.
Nous souhaitons apporter à notre cœur plus de couleurs que le gris par défaut. Sélectionnez chaque carré, un à la fois, et utilisez le paramètre Fill dans la barre latérale droite pour modifier le remplissage comme suit :
- Carré 1 (couleur de contour) : #C771D3
- Carré 2 (couleur de remplissage) : #F5C0EF
- Carré 3 (couleur d'ombre) : #E99BF4
- Carré 4 (couleur de surbrillance) : #FAE4F8
Pour que tout soit en ordre, nommons les carrés de notre palette de couleurs en fonction de leur utilisation. Double-cliquez sur le nom du calque dans la barre latérale gauche ou utilisez le raccourci suivant et saisissez un nouveau nom pour chacun des carrés :
- Mac : ⌘Command R
- Windows : Ctrl R
Notre palette de couleurs est terminée et nous sommes désormais prêts à dessiner le contour du cœur.
Dessiner le contour du cœur
Sélectionnez le carré Couleur de contour dans votre palette de couleurs et utilisez le raccourci Duplicate pour le copier. Faites glisser le nouveau carré dans le cadre. Étant donné que nous avons activé le paramètre Snap to pixel grid, vous remarquerez que le carré s'aligne sur la grille de pixels sous-jacente, qui elle-même est alignée sur la grille de mise en page. Nous allons placer ce bloc dans la sixième colonne de la ligne du bas. Nous allons ensuite placer cinq carrés supplémentaires en diagonale, vers le haut et la gauche. Au lieu de créer un nouveau carré à chaque fois, sélectionnez le carré existant et dupliquez-le à l'aide du raccourci correspondant, comme précédemment.
Cliquez sur le carré et faites-le glisser sur la ligne du dessus, dans la colonne de gauche. Assurez-vous qu'il est aligné sur la grille de mise en page. Avec le deuxième carré toujours sélectionné, utilisez de nouveau le raccourci Duplicate. Une fois que vous avez placé une forme dupliquée, Figma part du principe que vous souhaitez continuer à placer les formes selon le même modèle et place automatiquement le nouveau carré sur la ligne du dessus, dans la colonne de gauche. Dupliquez le carré quatre fois de plus, jusqu'à atteindre le bord du cadre. En cas de problèmes, regardez le GIF suivant :
Une fois le bord du cadre atteint, continuez à dupliquer et à placer les carrés en suivant le modèle suivant :
- Trois carrés vers le haut
- Un carré vers le haut et sur la droite
- Un carré vers le haut et sur la droite
- Deux carrés sur la droite
- Un carré vers le bas et sur la droite
Une fois que vous avez terminé, votre fichier devrait ressembler à ce qui suit :
Au lieu de continuer à dupliquer les carrés pour finir le contour du cœur, gagnons du temps en dupliquant cette moitié.
Avant de la dupliquer, regroupons les éléments présents dans le cadre jusqu'à présent. Les groupes vous permettent de combiner des calques afin qu'ils puissent être traités comme un seul objet.
Cliquez et faites glisser votre curseur pour sélectionner tous les carrés présents dans le cadre, puis utilisez le raccourci suivant :
- Mac : ⌘ Command G
- Windows : Ctrl G
Vous remarquerez qu'un calque intitulé « Groupe 1 » apparaît désormais dans le panneau Layers de la barre latérale gauche. Cliquez sur le groupe et utilisez de nouveau le raccourci Duplicate pour ajouter un deuxième groupe. Une fois le « Groupe 2 » sélectionné, cliquez avec le bouton droit de la souris sur le groupe, puis sélectionnez Flip horizontal. Faites glisser la deuxième moitié du contour à sa place et utilisez les guides rouges pour l'aligner sur la première moitié. Ensuite, sélectionnez les deux groupes et utilisez de nouveau le raccourci Group pour regrouper les deux moitiés ensemble.
En cas de problèmes, regardez le GIF suivant :
Double-cliquez sur le nouveau calque « Groupe 3 » et renommez-le « Contour ». Ce calque étant terminé, verrouillons-le. Verrouiller les calques permet d'éviter que les objets ne soient déplacés ou modifiés de manière incorrecte. Pour verrouiller ce calque, sélectionnez le calque de contour et cliquez sur l'icône Lock dans la barre latérale gauche. Pour déverrouiller un calque, cliquez de nouveau sur cette icône.
Notre contour est parfait ! Il est maintenant temps de le remplir.
Remplir le cœur
Utilisez le raccourci Duplicate pour dupliquer le carré Couleur de remplissage de votre palette de couleurs. Faites glisser le nouveau carré dans le cadre.
Maintenant, il nous suffit de dupliquer le carré suffisamment de fois pour remplir l'intérieur du cœur.
Astuce : vous pouvez sélectionner et dupliquer plusieurs blocs à la fois pour remplir le cœur plus rapidement.
Nous pourrions nous arrêter là, mais donnons une touche personnelle à notre cœur en ajoutant des zones d'ombre et lumineuses.
Pour ajouter la zone d'ombre, nous allons sélectionner les blocs du côté gauche du remplissage intérieur du cœur. Vous pouvez sélectionner plusieurs blocs en même temps en maintenant la touche Maj enfoncée tout en cliquant sur les blocs. Sélectionnez les blocs indiqués dans l'image ci-dessous, puis définissez leur remplissage sur le code couleur #E99BF4. Vous pouvez également saisir le code couleur dans le champ Fill ou en appuyant sur I pour activer l'outil pipette et échantillonner la couleur d'ombre dans votre palette de couleurs.
Enfin, nous allons mettre en surbrillance deux blocs à droite en redéfinissant le code couleur sur #FAE4F8 à l'aide de la même méthode que vous avez utilisée pour ajouter la zone d'ombre.
Vous voulez changer les couleurs de manière rapide et groupée ? Vous pouvez utiliser la fonctionnalité Selection colors pour modifier les couleurs appliquées aux objets parmi une sélection. Sélectionnez le cadre et accédez au paramètre Selection colors de la barre latérale droite. Cinq couleurs doivent apparaître. Ignorez la couleur #FFFFFF car il s'agit de la couleur de remplissage du cadre. Changer le code des autres couleurs permet d'ajuster le remplissage de tous les objets avec la couleur appliquée. Essayez d'appliquer des tons de bleu, jaune ou violet à votre cœur !
Et ensuite ?
Féliciations ! Vous venez de créer un pixel art dans Figma design. Si vous êtes à la recherche d'un nouveau défi, essayez de recréer le chat en pixels ci-dessous à l'aide des outils que nous avons découverts aujourd'hui. Si vous êtes fier de l'une de vos créations, nous serions ravis de la voir ! Mentionnez-nous sur Twitter @Figma ou publiez-la sur la Communauté Figma.