• 6 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 23/06/2022

Créez votre maquette avec Figma

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous avez maintenant de véritables bases pour construire votre maquette haute-fidélité avec vos wireframes sur Figma, et votre univers visuel. Alors, au travail ! 💪

Intégrez la structure dans votre maquette

Nous avons entretemps eu le temps de valider nos wireframes avec notre client. Il nous a partagé le contenu texte du site dans des commentaires sur les wireframes que vous pourrez trouver  dans le Figma juste ici

Pour afficher le contenu des commentaires, il vous suffit de cliquer sur le bouton "commentaire" dans la barre d'outils du haut, et ils s'affichent directement dans vos wireframes et dans la colonne de droite.

En cliquant sur la quatrième icône en haut de la page, nous pouvons voir tous les commentaires sur Figma.
Les commentaires sur Figma

On va maintenant pouvoir les intégrer directement dans nos maquettes haute-fidélité ! 🤩

Lançons-nous dans l'élaboration de la maquette !

Commençons par changer la couleur de background de notre frame.

Pour cela, on sélectionne notre frame, et dans la barre de droite, et on change la couleur comme on l'a vu dans le screencast du chapitre précédent. On indique donc #F3F3F3.

Commençons également à créer la navigation de notre site. On utilise notre police d'écriture pour les titres 1 en Bebas Neue. Ce qui nous donne :

La navigation avec la police d'écriture Bebas Neue
La navigation

Et au fait, comment on sait qu'on est sur la page d'accueil ?!

Eh bien, c'est simple, on va souligner la page sur laquelle on se situe. Pour ça, on fait une ligne de la largeur du texte, de 3 px d'épaisseur, positionnée à 4 px en dessous de "Accueil". Ce qui nous donne donc :

Une ligne rouge sous le mot Accueil
Ainsi, on sait sur quelle page on est

Puis on enchaîne avec le header de la page "Yummy Nouilles", et la promesse "Les nouilles les plus yummy de tout Paris" qu'on met juste en dessous. On peut même en profiter pour mettre en valeur le mot "yummy" en le mettant en “red-highlight”. Mais comme on l'a vu dans le chapitre précédent, gare aux espacements !

Profitons-en pour faire le call to action. Pour décider de sa taille, on utilise à nouveau notre échelle d'espacement et de taille basée sur des multiples de 8, et on crée un rectangle de 56 px de haut. Pour la largeur, mettons une valeur de 216 px, mais nous allons voir une manière un peu spécifique pour adapter la largeur de notre bouton dans quelques instants.

On crée par-dessus une zone de texte dans laquelle on écrit "Click & Collect" en Bebas Neue – 24 px, on centre notre shape, et le texte du bouton. Et voilà, on a un call to action qui ressemble à quelque chose ! 

Le bouton
Le call to action

Mais ce n'est pas fini ! Revenons à la largeur de notre bouton. Pour cela, j'aimerais vous montrer un autre outil dans Figma qui vous sera très utile pour votre maquettage : la création de composants. Dans le screencast juste en dessous, je vous montre comment créer un composant Figma, et comment adapter la largeur d'un bouton en fonction du texte qu'il contient. 👇 

Optimisez votre gestion des images

On a nos liens "Accueil", "Menu" et "Contact", mais on le met quand notre logo ?!

Ne vous inquiétez pas, je ne vous avais pas oublié. Voyons voir comment gérer les images avec Figma.

Pour ajouter une nouvelle image dans Figma, plusieurs options s'offrent à vous :

1- Vous pouvez faire glisser votre fichier (JPEG, JPG, SVG ou PNG) directement dans la fenêtre de votre navigateur.

Ajoutons notre logo en glissant le fichier directement dans la fenêtre du navigateur.
Ajoutons notre logo

2- Vous pouvez également cliquer sur le premier bouton dans la barre horizontale avec le logo Figma, sélectionner "File" puis "Place Image", et sélectionner l'image à insérer.

Ajoutons notre logo en cliquant sur le menu en haut à gauche, puis
Une autre façon d'ajouter une image

Une fois l'image insérée, vous pouvez la redimensionner en faisant glisser les carrés dans les angles (comme pour la plupart des autres outils).

Ajustons la taille de notre logo
Ajustons la taille de notre logo

Vous pouvez également maintenir la touche maj  pendant que vous effectuez votre redimension afin de garder les mêmes proportions.

Avec la touche maj, les proportions restent pareils même en redimensionnant l'image.
Merci maj !

Mais au fait, entre JPEG, JPG, SVG ou PNG, qu'est-ce qu'il faut privilégier ?

Déjà, tout dépend du fichier que vous avez à la base. Pour vous rappeler quelques spécificités, les fichiers JPEG et JPG seront probablement un peu plus légers que les fichiers PNG. Les fichiers PNG, quant à eux, permettent d'avoir un fond transparent.

Et enfin, si vous avez le choix, je vous conseille d'utiliser des fichiers SVG dans Figma dès que vous manipulez des icônes et logos. Les fichiers SVG étant vectoriels (un type de fichier qui ne correspond pas aux images qu'on utilise habituellement, qui sont basées sur les pixels), cela vous permettra de modifier le fichier autant que vous le souhaitez (l'agrandir, changer la couleur, etc.) sans que sa qualité en soit dégradée.

Insérons maintenant les images des restaurants. Si vous cliquez sur "Fill" dans la barre de droite, vous verrez qu'il est également possible de "cropper" l'image, de modifier son contraste, sa saturation, l'exporter en format PDF, etc.

D'autres options d'affichage
D'autres options d'affichage

Et voilà !

Économisez du temps

On continue avec la création de notre maquette depuis nos wireframes. Pour les titres de nos sections "Nos adresses", "Notre savoir-faire", etc., je vous propose qu'on utilise le soulignement comme on l'a fait pour le lien "Accueil" dans notre barre de navigation. Cela veut dire qu'on va reproduire cette mise en forme de nombreuses fois.

Dans ce cas-là, on fait des copier-coller ?

On pourrait. Mais des copier-coller signifient que vous devriez à chaque fois redimensionner la barre qui permet de souligner le texte, pour qu'elle corresponde bien à la largeur de la zone de texte.

À la place, je vous propose de repasser par la technique de la création de composant qu'on a vue en début de chapitre. On sélectionne le texte et la ligne juste en dessous, et on en fait un composant qu'on nomme "Title underlined". On le paramètre comme il le faut pour qu'il s'adapte à un nouveau texte exactement comme on en a besoin avec l'auto layout.

On va donc pouvoir l'utiliser pour la suite.

Créons un composant !
Créons un composant !

On enchaîne avec la section du CTA. Je vous propose qu'on ajoute une couleur de fond afin de bien mettre en valeur notre call to action et distinguer les différentes sections. Pour cela, on ajoute un rectangle coloré qui fait toute la largeur, comme ceci :👇 

Notre call to action
Notre call to action

On met aussi une zone de texte, du type body, et on duplique notre CTA.

Vous voyez, on peut dès maintenant utiliser notre composant "Titre souligné", et modifier son texte par "Notre savoir-faire".

Ça commence à prendre forme, n'est-ce pas ? 😎

Je vous propose qu'on continue la création de notre maquette dans le screencast juste en dessous.

Il est tout à fait normal d'économiser du temps en réutilisant des éléments déjà créés, en faisant des copier-coller et des duplications, donc n'hésitez pas !

Exercez-vous

Votre mission est donc de le compléter afin de finir les écrans Menu et Contact sur les versions Desktop et Mobile. Encore une fois, n'hésitez pas à réutiliser des éléments déjà existants, alors à vous de jouer ! 💪

Voilà une proposition de correction dans le screencast juste ici.

Et vous trouverez sur ce lien la maquette finale.

En résumé

  • Les composants permettent de réutiliser une structure simplement dans Figma, plutôt que de faire des copier-coller sur lesquels on doit apporter de nombreuses modifications.

  • Pour ajouter une nouvelle image dans Figma, vous pouvez :

    • Faire glisser votre fichier (JPEG, JPG, SVG ou PNG) directement dans la fenêtre de votre navigateur.

    • Cliquer sur le premier bouton dans la barre horizontale avec le logo Figma, sélectionner "File" puis "Place Image", et sélectionner l'image à insérer.

  • Il est également possible de "cropper" l'image, de modifier son contraste, sa saturation, etc.

Vous avez maintenant toutes les cartes en main pour créer des wireframes papier, des wireframes sur Figma, et les transformer en maquettes haute-fidélité. Bravo à vous ! Dans le chapitre suivant, passons en revue ce que vous avez appris.  Alors à tout de suite ! 

Exemple de certificat de réussite
Exemple de certificat de réussite