Création d'une carte de profil personnalisée
Présentation du projet
- Produit : Design Figma
- Sujets : Ajout et mise en forme de cadres, de formes, de textes et d'images
- Longueur : 20 minutes
Dans le cadre de ce projet, nous allons créer une carte de profil personnalisée. Vous pouvez en créer une pour vous seul ou créer un template pour que tous les membres de votre équipe puissent se présenter.
Pour créer un fichier de design Figma, cliquez sur Drafts dans le navigateur de fichiers. Cliquez ensuite sur la vignette New design file. Vous pouvez également saisir figma.new dans votre navigateur Web pour accéder directement à un tout nouveau fichier.
Élaborer votre mise en page à l'aide de cadres, de formes et de texte
Commençons par ajouter tous nos objets au canevas, y compris :
- Un cadre contenant le design
- Un rectangle à utiliser en tant que couleur ou image d'arrière-plan
- Une ellipse à utiliser en tant qu'avatar
- Deux calques de texte, pour votre nom et quelques informations vous concernant
Ne vous préoccupez pas de l'aspect de vos objets lorsque vous ajoutez des formes au canevas ! Tout sera parfait lorsque vous commencerez à utiliser le panneau de design pour modifier vos objets.
Ajouter un cadre
Qu'est-ce qu'un cadre ?
Les cadres sont les principaux éléments constitutifs de Figma. Un cadre est un conteneur qui contient des éléments de design tels que des formes, du texte et des images. Ils permettent d'organiser et de structurer les éléments de design sur le canevas.
Un cadre peut être de n'importe quelle taille et contenir n'importe quel nombre d'éléments de design. Les cadres peuvent également être imbriqués dans d'autres cadres pour créer des designs complexes avec plusieurs niveaux de hiérarchie.
Commençons par créer un cadre et y ajouter des objets.
- Cliquez sur l'outil Frame dans la barre d'outils.
- Cliquez sur le canevas pour créer un cadre de 100 x 100. Notez que lorsque vous en créez un, il est ajouté au panneau des calques dans la barre latérale gauche.
- Dans le panneau de design de la barre latérale droite, définissez une largeur de 390 et une hauteur de 750.
Astuce : Vous pouvez utiliser l'outil Hand pour effectuer un panoramique dans un fichier sans sélectionner ni déplacer d'objets. Vous pouvez également effectuer un zoom avant ou arrière en appuyant sur la touche ou de votre clavier.
Ajouter un rectangle et une ellipse
Ajoutons maintenant un rectangle et une ellipse dans le cadre :
- Pour ajouter un rectangle : Sélectionnez l'outil Rectangle et cliquez dans le cadre
- Pour ajouter une ellipse : Sélectionnez l'outil Ellipse et cliquez dans le cadre
Ne vous préoccupez pas trop des dimensions exactes, nous pourrons les modifier plus tard.
Ajouter du texte
- Cliquez sur l'outil Text dans la barre d'outils.
- Cliquez dans le cadre pour créer un calque de texte.
- Écrivez votre nom et cliquez n'importe où sur le canevas une fois que vous avez fini d'écrire.
- Créez un deuxième calque de texte et écrivez une description.
Astuce : Il est maintenant temps de vérifier que vos objets se trouvent bien à l'intérieur du cadre. Examinez le panneau des calques dans la capture d'écran suivante.
Votre rectangle, votre ellipse et votre texte doivent être imbriqués sous le cadre. Si rien n'est imbriqué, vous devrez sélectionner chaque objet sur le canevas et le faire glisser dans le cadre.
Utiliser le panneau de design pour modifier des objets
Chaque objet du canevas possède des propriétés qui déterminent sa position et son aspect. Lorsque vous cliquez sur un objet pour le sélectionner, le panneau de design dans la barre latérale droite se met à jour pour fournir des informations sur cet objet. Dans cette section, nous allons modifier les propriétés de nos objets afin d'harmoniser notre design.
Créer un arrière-plan élégant pour la carte
- Faites glisser le rectangle jusqu'au coin supérieur gauche du cadre. Lorsque des lignes rouges s'affichent, cela signifie que Figma essaie d'aligner le rectangle sur le cadre.
- Dans le panneau de design, définissez la largeur sur 390 et la hauteur sur 200.
Astuce : Vous pouvez redimensionner manuellement un objet en le sélectionnant et en saisissant ses coins. Lorsque vous redimensionnez ou déplacez des objets, vous remarquerez que des guides rouges s'affichent sur le canevas. Ces guides vous aident à aligner la forme sur les autres objets du canevas.
Ajoutons maintenant une couleur au rectangle :
- Le rectangle étant sélectionné, cliquez sur la valeur de la couleur sous Fill.
- Utilisez le sélecteur de couleurs pour essayer une couleur.
Ajouter votre visage à l'avatar du cercle
Ajuster la taille et la position
- Définissez la hauteur sur 185 et la largeur sur 185.
- Faites glisser le cercle de manière à ce que la moitié soit au-dessus du rectangle et qu'il se trouve au centre horizontal du cadre.
Ajouter un trait
- Le cercle étant sélectionné, cliquez sur l'icône plus à côté de Stroke.
- Définissez la couleur du trait sur blanc, ou sur #FFFFFF.
- Définissez la position de la course sur l'extérieur.
- Définissez l'épaisseur du trait sur 8.
Ajouter un remplissage d'image
- Une fois le cercle sélectionné, cliquez sur la valeur de la couleur sous Fill.
- Cliquez sur Solid et définissez le type de remplissage sur Image
- Survolez le damier noir et blanc dans la superposition et cliquez sur Choose image.
Mettre le texte en ordre
Transformer votre nom en titre
- Sélectionnez le calque de texte contenant votre nom.
- Cliquez sur un côté de la zone de texte et faites-le glisser pour la redimensionner manuellement et déverrouiller les propriétés de largeur et de hauteur. Définissez la largeur sur 320.
- Cliquez sur Align horizontal centers.
- Sous Text, alignez le texte sur Center.
- Définissez la taille de la police sur 32.
- Modifiez l'épaisseur de la police de Regular à Bold.
- Faites glisser le calque de texte sous votre avatar.
Ajuster la largeur et l'alignement de la description
- Sélectionnez le calque de texte contenant votre description.
- Cliquez sur un côté de la zone de texte et faites-le glisser pour la redimensionner manuellement et déverrouiller les propriétés de largeur et de hauteur. Définissez la largeur sur 320.
- Cliquez sur Align horizontal centers.
- Définissez la taille de la police sur 16.
- Faites glisser le calque de texte sous votre nom.
Arrondir les angles de la carte
Pour terminer, sélectionnez le cadre et définissez Corner radius sur 24.
Vous avez terminé ! Félicitations ! 🎉
Envie d'expérimenter avec votre création ? Voici quelques idées :
- Ajoutez un remplissage d'image au rectangle pour donner à votre avatar un arrière-plan élégant
- Transformez la carte en un composant que d'autres personnes peuvent utiliser