Transcription
1. Introduction: Bonjour et bienvenue dans vos cellules. Le meilleur endroit pour apprendre à concevoir et à prototyper une interface utilisateur
. Dans ce cours, nous allons
créer un site Web réel, dont le prototype sera intégré à Figma avec les dernières fonctionnalités et une esthétique de
conception. Je m'appelle, elle a des choses étranges
et je suis designer UX. Mon co-instructeur est Show Hagar
et il est concepteur d'interface utilisateur. Et nous avons
plus de dix ans d' expérience dans l'industrie du
design. À travers ce cours,
nous vous expliquerons comment
créer un site Web à partir de
zéro dans Figma Le cours est
divisé en quatre sections. Intersection, Figma, section de
présentation, interface utilisateur, section UX et section
prototype. Dans la section d'introduction, nous verrons un petit résumé ce cours et de la façon dont vous pouvez perdre les fichiers d'exercices section Présentation de
Figma, nous verrons ce qu' est Figma et comment
utiliser ses fonctionnalités. Et dans la section UI et UX, nous allons commencer à créer et structurer notre site Web de livraison de
nourriture. Et à la fin, nous relierons
tous les cadres entre eux. Cela ressemble donc à un site Web
réel. Enfin, nous
verrons comment partager
notre site Web avec les autres
membres de l'équipe ou les parties prenantes. Nous avons beaucoup de choses à vous
montrer
sans plus attendre.
Allons-y.
2. Utiliser les fichiers d'exercice: Dans cette vidéo, nous
allons vous montrer comment démarrer
avec les fichiers d'exercices. Les fichiers d'exercices de ce cours sont inclus dans
cette conférence. Définit que nous avons téléchargé
contient un fichier de ressources Sigma. Il contient tous les actifs
utilisés dans le cours. Veuillez télécharger ce
fichier afin que nous puissions continuer notre voyage en créant un site Web
réel à Figma. Ce fichier d'exercices ne
contient pas de fichier Figma pour papa. Suivez-nous tout au
long de ce cours. Vous pouvez donc
comprendre comment créer votre
propre projet Figma. C'est tout pour cette vidéo. Rendez-vous dans le prochain module.
3. Qu'est-ce que Figma ?: Sigma est une application de conception
UX d'interface utilisateur basée sur un navigateur et outil de
prototypage
principalement basé sur le Web avec des
fonctionnalités hors ligne supplémentaires activées par les applications de
bureau pour macOS et Windows. Il s'agit actuellement du principal outil de conception
d'
interface du secteur. La question qui se pose est la suivante : il existe de nombreux autres outils tels qu'Adobe XD, Sketch, Marble et bien
d'autres encore. Pourquoi utilisons-nous Figma ? La réponse est que les
autres logiciels nécessitaient une licence et que
nous devons les acheter. Alors que Sigma est disponible
gratuitement. Et vous pouvez simplement vous
rendre sur le site Web
Sigma.com, Sigma.com, inscrire et commencer à utiliser
Figma n'importe où, n'importe quand. Parce qu'il s'agit d'une application
Web. Bien que sa
version dextro soit également disponible. Mais ça dépend. Vous souhaitez l'
utiliser en ligne ou hors ligne. Figma est très facile à apprendre. Et si vous essayez, vous pouvez apprendre le
Figma en seulement deux jours. Et en sept à dix jours, tu pourras maîtriser Figma. La meilleure chose à propos de Sigma est de
supposer que vous voyagez un autre pays et que vous n'avez pas votre
ordinateur portable avec vous. Vous pouvez facilement accéder à vos fichiers
Figma en vous connectant
au portail Web Figma via un autre ordinateur portable et accéder facilement à
tous vos combats. Maintenant, je pense que vous avez
des connaissances sur Sigma. Rendez-vous dans la prochaine
vidéo où nous allons
voir comment créer un compte
Figma en ligne.
4. Inscrivez-vous à Figma: Pour vous inscrire à Figma, rendez-vous sur figma.com et
cliquez sur S'inscrire ici. Entrez simplement votre e-mail et mot de passe et cliquez sur Créer un compte. Vous pouvez également vous inscrire avec
votre compte Google. Après avoir cliqué sur S'inscrire, il me demande mon nom et
mon travail, entrez quelques données. Et si vous souhaitez rejoindre
la liste des réunions de Figma, vous pouvez cocher cette case. En ce moment, je le vis. Modifiez ceci,
puis cliquez sur Créer un compte. Notre
compte Figma est maintenant créé. Il est temps d'ajouter une
équipe à ma Figma. Je vais
vous écrire : exaltez votre équipe. N'oubliez pas qu'une équipe compte de nombreux membres, vous pouvez donc
facilement collaborer avec eux. Nous en reparlerons plus tard. Cliquez maintenant sur Suivant. Vous pouvez également le faire plus tard. heure actuelle, il existe
deux plans pour Figma. Choisissez le plan qui vous convient. Mais si vous êtes débutant, je vous suggère de choisir
le plan de départ. Et maintenant, notre compte Figma
est configuré avec succès. C'est tout pour cette vidéo. Rendez-vous dans la prochaine vidéo.
5. Configuration des polices dans figma: Dans cette vidéo, nous allons
activer les polices locales dans notre Figma. Sinon, si vous comptez
travailler avec des polices existantes, vous n'aurez pas un
grand choix. Et aussi, si vous importez
des éléments tels que des fichiers de croquis, le texte peut ne pas fonctionner
et ne pas avoir l'air correct. Dans Figma, lorsque vous
êtes sur le site Web, vous êtes déjà connecté. Accédez au coin supérieur gauche
où se trouvent les nombreuses méthodes et accédez aux paramètres. Ici, vous pouvez
voir que certaines polices locales ne sont actuellement pas
activées par défaut. Cliquez sur Télécharger le programme d'installation
pour activer les polices locales. Cela va le télécharger en fonction de votre système
d'exploitation. Il va télécharger
un petit fichier. Dans ce que vous allez
faire, vous allez essentiellement l'
ouvrir et l'installer. Je vois que j'ai
le colis juste ici. Nous allons donc l'installer. Et vous verrez maintenant que les polices
locales sont activées. J'ai maintenant de nombreuses polices
disponibles dans mon Figma. Sinon, vous
travaillerez avec moins de polices. Vous pouvez maintenant revenir à la situation récente
et voir toutes les violences. La prochaine étape est de
comprendre l' espace de travail Figma. Alors, on se voit dans
la prochaine vidéo.
6. Comprendre l'espace de travail: Bon retour. Dans cette vidéo, nous allons
comprendre l' espace de travail ou Figma. Ceci est notre page d'accueil. Par défaut. Figma
nous propose trois projets. Vous pouvez le conserver ou le supprimer. C'est totalement basé
sur votre choix. Ensuite, en haut à droite, nous avons deux options. Cette option d'importation
est utilisée pour importer différents projets Figma
directement dans Figma Vous pouvez également importer
vos fichiers de croquis en
cliquant sur cette icône d'importation. Nous avons une icône en forme de signe plus. Cliquez simplement sur cette icône
pour créer un nouveau fichier. Ici, en haut à gauche,
nous avons une barre d'outils. Il contient différents outils tels que rectangle, l'ellipse, l'outil à stylet. Vous pouvez dessiner différentes
formes à l'aide de ces outils. En dessous se trouve l'onglet des couches. Vous pouvez voir ici
toutes vos couches. L'onglet suivant est le cachet de la ressource. Vous pouvez y stocker toutes les
ressources que vous utilisez tout au long
du projet et, plus tard, les partager avec les membres de votre équipe. Au centre, nous
avons notre toile sur laquelle nous pouvons créer et
travailler avec nos tableaux d'art. N'oubliez pas que les tableaux d'art sont
désormais appelés cadres dans Figma. Dans les prochaines leçons
où je dis cadre, cela signifie que je
parle de tableaux artistiques. Ensuite, sur le côté droit, nous avons notre panneau Propriétés. Ici. Vous pouvez modifier les propriétés
des différents éléments. Actuellement, il ne
fait rien. Mais lorsque je dessine un rectangle
ici sur le canevas, vous verrez
que toutes les propriétés de ce rectangle sont désormais visibles. Ensuite, en haut à droite, nous avons un bouton Partager pour partager ce projet avec d'autres
membres de l'équipe ou avec des clients. Nous avons également un bouton de lecture
pour prévisualiser notre design et un bouton de zoom pour zoomer ou
dézoomer sur le tableau d'art. Et cela nous amène à
la fin de cette vidéo. Rendez-vous dans la prochaine vidéo. Nous allons voir comment
configurer notre premier fichier dans Figma.
7. Configuration du premier fichier dans figma: Bon retour. Dans cette vidéo, nous
allons configurer notre premier fichier dans
Figma pour configurer un fichier. Créez d'abord un nouveau fichier. Et ici, au centre, en haut, vous
avez renommé le premier projet
en projet d'équipe. Après cela, renommez
ce fichier sans titre en site Web de BFF Town.
En cliquant dessus. Les projets Sigma sont
créés dans des cadres. Donc, pour créer un cadre, il suffit d'appuyer sur la touche F
de votre clavier, ou de cliquer ici en haut à
gauche et de choisir le cadre. Après ça. Ici, sur le côté droit, nous avons de nombreuses
options pour les cadres. Nous pouvons également créer différentes
applications pour les téléphones, les tablettes, le Web et
les publications sur les réseaux sociaux. Mais pour ce cours, nous
allons travailler avec un écran Web. Nous devons donc choisir le cadre
Web 1920 par 1080. Il suffit donc de cliquer dessus.
Et maintenant, notre cadre est créé et c'est ainsi que vous
pouvez configurer un fichier dans Figma. Rendez-vous dans la prochaine
vidéo où nous allons voir comment commencer à
créer notre site Web.
8. IU de page d'accueil: Bon retour. Dans cette vidéo, nous
allons commencer à créer la première
page de notre site Web, qui est la page d'accueil. Tout d'abord,
créez une image de 1920 x 1080 en appuyant sur la touche
F de votre clavier. Nous allons maintenant
configurer la grille de notre site Web. La grille d'un site Web est une structure
visuelle utilisée pour organiser les composants
de la conception d'une page Web, tels que la topographie, les images, vidéos et d'autres éléments. Traditionnellement, une
structure en grille est utilisée pour
diviser uniformément l'espace de conception en une série de colonnes
verticales. Donc, pour créer une grille, il suffit de sélectionner le cadre et de
cliquer sur l'option de grille. À partir de là, modifiez son
orientation en colonnes. Et le décompte, à droite, 12e colonne avec une marge
de 375 de gauche à droite. Et la gouttière de 30 pixels. La gouttière est essentiellement l'espace
interne entre les colonnes. Ensuite, nous
allons ajouter des règles. Il suffit donc d'appuyer sur Shift R depuis le clavier et d'ajouter deux règles, une sur le côté gauche
et l'autre sur la droite. Ces règles nous aideront à structurer notre site Web. Ensuite, ajoutez un rectangle
d'environ 120 pixels. Je vais maintenant ajouter
le logo et la barre de navigation. Il suffit donc de copier le logo depuis les fichiers
d'exercices et de le
coller ici. Changez-le à environ 150 et placez-le ici correctement. Appuyez maintenant sur la
touche T et écrivez à Accueil à propos du menu et du contact
dans la barre de navigation. La police que nous utilisons
dans ce projet est ouverte pour placer la couche de texte au centre avec un
espacement interne de 40 pixels. Maintenant, ajoutez un sous-jacent
de deux pixels sous cet onglet Accueil et remplacez la couleur de la ligne
de texte par cette couleur rouge. Ensuite, ajoutez des couches aux
textes et renommez les deux premiers actes ordinaux et le second 20800 triple un, triplez pour ajouter maintenant un rectangle
d'environ 40 x 40. Changez le rayon 28 de l'eau, et sa couleur à notre
équipe, la couleur jaune. Et placez-le ici. Faites-en une copie et déplacez-la vers la droite avec un espacement interne
de dix pixels. Nous allons maintenant
ajouter des icônes ici. Il suffit donc de copier l'icône du panier et l'icône de l'utilisateur depuis les
fichiers d'exercices et de les placer ici. Et ici, modifiez
l'espacement entre ce premier rectangle
et ce texte à 30 pixels et alignez correctement toute cette barre
de navigation. Maintenant, allons-y. Nous allons ajouter la bannière de
notre site Web. Pour cela, dessinez un rectangle
d'environ 1920 x 830. Changez la couleur en noir et ajoutez un flou radial de cette
couleur sur ce rectangle. Ce flou radial créera
un bel effet de projecteur. Je vais maintenant ajouter des images
sur ce rectangle. Copiez donc les images des fichiers
d'exercices et
placez-les probablement ici. Ensuite, appuyez sur la touche T et écrivez les meilleurs
hamburgers de la ville, qui est le texte du titre. Placez-le correctement. Nous allons maintenant ajouter un bouton d'
appel à l'action ici. Pour cela, dessinez un rectangle
de 20 x 58. Changez son rayon d'angle à dix. Placez-le sous le texte. Maintenant, prenez l'
outil de texte et écrivez, lisez plus et alignez-le correctement
avec ce bouton. Maintenant, allons-y. Tracez un rectangle d'
environ 1920 x 540. Changez sa couleur
et adoptez cette couleur rouge. Ensuite, ajoutez une image
sur ce rectangle. Prenez donc l'image
du fichier d'exercice et
placez-la sur ce rectangle. Puis changez son
opacité à environ 10 %. Maintenant, saisissez-le au-dessus du texte du titre, déplacez-le vers le bas, modifiez
la police à 50 pixels, puis renommez-le à nouveau. Prenez une copie de ce texte, déplacez-le vers le bas et
remplacez-le par du texte fictif de
paragraphe. Avec une marge supérieure
de dix pixels. Ensuite, sur le côté droit, dessinez un rectangle d'environ
365 x 375 et placez-le ici. Changez sa couleur pour la couleur de
notre thème. Maintenant, juste l'image importante du fichier
d'exercice et
placez-la ici correctement. Déplacons-nous ici. Il suffit de dessiner un rectangle
d'environ 1920 par 1287. Change la couleur à
cette couleur claire. Ensuite, saisissez
le texte ci-dessus, déplacez-le vers le bas avec une
marge supérieure de 100 pixels. Renommez-le en articles populaires et changez sa couleur
pour cette couleur rouge. Ensuite, dessinez un rectangle
d'environ 270 à 70. Modifiez son rayon de bordure à dix. Ensuite, appuyez sur la touche T
et cliquez sur le bon nom du produit. Faites-en une copie et
déplacez-la vers le bas avec une marge supérieure de cinq pixels et
renommez-la en prix. Maintenant, il suffit de copier
l'élément actuel depuis la barre supérieure. Déplacez-le vers le bas
au début de ce texte et
réduisez-le à environ 40 x 40. Alignez-les correctement. Maintenant, faites-en sept copies et arrangez-les en conséquence. Ensuite, importez des images à partir
des fichiers d'exercices et
placez-les sur ces
rectangles en conséquence. Maintenant, il suffit de saisir le texte du titre
ci-dessus. Déplacez-le vers le bas avec une marge
supérieure de 150 et renommez-le en meilleures offres. Ensuite, importez
la meilleure image à partir des fichiers d'exercices et placez-la ici avec la marge
supérieure de 100 pixels. Encore une fois, récupérez le texte de cet article, déplacez-le vers le bas et
renommez-le en fonction des commentaires des clients. Ensuite, copiez l'image de
texture à partir
des fichiers d'exercices et placez-la derrière le texte des commentaires des
clients. Ici, il suffit de dessiner un cercle
d'environ 155 x 155. Ensuite, ajoutez une image utilisateur. Vous pouvez utiliser cette extension
pour importer les images d'un utilisateur. Maintenant, s'il vous plaît, cette image utilisateur avec une marge supérieure de 50 pixels. Maintenant, il suffit de placer ce texte de
critique factice et créer
cette image utilisateur et ces évaluations par
étoiles également. Copiez les étoiles
des fichiers d'exercices. Passons maintenant à
notre section de bas de page. Dessinez donc un rectangle d'
environ 1920 x 360. Changez sa couleur pour la couleur de
notre thème. Ensuite, copiez les liens de
navigation depuis la barre de navigation et placez-les ici. Il vous suffit maintenant d'importer
des icônes de réseaux sociaux à partir des fichiers d'exercices
et de les placer ici. Alignez-les correctement. Enfin, tapez
ce texte de copyright. Ses téléphones
devraient avoir 13 ans, c'est normal. Et c'est ainsi que notre premier
écran est terminé.
9. Page « À propos »: Bon retour. Dans cette vidéo, nous allons
créer une page À propos de nous. Tout d'abord, copiez
l'image précédente et déplacez-la vers la droite avec un espace interne de 200 pixels. Et renommez-le en About Us. Ensuite, supprimez cette image de
hamburger et ce bouton, réduisez ce curseur
à environ 1920 x 250. Ensuite, renommez
ce texte en À propos de nous. Sa police doit être de 50 caractères. Aligne au centre. Faites une copie de ce
texte et déplacez-le vers le bas. Changez sa police à 18 et rédigez des lignes de navigation
pour ce site Web. Ensuite, déplacez cette
deuxième section vers le haut. Changez le
texte du titre de notre histoire. Et le paragraphe renvoie
à un texte fictif. Modifiez la
hauteur de ce rectangle à 730. Ensuite, remplacez
cette image par
celle des fichiers
d'exercices. Déplacons-nous ici. Tracez un rectangle
autour de 1920 x 668. Ajoutez ensuite un texte de titre et renommez-le dans nos services. Placez-le avec une marge
supérieure de 100. Maintenant, dessinez simplement trois rectangles
de 360 par 280. Changez leur zone corporelle à dix. Copiez l'icône
des fichiers d'exercices et
placez-la sur ces rectangles. Ensuite, prenez une couche de texte et placez-la sur
ce premier rectangle. Changez sa police en 24 et renommez-la en aliment de qualité. Faites deux copies de ce texte et déplacez-les vers le
deuxième troisième rectangle. Remplacez le deuxième texte
par des recettes originales. Et le troisième, livraison
trop rapide. Passons maintenant ici
et dessinons un rectangle d'
environ 1920 x 729. Ajoutez un titre pour rencontrer notre équipe. Maintenant, il suffit de saisir l'outil
rectangle. Tracez un rectangle d'environ 270 x 270 avec
les zones de bordure. Avec un rayon
de bordure de dix pixels. Appuyez sur la touche T et cliquez avec le bouton
droit sur le nom d'utilisateur et la
désignation Ces couches de textes ont une marge
supérieure de 30 pixels. Faites maintenant trois copies
de ces textes, calques et rectangles, et déplacez-les vers la droite
avec un espacement égal. Maintenant, importez des images de chefs et renommez leurs désignations
et leurs noms. À partir de là, j'
accélère le processus. Enfin, déplacez ce pied ou vers le haut, et notre écran est
maintenant terminé. Rendez-vous dans la prochaine vidéo.
10. Page du menu: Bon retour. Dans cette vidéo, nous allons
créer un écran de menu. Tout d'abord, copiez l'écran
précédent et déplacez-le
vers la droite avec un
espacement interne de 200 pixels. Et renommez-le en écran de menu. Et changez aussi les
miettes de pain. Maintenant, il suffit
de supprimer tout cela et de dessiner un rectangle d'environ 1920 x 360 et de changer sa couleur
pour cette couleur grise. Et après cela, ajoutez un cercle d'environ cinquante, cinquante. Appuyez sur la touche T et rédigez des offres. Maintenant, faites-en sept copies et rangez-les correctement. Ensuite, ajoutez des images d'
éléments de menu au-dessus de ces cercles. Copiez donc les images
des fichiers d'exercices et
insérez-les ici correctement. Ensuite, passons
ici et ajoutons une meilleure image. Copiez l'image
de bannière depuis l'écran d'accueil et placez-la ici correctement. Ensuite, descendons
et ajoutons un menu d'articles populaires. Copiez-le donc depuis
l'écran d'accueil et placez-le ici avec une
marge supérieure de 100 pixels. Ensuite, nous allons réutiliser ce menu d'articles populaire et
renommer son nom et ses images. C'est un long processus. J'accélère donc la vidéo. Maintenant. J'ai ajouté
l'ensemble du menu. Notre écran est maintenant terminé. Nous avons ajouté le menu
complet ici. C'est tout pour cette vidéo. Rendez-vous dans la prochaine vidéo.
11. Menu Page 1: Bon retour. Dans cette vidéo, nous allons
créer un écran de menu. Tout d'abord, copiez
l'image précédente et déplacez-la vers la droite avec un espacement
interne de 200. Et renommez-le en écran de
menu 1. Il suffit maintenant de dessiner un rectangle
autour de 1920 x 873 copier l'image de
la pizza de l'écran précédent
et de la redimensionner à 530 x 530 avec une
marge supérieure de 100 pixels. Ensuite, ajoutez un titre, note
utilisateur, des étoiles, un prix et une
description du produit. Copiez maintenant les étoiles
des fichiers d'exercices
et placez-les ici. Nous allons maintenant ajouter la
taille et la quantité. Appuyez donc sur la touche T
et sur les côtés droits, S, M, L. Appuyez
donc sur la touche T
et à la bonne taille. Petit, moyen et grand. Tracez un cercle d'environ 60 x 60 et placez-le
derrière le petit. Copiez le cercle et
placez-le également derrière un texte moyen
et grand. Changez la couleur
de ce cercle de grande taille en jaune. Nous allons maintenant ajouter de
la quantité pour cela. Tracez deux rectangles. Deux devraient être 47 par 511
devraient être 84 par 51. La
couleur de l'extrémité gauche et du rectangle droit doit être grise et le rectangle central
doit être blanc. Il suffit maintenant d'ajouter les
icônes du compteur et la quantité ici. Ensuite, prenez le bouton sur la page d'accueil et placez-le ici. Modifiez la taille du texte à 23
et sa couleur au blanc. Maintenant, passons ici. Tracez un rectangle d'
environ 290 x 70. Changez son rayon d'angle supérieur droit et supérieur
gauche à huit, et changez sa couleur en rouge. Appuyez maintenant sur la touche T et cliquez sur les détails
du produit à droite. Alignez-les correctement. Prenez une copie de ce
bouton, déplacez-le vers la droite et remplacez
le texte par des avis. Sa couleur doit être noire. Et supprimez ce rectangle pour que ces onglets
soient également équilibrés. Ensuite, tracez une
ligne d'une hauteur de quatre pixels sous
ce bouton rouge et changez également sa couleur
en rouge. Ensuite, dessinez un rectangle
d'environ 1920 en 1466. Changez sa couleur
en gris clair. Ajoutez maintenant un texte fictif avec une marge supérieure de 50
pixels au-dessus. Enfin, copiez la section
des articles populaires de la page d'accueil et
placez-la ici avec une
marge supérieure de 50 pixels. Et j'ai renommé le titre aussi. Vous aimerez peut-être aussi. Et maintenant, notre écran est terminé. Rendez-vous dans la prochaine vidéo.
12. Menu Page 2: Bon retour. Dans cette vidéo, nous allons également
créer un écran de menu. Tout d'abord, copiez l'image précédente et
déplacez-la vers la droite. Maintenant, il suffit de
parcourir ce rectangle rouge ici et de changer la couleur
du texte des commentaires en blanc. Et ce produit a
été détaillé en noir. Ensuite, descendons
et supprimons ce texte de détails. Et maintenant, nous allons ajouter
les évaluations des utilisateurs. Copiez donc les étoiles
d'évaluation des fichiers d'exercices et collez-les ici avec une
marge supérieure de 50 pixels. Ensuite, appuyez sur la touche T et cliquez sur le nom et la date du client avec la
droite. Remplacez le texte
du nom du client en gras. Et encore une fois, appuyez sur la touche T et écrivez un texte fictif révisé par l'utilisateur. Tracez maintenant une ligne grise sous cette critique avec
une marge supérieure de 20 pixels. Enfin, faites une copie de
cette critique et déplacez-la vers le bas. Et maintenant, l'écran est terminé. Rendez-vous dans la vidéo suivante.
13. Ajouter à l'écran: Bon retour. Dans cette vidéo, nous
allons créer un écran « Ajouter au panier ». Tout d'abord, copiez l'image précédente et déplacez-la vers la droite. Ensuite, dessinez un rectangle
noir sur l'écran et modifiez son opacité à
soixante-quinze pour cent. Notez que dessinez un rectangle
autour de 682 x 553. Ensuite, dessinez
un autre rectangle
dessus et remplacez le rayon
d'angle du premier rectangle par 20. Dans le deuxième rectangle, haut à droite et en haut à gauche jusqu'à 20. Ensuite, ajoutez une icône de fermeture
au-dessus de ce deuxième rectangle. Et maintenant, ajoutez une icône en forme de coche. Copiez l'icône en forme
de coche du fichier d'exercice, appuyez sur la touche T et
écrivez ce texte ici. La taille de police doit être de 23 caractères gras et sa couleur doit être blanche. Il suffit maintenant d'ajouter les détails du produit. Copiez les informations de l'écran précédent
et collez-les ici. Enfin, ajoutez deux boutons. Copiez les boutons de
l'écran précédent et modifiez le
texte de ce premier bouton pour continuer vos achats. Le bouton Suivant pour
passer la commande et sa couleur devient rouge. Et maintenant, notre écran est terminé. Rendez-vous dans la prochaine vidéo.
14. Écran de détails du produit: Bon retour. Dans cette vidéo, nous allons
créer un écran détaillé du produit. Tout d'abord, copiez l'écran du menu et déplacez-le vers la droite. Supprimez cette section du corps. Ensuite, renommez les
textes de ce menu en panier. Et c'est de la chapelure pour rentrer à la maison. Identifiant. Ici, dans la barre de navigation. Ajoutez un cercle de quantité
au-dessus de cette icône de panier. Déplacons-nous maintenant vers le bas et
dessinons un rectangle d'environ 565 x 60 avec un
rayon de bordure de 50. Changez sa couleur en gris clair. Et maintenant, appuyez sur la touche
T et à droite, vous avez trois articles
dans votre carte d'achat. Ensuite,
passons simplement à la page suivante et ajoutons des détails sur le produit. C'est la quantité avec le curseur. C'est un prix et une icône de suppression. Ajoutez un sous-jacent de couleur
grise avec une
marge supérieure de 20 pixels. Alignez-les tous correctement. Il ne vous reste plus qu'à les sélectionner toutes et les
dupliquer deux fois avec un espacement interne
de 20 pixels. Modifiez les détails du deuxième tiers
produit. Appuyez maintenant sur la touche T et
écrivez le sous-total et l'expédition. Ensuite, à leurs valeurs. Et maintenant, tracez simplement une ligne en dessous avec la
marge supérieure de 20 pixels. Maintenant, ajoutez le coût total. Enfin, ajoutez Poursuivre vos achats et passer
aux boutons de paiement. Copiez ces boutons de
l'écran précédent et collez-les ici avec la marge
supérieure de 50 pixels. Maintenant, déplacez simplement cette photo vers le haut. C'est tout pour cette vidéo. Rendez-vous dans la prochaine vidéo.
15. Écran de connexion: Bon retour. Dans cette vidéo, nous allons
créer une page d'écran de connexion. Tout d'abord, copiez le cadre
précédent et déplacez-le vers la droite et modifiez son titre
et son fil de navigation pour vous connecter. Et après cela, supprimez
la section du corps. Maintenant, déplacez cette connexion vers le bas avec la
marge supérieure de 90 pixels. Changez sa couleur en rouge et renommez-la pour
vous connecter à votre compte. Ensuite, appuyez sur la touche T
et écrivez l'adresse e-mail. Il suffit maintenant de dessiner un rectangle
d'environ 5 à 69 55 avec un
rayon de bordure de huit pixels. Copiez cette adresse e-mail et
déplacez-la vers ce rectangle. Renommez-le en texte d'espace réservé et modifiez également sa couleur. Sélectionnez maintenant ce champ e-mail
et faites-en une copie. Déplacez-le vers le bas avec la marge
supérieure de 25 pixels. Renommez cette
adresse e-mail en mot de passe et cet espace réservé en étoiles. Et encore une fois, faites une copie de
ce texte de mot de passe déplacez-le vers le bas et renommez-le
pour avoir oublié votre mot de passe. Ensuite, dessinez
trois rectangles. Le premier devrait être 569 par 55. Le deuxième et le troisième devraient
être 269 sur 55. Modifiez le rayon de bordure de ces trois rectangles à huit. La couleur du premier
rectangle est passée du rouge au bleu à cette couleur. Appuyez maintenant sur la touche T et écrivez
login sur le premier bouton. Connectez-vous avec Facebook
sur le deuxième bouton. Et connectez-vous à Google
sur le troisième bouton. Ajoutez maintenant des icônes Facebook
et Google. Copiez donc les icônes
des fichiers d'exercices et
placez-les ici correctement. Enfin, appuyez sur la touche T
et écrivez le registre. Maintenant, du texte, sa couleur
doit être rouge. Et maintenant, notre écran est terminé. Rendez-vous dans la prochaine vidéo.
16. Inscription écran: Bon retour. Dans cette vidéo, nous allons
créer une page d'écran d'inscription. Donc, tout d'abord, copiez
le menu précédent et déplacez-le vers la droite
et changez son titre sur breadcrumbs pour vous inscrire ici, connectez-vous à votre compte
pour créer un compte. Ensuite, saisissez ces identifiants de connexion
avec les
boutons Facebook et Google , déplacez-les vers haut et changez leur
couleur en gris clair. Ajoutez des
titres de prénom et de nom de famille sur ces champs. Et ce sont également
des espaces réservés. Ensuite, nous avons
un champ e-mail. Ensuite, modifiez ce
champ de mot de passe en deux champs. Le premier doit être le mot de passe et le second doit être le mot de
passe à nouveau. Et maintenant, dessinez deux
rectangles d'environ 21 x 21 avec un
rayon de bordure de deux pixels. Appuyez maintenant sur la touche T et écrivez, recevez le texte des offres
et des conditions générales devant ces cases. Enfin, vous avez renommé le
bouton de connexion pour vous inscrire maintenant. Et avec cela, notre
écran est terminé. Rendez-vous dans la prochaine vidéo.
17. Écran de commande: Bon retour. Dans cette vidéo, nous allons
créer une page d'écran de paiement. Tout d'abord, copiez l'image
précédente et déplacez-la vers la droite, puis modifiez son titre et son fil de navigation
pour le vérifier. Ensuite, faites deux copies de
ce texte de restriction de compte et
remplacez
le premier texte par l'adresse de facturation et le
second par le résumé de la commande. Le troisième mode de paiement. Maintenant, sous adresse de facturation, je vais ajouter quelques champs. Vous pouvez copier les champs
des écrans précédents
et les placer ici. Je vais maintenant modifier
les noms des champs. À partir de là, j'
accélère le processus. Après ça. Sous Résumé audio, ajoutez l'image du produit, le
nom du produit, la quantité et le prix. Ajoutez également le sous-total, les
frais d'expédition et le coût total. Maintenant, descendons. Sous ce mode de paiement, ajoutez des boutons radio, une barre de crédit, détails de la carte de
débit, les
termes et conditions, coche et
le bouton Passer la commande de couleur rouge. Maintenant, alignez-les tous correctement et notre
écran est terminé. Rendez-vous dans la prochaine vidéo.
18. Commander Confirmer l'écran: Bon retour. Dans cette vidéo, nous allons
créer une page d'
écran de confirmation automatique. Tout d'abord, copiez le cadre
précédent, déplacez-le vers la droite et renommez-le
pour confirmer la commande. Changez également chaque chapelure. Ensuite, supprimez-les tous, à l'
exception du texte de l'
adresse de facturation, et renommez-le pour qu'il indique que votre
commande est passée. Ensuite, ajoutez une icône en forme de
coche. Alignez-les tous les deux au centre et
changez la couleur en vert. Ensuite, appuyez sur
la touche T et ajoutez un nom d'utilisateur et un message de
confirmation de commande. Maintenant, dessinez simplement deux
rectangles de 440 x 170 avec un
rayon de bordure de dix. Alignez-les horizontalement au centre Changez la
couleur du rectangle en jaune. Et maintenant, sur le premier rectangle, ajoutez le numéro de commande, la date de la commande. La deuxième adresse de livraison,
ajoutez les détails de l'adresse de livraison. Et maintenant, l'écran est terminé. Rendez-vous dans la prochaine vidéo.
19. Contactez-nous écran: Bon retour. Dans cette vidéo, nous allons
créer une page Contactez-nous. Tout d'abord, copiez le
cadre précédent, déplacez-le vers la droite et
renommez-le pour nous contacter. Changez la couleur de la
barre de navigation des contacts en rouge. Je vais maintenant ajouter
un formulaire de contact ici. Pour cela, copiez les champs
depuis les écrans de paiement, collez-les ici et renommez-les également. Et sur le côté droit, ajoutez le numéro de téléphone, l'adresse
e-mail et l'adresse. Copiez le téléphone, l'adresse
e-mail et l'adresse. Je peux consulter
les fichiers d'exercices et les placer ici correctement. Enfin, ajoutez un bouton Envoyer ici. Copiez le fardeau depuis
l'écran du vérificateur et placez-le sous cette zone de texte de message et renommez ce lieu où les textes de
commande à envoyer. Cet écran est maintenant terminé. Rendez-vous dans
la section suivante. Nous allons relier
tous les écrans.
20. Prototype: Bon retour. Il s'agit de la dernière
vidéo de ce cours. Dans cette vidéo, nous
allons voir comment relier
les images entre elles. Il ressemble donc à un site Web
réel, puis partagez-le avec les autres
membres de l'équipe et les parties prenantes. Ici, en haut à droite, vous voyez qu'il est
divisé en trois roues. Vue de conception,
vue de prototype et vue d'inspection. Cette vue prototype est utilisée
pour créer des connexions entre images et pour définir connexions entre
elles par
le biais de l'interaction. Il suffit donc de cliquer sur cette vue du
prototype. Zoomez et cliquez
sur la première image. Ensuite, connectez cette barre de navigation
aux pages relatives. Et l'animation
doit être intelligente. Animez. Ensuite, connectez ce
bouton Lire la suite à environ un écran et laissez l'animation
s'animer intelligemment. Maintenant, ici, sous
les articles populaires connectés à un seul produit avec
l'écran de détails, avec une animation intelligente. Ensuite, connectez la navigation du
pied de page à tous les écrans, comme nous l'avons fait avec la barre de navigation
supérieure. Ensuite, passons
à l'écran suivant, qui est à propos de notre écran. Nous avons déjà connecté
C'est la navigation. Nous n'avons donc rien d'autre à
faire. Quittez simplement l'écran et
passez à l'écran suivant, qui est l'écran de menu. Ici, connectez ces catégories à chaque catégorie de la page. Cet article de pizza sur la page détaillée. Et l'animation doit
être intelligente. Passons maintenant à l'écran suivant, qui est l'écran de menu 1. Connectez ici ce
bouton Ajouter au panier à l'écran Ajouter au panier. Ensuite, connectez
cet onglet Reviews à l'écran suivant avec l'
animation de Smart Animate. De même, faites la même
direction sur l'écran suivant, qui est l'écran de menu, ici, connectez ce
bouton Ajouter au panier
à l'écran Ajouter au panier. Et ce produit a détaillé la largeur
du texte du menu, écran 1. Ensuite, passons
à la reine suivante, qui est l'écran Ajouter au panier. Ici, connectez l'icône des vêtements
à l'écran précédent. Ensuite, connectez la
largeur
du bouton de poursuite des achats, l'écran du menu. Ce bouton de paiement avec l'écran des détails de la
carte d'achat des produits. Passons maintenant à
l'écran suivant,
qui est l'écran de détail du
panier d'achat des produits. Ici, connectez ces boutons comme nous l'avons fait sur l'écran
précédent. Mais cette fois, connectez-le, passez à la caisse
sur notre écran de connexion. Maintenant, sur notre écran de connexion, connectez ce bouton de connexion
à l'écran de paiement. Et cela a enregistré des textes
pour enregistrer l'écran. De même, sur notre écran d'
enregistrement, connectez également ce bouton
de registre à
l'écran de paiement. Ensuite, sur notre écran de
paiement, connectez ce bouton Passer la commande à l'écran Passer la commande. Enfin, connectez ce contact tant que bouton d'envoi d'écran
à la page d'accueil. Enfin, tous nos
cadres sont liés. Pour vérifier ce lien, appuyez
simplement sur Ctrl a. Vous verrez ici le
réseau d'interactions. Il est temps de gérer notre site Web. Il suffit donc de cliquer sur ce bouton d'
aperçu. Et vous voyez maintenant que tous nos écrans sont
liés entre eux. Et cela ressemble à
un site Web réel. Maintenant, pour le partager avec
les autres membres de l'équipe, suffit de cliquer sur ce bouton
Partager. Ici. Vous pouvez le montrer
pour la révision de la conception ou à un développeur et de nombreuses
autres options. Je vais juste choisir n'
importe qui avec le lien qui peut le modifier. Enfin, cliquez
sur Copier le lien et partagez
ce lien avec membres de
votre équipe
ou les parties prenantes. Vous pouvez également partager ce fichier
en saisissant leurs e-mails. Et cela nous amène à
la fin de ce cours. Nous espérons que ce cours vous plaira. Et si vous avez des questions
concernant ce cours, n'
hésitez pas à nous contacter. Rendez-vous dans un autre
cours de Figma.
Shehar Yar, UI/Ux Designer
