Créer un design attrayant dans Figma peut sembler complexe.
Les erreurs dans la mise en page ou l’harmonisation des couleurs peuvent ruiner l’impact visuel de votre design.
Cet article vous guide pour réaliser une Gold Stripe Edition efficace en utilisant Figma, en simplifiant chaque étape du processus.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
On continue cet article avec la page Gold Stripe Edition, et sans plus attendre, commençons à faire son design. Tout d’abord comme vous l’aurez deviné, il faut dupliquer le wireframe. Sauf qu’ici nous n’allons pas mettre un fond noir, mais plutôt un fond blanc donc il suffira de supprimer le rectangle qui servait de background.
On commence tout de suite les modifications par le titre.
Après pour le contenu principal, il nous faudra un rectangle recouvrant toute la longueur du frame, comme ceci :
Pour le moment, masquer ce rectangle et faisant quelques modifications sur le texte et l’image :
- Prenez la photo correspondante dans les Ressources et changez le contenu textuel par la même occasion.
- Modifier ensuite les propriétés du texte comme sur l’image et aligner le texte et l’image horizontalement.
- Changez ensuite la couleur du texte en blanc, puis faites apparaitre le rectangle noir du fond et ajustez le contenu au-dessus de ce dernier.
Pour les bandes, ajustez leurs emplacements et colorez-les comme sur l’image en utilisant la pipette.
Pour cette page, ça sera vite fait bien fait, car le fond sera premièrement en blanc comme pour la page Gold Stripe Edition.
Pareil pour les propriétés du titre qu’on retrouve sur l’image suivante :
Ensuite, avec le texte descriptif de l’Adiclub, modifiez-le ainsi :
On ajoute maintenant le bouton REJOINDRE qui se trouve dans Assets à sa place.
Remplacer ensuite les différents niveaux par la photo dans les Ressources.
À présent, on va faire quelques modifications pour le dernier niveau (niveau 5) afin qu’il soit en cohérence avec les autres :
- Premièrement, créer un rectangle de même largeur que la figure.
- Puis ajouter un trait blanc en haut avec l’outil plume.
- Ensuite, un titre avec des contours en blanc.
- On ajoute le trait discontinu avec l’outil texte en écrivant plusieurs tirets.
- Mettez un petit sous-titre avec la couleur que l’on a pris dans les bandes tout à l’heure.
- Encore un autre texte
- Prenez ensuite les icônes dans les Ressources et ajoutez-les dans le design.
- Ajouter des textes de descriptions pour chaque icône.
- Et pour terminer le tout, vous pouvez ajouter l’image de l’article dessus.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment dupliquer un wireframe dans Figma ?
Quelles sont les étapes pour personnaliser un design sur Figma ?
Comment aligner texte et images sur Figma ?
Comment utiliser les icônes et les ressources dans un design Figma ?
Comment ajuster les couleurs et propriétés du texte dans Figma ?
Conclusion
En appliquant ces techniques de design Figma, votre projet prendra une nouvelle dimension esthétique. Quel autre projet envisagez-vous de transformer avec ces compétences ?
