Créer une illustration dans le design Figma

Dans le cadre de ce projet, nous allons illustrer une potion magique à l'aide du design Figma. La création d'illustrations est un moyen amusant de se familiariser avec l'éditeur et les outils Figma. Ne vous inquiétez pas si vous êtes novice en matière d'illustration ; nous utiliserons des formes, des groupes, des couleurs et des cadres de base. Nous verrons également comment l'organisation des calques peut avoir un impact sur vos designs.

Si vous suivez la procédure étape par étape, votre illustration finale ressemblera à la suivante :

Nous allons créer notre potion magique en procédant comme suit :

1. Créer la bouteille
2. Remplir la bouteille de potion magique 
3. La surmonter d'un bouchon en liège 
4. Ajouter quelques détails finaux
5. (Facultatif) Encadrer votre dessin et l'exporter

Créer la bouteille

Nous allons créer la bouteille en utilisant l'outil Ellipse, l'outil Rectangle et un groupe.

Ajouter les formes

Les outils Shape se trouvent dans la barre d'outils. Cliquez sur la flèche pour afficher les autres options de forme.

Nous allons ajouter une ellipse et deux rectangles au canevas :

• Pour ajouter une ellipse : Sélectionnez l'outil Ellipse ou appuyez sur [O] et cliquez sur le canevas
• Pour ajouter un rectangle : Sélectionnez l'outil Rectangle ou appuyez sur [R] et cliquez sur le canevas

Redimensionner les formes

Maintenant que nous avons nos blocs de construction, il est temps de les redimensionner. Vous pouvez redimensionner les objets soit en sélectionnant une poignée et en faisant glisser votre curseur, soit en saisissant les dimensions souhaitées dans les champs Width et Height du panneau de design.

Utilisez l'une ou l'autre méthode pour redimensionner les formes aux dimensions suivantes :

• Ellipse : 200 W x 200 H
• Rectangle 1 : 100 W x 100 H
• Rectangle 2 : 120 W x 40 H

Sur le rectangle 120 x 40, nous devons également arrondir les coins pour que le rebord de notre bouteille ne soit pas si net. Sélectionnez le rectangle et saisissez « 10 » dans le champ Corner radius de l'onglet Design.

Aligner les formes

Maintenant que nous avons nos formes, nous devons les aligner pour qu'elles ressemblent davantage à une bouteille. Cliquez sur une forme et faites-la glisser pour la déplacer sur le canevas. Au fur et à mesure que vous déplacez des objets, vous remarquerez que des guides rouges s'affichent. Ils vous aident à aligner l'objet sur les autres objets du canevas.

Alignez les formes de manière à ce qu'elles ressemblent à ce qui suit :

Grouper les formes

Notre bouteille a fière allure. Organisons les choses avant de continuer. Si vous regardez le panneau des calques dans la barre latérale gauche, vous remarquerez que chaque forme se trouve sur son propre calque.

Nous pouvons simplifier les choses en regroupant ces calques. Les groupes vous permettent de combiner les calques de manière à les traiter comme un seul objet.

Pour regrouper plusieurs calques, sélectionnez-les et utilisez le raccourci :

• macOS : Command + G
• Windows : Ctrl + G

Vous remarquerez que le panneau des calques de la barre latérale gauche n'affiche plus qu'un seul calque nommé « Groupe 1 ». Nommer les calques est un autre moyen efficace de rester organisé dans Figma. Double-cliquez sur le calque et renommez-le « Bouteille ».

Ajouter de la couleur

Donnons de la couleur à notre bouteille. Sélectionnez la bouteille et cliquez sur le paramètre Fill dans la barre latérale droite pour ouvrir le sélecteur de couleurs. Pour ce tutoriel, nous allons utiliser le code couleur #DEDCF9. Vous pouvez saisir le code dans le champ Fill ou utiliser le sélecteur de couleurs pour sélectionner une autre couleur.

Une fois la couleur de remplissage modifiée, il est temps de verrouiller ce calque. Le verrouillage des 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 la forme de la bouteille et cliquez sur l'icône de verrouillage dans la barre latérale gauche. Pour déverrouiller un calque, cliquez sur l'icône de déverrouillage.

Notre bouteille est terminée. Il est maintenant temps de la remplir avec la potion magique.

Créer la potion magique

Ajouter une ellipse

Utilisez l'outil Ellipse pour ajouter une ellipse au canevas et la redimensionner à 175 x 175.

Faites glisser l'ellipse sur la forme de la bouteille et utilisez les guides rouges pour vous aider à l'aligner. Modifiez la couleur de remplissage de l'ellipse comme vous avez modifié la couleur de la bouteille dans la dernière section. Pour ce projet, nous allons utiliser le code couleur #E99BF4. Vous pouvez saisir ce code dans le champ Fill ou utiliser le sélecteur de couleurs pour sélectionner une autre couleur.

Modifier l'ellipse

Nous allons utiliser le paramètre Edit object pour donner l'impression que notre potion remue dans la bouteille.

Sélectionnez l'ellipse et cliquez sur Edit object dans la barre d'outils pour passer en mode d'édition vectorielle. Le mode d'édition vectorielle vous permet de manipuler les différents points d'un objet sans modifier l'ensemble de la forme.

En mode édition vectorielle, cliquez sur le point supérieur de l'ellipse et faites-la glisser vers le bas et sur le côté. Si vous êtes bloqué, regardez le GIF suivant :

Lorsque vous êtes satisfait de l'aspect de votre potion, cliquez sur Done dans la barre d'outils pour quitter le mode d'édition vectorielle. Nous allons maintenant ajouter des bulles.

Ajouter des bulles à l'aide de l'outil Ellipse

L'outil Ellipse est mis à contribution dans ce projet. Nous allons l'utiliser pour ajouter des bulles à notre bouteille de potion.

Faites glisser l'outil Ellipse pour créer plusieurs petites bulles. Il n'est pas nécessaire qu'elles soient toutes de la même taille, mais veillez à ce qu'elles soient suffisamment petites pour tenir dans la bouteille. Nous avons utilisé un mélange d'ellipses 6 x 6 et 12 x 12. Avant de continuer, assurez-vous de modifier le remplissage de vos ellipses pour un résultat plus coloré. Nous avons utilisé le code couleur #985DF6.

Une fois que vous avez placé les bulles dans votre bouteille, faites glisser votre curseur sur toutes les ellipses de bulles et sur la plus grande ellipse de potion, puis regroupez-les à l'aide du raccourci suivant :

• macOS : Command + G
• Windows : Ctrl + G

Vous remarquerez que tous les calques d'ellipses de la barre latérale gauche sont condensés en un seul calque appelé « Groupe 2 ». Renommez le calque « Potion » et cliquez sur pour le verrouiller.

Créer le bouchon

Nous allons créer un bouchon à l'aide de l'outil Rectangle.

Ajoutez un rectangle au canevas et redimensionnez-le à 75 x 75. Utilisez le paramètre Corner radius dans l'onglet Design pour arrondir les angles du rectangle à 25.

Définissez le remplissage du rectangle sur #CE856C et renommez le calque « Bouchon ». Faites-le glisser sur le goulot de la bouteille.

Organiser vos calques

Nous ne voulons pas que le bouchon recouvre la bouteille et nous devons donc réorganiser les calques dans la barre latérale gauche. L'ordre des calques détermine la manière dont les objets sont affichés sur le canevas.

Déplaçons le calque « Bouchon » sous le calque « Bouteille » de sorte que seule la partie supérieure du bouchon s'affiche. Cela donnera l'impression qu'il se trouve à l'intérieur de la bouteille. Sélectionnez le calque « Bouchon » et faites-le glisser sous le calque « Bouteille ». Une fois le calque déplacé, cliquez sur pour le verrouiller.

Ajouter des lignes de reflets

Notre potion est presque terminée. Il ne nous reste plus qu'à ajouter quelques lignes de reflets pour la rehausser.

Ajoutez deux rectangles au canevas et redimensionnez l'un d'eux à 20 x 10 et l'autre à 40 x 10. Utilisez le paramètre Corner radius de l'onglet Design pour arrondir les angles des deux rectangles à 20.

Définissez le remplissage des deux rectangles sur #F2F2FF. Déplacez-les sur le rebord de la bouteille. Sélectionnez les deux rectangles et groupez-les à l'aide du raccourci suivant :

• macOS : Command + G
• Windows : Ctrl + G

Renommez le calque « Reflet » et verrouillez-le.

(Facultatif) Ajoutez votre illustration à un cadre et exportez-la.

Si vous souhaitez exporter votre illustration à partir de Figma, vous pouvez ajouter vos calques à un cadre. Les cadres sont l'un des principaux éléments constitutifs de Figma. Comme les groupes, vous pouvez utiliser les cadres pour rassembler tous vos éléments de design en un seul endroit.

Vous pouvez ajouter un nouveau cadre à l'aide de l'outil Frame de la barre d'outils et y faire glisser du contenu ou sélectionner directement des objets existants et les convertir en cadre. Choisissons la deuxième option.

Déverrouillez vos calques et faites glisser votre curseur sur votre illustration pour les sélectionner tous. Une fois que tout est sélectionné, cliquez avec le bouton droit de la souris et sélectionnez Frame selection. Vos quatre calques individuels sont imbriqués dans un calque nommé « Cadre 1 ». Si vous cliquez sur la flèche située à côté du nom, vous verrez que les calques nommés existent toujours et qu'ils peuvent être sélectionnés et modifiés individuellement. Renommez le nouveau calque « Potion magique ».

Si vous souhaitez exporter votre illustration, sélectionnez le calque « Potion magique » et utilisez les paramètres Export dans la barre latérale droite pour exporter votre design.

Et ensuite ?

Félicitations ! Avec seulement quelques formes de base, vous avez illustré une potion magique dans Figma. Si vous souhaitez relever un autre défi, essayez de recréer l'illustration de l'ours ci-dessous. Elle a été créée en utilisant exactement les mêmes outils que ceux que nous avons appris dans ce projet. Si vous êtes très fier de votre création, partagez-la avec la Communauté Figma.

Nous sommes impatients de découvrir votre prochain design !