Figma UI/UX : concevoir un projet complet d'application de commerce électronique de magasin de chaussures avec un prototypage avancé

1. Introduction: Bienvenue dans ce cours. Êtes-vous impatient de donner vie à vos idées de conception d'applications dans FiCMA ? Que vous soyez complètement novice en matière d' UIUX ou que vous ayez déjà une certaine expérience en conception, ce cours est conçu pour vous guider étape par étape, vous aidant à transformer des concepts en véritables conceptions d'applications mobiles professionnelles Bonjour, je m'appelle YatanHotri et je suis ravie de co-enseigner ce cours avec Abdu Salamhab Nous vous guiderons depuis bases de FIGMA jusqu'à la conception de prototypes interactifs avancés que vous pourrez fièrement conception de prototypes interactifs avancés que vous pourrez Dans la première partie du cours, je vais vous présenter les principes fondamentaux de la FIGMA Vous apprendrez à configurer efficacement votre projet, explorer tous les outils essentiels et à créer des prototypes Paul qui vous aideront à donner vie à vos idées. Ces compétences de base vous permettront de relever plus facilement des défis de conception plus complexes plus tard dans le cours Ensuite, Abd Sala Mahbub prendra le relais et vous guidera dans la conception d'une application mobile complète de commerce électronique pour magasins de chaussures Vous apprendrez à structurer une application du début à la fin en suivant les pratiques du secteur et en créant une expérience utilisateur impeccable. Il vous montrera comment concevoir des composants réutilisables, maintenir des conceptions de systèmes cohérentes et créer des prototypes interactifs avancés qui ressemblent à une véritable application. Tout au long de ce cours, nous nous concentrerons également sur la création de guides de style complets, mise en œuvre de la typographie et du système de couleurs, et l'organisation des éléments de conception de manière à rendre votre travail évolutif et professionnel Vous travaillerez sur tous les écrans importants d'une application de commerce électronique réelle , qu'il s'agisse des listes de produits des pages détaillées des produits, de la carte de paiement, du SRAS ou de l'écran de navigation par catégorie À la fin de ce cours, vous venez d'avoir un prototype d'application terminé, vous aurez les connaissances et la confiance nécessaires pour concevoir votre propre projet à partir de STRS. Vous comprendrez comment créer un système de conception cohérent, expérience utilisateur fluide et présenter des prototypes interactifs professionnels susceptibles d'améliorer votre portefeuille et d'impressionner clients ou des employeurs potentiels Donc, si vous étiez prêt à vous plonger dans la FICMA, améliorer vos compétences en matière d'UIUX et à créer un prototype complet et complet à améliorer vos compétences en matière d'UIUX et à créer un prototype complet et complet . Ce cours est pour toi. Rejoignez-nous et faisons passer vos compétences en design au niveau supérieur. Nous sommes impatients de voir ce que vous allez créer. Commençons. 2. Créer un fichier Figma et sa structure de base ma: Bienvenue à cette conférence. Dans cette partie, nous allons commencer à travailler sur notre Figma. Ainsi, lorsque vous vous connectez à ce site Figma, vous devriez voir ce type d'interface Si vous êtes nouveau et que vous n'avez travaillé sur aucun projet, vous devriez voir un espace vide ou peut-être un projet Figma intégré Mais en général, en haut, vous devriez voir ce genre d'options, et à partir de là, vous devez cliquer sur le design pour commencer avec le projet Figma Ainsi, lorsque vous serez ici, vous verrez ce type d'interface. Donc, tout d'abord, je vais vous donner un aperçu du Figma afin que vous puissiez comprendre comment il fonctionne et quels types d' options nous avons ici Par exemple, sur le site Web, nous avons cette section où nous pouvons voir les pages, les couches. Sur le côté droit, nous aurons ce design quelques styles variables et quelques autres options qui apparaîtront ici, ainsi que le prototype, et en bas, nous avons cette barre d'outils. Alors d'abord, parlons de ces quelques éléments, comme les éléments de base. Et après avoir pratiqué toutes ces techniques de base, nous commencerons à travailler sur un vrai projet Walt afin que vous puissiez avoir idée claire du fonctionnement de cette figma et de la manière dont vous pouvez travailler dans un vrai projet Walt Sur le côté gauche, vous avez les options suivantes. L'un est appelé fichier et l'autre est appelé actifs. Ainsi, dans les tests, nous aurons toutes les bibliothèques et les composants que nous préparerons Et dans la section des fichiers, nous aurons deux options. L'un est constitué de pages et l'autre de couches, vous pouvez ajouter plusieurs pages. Vous pouvez avoir autant de pages que vous le souhaitez, par exemple, peut-être une page pour préparer la typographie en une page, vous voulez préparer les couleurs, et un seul passage, un design basse fidélité, et l'autre, un design haut de gamme payant, ou vous pouvez avoir n'importe quoi Et bien sûr, vous pouvez renommer ces éléments. Vous avez donc ces options. Vous pouvez renommer le nom du rythme. Par exemple, je vais dire que l'ancien nom est couleur pour celui-ci, quelque chose comme ça. Et puis voici comment cela fonctionne. Et en bas, nous avons tous les outils disponibles dans Figma Par exemple, vous pouvez voir ici un outil manuel, ces objets, et ici nous avons cette section de cadre et cet outil de découpe. Et ici, nous avons une ligne rectangulaire, flèche, un tuyau, un polygone, un ester et des images Chacun des outils a des utilisations différentes. Nous allons donc apprendre toutes ces choses une par une, puis cela concerne l'outil texte, les commentaires et actions, et voici les options. Et dans la barre latérale droite, vous aurez plusieurs options. Vous pouvez voir dans les styles, le texte, l'effet de couleur et d'autres options apparaissent lorsque nous ajoutons n'importe quel type de cadre. Pour commencer, disons par exemple que nous sommes en phase deux maintenant. OK. Donc, pour commencer avec le projet Figma en vrai, par exemple, si vous souhaitez concevoir une application mobile, UIUX, ou si vous souhaitez concevoir une application Web, UUX, vous devez d'abord créer Et vous verrez donc ici ces options. Ainsi, lorsque vous cliquez sur le cadre dans la barre latérale droite, vous verrez de nombreuses options APR ici. Par exemple, pour le téléphone, ils ont ces options, Android, iPhone, et vous pouvez choisir l'une d'entre elles. Pour les tablettes, ils ont ces options. Et pour Dkstop, par exemple, si vous travaillez pour la conception de projets Web, vous pouvez avoir ces options Vous pouvez choisir n'importe lequel de ces journaux, réseaux sociaux, communauté Fika ou quoi que ce soit d'autre OK. Ils ont donc beaucoup d'options ici. Voyons d'abord à quoi ressemble un cadre de téléphone. Par exemple, si je sélectionne l'iPhone 16 P, et si je clique dessus, vous verrez qu'un cadre apparaît ici. Voici donc la mise en page. C' est le cadre que vous pouvez définir. Et vous avez la possibilité de l'augmenter, diminuer ou quoi que ce soit d'autre, vous pouvez également supprimer celui-ci, il suffit de le sélectionner sur le clavier, vous pouvez simplement appuyer sur le bouton de retour ou le bouton de délectation. Encore une fois, je vais ajouter un cadre ici, et disons que cette fois, je vais choisir l'iPhone 6. Voici à quoi ressemblera le cadre de l'iPhone 6. De cette façon, vous avez plusieurs options. Je peux ajouter plus de cadre ici. Par exemple, je vais ajouter ici Android Android medium. Voici donc à quoi cela ressemblera. Ainsi, vous pouvez avoir plusieurs cadres. Supprimons celui-ci. Et si vous, par exemple, disons que je veux avoir un iPhone 14 plus, il ressemblera à ceci. Vous pouvez soit simplement ajouter un autre type de cadre à partir d'ici en cliquant sur ces options, soit dupliquer un cadre. Par exemple, supposons que dans notre projet d'application mobile, nous voulions avoir le même cadre pour tout l'écran, pour toutes les pages. Donc, dans ce cas, ce que nous allons faire, nous pouvons simplement sélectionner celui-ci et appuyer sur Ctrl D pour dupliquer celui-ci. Alors maintenant j'en ai deux. Ensuite, je peux à nouveau le dupliquer. Je peux appuyer sur Ctrl D sur le clavier, alors ça fera l'affaire. Cela dupliquera la même chose. Et vous pouvez aussi le faire à partir d'ici, par exemple, iPhone 16 comme ça, ou c'était comme ça. Et si vous laissez tomber ces objets par un dragon, Pigma vous montrera ce genre de choses, comme l'espace et tout le Maintenant, lorsque vous sélectionnez un cadre ici, vous aurez de nombreuses options ici. Par exemple, vous avez des options pour positionner cet élément, la rotation, la mise en page, le contenu du clip, l'apparence, la couleur et les effets de trait. Vous devrez donc utiliser toutes ces options lorsque vous souhaitez concevoir quelque chose. Et à partir de là, vous avez également la possibilité de renommer celui-ci OK ? Vous pouvez donc simplement choisir celui-ci et vous pouvez prêter Par exemple, celui-ci est pour la page d'accueil. Peut-être que nous pouvons dire page d'accueil ou écran d'accueil ou ce que vous voulez. Et puis peut-être que dans celui-ci, nous pouvons parler écran de détails, d'écran de détails. Et peut-être que c'est comme ça qu'il s'appelait ? Peut-être un écran. Juste un nom aléatoire, un vrai nom. Je vous donne juste une idée de la façon dont cela fonctionne, d'accord ? Et laissez-moi supprimer celui-ci, nous n'avons pas besoin de tout cela. Alors maintenant, nous avons cet écran d' arborescence ici, d'accord ? Et ici, nous pouvons avoir plusieurs modèles. Imaginons, par exemple, que nous voulions créer un cercle. Donc, pour avoir un cercle, nous avons un outil appelé outil Ellipse. Ainsi, lorsque vous aurez cliqué dessus, vous aurez ce type de curseur sur votre souris, puis vous pourrez simplement ajouter ce chef rond. Vous pouvez simplement le dessiner. Tu peux jouer avec ça. Vous pouvez simplement faire ces choses. Tu peux avoir celui-ci. Par exemple, une fois qu'il est là, vous pouvez également le personnaliser comme cela, comme vous le souhaitez. Alors maintenant, nous avons celui-ci. Donc, par défaut, il aura une couleur, et dans ce cas, la couleur est le gris. Maintenant, lorsque vous sélectionnez celui-ci dans la barre latérale droite, pas seulement pour celui-ci Tout ce que vous ajouterez dans votre cadre ou n'importe où , ou peut-être que vous créiez un composant, vous aurez toutes les options de conception sur le côté droit. Vous verrez donc ces options ici. Vous pouvez voir la dimension ici ainsi que l'apparence et la couleur. Par exemple, supposons que nous voulions changer la couleur. OK ? Voici donc l'article, je vais donc cliquer dessus, puis une ancienne couleur apparaîtra ici, puis vous aurez des options pour changer de couleur Maintenant, voyez que la couleur est en train de changer. Ainsi, vous pouvez ajouter de la couleur. Et disons que nous voulons avoir une frontière autour de celui-ci sur les itinéraires, comme dans tous ces virages. Alors, comment pouvons-nous le faire ? Donc, pour ajouter une bordure, vous avez cette option appelée Estrok vous cliquez sur cette icône en forme de plus OK. Et vous aurez possibilité de choisir l'estroklor Par exemple, disons que je veux l'avoir sous forme d'estrokelor et il ne soit pas clairement visible pour le moment parce qu'il est vraiment petit Alors, que pouvons-nous faire ici ? Nous devons modifier le poids du coup. Disons qu'il en est cinq maintenant. OK. Maintenant, vous allez voir que nous avons ce genre d'accident vasculaire cérébral. Ou peut-être changeons la couleur du trait en noir ou en rouge. Oui, disons que c'est rouge, alors vous voyez ces choses. OK ? Maintenant, ces options auront effet. Par exemple, nous voulons avoir une ombre. L'effet est donc quelque chose que nous avons ici. Comme si vous pouviez voir l'ombre d'une goutte. Cette ombre portée, ce flou d'arrière-plan, ce bruit et d'autres options apparaîtront flou d'arrière-plan, ce bruit et d'autres options Disons donc que nous avons cette ombre. Maintenant, il a créé une ombre. Permettez-moi de retirer ce poinçon. Alors maintenant, une fois que vous avez ajouté quelque chose et si vous souhaitez supprimer celui-ci, vous aurez ces options. Il y a donc une icône de suppression, il y a une icône du signe moins, vous pouvez donc simplement cliquer dessus et c'est parti. OK ? Maintenant, nous l'avons et vous pouvez voir cette petite ombre. Et ajoutons cette ombre. Vous avez cette option pour positionner l'ombre. Vous pouvez donc modifier la valeur, par exemple cinq, puis cinq, puis cinq. Et il a également ces options. Vous pouvez également utiliser la bibliothèque, ou alors vous avez des options pour avoir la couleur de l'ombre. Maintenant, l'ombre ressemble à ça. Ainsi, vous pouvez personnaliser ces options. C'est bon. Disons maintenant que nous voulons avoir plus d'options ici. Peut-être que nous voulons avoir quelque chose. Supposons que nous voulions avoir un texte à l'intérieur de ce cercle. Donc pour ajouter un texte, il suffit de cliquer sur ce T puis d'appuyer dessus. Ainsi, lorsque vous appuyez dessus, nous aurons des options pour écrire le texte un instant. Il est donc sélectionné comme ceci. Donc, d'abord, sélectionnons-le, puis sélectionnons-le ici. Vous verrez donc cet indicateur, puis vous pourrez ajouter le texte ici. Par exemple, disons que nous voulons dire Apple. Oh, désolée. Supposons que nous disions que c'est Apple. Et maintenant, une fois que cette pomme apparaît ici, nous pouvons la faire glisser au centre. Mais vous remarquerez qu'il est très petit, nous pouvons donc en augmenter la taille. Donc, ici, dans le côté droit, encore une fois, comme je l'ai dit, tout design que vous faites, il se trouve dans le bon côté. Vous verrez donc ici les options 12, vous pouvez augmenter la taille. Disons 24. OK. Donc, si je glisse 24, j'aurai ces options ici. La pomme est donc maintenant au centre de ce cercle. Et vous avez également de nombreuses options. Par exemple, vous pouvez simplement modifier le style typographique. Ainsi, par exemple, vous pouvez changer ce demi-boulon, qui possède de nombreux styles de police. Vous pouvez donc certainement choisir toutes ces options ici. Et il a d'autres polices. Vous pouvez donc certainement choisir ces polices si vous souhaitez les utiliser. D'accord, par exemple, ceci, ceci, ceci, et peut-être ceci. Utilisons donc une police normale en gras supplémentaire pour le moment. Très bien, maintenant nous avons cette pomme et ce cercle. Vous avez donc appris comment créer un projet et comment vous pouvez avoir plusieurs pages, ajouter un cadre, utiliser certains outils et ajouter celui-ci. Donc, vous avez quelques idées de base, OK. Et dans le site du laboratoire, dans la couche, tous les éléments que vous ajoutez seront ajoutés. Vous voyez donc cet écran A, écran d' accueil de l'écran arrière. Dans l'écran d'accueil, nous avons deux options. L'un est ce texte et l'autre est ce tabouret LLF. Cela apparaît donc sur votre lapsit. Vous pouvez donc également cibler ces options ici, puis si vous le souhaitez, vous pouvez également modifier le nom à partir d'ici. OK. Je vais donc arrêter cette vidéo ici pour cette conférence, et nous reprendrons à partir de la prochaine conférence. 3. Utilisations des outils Figma Tools: Je vous souhaite une fois de plus la bienvenue. Dans cette partie, nous continuerons à travailler à nouveau. Dans notre préface, nous avons donc discuté de la manière dont nous pouvons créer un projet FIMA et ce cadre de base défini Bien, dans cette partie, nous allons discuter plus en détail de ces outils de la FICMA Parlons donc de cet outil rectangulaire. L'outil rectangle est donc quelque chose qui peut vous générer un rectangle comme celui-ci. OK. Vous pouvez donc avoir ce moyen. Si vous avez, par exemple, un bouton, celui-ci ressemble à ceci. Et une fois que vous l'avez sélectionnée, vous pouvez faire ce type de design en utilisant un rectangle. Et sur le côté droit, vous aurez de nombreuses options. Vous pouvez donc également personnaliser le blanc à partir d'ici. Par exemple, je veux avoir 100 blanc , puis mettre 100 ici, puis cela réduit ici. C'est ainsi que vous pouvez également contrôler vos outils ou n'importe quel design à partir de l'option de mise en page. Donc, comme ça, vous pouvez aussi l'augmenter légèrement. Et sur le terrain, vous avez ces options pour ajouter la couleur d'arrière-plan sur le bouton. Vous pouvez choisir la couleur de votre choix. Ce n'est pas un problème. Voici donc la plaque de couleur pour cela, et vous avez ces options. Maintenant, vous avez également des options pour jouer avec ce type de dégradé qui a, par exemple, un dégradé linéaire radial radial, et ce genre de choses que vous pouvez certainement choisir. Et peut-être que c'est anguleux comme ça et que le diamant ressemblera à ça. Vous pouvez donc également ajouter ce type de chef à partir de cela. OK ? Donc, vous cliquez dessus, vous allez dans ce champ, vous choisissez la couleur à partir d'ici, puis vous avez ces options ici. Vous pouvez également choisir la couleur de ce design, et il y a quelques autres options ici pour les images et tout le reste. Donc, si vous voulez, par exemple, choisir cette radio, il semblerait que vous puissiez également changer la couleur à partir ici pour ce chef radial en particulier, d'accord ? Donc, de cette façon, vous pouvez également jouer avec ça, ça ressemblera à ça maintenant. Il a beaucoup d'options, vous pouvez donc choisir tout ce dont vous avez besoin. Et d'accord, alors revenons-en à la rouge. OK ? Cette petite lampe, et elle est plus belle. OK, vous avez maintenant ce rectangle et vous pouvez également ajouter une bordure à partir d'ici. Vous pouvez également utiliser l'effet, par exemple, l'ombre ici, nous pouvons ajouter une ombre portée, puis nous pouvons choisir le rayon de la bordure. Par exemple, je veux avoir un rayon de bordure à partir des quatre coins. Vous verrez donc ici qu' il existe une option appelée rayon d'angle. Donc ici, si j'en choisis 20, j'aurai une bordure de tous les coins. OK. Mais vous avez également la possibilité de choisir le coin. Donc, si vous cliquez dessus, pas ici, ici, lorsque vous cliquez dessus, vous avez cette option pour contrôler la bordure. Par exemple, dans le coin gauche, je ne veux en avoir que deux, puis le bas ressemblera à ceci. Disons que je veux aussi en avoir deux dans le coin inférieur droit. Disons deux. Et maintenant, le bouton ressemblera à ceci. Ainsi, vous pouvez personnaliser votre design. Donc, vous cliquez dessus, puis vous jouez avec ces éléments. Vous avez donc également ces options pour changer l'opposition, mais c'est bon, je pense que pour le moment Nous avons donc appris à utiliser la plupart de ces options à partir d' ici. Nous avons le plan. C'est la largeur et la hauteur, et c'est la position. Donc, si je fais glisser ce truc, vous pouvez voir dans la position que ces choses sont en train de changer. Voici donc les positions, et vous avez également la possibilité de les faire pivoter à partir de là. Donc, si je le fais comme ça, comme ça, et tu peux alterner les choses. Et puis vous verrez que cette rotation est en train de changer, et vous avez également des options pour jouer avec celle-ci. Vous apprenez donc à utiliser tous les outils. Vous pouvez donc également aimer ça. C'est pour le flif horizontal et pour la particule flaif comme Vous pouvez donc également contrôler ces choses de cette manière. Et voici les options d'alignement. Donc, si vous voulez aligner, par exemple, laissez-moi le faire pivoter. Mettons-le à zéro, comme si c'était normal. Et si je mets zéro et que ça ressemble à ça, et maintenant disons que vous avez ce bouton ici, et que vous voulez l' aligner correctement. Vous avez donc ici l' option appelée alignement. Donc, à première vue, par exemple, je ne veux pas concevoir quoi que ce soit pour celui-ci. Je veux avoir un design pour celui-ci. OK, donc je place celui-ci ici, puis je clique sur l'alignement Je clique donc sur l'alignement. À gauche, il va vers la gauche. Je clique en haut, comme au centre, pour aligner le centre horizontal, vous voyez, ça va ici et ça passe sur le côté droit. Et il passe en haut, si je place celui-ci. Et elle porte un nom. Vous pouvez voir aligner le haut et la particule alignée, puis aligner le bas. Tu vois, ça s'appelle align bottom. OK ? Ainsi, vous pouvez également utiliser cet outil d'alignement, puis vous pouvez dire au centre. OK ? Nous apprenons maintenant les utilisations de cet outil ici, à savoir l'alignement, les positions, la rotation, la mise en page, l'apparence, couleur, le trait et aussi ces rayons d'angle. OK. Nous avons donc appris l'outil UJS of Rectangle Parlons maintenant du fait que nous utilisons déjà l'outil Ellipse. Les outils linéaires ressemblent donc à ceci. Il s'agit donc simplement de tracer une ligne. Et puis, une fois que vous avez une ligne, vous avez également les options pour la contrôler. Donc, le poids est là, disons que je veux en mettre cinq. Voici donc comment fonctionnera l'outil linéaire. Nous avons maintenant cet outil en forme de flèche. L'outil Flèche ressemble donc à ceci. Il va essentiellement concevoir une flèche. Et une fois que vous avez sélectionné cet outil, vous avez également la possibilité de le modifier. Disons que le poids est de cinq. Maintenant, ça va ressembler à ça. Et de la même manière, vous avez également toutes ces options pour jouer. Maintenant, nous avons déjà travaillé avec l'outil Ellie. Parlons maintenant de l'outil polygone. L'outil polygonal a donc ce type de chef, ce type de forme Et lorsque vous double-cliquez dessus, vous verrez apparaître des options comme ces quatre coins, puis vous pouvez simplement changer l'apparence de celui-ci comme ceci si vous le souhaitez. Et puis vous avez ceci. Et maintenant, de la même manière, vous pouvez également modifier la couleur d'arrière-plan des outils de cette manière. avons donc maintenant et vous pouvez également l'augmenter en faisant ces choses. Nous allons donc maintenant utiliser l'outil Ester, va essentiellement créer un chef Ester, rien d'autre. Donc, une fois que vous aurez créé ce chef de Pâques, vous aurez la possibilité de changer de couleur. Par exemple, tu as le choix. Vous pouvez simplement changer de couleur. En ce qui concerne le décompte, par exemple , nous avons maintenant cinq coins, un, deux, trois , quatre, cinq, donc vous pouvez changer ce coin, disons huit, puis je l'ai formulé comme ceci. Puis il est passé à huit coins. Nous avons ces choses. Vous pouvez également modifier le temps élevé affiché, le point de départ et l'alignement , etc. Nous avons donc appris la plupart des outils à partir d'ici, puis nous avons un outil de texte. Cet outil de texte est essentiellement utilisé pour ajouter un texte. Vous voulez donc ajouter un texte, vous le sélectionnez, puis vous cliquez dessus, puis vous pouvez simplement écrire n'importe quel texte, un nouveau texte. Ou tout autre texte que vous souhaitez ajouter. Une fois que vous avez ajouté un texte, il vous suffit glisser-déposer et de le positionner n'importe où. Et ici, nous avons un stylo et un outil crayon. Un stylo est donc quelque chose que vous pouvez dessiner comme ceci. Alors peut-être que vous êtes dans une situation où vous avez besoin d'une zone ou d'un cercle personnalisé pour dessiner comme ceci, autour d'une forme, autour d'une forme comme celle-ci, comme celle-ci. Vous pouvez donc simplement cliquer sur l'outil stylo, puis dessiner votre dessin comme vous le souhaitez , puis le terminer à la fin. Vous aurez maintenant ce f et fermez-le. Vous avez maintenant ce cercle. Et maintenant, une fois que vous avez ces éléments, vous pouvez simplement ajouter tout le design. Vous avez également cette option. OK, faisons ces choses, et maintenant vous pouvez simplement changer la couleur du trait. Ces lignes sont donc appelées un trait. OK ? Vous pouvez donc simplement changer la couleur comme ceci. Il s'agit de la couleur du trait, et nous pouvons également modifier l' épaisseur du trait. Donc c'est un, et puis si j'en mets cinq, ça ressemblera à ça. Le trait ressemble donc à ceci. OK ? Et maintenant, vous aurez également la possibilité d'ajouter le remplissage. Vous pouvez donc simplement remplir cet article. Ainsi, vous pouvez avoir un design personnalisé. Vous pouvez infimer cet objet à l' aide de cet outil stylo, et il s'agit de l'outil crayon Vous pouvez donc simplement le dessiner comme un crayon normal. Rien d'autre Une fois que vous avez dessiné quelque chose avec cela, vous avez également des options. Vous pouvez simplement changer la couleur de votre trait et la couleur mouillée , puis les éléments suivants. Par exemple, OK, désolé, sélectionnons-le, puis vous aurez ce stylo. Vous pouvez donc choisir la couleur du stylo comme ceci, juste un stylo normal que nous avons dans d'autres logiciels. C'est donc tout pour le moment pour tous ces outils de base. J'espère que vous avez idée générale de la façon dont nous pouvons utiliser ces outils et de la manière dont nous pouvons le faire. Ainsi, une fois que vous aurez glissé ces outils, votre souris aura toujours ces options. Donc, en général, vous pouvez cliquer sur celui-ci. Ensuite, vous aurez ces options régulières, un clavier souris normal, comme le symbole de la souris. J'espère donc que vous avez appris tous les outils, et dans la prochaine partie, nous commencerons à apprendre d'autres techniques. Je vais donc arrêter cette conférence ici. Rendez-vous lors de la prochaine conférence. 4. Regrouper des éléments dans Figma ma: Bienvenue à cette conférence. Dans cette partie, nous allons commencer à apprendre d'autres techniques et outils. Par exemple, nous avons donc appris tous les outils. Nous devons maintenant apprendre quelques raccourcis et les astuces de base ou les techniques de base pour concevoir une application mobile complexe, UIUX ou WebApp UIUX Donc, une chose régulière que nous devons apprendre est le regroupement. OK, alors qu'est-ce qu'un regroupement ? Ainsi, lorsque nous utilisons plusieurs éléments, comme plusieurs outils, et que nous voulons les regrouper pour répéter ces choses. Par exemple, nous avons cette pomme ici et un texte ici. Maintenant, ce n'est pas un groupe pour le moment. Donc, si je veux reproduire ces choses, par exemple, la même chose que j'ai besoin d' écrire ici deux fois, peut-être trois fois, quatre fois, alors je ne peux pas le faire. Si je supprime celui-ci, par exemple, ops. Donc, si je veux supprimer celui-ci, vous verrez que le texte n'est pas là et que le texte est là, d'accord ? Et voici le cercle. Nous devons donc regrouper ce texte et l'ellipse, cercle rond. Alors, comment pouvons-nous le faire ? Permettez-moi donc de le mettre dans la position précédente. Nous avons donc maintenant cette position. Je veux donc regrouper ces deux éléments afin de pouvoir les réutiliser ou de les placer ensemble n'importe où. Donc, pour faire ces choses, je dois sélectionner ces deux options. Il peut s'agir de plusieurs éléments, pas seulement de deux. Donc pour l'instant, nous n'avons que ces deux options comme ce texte et cette ellipse. Nous pouvons donc simplement appuyer sur Ctrl, puis sélectionner ceci ainsi que le texte. OK, ou vous pouvez également le sélectionner ici. Par exemple, vous pouvez appuyer sur Ctrl, puis sélectionner le texte et l'ellipse, puis les deux sont sélectionnés Vous pouvez maintenant cliquer avec le bouton droit de la souris. Ainsi, lorsque vous cliquez avec le bouton droit de la souris, vous verrez de nombreuses options. Vous découvrirez donc ici ce qu' on appelle la sélection de groupe. Vous pouvez donc également voir ici la touche de raccourci. Vous pouvez donc simplement appuyer sur Ctrl plus G sur votre clavier pour regrouper ces éléments, ou vous pouvez également sélectionner ces deux options ou les éléments que vous souhaitez avoir dans un groupe, puis vous pouvez appuyer sur cette sélection de groupe. D'accord ? Maintenant, ces choses deviennent un groupe. Donc, ici, vous pouvez le voir en groupe et maintenant, si je clique dessus, ces deux éléments sont en groupe et par défaut, cela donne un nom de groupe. Donc, si vous le souhaitez, vous pouvez également modifier le nom du groupe. Vous aurez donc ces options appelées nom. Ainsi, au lieu du groupe 1, vous devez toujours écrire un nom significatif. Par exemple, lorsque vous travaillez sur un projet réel, vous aurez un scénario différent. Vous devrez regrouper différents articles. Il est donc évident que vous allez mettre un nom significatif afin que plus tard, vous puissiez toujours l'identifier et modifier ou le mettre à jour en fonction besoins de votre client ou des exigences du projet. Donc, si vous placez au hasard un groupe un dans un groupe trois, les différents, alors vous savez réellement ce qu'il y a dans un groupe un ou ce qu'est un groupe deux. Nous devons donc lui donner un m significatif. Par exemple, nous pouvons le dire, euh, nous pouvons dire cercle ou peut-être pouvons-nous dire «   fruits de la liste des fruits ». Tout ce qui a du sens, car nous avons pomme comme fruit et nous pouvons en dire autant des fruits. C'est simple. Maintenant, une fois que j'ai regroupé ces éléments, vous pouvez remarquer ici que chaque fois que je clique sur ces éléments, cela les sélectionne en entier. Je peux donc simplement le faire glisser ici, je peux le faire glisser ici, je peux le glisser n'importe où C'est donc l' avantage du regroupement. Il regroupe donc toutes ces deux choses. OK. Maintenant, je peux aussi dire que je veux avoir deux, trois ou quatre points ici, façon dont je peux faire ces choses. Je peux donc simplement sélectionner celui-ci comme groupe. Maintenant, je peux appuyer sur Ctrl D pour dupliquer celui-ci. J'ai donc appuyé sur Control D sur mon clavier, puis deux éléments ont été dupliqués Donc, vous voyez, ce sont des objets dupliqués. Et maintenant, si j'appuie à nouveau sur Ctrl D, cela ajoutera d'autres options ici comme celle-ci. Je peux le dupliquer. Et vous pouvez aussi le voir en particulier. Maintenant, si j'appuie une fois de plus sur Ctrl D, cela dupliquera plus d'options, plus d' éléments comme celui-ci. De cette façon, vous pouvez dupliquer des éléments. La même chose que vous pouvez dupliquer. Alors maintenant, laisse-moi m'arranger. Permettez-moi de retirer ces choses. Je pense que c'est mieux. Nous n'en avons plus besoin. Je vais donc supprimer ces éléments, puis je vais les mettre comme ici. Maintenant, nous pouvons le dupliquer comme ceci. Donc, si vous appuyez sur Ctrl D, et encore une fois, appuyez sur Ctrl D. Cela se produira comme ça. D'accord ? Comme ça, vous pouvez réorganiser comme vous le souhaitez. D'accord ? C'est l'avantage du regroupement. Tu peux avoir comme ça. Et maintenant, si vous voulez avoir une couleur différente pour chaque groupe d'éléments, vous pouvez certainement le faire. Et ici, vous verrez que comme nous avons dupliqué la même chose plusieurs fois et à l'intérieur, vous verrez que ce groupe est dupliqué plusieurs Au sein de chaque groupe, nous avons ces options. Maintenant, nous pouvons également faire une chose. Nous pouvons également changer la couleur de celui-ci. Ainsi, par exemple, nous voulons avoir une couleur différente pour ce groupe. Donc, vous pouvez certainement changer la couleur de ce groupe, afin que nous puissions également avoir ce groupe. la même manière, vous pouvez également modifier la couleur ou le style du texte Vous pouvez donc simplement le modifier à partir d'ici. De cette façon, vous regroupez ces éléments dupliqués et vous avez toujours toutes ces options pour les dupliquer ou créer n' importe quel type de design. C'est donc l'avantage de regrouper des articles, d'accord ? Très bien, nous avons donc appris comment regrouper des éléments, comment dupliquer des éléments, et comment nous pouvons également changer ce nom et tous ces éléments. D'accord ? Maintenant, nous voulons discuter de la façon dont nous pouvons créer un composant et utiliser celui-ci Par exemple, nous en sommes maintenant à la première phase. Peut-être que lors de la troisième phase, nous aurons un écran différent. Créons donc un autre cadre lors de la troisième phase. Par exemple, ce cadre, on peut dire iPhone 16, et c'est le cadre. Disons que nous avons et nous pouvons lui donner un nom de produit ou quelque chose comme ça. D'accord ? Donc, à la page trois, et nous pouvons également lui donner un nom. Renommons-le donc au lieu de coller. Nous pouvons dire product pase, par exemple, pour le moment, et c'est ce que nous pouvons appeler Min home pase Rythme principal ou autre. Pour l'instant, nous allons donner ce nom aléatoire. Mais lorsque nous travaillons sur un vrai projet, nous aurons des options telles que la couleur, la typographie, le faible flity, le haut flity, puis la conception du système et le nom du guide éternel Très bien, nous avons donc appris comment dupliquer ces éléments, ces articles et tout le reste, comment nous pouvons avoir plusieurs produits Maintenant, je veux avoir un truc. Je veux vous apprendre une chose, par exemple, ce design ou peut-être un bouton que nous devons utiliser plusieurs pages dans plusieurs cadres, comment nous pouvons le faire. De toute évidence, cela n'a aucun sens de concevoir la même chose encore et encore. C'est pour cette raison que nous avons des options appelées composant de préparation qui apparaîtront ici, puis nous aurons une option ou vous pouvez dire que c'est une sorte de bibliothèque, puis nous pouvons l' utiliser n'importe où dans notre projet ou nos pages. Nous en parlerons donc lors de la prochaine conférence. Je vais m'arrêter là et vous verrai lors de la prochaine conférence. 5. Apprendre à créer des composants réutilisables dans Figma ma: Oh, bienvenue encore une fois. Dans cette partie, nous allons apprendre comment préparer un composant. Alors, qu'est-ce qu'un composant ? Un composant est une sorte de bibliothèque afin que nous puissions le réutiliser sur plusieurs pages. Par exemple, nous avons cette page produit, et maintenant si nous voulons avoir le même bouton, nous n'avons aucune option pour accéder au design depuis cette page. OK ? C'est pourquoi nous devons apprendre comment créer un composant pour n'importe quoi. Par exemple, il peut s'agir d'un bouton, d'une barre inférieure, barre de navigation ou de tout autre élément réutilisé dans plusieurs pages ou dans plusieurs cadres. Donc, ici, dans l'actif, notre composant apparaîtra. Donc, pour le moment, nous n'avons aucun composant. Il s'agit simplement d'un composant intégré dans les bibliothèques provenant de Figma Alors maintenant, je vais d'abord venir ici et créer ce composant de bouton. Je vais donc d'abord ajouter un texte pour ce bouton. Je vais donc mettre ce texte ici. Je peux donc dire que c'est une soumission. OK, il s'agit donc d'un bouton de soumission. Je peux le placer ici au centre. Maintenant, il ne s'agit pas d'un groupe, vous pouvez donc voir le texte et le rectangle sont séparés. Donc, tout d'abord, avant de créer ou de préparer un composant, nous devons en faire un groupe. Ensuite, je vais en faire un groupe. On peut parler de sélection de groupe. Et ici, je vais renommer celui-ci. Je peux donc simplement dire qu' il s'agit d'un bouton de soumission. Maintenant, en tant que groupe, je peux simplement faire glisser et n'importe où, et ça reste pareil. Et je vais dupliquer ces choses. Créons donc un autre bouton de retour. Je vais donc dire qu'il s'agit d'un bouton B. Il s'agit donc d'un bouton de retour, et je vais le mettre au centre. Et aussi, changeons nom du groupe car il ne s'agit pas du bouton Soumettre, je dois donc mettre un nom significatif. Au lieu du bouton d'envoi, ce sera notre bouton de retour. Ce sera donc notre bouton de retour. Maintenant, je veux avoir une couleur d'arrière-plan différente pour le bouton de retour, sélectionnez le bouton B, puis vous pouvez venir ici dans la section des couleurs, et ici vous pouvez changer cette couleur. Je vais donc peut-être choisir cette couleur. Ça a l'air sympa. Donc, cette couleur c'est juste pour avoir un look différent. Bien, maintenant il s'agit d'un groupe et d'un bouton de groupe, mais ce n'est pas un composant pour le moment. Donc, pour en faire un composant, je dois d'abord cliquer dessus, puis je vais voir ici que vous verrez une option appelée créer un composant. Je vais donc cliquer sur ce composant Créer. Ensuite, il devient un composant, puis vous voyez qu'il a une icône différente indiquant qu'il s'agit d'un composant. Maintenant, si j'arrive à ce répertoire d'actifs, vous verrez ici un composant créé dans ce fichier, je clique dessus, puis vous verrez cette option apparaître ici. Faisons maintenant de ce bouton un composant similaire. Je vais donc créer un composant et il apparaît ici. Ces deux boutons vont donc faire partie intégrante de cet article. S, et l'icône est également modifiée. Maintenant, à partir de ce fichier d'actifs, je peux réutiliser celui-ci. Par exemple, ce bouton de retour que je veux mettre dans cet espace, et ce bouton de retour que je veux mettre dans cet espace. Nous pouvons donc l'utiliser autant de fois que nous le souhaitons. Maintenant, si j'en viens à cette base de produits ici, et à la base de produits, nous n'avons rien. Nous n'avons pas de design ici, mais nous avons un composant pour le moment. Et nous pouvons simplement utiliser ce composant ici. Nous avons maintenant cette option. Je vais donc ajouter ce bouton de soumission ici. C'est bon. Ainsi, vous pouvez réutiliser votre composant. Et vous pouvez voir qu'il s'agit d'un composant cet espace et qu'il apparaît ici avec toutes ces choses. Et bien sûr, vous avez des options pour changer ces choses. Et ce n'est pas seulement pour les boutons, cela peut être pour n'importe quoi. Par exemple, je veux faire de celui-ci ce composant. Donc c'est déjà un groupe, tu vois ? Nous pouvons le déplacer, puis je vais cliquer dessus, puis de la même manière, créer un composant. J'arrive maintenant à cette page de fichier. Donc, si j'ouvre cette page produit ici et que je clique sur l'actif, nous devrions voir trois composants, dont celui-ci, et je peux simplement le faire glisser ici. Et de la même manière, je peux le dupliquer pour avoir plusieurs options. Donc, pour le placer plusieurs fois, je veux en avoir plus comme ça et plus comme ça. Plus comme ça. Et ici, comme ça. Ainsi, vous pouvez réutiliser votre composant et vous avez également possibilité de modifier la couleur ou le design si vous le souhaitez. Par exemple, je souhaite avoir une couleur différente pour cela. Disons celui-ci. Et aussi pour celui-ci, je veux avoir une couleur un peu différente, peut-être cette couleur. Comme ça. Ainsi, vous pouvez réutiliser votre composant et personnaliser le design. Vous avez donc appris comment préparer un composant pour n'importe quel design et comment réutiliser cet article. Dans le chemin suivant, je vais vous montrer comment nous pouvons effectuer défilement horizontal dont vous aurez souvent besoin lors de la conception d'une application Je vais donc arrêter cette vidéo ici et nous commencerons à travailler lors de la prochaine conférence. Rendez-vous lors de la prochaine conférence. 6. Prototypage de base dans Figma ing: Bienvenue encore une fois. Dans cette partie, nous allons commencer à travailler sur notre prototypage. Je voulais ajouter des cours sur le défilement horizontal, mais cette vue de défilement horizontal est liée à d'autres éléments, comme une vue de défilement horizontale particulière et la façon dont nous pouvons additionner mais cette vue de défilement horizontal est liée à d'autres éléments, comme une vue de défilement horizontale particulière toutes ces choses J'ai donc décidé de l'ajouter dans le projet réel au lieu de l'ajouter séparément, car il est uniquement possible d'en comprendre le scénario réel. Je vais donc plutôt vous montrer la partie de base du prototypage dans cette conférence qui est vraiment importante, mais nous apprenons le prototypage avancé dans notre vrai projet que nous allons réaliser dans ce Donc, dans cette conférence, je vais juste vous donner une idée générale afin que vous ayez une idée de la façon dont ces choses fonctionnent. Ensuite, nous apprenons les utilisations avancées et réelles du prototype dans notre application réelle que vous allez concevoir. Dans le projet que vous allez concevoir, vous aurez de nombreuses options, comme changer la taille des chaussures et déplacer une pièce à l'autre avec une animation et plusieurs options. Mais avant de passer aux choses avancées, nous devons apprendre les bases du prototypage Commençons donc par les bases. Nous avons donc trois écrans maintenant. Et dans les trois écrans, je veux juste avoir un prototypage OK. Avant de le faire, je voudrais simplement ajouter un texte simple ici afin qu' il soit plus organisé ou nous puissions comprendre dans quel espace nous nous trouvons. Donc, je vais d'abord ajouter un rectangle ici, un rectangle simple, puis je vais ajouter une ombre de bordure ici, puis je vais ajouter un texte ici. Je vais donc dire que c'est un écran de détails. Voici l'écran de détail ou nous pouvons dire l'espace de détail. Et nous avons besoin de la même chose. Permettez-moi donc de changer le design, comme la couleur de fond. Peut-être cette couleur de fond. Et pour le texte, je vais changer de couleur maintenant. Au lieu du noir, la couleur sera blanche, et je peux simplement en faire un peu plus grand, pas ici. Donc, la taille de police, je vais passer à peut-être 32, je l'ai fait comme ça. Modifions-le donc en 32. Oh, désolée, je vais retirer ce blanc que j'ai choisi. Et faisons-en 36. Donc, espace de détail. Et je vais en faire un groupe afin de pouvoir le dupliquer pour celui-ci. Je vais donc dire ce rectangle, puis cet espace de détail, puis appuyer sur G. Et je peux simplement changer le nom ici. Je peux dire que c'est un titre de passe, juste un exemple. Et je vais également le reproduire ici. Au lieu d'un espace de détail, je peux dire qu'il s'agit d'une question de phase Je vais donc double-cliquer, et ici nous allons le remplacer par « À propos de Perfect ups ». OK, nous avons donc ces deux choses. Nous pouvons donc peut-être aussi changer la couleur de fond un peu différemment. OK. Alors maintenant, je vais vous apprendre comment ajouter un prototypage de base entre cet écran et laissez-moi supprimer ce bouton de OK, on peut le garder en dehors de celui-ci ici. OK ? Donc, peut-être que si vous ne le sauriez pas, vous pouvez également placer votre icône ou votre dessin en dehors du cadre, et vous pourrez le voir apparaître comme ceci et toutes ces icônes parce que nous l'avons préparé pour le composant, et c'est pourquoi nous avons ce symbole. OK ? Quoi qu'il en soit, maintenant pour ajouter un prototype entre ces pages, nous avons ces options de prototype ici Vous arrivez donc à ces options appelées prototype, et ici, nous allons obtenir toutes ces options. Ainsi, par exemple, de cet espace à cet espace, nous voulons avoir un prototype. Alors laisse-moi un peu d'espace ici. Ainsi, lorsque vous cliquez sur le bouton Soumettre, et pour ajouter un prototype, vous devez d' abord être dans les options du prototype. OK, alors comment voulons-nous faire le prototype ? Tu dois y réfléchir. Je veux donc avoir un prototype. Lorsque l'utilisateur clique sur le bouton, nous voulons accéder à cet espace, d'accord ? Donc, si vous êtes dans cette phase de prototype, vous aurez alors ces options affichées, vous voyez ? Ainsi, chaque fois que vous passez la souris sur ce bouton, vous verrez ces options, ce bouton plus, et ces options s' afficher de quatre coins sur quatre côtés Mais si vous en êtes à la phase de conception, alors c'est sur le rivage. Donc, ce que vous avez appris, vous l'avez appris lorsque nous sommes en phase de prototype, nous avons ces options Maintenant, je peux simplement cliquer dessus, puis je peux simplement le connecter à cet espace. Il est donc connecté à cet espace maintenant. Cela signifie donc que lorsque nous cliquons sur ce bouton, nous naviguerons vers cet espace, et maintenant comment voulons-nous naviguer vers cet espace ? Ils ont donc de nombreuses options. Cela appelle l'interaction, une fenêtre contextuelle s'ouvrira et vous aurez ici la possibilité de personnaliser ces options. Par exemple, sur le déclencheur. Sur le déclencheur, lorsque nous cliquons dessus sur un médicament ou que nous survolons, ils ont de nombreuses options Mais pour l'instant, gardons-le à portée de main. Maintenant, naviguez deux. Cela montre que vous pouvez naviguer entre deux, B ou chaînes ou faire défiler l'écran jusqu'à de nombreuses options dont elles disposent, mais nous voulons naviguer vers. Cela signifie que nous voulons passer de cette page à cette page. Et ici, il est indiqué la destination. Vous pouvez donc voir que toutes les pages que nous avons, tous les cadres que nous avons, sont visibles ici. Nous pouvons dire que nous avons cet écran de détails. Nous avons également cet écran ci-dessus. D'accord, nous avons également des options pour connecter ce bouton. Pour cela, nous voulons passer à l'espace de détail, et il est détecté parce que nous le faisons glisser d'ici à ici. Désormais, les animations sont livrées avec de nombreuses options d'animation. Ils ont donc ces options. Ainsi, par exemple, dans move out, push, sliding out. Disons que je vais choisir le coulissant, et une fois qu'il glissera, vous aurez la possibilité de voir à quoi il ressemble. Donc, glisser signifie que cela ressemblera à ceci. Et puis nous avons ces options pour modifier la durée. Vous pouvez jouer avec la durée. Vous pouvez augmenter la durée. Et puis il offre une entrée facile, une sortie facile, une entrée et une sortie faciles, et de nombreuses options. Donc, comme ça, il se comportera comme ça si vous le souhaitez. Et cela vous donne un aperçu. Mais si tu choisis Genta, il agira comme ça, comme ça Vous pouvez donc simplement jouer avec ça. Donc, pour les limites, ça ressemblerait à ça. Nous pouvons donc simplement jouer avec ça et entrer, je vais choisir comme ça. OK ? Maintenant, je vais exécuter ce prototype. Alors, comment pouvons-nous exécuter le prototype ? Nous lissons donc l'ensemble du cadre, puis nous arrivons ici et nous cliquons sur l'aperçu Ainsi, lorsque vous cliquez sur l'aperçu, cela montre que nous sommes à ce rythme. Donc, si nous avons, par exemple, lorsque je saute sur cet article, il ne montre pas le symbole de la il ne montre pas le symbole de la main qui est en quelque sorte un symbole cliquable Mais cela ne s'affiche pas pour la souris de cet article, car nous n'avons ajouté aucun prototypage pour tous ces articles Mais nous avons ajouté un prototype pour ce bouton. Et pour ce bouton, il est écrit que comme ce symbole de main, vous pouvez le voir. Donc, lorsque je clique dessus, nous passons à cet espace de détail. Mais maintenant, si je clique sur le bouton de retour, ça ne fait rien, d'accord ? Cela ne fait donc rien car nous n'avons ajouté aucune animation, aucun prototypage pour cela Maintenant, je veux me déplacer. Je veux passer de l'espace de détail au rythme d' accueil lorsque je clique sur le bouton B. Donc, pour faire ces choses, je peux simplement cliquer sur le bouton de retour, puis il apparaît ici, puis je peux simplement passer à cet écran d'accueil. Et puis, encore une fois, cette fenêtre contextuelle apparaît. Et dans ce cas, je dois dire que c'est facile comme ça. Et vous pouvez certainement choisir n'importe quoi. L'animation est intégrée. L'animation est une diapositive. Je peux choisir ou peut-être pousser ou peut-être. OK, restons comme ça. Maintenant, je vais lancer cet aperçu, cliquez sur le bouton Soumettre. Il arrive dans le ditaspace, cliquez sur le dos pour revenir à la page d'accueil Ceci. Tu vois ? Donc, de cette façon, tu peux jouer comme ça. Maintenant, disons que nous voulons ajouter un autre bouton ici et passer au design ici, puis je vais le dupliquer. Je peux le dupliquer et je vais l'ajouter ici. Et au lieu de soumettre, je vais dire que c'est pour disons que c'est pour environ. OK ? Ainsi, lorsque vous cliquez sur ce bouton A, nous voulons passer à cet écran à propos. OK ? Maintenant, nous arrivons au prototype, cliquez sur ce bouton, et d'accord, cela montre qu' il est déjà là parce que nous avons dupliqué le même bouton Donc d'abord, je vais supprimer celui-ci. OK ? Alors maintenant, ce n'est pas lié à ça. Mais celui-ci est connecté à l'écran de détails, mais ce bouton n'est pas connecté à l'écran Digail Donc, ce que je peux faire, je peux simplement sélectionner celui-ci et je peux simplement en venir à cette question à propos de l'écran. Maintenant, il est connecté à cet écran d'information, et vous pouvez simplement faire ces animations. Et lorsque nous sommes sur la dernière page, lorsque vous cliquez sur le bouton de retour, pour cet écran à propos, nous voulons passer à l'écran d'accueil. Oui. Et puis ça montre ici que nous allons à l' écran d'accueil et que je suis aussi, on peut dire, dissoudre, juste pour un exemple. Ainsi, vous pouvez toujours contrôler l'animation. Et je clique sur celui-ci. Maintenant, je vais cliquer sur le bouton du sommet. Nous sommes dans l'espace numérique et maintenant il affiche tous les connectés Puis cliquez sur le bouton B, puis sur le bouton retour. Il montre le bouton Soumettre, le bouton Summit. Nous sommes dans Ditilspace, cliquez sur le bouton B. Nous sommes sur la page d'accueil. Et maintenant, si je clique sur le bouton Ace About, nous sommes dans le At paseo Et maintenant, si je clique sur le bouton Retour, nous sommes sur la page d'accueil. Donc, vous voyez, il a une animation différente, mais il a une animation différente, mais il a une animation différente. Voici comment vous pouvez ajouter du prototypage, et vous pouvez également ajouter de l' animation et tout Donc, si vous devez effectuer une mise à jour ou autre lorsque vous ajoutez du prototypage sur l'ensemble de votre écran, cela s'affichera toujours comme suit Donc celui-ci est connecté à celui-ci, celui-ci est connecté à celui-ci, celui-ci est connecté à celui-ci, et ce bouton est également connecté à celui-ci. Supposons donc que vous ayez ajouté un prototype et que vous souhaitiez apporter des modifications plus tard, peut-être pour l'animation ou quoi que ce soit d'autre. Vous pouvez donc simplement cliquer sur cette ligne. Vous pouvez voir cette ligne. Ensuite, cette boîte apparaîtra à nouveau ici, puis vous pourrez simplement en changer une autre. Par exemple, maintenant il glisse. OK ? Maintenant, si je lance celui-ci, je clique sur le corps, maintenant il a un glissement différent. De cette façon. Donc, de cette façon, cela se montrera toujours comme ça. J'espère donc que vous avez petites idées sur ce prototypage, façon dont vous pouvez vous connecter, sur la manière dont vous pouvez utiliser l'animation, manière dont vous pouvez choisir différents types d'animation et sur toutes les significations de ces éléments et sur leur fonctionnement Mais c'est juste pour vous donner une idée générale, comment vous pouvez simplement apprendre que toutes ces choses sont disponibles ici, dans la section des prototypes, que vous pouvez simplement vous connecter et effectuer la configuration de base avec cela. Mais nous allons avoir des détails, explications pour toute la section du prototype. Avec une application du monde réel, vous allez apprendre beaucoup de choses avec des exemples concrets qui vous aideront certainement à comprendre le scénario dans son ensemble. De plus, vous pratiquerez différents types de choses, comme le déclencheur, les actions, les animations, etc. Je vais donc arrêter cette vidéo ici et nous vous verrons lors de la prochaine conférence. 7. Configuration du projet Figma pour l'application de commerce électronique de magasin de chaussures: Bonjour, tout le monde. J'espère que vous allez tous bien. Dans cette série de vidéos, nous allons concevoir une application de boutique de chaussures à partir de zéro. Et le logiciel que nous allons utiliser pour concevoir notre application s' appelle Figma Et dans Figma, nous verrons comment concevoir une application à partir de zéro Donc, pour travailler dans Figma, nous devons d'abord créer un nouveau fichier de design, n'est-ce pas ? Donc, après notre arrivée à Figma, nous verrons ce type d'interface Et dans un premier temps, nous devons créer un nouveau fichier de conception. Donc, vous cliquez ici et cette fenêtre s'affichera, n'est-ce pas ? Et voici notre plan de travail. Nous travaillerons ici. Je peux donc renommer ce titre comme magasin de chaussures ou une application mobile de magasin de chaussures, n'est-ce pas ? OK. Voici donc le titre de notre projet. Donc, pour concevoir une application de boutique de chaussures, nous devons organiser notre projet, non ? Donc, dans un premier temps, dans le coin gauche, nous pouvons voir quelques pages. Nous devons donc créer certaines pages par nous-mêmes. Donc, à la première page, je vais donner le nom. Ce sera un guide de style. Et le suivant, on peut donner le nom à un cadre basse fidélité. Ensuite, nous pouvons donner un filaire haute fidélité. Et le dernier sera notre système de conception, n'est-ce pas ? Donc oui, nous travaillerons dans ces quatre pages ou quatre onglets, et nous créerons manuellement notre guide de style, basse fidélité puis Wareframe haute fidélité et un système de conception pour ce J'ai donc déjà créé le design de l'application. Laissez-moi vous montrer que notre application finale ressemblera à ceci, quelque chose comme ça. Oui Et nous allons créer ou concevoir toutes ces applications à partir de zéro. Donc, cette vidéo, je vais la voir ici. Dans cette vidéo, je viens de vous montrer comment créer un projet dans figma, et ce que nous devons réellement créer pour démarrer notre projet À voir dans la vidéo suivante. D'ici là, prends soin de toi. Au revoir. 8. Créer un guide de style de couleur: Bonjour, tout le monde. Bon retour. Dans cette conférence, nous verrons comment créer notre guide de style pour ce projet. Donc, pour créer un guide de style, nous devons garder à l'esprit qu'un guide de style est essentiellement composé de deux types d'éléments, savoir un guide de style couleur et un guide de style typographique Dans cette conférence, nous verrons donc comment créer un guide de style des couleurs. Donc, pour créer un guide de style de couleurs, dans un premier temps, nous allons prendre un cadre comme celui-ci et peut-être que nous pouvons renommer comme Clortyle Okay, donc dans un guide de style de couleurs, nous devons avoir certains Nous devons choisir certains types de couleurs. Nous l'utiliserons dans ce projet. Supposons que nous ayons besoin d'une couleur primaire, une couleur secondaire, d'une tertiaire et d'une couleur grise. Donc, dans un premier temps, je vais rapidement écrire ces noms. Ces types de couleurs que nous utiliserons. Donc d'accord, j'ai déjà noté tous les types de couleurs que je souhaite utiliser dans ce projet. Nous devons donc maintenant créer des nuances en fonction des couleurs que nous avons choisies. Alors, comment pouvons-nous créer ces teintes ? Donc, pour cela, nous allons utiliser un plugin, et pour utiliser ces plugins, nous devons aller dans la section des plugins. Donc, si nous remarquons qu'en haut à gauche, nous verrons cette icône, nous cliquons ici et nous pouvons voir qu'il existe des options de plug-in et nous rechercherons « tailwind Générateur de couleurs CSS, non ? Nous allons donc voir ce plug-in et double-cliquer ici. Et ici, nous devons coller le code couleur que nous voulons utiliser. Pour ce projet, j'ai donc décidé d'utiliser cette couleur. Supposons donc que pour la couleur primaire, j'utiliserai celle-ci, pour la couleur secondaire, j' utiliserai celle-ci, et pour la couleur tertiaire, j' utiliserai celle-ci. Je vais donc copier celui-ci. Et je vais le coller ici. Vous remarquerez donc qu'il génère automatiquement certaines nuances fonction de notre couleur primaire. Je vais donc le renommer comme couleur primaire. Je vais prendre cette note et je vais cliquer sur les styles de découpe. Donc, une fois que j'ai cliqué dessus, les nuances seront automatiquement générées, si vous le remarquez. Donc, ce que nous pouvons faire, c'est le redimensionner pour l' adapter à notre écran Donc quelque chose comme ça. OK. Voici donc notre couleur principale. Donc, de la même manière, nous allons créer notre couleur tertiaire secondaire et notre couleur grise. Je vais donc l'avancer rapidement pour gagner du temps. OK, nous avons donc créé les chemises pour nos couleurs primaire, secondaire et tertiaire, et pour la couleur grise, nous allons sélectionner ici une nuance de couleur noire et cela générera automatiquement les chemises de couleur grise pour cela. Nous allons donc nommer cette couleur grise et générer des styles. D'accord, nous allons donc obtenir nos nuances de gris et je vais juste les placer et les ajuster. Ouais. Nous pouvons donc ajuster l'étiquette avec le réglage approprié. OK, alors allons-y. Nous avons déjà créé notre guide de style des couleurs. De cette façon, en utilisant ce plug-in, nous pouvons facilement créer notre guide de style des couleurs. Je terminerai donc cette conférence ici et lors de la prochaine conférence, nous verrons comment nous pouvons créer notre guide de typographie en acier Alors d'ici là, à bientôt. Au revoir. 9. Créer un guide de style typographique à: Tout le monde va revenir. Lors de la dernière conférence, nous avons créé notre guide de style des couleurs. Dans cette conférence, nous allons donc essayer de créer notre guide de style typographique Alors, sans plus attendre, concevons notre guide de style typographique Donc, dans un premier temps, je vais prendre un cadre. Je vais le renommer en Now we will use a plug in. Nous allons donc aller ici, nous allons aller l'onglet Plug-in et nous allons rechercher des échelles de type dans celui-ci. Nous allons donc double-cliquer ici. Ensuite, cette fenêtre contextuelle apparaîtra. Je vais donc garder la taille de base à 16 et je garderai l'échelle 1,2 et la hauteur de la ligne, je vais la fixer à 1,4, puis je vais appuyer sur Générer. Vous pouvez donc voir un cadre a déjà été créé, n'est-ce pas ? Nous n'avons donc pas besoin de ce cadre. Nous pouvons donc le supprimer. Je peux donc le garder ici et le renommer Typo gra comme il se doit Maintenant, ce que je vais faire, sélectionner toutes ces couches, celle-ci, et je vais appuyer sur Control Shift pour pouvoir sélectionner chacune de ces couches, deux, trois, quatre. Et je vais dupliquer tout cela, donc je vais appuyer sur Alter et les mettre tous hors de ce cadre. Ensuite, j'appuierai sur Shift A pour faire de tout cela un Oto. Shift A, non ? Maintenant, il est sous un cadre, puis je vais le remplir, et je peux aussi le rembourrer des deux côtés, un peu comme en 2020, je peux ajuster le cadre pour qu'il soit bien ajusté Nous n'avons donc plus besoin de ce cadre. Donc je peux m'occuper de ça, non ? Je vais donc l'ajuster ici, puis je pourrai le renommer J'ai donc copié le nom, maintenant je vais le coller. Donc, jusqu'à ce que la typographie fasse ce style. Maintenant, ce que nous allons faire, si nous cliquons dessus, nous pouvons voir dans le coin gauche que nous avons neuf couches de texte différentes, à droite, nous devons donc le renommer Donc, dans un premier temps, je vais sélectionner le 51, puis j'appuierai sur Ctrl pour sélectionner. Donc deux, trois, quatre, cinq. Ensuite, j'appuierai sur Ctrl R. Et maintenant, ce sera notre cap, non ? Alors H, alors je vais donner le signe du dollar dollar N, non ? Vous pouvez donc voir qu'il a automatiquement créé le numéro de série. Alors renommez. Ces cinq seront donc notre en-tête un, deux, trois, quatre, cinq, puis les deux suivants. Je vais donc sélectionner ces deux options, Control R. Ce sera notre titre. C'est le signe du dollar. Et donc, d'accord. Ce sera donc notre corps de texte. Ce sera notre légende. Texte. OK. Maintenant, ce que je vais faire, sélectionner le cadre. J'appuierai sur Entrée pour sélectionner les couches intérieures. Entrez. Et maintenant, nous avons besoin d'un style de texte en gras pour chacune de ces neuf couches, n'est-ce pas ? Je vais donc appuyer sur Ctrl D pour dupliquer à nouveau toutes ces couches. Et maintenant, ce que je vais faire, c'est faire preuve d'audace. C'est vrai. Et nous devons également le renommer, non ? Je vais donc appuyer sur Ctrl R. Je vais prendre le nom actuel de toutes ces couches de texte, et je vais ajouter du gras à la dernière. Donc, autre chose que nous devons faire, nous voulons changer le nom de notre style de texte. Je vais donc sélectionner le cadre, appuyer sur Entrée pour sélectionner tout cela, et nous le changerons en Hopins OK. Ensuite, nous pouvons aborder le cadre. OK, jusqu'ici tout va bien. Nous avons donc presque créé nos styles de texte pour notre typographie. Mais pour la bonne documentation, nous utiliserons un autre plugin qui s'appellera text tile generator. Je vais donc aller ici, générateur de textiles, et je vais sélectionner générer des textiles. Vous pouvez donc remarquer qu'il a créé automatiquement nos textiles. Nous allons donc maintenant utiliser un autre plugin pour créer une documentation appropriée pour notre guide de style typographique Je vais donc rechercher le style de typographie. Je vais donc sélectionner ceci. Alors maintenant, vous pouvez voir qu'il a automatiquement généré une documentation typographique appropriée pour nous Nous n'avons donc pas besoin de celui-ci. Je vais juste copier le nom. Je vais supprimer ce cadre, et je vais juste le coller ici, non ? Donc, si vous remarquez qu'il a automatiquement créé une documentation appropriée pour notre guide de style de typographie avec le titre, le nom du textile, le pixel, le humide, le bon , tout C'est ainsi que nous pouvons créer notre guide de style de typographie, et ainsi, nous avons terminé de créer notre guide de style Je vais donc terminer cette conférence ici. Dans la prochaine conférence, nous verrons comment créer notre wireframe basse fidélité Alors rendez-vous lors de la prochaine conférence, d'ici là, prenez soin de vous. Au revoir. 10. Créer un écran d'éclaboussure et un écran d'accueil creen: Bonjour, tout le monde. Bon retour. Lors de la dernière conférence, nous avons créé notre guide de style pour notre guide de style de couleur et notre guide de style de typographie Et à partir de cette conférence, nous allons commencer à créer notre cadre Low Fiddle Tuer. Donc, avant de nous lancer dans la conception de notre design principal ou de notre cadre de visite haut de gamme, nous devons créer notre cadre bas pour violon J'ai donc déjà créé notre image-filtre élevé, n'est-ce pas ? Notre design principal ressemblera donc à ceci. Oui Donc, au début, nous avons notre écran de démarrage, notre écran d' accueil, l'écran des détails du produit, et nous avons notre écran de carte. Et nous avons enfin notre écran de confirmation de commande, non ? Donc, pour l'écran de démarrage, nous avons une image d' arrière-plan complète derrière. Il y a un texte ici. Nous avons également un texte au milieu et un bouton. Alors, dans un premier temps, concevons notre écran de démarrage, low fiddle to WRFrame Nous allons donc passer à la page « low fiddle to Wireframe ». Nous allons prendre un cadre qui sera notre plus de 14 ans. Je vais le changer en écran de démarrage. Ensuite, nous pouvons changer la couleur pour quelque chose comme le gris. OK. Nous avons donc une image d' arrière-plan en taille réelle, afin que je puisse écrire une image d'arrière-plan en taille réelle. Cc donc ce sera notre image de fond de cellule complète. Ensuite, nous avons du texte ici, afin que nous puissions les indiquer par une ligne droite. Donc, une fois, je vais sélectionner toutes ces options et aller ici, et je vais sélectionner distribuer l'espacement vertical, n'est-ce pas ? Alors je vais simplement diminuer LN. Je vais juste diminuer le LN. OK. Donc, à partir du côté gauche, nous aurons un espacement de 32. OK. Ensuite, au milieu, nous avons également un texte. Je vais donc juste donner un texto. OK, alors nous avons un bouton ici, non ? Je vais donc prendre un rectangle pour indiquer ces boutons. Ce bouton ressemblera à ceci. Je vais changer la couleur pour quelque chose comme ça. OK, pour l'instant tout va bien, nous avons créé notre écran de démarrage low fidelity wafme Ensuite, nous aurons notre écran d'accueil. Voyons donc à quoi ressemblera la structure de notre écran d'accueil. Nous allons aller ici. Sur l'écran d'accueil, nous avons une icône de menu ici. Le logo ici, nous avons une icône de carte ici, puis une barre de recherche, puis notre section des catégories, section des meilleures ventes avec quelques cartes, et enfin, nous avons une barre de navigation en bas. Créons-le donc. Nous allons accéder à notre LoFilFrame, prendre un cadre de l'iPhone 14 plus, changer le nom en écran d'accueil Changez la couleur pour celle-ci. OK, maintenant nous avons une icône ici, icône minimale, un logo et un cardagon Je les indique donc avec cette petite icône ici, changez de couleur. Celui-ci. Ensuite, nous avons un logo ici. Eh bien, ce sera le logo ici. Ensuite, nous avons une icône en forme de carte ici. Du côté gauche, il y en aura 32. Donc, du côté droit, il y en aura 32. Du côté gauche, il y en aura également 32. Ensuite, nous avons une barre de recherche. Indiquons donc cette barre de recherche. Voici donc notre barre de recherche. 32, 32, changez de couleur. Celui-ci. OK. Ensuite, nous avons notre section de catégories. Je vais écrire une catégorie. la section des catégories, nous avons une option défilant horizontalement Je vais donc simplement les indiquer avec plusieurs rectangles. Nous avons donc notre article le plus vendu, n'est-ce pas ? 32. OK. Ce sera donc notre best-seller. Donc des best-sellers. Dans le best-seller, nous avons donc quelques cartes. Je les indiquerais donc avec un grand rectangle. OK. Je vais donc simplement sélectionner ces deux et le décalage A, celui-ci et le décalage A, et je vais sélectionner celui-ci et celui-ci et le décalage A. Maintenant, nous allons les ajuster 32, 32, un peu. 22. Je vais sélectionner tout cela et déplacer le pointeur A pour le mettre en page, le mettre en page. OK. Nous avons enfin notre barre de navigation inférieure, non ? Je vais donc créer un rectangle. Et nous avons cinq onglets ici, non ? Je vais donc les indiquer avec une petite touche. Je vais sélectionner tout cela en appuyant sur Shift. Ensuite, j'appuierai sur Shift A pour la mise en page automatique, en diminuant l'espacement entre eux. OK. Alors oui, nous avons créé notre écran de démarrage et notre écran d'accueil filaires Low Fidelity Je vais donc terminer cette conférence ici. Dans la prochaine conférence, nous continuerons à créer notre wireframe basse fidélité à partir de là Alors d'ici là, prends soin de toi. Au revoir. 11. Créer un écran des détails du produit, un écran de panier, un écran de réussite des achats: Eon, bon retour. Lors de la dernière conférence, nous avons créé notre écran de démarrage et notre écran d' accueil, le diaframe Low Fiddle Dans cette conférence, nous allons donc créer notre diaframe low fiddle pour le reste de l'écran Notre prochain écran sera donc l'écran des détails du produit. Nous allons donc prendre le cadre ou nous pouvons le dupliquer pour contrôler D. Nous pouvons changer le nom carré des détails du produit. Nous pouvons le sélectionner et appuyer sur Envoyer pour sélectionner tous les éléments qu'il contient. Nous pouvons le supprimer en appuyant sur la jambe, non ? Donc, d'accord. Alors maintenant, la majeure partie de ce qui se trouve dans la partie supérieure est la même. Nous pouvons donc copier ces trois éléments et les coller ici. Nous avons une grande image au milieu, non ? Je peux donc l'indiquer avec un rectangle plus grand. Nous avons maintenant un gros texte, ici la description. Ensuite, nous avons la couleur du sel, la taille sélectionnée, l' étiquette de prix et un bouton. Nous pouvons donc indiquer que nous avons alors du texte. Petit texte, non ? Un à. Ensuite, nous avons notre section de sélection de couleurs. Ce sera donc notre couleur de choix. Nous avons quelques options ici, non ? Donc, je vais les mettre en expédition automatique A. Ensuite, nous avons notre option de sélection de la taille. Je vais simplement copier toute cette section une fois de plus. Sélectionnez la taille. Et dans l'option de sélection de la taille, nous avons plusieurs options à sélectionner. Je vais donc simplement sélectionner le dernier et appuyer sur Ctrl D pour dupliquer beaucoup de temps. Un, deux, trois, quatre. Maintenant, nous avons une étiquette de prix ici et un bouton de confirmation. Je vais donc le réduire un peu. Je vais sélectionner le bouton du bas, le placer légèrement vers le haut. Alors nous avons un prix à payer, non ? Je vais juste copier le bon prix. Et le prix, on peut indiquer que ce sont des lignes droites. Ensuite, nous avons un bouton de confirmation ici. Je vais juste créer un bouton. OK, jusqu'ici tout va bien, nous avons créé notre écran de détails du produit, Low Fidelity Grape. Ensuite, nous avons en fait notre prochain écran qui sera l'écran de notre carte. Je vais donc le dupliquer une fois de plus. Et j'appuierai simplement sur Entrée pour sélectionner les éléments intérieurs, puis j'appuierai sur Delight. Nous allons donc changer le nom en écran de carte. Nous copierons à nouveau ces éléments. Contrôlez C, et nous allons le tester Control V. Ensuite, nous avons notre liste. Nous pouvons donc indiquer qu'avec enchevêtrement dans la liste, nous avons une image ici, puis nous avons un titre, le type, puis nous avons un bouton d' augmentation ou de diminution, et nous avons notre prix ici. donc Je vais donc simplement sélectionner tout cela et créer un groupe. Donc, Control G, je vais le dupliquer une fois de plus. Et je vais le dupliquer une autre fois en appuyant sur Ctrl G. Ensuite, nous avons notre section totale. , nous Ensuite, nous avons eu notre bouton anti-douleur confirmé. OK, jusqu'ici tout va bien. Nous avons donc fini créer notre cadre en céramique à faible feutrage pour l'écran de notre carte nous reste plus qu'un seul écran qui sera notre écran de confirmation de commande. Je vais donc le dupliquer une fois de plus. Je vais le modifier pour passer la commande avec succès. Idiot, OK. J'appuierai sur Entrée et je supprimerai tout cela. Nous avons une grande icône ici. Nous avons un gros texte ici, non ? Nous avons un petit texte ici. Ensuite, nous avons notre bouton de retour à l'accueil. Donc oui, notre écran de confirmation de commande ressemblera à ceci. Alors c'est tout. Nous avons créé tous nos écrans pour notre waframe basse fidélité et je terminerai cette conférence ici, et à partir de la prochaine conférence, nous continuerons à créer notre waframe haute fidélité Alors rendez-vous lors de la prochaine conférence. D'ici là, prends soin de toi. Au revoir. 12. Concevoir un écran d'éclaboussure: Bonjour à tous. Bon retour. À partir de cette conférence, nous commencerons à créer notre design high fidltyerfame ou Donc dans un premier temps, je vais passer au high fiddltyerfame, puis je vais prendre un cadre qui servira un cadre qui servira servira Je vais donc lui donner une courbe de 30 ou 50. OK. Alors maintenant, nous aurons une image d'arrière-plan complète, non ? Je vais donc aller ici. Je vais passer à cette option d'image. Je vais choisir l'image. J'ai déjà téléchargé l'image. Celui-ci. Alors voyez, nous avons maintenant une image d'arrière-plan complète. Maintenant, pour le rendre un peu plus sombre, nous pouvons utiliser un rectangle. Je vais juste laisser une courbe à 50, et je vais rendre la couleur noire et je vais réduire l'opacité à environ quatre ou quatre OK, alors maintenant nous avons un texto ici, non ? Je vais donc prendre un texto. D'accord, nous pouvons utiliser ces bustes de polices. Vous utilisez cette police. Vous augmentez la taille. De gauche à droite, donnez le rembourrage à 32. Et si nous le voulons, nous pouvons le réduire. OK, jusqu'ici tout va bien. Nous allons donc maintenant donner un dégradé de couleur. Je vais donc choisir ce dégradé. Je vais choisir cette couleur avec quelque chose comme Oui, orange. Hein ? Nous pouvons le faire comme ça. Nous pouvons augmenter légèrement la taille. OK. OK, jusqu'ici tout va bien. Maintenant, nous avons un texto ici, non ? Je vais donc prendre un texto. Et je vais diminuer la taille. J'ai copié le texte et je vais le tester ici. Et ça, c'est ici. OK, nous avons donc notre texto. Nous pouvons le réduire un peu. Maintenant, nous devons créer notre bouton. Créons-le donc. Je vais prendre un rectangle. Je vais faire un cercle. Maintenant, je dois apporter une icône. Donc, d'où nous pouvons avoir une icône. Nous allons donc aller ici. Nous allons accéder à notre plugin et nous rechercherons icône en forme de plume, non ? Nous allons donc double-cliquer ici. Nous allons maintenant utiliser cette icône. Je vais cliquer dessus. Vous pouvez voir que nous avons notre icône ici. Je vais donc simplement le placer ici. Nous pouvons donc nous placer ici. Je vais en changer la couleur. Je sélectionne ces deux couleurs et je vais changer la couleur pour celle-ci. Maintenant, je vais sélectionner celui-ci, ce cercle et Control G pour former un groupe. OK. Alors maintenant, je vais écrire un texte ici. Ce sera notre point de départ. C'est exact. Je vais augmenter ce chiffre pour le rendre un peu audacieux. Alors maintenant, je vais sélectionner celui-ci, décaler celui-ci, déplacer celui-ci, et en faire un contrôle de groupe G. Nous avons donc notre bouton, donc ce sera notre bouton et le bouton de démarrage par bit, n'est-ce pas ? OK. Nous avons donc créé notre bouton. Voici donc notre design haute fidélité d'écran de démarrage. Je vais donc terminer cette conférence ici, et dès la prochaine conférence, nous essaierons de concevoir notre écran d'accueil. Alors d'ici là, prends soin de toi. Au revoir. 13. Concevoir une barre de recherche: Vivon, bon retour. Dans la dernière conférence, nous avons créé notre écran de démarrage, et dans cette conférence, nous allons essayer de concevoir notre écran d'accueil. Voyons d'abord à quoi ressemblera notre écran d' accueil. Donc, si nous voyons notre structure de faible fidélité, nous pouvons voir ici que nous avons une icône principale, ici nous avons un logo, et dans le coin droit, nous aurons une autre icône de carte. Ensuite, nous avons une barre de recherche, puis une section de catégories, puis notre section de best-sellers, puis notre barre de navigation inférieure. Concevons donc. Donc, dans un premier temps, nous allons prendre un cadre. Nous l'appellerons écran d'accueil. Nous allons fixer un plafond à 50. Alors nous avons en fait besoin d'une barre supérieure ici. Nous n'avons donc pas besoin de concevoir notre barre supérieure. Nous pouvons l'obtenir auprès de notre communauté Figma. Nous pouvons donc aller ici, sur notre écran d'accueil. Nous pouvons explorer la communauté. Nous pouvons rechercher ici IOS 14. Vous l'avez pour Figma, afin que nous puissions double-cliquer dessus. Ensuite, nous pouvons ouvrir dans Figma. Nous pouvons donc rechercher ici notre meilleur Nevar. Nous pouvons le zoomer et voir si nous pouvons l'obtenir à partir d'ici. Nous allons donc simplement essayer de l'obtenir. OK. Nous allons simplement le copier. Contrôle C. Nous allons revenir à notre conception. Nous pouvons simplement le passer ici, Control V. C, puis nous pouvons simplement ajuster. C'est vrai. Alors on peut donner une carve à 50 Nous pouvons le supprimer si nous le voulons. Il suffit donc de le retirer. Et je pense que ces 50 glucides, c'est beaucoup, alors nous allons simplement donner la courbe à 30 Et pour celui-ci également, nous donnerons la carve à 30 Donnez à la courbe une valeur de 30. OK. Jusqu'ici, tout va bien. Et pour la hauteur, on peut l'amener à 44, non ? Et pour la couleur de fond, nous pouvons lui donner un peu de gris. Donc je choisis juste celui-ci. OK, nous avons maintenant une icône de menu. Donc, pour l'icône, nous allons aller ici. Nous allons passer à notre icône en forme de plume. Nous allons choisir un menu. Alors peut-être que nous pouvons choisir celui-ci. Alors, choisissez celui-ci. Nous avons donc notre icône de menu, puis notre logo. J'ai donc déjà rassemblé toutes les photos, j'ai déjà créé notre logo, et je les ai conservées dans notre système de conception. Ne t'inquiète pas. Je vais vous montrer comment obtenir ces photos, et nous montrerons également comment nous pouvons concevoir notre système de conception. Ne t'inquiète pas. Nous avons brièvement nos conférences sur le système de conception. Donc pour le moment, je viens de rassembler toutes les photos que nous allons utiliser dans cette série. Voici donc notre logo. Je vais juste le copier d' ici, je vais retourner dans notre cadre caché et je vais simplement le coller ici. OK, donc je vais juste le placer au bon endroit. OK. Ensuite, nous avons l'icône de notre carte. Je vais retourner chez Feather Icone. Je vais chercher Card. Je vais sélectionner ceci. Je vais le faire glisser sur l'écran d'accueil. Nous devons avoir autre chose sur notre carte, c'est notre numéro, non ? Je vais donc simplement dessiner un cercle ici. Cela peut être de cette couleur, et nous pouvons avoir un chiffre ici. Ce sera zéro. Je peux donc diminuer la taille. Et placez-le ici. Je vais en faire un groupe, contrôler le G. Je vais aussi en faire un groupe avec celui-ci, donc contrôlez le G. Maintenant, nous avons notre carte. OK, jusqu'ici tout va bien. Maintenant, nous en avons presque terminé avec notre partie supérieure. Ensuite, nous avons notre barre de recherche, non ? Créons donc notre tableau de recherche. Je vais prendre un rectangle D'accord, 25 c'est bien, je pense. Nous allons donc maintenant avoir notre icône de recherche. Je vais aller ici. Recherche d'icônes supplémentaire. Je vais donc cliquer sur ce rectangle. Je vais appuyer sur Ctrl alter G pour en faire un cadre. Et nous allons faire glisser cette icône de recherche sous ce cadre. Alors maintenant c'est sous ce cadre. Tu vois ? Non, toujours pas, alors nous allons simplement le faire glisser ici. Maintenant c'est sous le cadre. OK. Je vais juste le placer au bon endroit, et je vais lui donner une petite couleur gris foncé. Je parie sur celui-ci. Oh, mec, celui-ci va bien. OK. Nous allons donc maintenant avoir un texto. Donc, je vais cliquer sur celui-ci , je vais cliquer sur celui-ci, et j'appuierai sur Shift A pour sortir. OK. Nous avons donc créé notre barre de recherche. Je peux donc le renommer en barre de recherche, non ? Je vais donc terminer cette conférence ici. À partir de la prochaine conférence, nous continuerons à concevoir notre écran d' accueil à partir de là. Alors d'ici là, prends soin de toi. Au revoir. 14. Concevoir une section de catégorie: Tout le monde. Bon retour. Lors de la dernière conférence, nous avons fini par concevoir ici. À partir de cette conférence, nous allons donc continuer à concevoir notre écran d' accueil à partir d'ici. Je vais donc prendre un texte, interroger et sélectionner nos textiles à partir d'ici, un peu comme celui-ci. Ensuite, nous avons notre section de catégories à défilement horizontal catégories à défilement Nous allons donc le concevoir. Dans un premier temps, je vais prendre un rectangle. Ensuite, je vais dessiner un cercle ici. OK. Ensuite, je le rendrai également blanc, et je vous donnerai une ombre, pas une ombre intérieure, et il y en aura deux. Et ce sera quelque chose comme ça. Et nous allons placer une photo ici. Je vais donc passer à notre système de conception, prendre une photo. Celui-ci, je vais le copier. Passez-le ici, et je le placerai ici. Donc 24. Quatre. Non, il y en aura 24 et 20. OK. Donc oui, je vais cliquer sur celui-ci et sur ce cercle pour en faire un groupe. Je vais en faire un cadre donc control alter G, et je vais placer celui-ci dans le cadre trois, et en faire une catégorie 1. Je vais écrire ici le nom de la catégorie, ce sera donc notre style de vie. Nous pouvons le modifier comme suit. Nous pouvons donc changer la couleur en gris. Et nous n'allons pas faire preuve d'audace. Nous allons simplifier les choses, non ? OK, alors pouvons-nous le réduire un peu ? C'est très bien. Oui, je pense que c'est bon. Ça a l'air bien. OK. Maintenant c'est parfait. Nous allons donc créer, donc la catégorie 1. Alors maintenant, je vais le dupliquer une fois de plus. 16, dupliquez-le une fois de plus. Et je vais lui donner le nom. OK. Je vais donner le nom de celui-ci sur une page de football. Je vais supprimer. Cette photo, je vais la supprimer. Je vais prendre deux autres photos à partir de notre système de design, donc je vais peut-être l'apporter , la copie. Articles 24, 20. Allons-y, c'est bon. Ensuite, il y a notre football. Apportons celui-ci. Faire face. Poste 24. Twinle. Alors maintenant, je vais sélectionner celui-ci et celui-ci, pour le faire sortir automatiquement. Shift A, Alt, cat. Cory section. Ensuite, si je le souhaite, je peux en dupliquer un autre. Je vais donc simplement le dupliquer une fois de plus. Control D, non ? Alors maintenant je vais le sortir du cadre. Je peux changer le nom en basket-ball. OK. Maintenant, nous allons laisser cette photo apporter une autre chaussure, copiez-la. Maintenant, je vais sélectionner tout cela, remettre en lot automatiquement, et je vais renommer la section des catégories Maintenant, je vais le placer au bon endroit. 32 28. Je vais juste appuyer sur Control et le redimensionner comme ça. Et je vais passer au prototype et activer le défilement horizontal. OK, alors maintenant il sera possible de le faire défiler horizontalement, non ? OK, nous allons donc terminer cette conférence ici, et nous continuerons à concevoir le reste de la partie de l' écran d'accueil lors de la prochaine conférence. Alors d'ici là, prends soin de toi. Au revoir. 15. Concevoir une section panier: Tout le monde va revenir. Lors de la dernière conférence, nous en sommes arrivés là. Maintenant, après notre section des catégories, nous avons notre section des meilleures ventes. Je vais donc l'écrire. Ensuite, nous devons créer des cartes, non ? Je vais donc prendre le rectangle. Maintenant, nous avons une grande image ici, puis nous avons notre titre, le type de chaussure, puis notre prix. Et nous avons notre schéma d'augmentation ou de diminution. Alors maintenant, prenons la photo. Je vais donc simplement le copier. Je vais passer au haut FiiDeltorFrame, je le colle ici. Bon, maintenant nous devons écrire le nom de la chaussure, que ce soit notre Ensuite, nous avons un autre texte, ce sera le cas. Et nous avons notre prix ici, non ? Je vais donc simplement mettre celui-ci en mise en page automatique. Contrôlez A. D'accord. Maintenant, nous pouvons augmenter ou diminuer le beurre. Je vais donc juste l' inventer un peu. Je vais faire de ce rectangle un cadre, contrôler, modifier un G. J'ai mis tous les éléments à l'intérieur de cette carte. Nous devons donc maintenant créer notre bouton d'augmentation ou de diminution. Je vais donc cocher la case Je vais donner à celui-ci et à celui-ci une couleur complète de celui-ci et je vais le donner à celui-ci. Nous devons maintenant apporter une icône plus ici et une icône moins ici. Je vais donc aller ici avec une autre icône, plus et un moins. donc Nous avons donc une texture, non ? Ce serait donc zéro. Je le place au bon endroit. Je vais juste le présenter à un groupe. Ce sera donc ça. OK. Alors maintenant, je vais simplement sélectionner celui-ci. Celui-ci. Non. Ce groupe, ce groupe, ce groupe. Je vais créer une carte BR, c'est vrai. Voyons voir si cela fonctionne ou non. Oui. Alors maintenant, je vais vérifier si cela fonctionne ou non. Alors oui, nous avons créé notre première carte. Maintenant, je vais juste en faire une copie sélectionnez ces deux. Shift A, je vais le dupliquer à nouveau. Et je vais sélectionner celui-ci et celui-ci et le décaler à nouveau. Ce sera donc notre section de cartes. Nous avons donc créé notre section des meilleures ventes. Nous venons de quitter notre barre de navigation inférieure. Je vais donc terminer cette conférence ici. Nous continuerons à concevoir notre navigation inférieure lors de la prochaine conférence. Alors d'ici là, prends soin de toi. Au revoir. 16. Concevoir une barre de navigation inférieure: Tout le monde Bon retour. Lors de la dernière conférence, nous avons créé nos sections de best-sellers. Il ne nous reste plus qu'à concevoir notre barre de navigation inférieure dans l'écran d'accueil. Alors sans plus attendre, concevons-le. Donc, je vais d'abord prendre un rectangle. D'accord. Maintenant, au début, nous avons notre onglet d'accueil, donc je vais juste prendre une icône d'accueil. Je vais le ramener chez moi. Ensuite, nous avons l'icône de notre carte. Dans ce cas, nous n'avons aucune notification. Dans ce cas, nous avons notre icône personnelle, non ? Nous avons donc quatre onglets, pas cinq. Je vais donc simplement les séparer. Donc, au début, c'est notre voiture d'origine, non ? Donc, ce que je vais faire, est faire un cercle ici. Tout d'abord, je vais prendre un cercle, qui sera 46 46. Je vais changer la couleur en conséquence. Maintenant, je vais prendre une ellipse et je vais en faire 11, deux, 72 Je vais te donner un coup, et ce sera comme ça. Je vais donc le copier cliquer plusieurs fois ici et le coller ici. Alors maintenant, nous pouvons le faire voir ? Nous pouvons faire comme ça. D'ici également. Aimer ça. Ouais Il faut le mettre devant l'epsi. Et maintenant, nous pouvons le remplir, supprimer le trait, et ce remplissage devrait être celui-ci. Maintenant, tu vois, ça ressemble à ça. Nous pouvons le réduire un peu. On peut le faire un peu, d'accord. Alors maintenant, nous pouvons apporter celui-ci. Puis au milieu. Nous pouvons les mettre dans un groupe Konto G. De plus, celui-ci, nous pouvons les mettre dans un groupe, Konto G. Ce sera notre maison Ensuite, nous devons placer puis nous devons placer nos autres icônes. donc Je vais donc simplement sélectionner ces trois éléments et entrer dans Shift Eight pour le mettre en page automatiquement. Et si je le souhaite, je peux simplement supprimer la mise en page automatique et dissocier. D'accord. Et voici un texto. Je vais donc simplement écrire le texte en maintenant OK, puis nous allons sélectionner ce rectangle et le transformer en cadre. Donc, contrôlez alter g, et je mettrai tous les éléments dans le cadre. Donc cette maison, il y aura dans le cadre le texte de cette icône. Tout cela sera donc inscrit dans le cadre. Et je vais le remplacer par la barre en bas à gauche. À présent, nous avons créé notre barre de navigation inférieure de ces écrans d'accueil. Nous avons donc enfin conçu notre barre de navigation inférieure. Et ainsi, nous avons fini de concevoir notre écran d'accueil. Je terminerai donc cette conférence ici et lors de la prochaine conférence, nous concevrons l'écran des détails de notre produit. Alors d'ici là, prends soin de toi. Abeille. 17. Concevoir une section d'images: Bonjour, tout le monde. Bon retour. Lors de la dernière conférence, nous avons conçu notre écran d'accueil. Dans cette conférence, nous allons essayer de concevoir notre écran de détails. Sans plus attendre, commençons. Au début, je vais prendre un cadre. iPhone 14 plus Je vais lui donner 113. Je suis notre écran de détails sur le produit. Je vais juste copier celui-ci et le tester ici, non ? D'accord, alors si nous remarquons l'écran DTS de notre produit, nous avons une icône ici Ce sera notre flèche arrière. Nous avons du texte ici, et nous avons une autre icône ici. Ce sera notre véritable icône. Ensuite, nous avons une grande image, puis du texte, une section de couleur Silet, du limon, une section de sélection de taille, un prix et un bouton Concevons-le donc. Je vais donc passer à notre icône en forme de plume. Nous allons choisir cette flèche B. Je vais en porter à 32 ou 36. Je vais le mettre ici. OK. Voyons voir. Cela devrait être le cas. OK. Nous avons donc un texte ici et nous avons une icône ici. Je vais donc d' abord ajouter une icône afin que nous puissions revenir à l' icône en forme de plume. Nous pouvons fouiller le cœur. Tout ira bien pour moi. Nous avons donc une texture, non ? Donc ton lit. Donc. Nous pouvons sélectionner le texte. Fais celui-ci. Spur, choisis celui-ci. Réfléchissez. OK, donc je vais juste le mettre au milieu, changer la couleur pour celui-ci. OK, alors nous avons une grande image, non ? Je vais donc passer au système d'Artisan où j'ai conservé nos images. Je vais juste le copier. Je vais le tester ici, et je vais augmenter la taille. Un truc comme ça. Alors nous avons une ombre ici, non ? Je vais donc ajouter une ombre. Je vais ajouter un trait, ombre ou un flou de couche Je vais juste le faire comme ça. Et je vais juste diminuer la couleur. OK. Nous avons donc maintenant une flèche, flèche circulaire pour faire pivoter cette chaussure. Alors, comment puis-je accepter cela ? Nous pouvons créer cela par une ellipse ou un cercle Donc cette couleur, je vais la mettre en dégradé. Celui-ci doit donc être blanc. Et celui-ci, il faut le retirer de la chaussure. Ce serait donc celui-ci. OK. Nous pouvons donc le faire comme ça. OK, oui. Nous pouvons le faire comme ça. Ensuite, nous devons créer une flèche circulaire ici. Nous allons donc faire un cercle. Alors je vais prendre ce groupe et celui-ci, et en faire à nouveau un groupe. Je vais le placer en dessous. OK, jusqu'ici tout va bien, nous avons créé notre partie supérieure. Je vais donc terminer cette conférence ici et à partir de la prochaine conférence, nous créerons le reste de la partie de cet écran. Alors, Tin, prends soin de toi. Au revoir. 18. Concevoir une section des détails de produit: Tout le monde. Bon retour. Lors de la dernière conférence nous nous sommes retrouvés ici. Nous allons maintenant poursuivre notre conférence à partir d'ici. Après cette partie, nous avons donc notre titre de Shom. Nous allons donc l'écrire , puis nous aurons le texte réduit, je vais juste l'écrire. Nous allons sélectionner celui-ci et le faire petit ou nous pouvons simplement le mettre en plat. Nous pouvons le copier. Nous pouvons le coller. Et nous pouvons simplement sélectionner ces deux options et faire ou annuler le Shift A, cela le diminuant de quatre. Nous pouvons le rendre audacieux. OK. Et nous pouvons changer cette couleur en gris. Ce gris. Donc je vais juste le placer ici, et nous avons une icône en forme d'étoile ici, non ? Créons-le donc. Et nous pouvons l' accepter aussi et recommencer. Je peux le faire. Quatre. OK. Jusqu'ici, tout va bien. Ensuite, nous avons un texte de description, non ? J'ai copié le texte de description, je vais donc maintenant le tester ici. donc Nous avons donc notre section de sélection de couleurs, n'est-ce pas ? Créons donc. M. Maintenant, je peux en sélectionner un, celui-ci et celui-ci et le garder automatiquement pour vous. Je vais juste copier celui-ci. Il suffit d'écrire. Nous devons donc maintenant créer notre option de taille. Je vais prendre un rectangle. Alors maintenant, nous allons en faire un groupe. Je vais donc le dupliquer une fois. Je réduirai la taille à 38 et je réduirai la taille du texte à celui-ci. Il sera là. Je vais juste le copier une fois et je vais le dupliquer plusieurs fois. Alors maintenant, je vais juste changer le nom ou changer le numéro. Je vais garder tout ça. Mmm, hum. Mmm, hum. À l'extérieur du cadre et fais-le. Shift A, je vais le changer en 45, non ? Alors je vais juste changer pour celui-ci, je vais juste en donner une idée. Supprimez le trait, la couleur de remplissage sera la couleur du texte sera le blanc. Je vais le placer ici. Et je vais ajuster celui-ci. Et je vais simplement passer au prototype et activer le défilement horizontal. OK. Alors maintenant, nous avons notre prix ici et nous avons notre bouton de confirmation, n'est-ce pas ? Alors, abordons le prix. Ce sera alors que nous aurons notre bouton de confirmation, non ? Faites-en un groupe. Mais c'est ainsi que nous avons fini de concevoir l'écran des détails de notre produit. Je vais donc terminer cette conférence ici, et dès la prochaine conférence, nous commencerons à concevoir l'écran de notre carte, n'est-ce pas ? Alors d'ici là, prends soin de toi. Au revoir. 19. Concevoir un écran de panier: Bonjour, tout le monde. Bon retour. Lors de la dernière conférence, nous avons conçu l'écran TTS de notre produit Dans cette conférence, nous allons donc commencer à concevoir l'écran de notre panier. Donc, dans un premier temps, je vais le dupliquer. Je vais sélectionner l'intérieur des matériaux, donc je vais sélectionner le cadre et appuyer sur Entrée, et tout cela sera sélectionné. Je vais donc simplement supprimer tout cela. Et je vais juste copier celui-ci, celui-ci et celui-ci. Je vais juste les dupliquer tous et les placer à leur place. OK. Je vais donc supprimer celui-ci. Je vais écrire « checkout ». Et ici, nous devons faire en sorte que nos articles comptent. Je vais donc prendre ce 10. Nous allons le dupliquer, y écrire des éléments. Je vais le changer en Donc je vais juste le placer ici. Je vais juste le placer ici. Je vais sélectionner ces deux options et appuyer sur Shift A pour en faire un compte des tribus de mise en page OK, je vais juste les placer. OK, jusqu'ici tout va bien. Maintenant, nous devons avoir notre liste. Donc, dans un premier temps, je vais créer une carte d'icône lorsque notre écran « at to card » sera vide. Je vais donc prendre un rectangle. Ensuite, nous devons apporter une icône de shopping. Je vais y aller, faire une carte. Ce sera donc notre icône pour faire de ce rectangle le cadre pour contrôler ter G. Je vais donc placer celui-ci sur celui-ci et je placerai ce caddie sous ce cadre Ceci et je vais augmenter la taille à 40, quelque chose comme ça. OK, jusqu'ici tout va bien. Ensuite, nous devons créer notre liste d'ajouts à la carte. Alors, nous avons notre Nemo pho. nous avons notre Nemo pho C'est vrai. Ensuite, nous avons notre type de cela, bien sûr. Ensuite, nous devons importer cette icône depuis notre écran d'accueil. Je vais donc simplement appuyer sur Modifier, le dupliquer sur cet écran et essayer de le placer ici. Il sera donc placé. OK. Ensuite, nous avons notre prix. Donc, le prix ici. OK, jusqu'ici tout va bien. Je vais donc simplement le dupliquer deux fois de plus. Ensuite, je vais sélectionner celui-ci, celui-ci, celui-ci et celui-ci et appuyer sur Shift A pour en faire une mise en page. Je vais réduire l' écart entre eux. Je vais supprimer celui-ci. Ensuite, nous devons créer notre section totale. Je voudrais juste qu' ensuite nous ayons notre paiement confirmé. Ce bouton ressemblera donc à ceci. Je vais juste copier celui-ci. Je vais augmenter la taille des deux côtés. Nous avons donc créé avec succès notre écran de panier. Cela ressemblera à ça. Je vais donc terminer cette conférence ici, et lors de la prochaine conférence, nous créerons notre dernier écran. Ce sera notre écran de confirmation de commande. Alors rendez-vous dans la prochaine vidéo. Tim, alors, prends soin de toi. Au revoir. 20. Concevoir un écran de réussite d'ordre de place: Bienvenue à tous. Lors de la dernière conférence, nous avons conçu l'écran de notre carte. Dans cette conférence, nous allons donc concevoir notre dernier et dernier écran qui sera notre écran de réussite pour la commande. Je vais sélectionner celui-ci et le dupliquer une fois de plus. Je vais juste écrire Passons commande C'est bien. D'accord. Maintenant, je vais simplement sélectionner le cadre et appuyer sur Entrée pour tout sélectionner, puis appuyer sur le bouton « Still ». D'accord. Nous allons maintenant essayer de rechercher icône de célébration ou une coche. Je vais donc aller dans Chrome et rechercher l'icône Plat. Je peux donc rechercher Caret ici. Nous pouvons donc choisir n'importe laquelle des icônes que nous aimons. Je vais donc choisir celui-ci. Voici donc une astuce. Comment télécharger l' icône au format SVG ? Pour télécharger n'importe quelle icône à partir d'une icône plate au format ABG. Nous devons acheter la version premium, mais il existe une astuce. Nous pouvons le faire gratuitement. Nous allons donc passer à cette icône d'édition. Ensuite, nous allons sélectionner et inspecter, nous essaierons de trouver la balise SVG Donc je le trouve ici. Nous allons donc simplement cliquer dessus et copier Control C. Nous allons revenir à notre Figma et tester ici par ControlV Tu vois ? Maintenant, cette icône est disponible dans notre format SVG Je vais donc simplement le redimensionner. Nous allons maintenant rechercher une autre icône qui sera notre icône de célébration ou quelque chose comme ça, euh. Nous allons donc placer l'icône fissurée devant cette icône de fête. Et ce que nous allons faire, nous allons sélectionner ceci et cela le rendra un peu plus petit. Nous pouvons le faire comme ça et nous pouvons l'apporter ici. Je peux régler le canapé. Ensuite, de la même manière, nous pouvons sélectionner ceci. Je vais sélectionner ceci. Je vais juste le redimensionner comme ça Je vais l'apporter ici. Je vais juste le prendre comme ça. Amène-le ici. Ajustez donc oui, jusqu'ici tout va bien. Alors nous avons un texte ici. Notre texte sera donc tel maintenant que nous avons un autre texte ici. Enfin, nous avons notre bouton de retour à l'accueil, et ce bouton ressemble à ceci. Je vais juste le copier d'ici à ici. La hauteur, je vais l'augmenter de quatre. Je vais augmenter la largeur, quelque chose comme ça. Mets-le au centre. Je vais l'écrire. OK, nous avons donc fini de créer notre accord, nous pouvons augmenter la hauteur un peu par quatre. D'accord, nous avons donc créé avec succès notre écran de commande . C'est ainsi que nous avons fini par concevoir l'ensemble de notre design en T. Ainsi, à partir de la prochaine conférence, nous commencerons à concevoir notre système de conception. Je vais donc terminer cette conférence ici et nous verrons dans la prochaine vidéo. D'ici là, prends soin de toi. Au revoir. 21. Créer des composants d'image et d'icône ents: Bonjour, tout le monde. Bon retour. À partir de cette présentation, nous allons commencer à créer notre système de design. Avant de créer notre système de conception, nous devons donc savoir pourquoi nous avons réellement besoin d'un système de conception. Ainsi, un système de conception est essentiellement composé de nombreux composants, variables et variantes. Et si nous remarquons notre engouement pour notre cadre, nous avons plein de boutons, de cartes, de certains éléments, de listes de cartes et d'autres choses encore Donc des icônes. Ainsi, certaines icônes et boutons sont répétés plusieurs fois et nous les avons effectivement créés. Nous créons donc notre système tian afin ne pas avoir à effectuer la tâche plusieurs fois. Et nous pouvons changer les éléments ou nous pouvons modifier quelque chose si nous en avons besoin facilement. C'est pourquoi nous avons besoin de notre système Tian. Commençons donc à concevoir notre système de conception. Commençons donc à créer notre système de design. Donc, si vous remarquez, nous avons en fait créé notre image dans le système de conception, les images que nous avons utilisées, mais nous devons les convertir sur les composants afin pouvoir facilement remplacer ou modifier quelque chose. Donc, si nous remarquons sur notre cadre d'image, nous avons quelques images. Donc, dans un premier temps, je vais cliquer. Donc, dans un premier temps, je vais cliquer sur l'un d'eux, et ici en haut, on peut voir créer des composants. Je vais simplement le convertir en composant, donc je vais simplement cliquer dessus. Je vais le faire pour toutes les photos. Nous avons donc créé des composants pour nos images. Nous devons maintenant créer une collection de nos icônes. Ils ont été utilisés sur notre design haute fidélité, n'est-ce pas ? Nous allons donc prendre un cadre et le nommer icônes. Voyons donc quelles icônes nous avons utilisées. Au début, nous avons donc utilisé cette icône. nous suffit donc de le copier, le coller dans notre système de conception. C'est notre seule icône. Je vais simplement le convertir en composant. Ensuite, nous reviendrons ici. Nous avons une icône de menu. Je vais simplement le copier, le coller dans notre système de conception. Composant. Nous procéderons de la même manière pour chacun d'entre eux. Mmm, hum. Mm. Mm. Mm. Mm. Mm. Mmm. Mmm. Mm. Mm. Mmm. Nous avons donc créé avec succès les composants de nos icônes. Nous pouvons désormais les utiliser facilement depuis notre onglet Ressources. Vous pouvez voir si nous accédons à la ressource sous forme d'icônes, nous pouvons voir toutes les icônes que nous avons. Nous pouvons donc simplement l'utiliser en le faisant glisser. Nous l'utiliserons donc plus tard. Je vais donc terminer cette conférence ici et nous allons continuer à créer notre système de conception à partir de là. À voir dans la vidéo suivante. Dites-leur de prendre soin de vous. 22. Créer des composants de boutons: Mec, on revient. Dans la dernière conférence, nous avons créé nos composants pour les images et les icônes. Nous allons maintenant commencer à créer nos composants et variantes pour nos boutons, cartes et autres pièces. Je vais donc prendre le cadre je vais le renommer en longueurs et variantes, non ? Nous allons donc d'abord créer nos composants pour nos boutons. Voyons donc quel type de boutons nous avons. Donc, au début, nous avons ce bouton de démarrage, puis nous avons ce bouton de confirmation, puis nous avons confirmé le paiement, puis nous revenons au bouton C. Alors allons-y. Je vais juste copier celui-ci. Je vais revenir à notre système de conception et je vais le coller ici. Maintenant, je vais simplement le convertir en composant, non ? Alors oui, maintenant je vais en faire trois variantes. Je vais donc appuyer à nouveau dessus. OK. Définissez les premiers Cette variante sera également la suivante. Tu seras là. Et ce texte sera le bienvenu. Texte, il sera au milieu. Ou si je veux, je peux faire en sorte que ce soit petit ici. Enfin, nous pouvons créer une variante et nous supprimerons celle-ci. Nous n'en avons pas besoin. Nous allons changer la couleur de celui-ci trop blanche et nous allons changer la couleur du texte pour cela nous allons ajouter à ce rectangle, nous pouvons ajouter un trait, je dirais un trait de cette couleur. OK. D'accord, nous allons maintenant renommer toutes ces variantes. Cette variante est donc notre option par défaut. Ce sera notre glissement lorsque nous glisserons ce glissement, et ce sera notre toboggan OK. Nous avons donc créé les composants et les variantes du bouton de date de démarrage. Maintenant, créons ce bouton de confirmation. Je vais juste le copier. Je vais le tester ici. Faites-en un composant, je vais en créer une variante et je lui donnerai le nom. Lorsque nous le survolons, il fera un peu plus sombre que cela et il devrait y avoir une ombre OK. Nous avons donc créé une variante pour cela. Une autre, qui confirme le paiement. Copiez puis créez un composant, ajoutez une variante de la même manière que nous allons le faire, il y aura un effet et le nom de cet état sera Huber OK. Enfin, nous devons arrêter pour retourner à Hamby C'est une copie. Créez le composant lors de la variante. Je change juste la couleur de celui-ci en blanc et celui-ci en noir et je donne un trait extérieur. De ça. OK. OK. Nous avons donc créé tous les composants et variantes de nos boutons. Nous allons donc maintenant remplacer ces boutons par notre cadre frontal élevé. Nous allons donc passer à notre double cadre High FDL. Nous allons accéder à cet onglet d'actif et à nos composants locaux, et nous verrons que tous les composants et variantes sont ajoutés ici. Je vais juste le faire glisser ici. Je vais juste le couper. Je vais aller ici et je vais simplement sélectionner l'endroit à remplacer, afin qu'il soit remplacé automatiquement. Nous ferons la même chose pour le reste des boutons. Nous avons donc remplacé tout ce qui est automatisé. Dans cette conférence, nous avons donc créé des composants et des variantes pour nos boutons, et je terminerai cette conférence ici. À partir de la prochaine conférence, nous créerons des composants et des variantes pour le reste. Alors d'ici là, prends soin de toi. Au revoir. 23. Créer un composant de section de catégorie: L'un d'eux va revenir. Dans la dernière conférence, nous avons créé le composant et la variance de nos boutons. Et dans cette conférence, nous allons créer les composants de la section des catégories et cette barre de navigation inférieure. Concevons donc nos composants pour cette catégorie et pour la navigation inférieure p. Nous allons donc simplement copier ce conto C et l'améliorer ici Nous allons ajuster la taille du cadre. OK. Maintenant, nous allons en faire un composant, puis nous allons ajouter des variantes. Un. OK. Donc celui-ci, nous allons le faire de cette couleur, ce texte, nous allons le mettre à zéro. Et nous pouvons lui donner l'impression qu'il est sélectionné, non ? Nous pouvons donc nommer cette deuxième variante selon laquelle la vie est sélectionnée, non ? Ensuite, nous en ferons un autre. Et la variante, non ? Nous allons donc sélectionner celui-ci et procéder de la même manière que nous allons le créer, la couleur, nous allons lui donner du blanc, lui donner une ombre. OK. Nous allons donner ce nom. Cette variante Running. En cours d'exécution, sélectionné. Hein ? Ensuite, de la même manière, nous pouvons créer une autre variante. Ainsi, changez la couleur en ceci, couleur du texte en ceci. Et nous pouvons en donner un effet. Et enfin, nous en ferons un autre. Il suffit donc de créer une autre variante eLepth, pourquoi Effect pourquoi Celui-ci. Jusqu'ici tout va bien, et cet apprentissage vous donnera Basket-ball. Et ces quatre OK, nous avons donc créé cette catégorie, section composants et variantes. Et maintenant, ce que nous allons faire, nous allons passer à notre haut feutre ou cadre Nous allons passer à notre actif, et nous pouvons voir ici que nous avons nos sections. Nous allons simplement le faire glisser ici, le couper. Nous allons aller ici et nous allons simplement le remplacer par celui-ci et nous l'ajusterons en conséquence. Et nous allons activer le scan horizontal, non ? Nous lui avons donc déjà permis de préparer un scone. Donc c'est bon. Nous avons donc créé composants et variantes de notre section de catégories, et dans la prochaine conférence, nous essaierons de créer notre barre de navigation inférieure. Alors d'ici là, prends soin de toi. Au revoir. 24. Créer un composant de barre de navigation inférieure: L'un d'eux va revenir. Dans la dernière conférence, nous avons créé nos composants et variantes pour la section des catégories. Dans cette conférence, nous allons maintenant créer nos composants pour la barre de navigation inférieure. Je vais donc copier celui-ci et passer au système de conception, et je vais augmenter la taille du cadre, et je vais le coller ici. Ce seront donc nos barres de navigation inférieures. J'en ferai un composant. Je vais en faire une variante. Maintenant ce que je vais faire, je vais juste sélectionner ce cercle et celui-ci. Je vais venir ici. OK. Alors je vais simplement le sélectionner et le déplacer ici. Je vais changer sa couleur en blanc. Et je vais également le déplacer ici. Carte juste alignée. Et à propos de cette maison, je peux juste changer la couleur en gris. Je vais le déplacer ici. OK, c'est donc notre onglet de carte. Voici notre onglet d'accueil. OK, alors nous en créerons une autre, puis nous en créerons une autre variante. Donc, de la même manière, je vais sélectionner ce cercle, celui-ci, et je vais simplement le faire glisser d'ici à ici. Je vais le sélectionner, placer au milieu. Changez sa couleur en blanc, changez-le pour qu'il ne s'agisse pas d'un cation de décoloration Changez la couleur en gris. Placez-le au milieu. OK. OK, nous allons maintenant le renommer en notification tap. Nous allons donc créer notre dernière variante qui sera sélectionnée par notre personne, non ? De la même manière, sélectionnez ce cercle Celui-ci et celui-ci. Placez-le ici. blanc. Je compte faire le bon alignement. Et nous allons le placer. Changez la couleur en gris. OK, maintenant, je vais le renommer en onglet compte. Nous avons maintenant créé les composants et variantes de notre barre de navigation inférieure. Je vais donc revenir à notre cadre haute fidélité, accéder à la ressource, la faire glisser ici, la couper et la remplacer. Remplacez ceci OK, jusqu'ici tout va bien. Nous avons donc créé avec succès cette pièce pour les composants et les variantes. Dans la prochaine conférence, nous continuerons à créer d'autres composants et variantes pour notre système de conception. Alors d'ici là, prends soin de toi. Au revoir. 25. Créer des composants de la carte dans une section de taille sélectionnée: Bienvenue à tous. Dans la dernière conférence, nous avons créé nos composants et variantes pour cette barre de navigation inférieure de l'écran d'accueil. Dans cette conférence, nous allons créer le composant et la variante de sélection des catégories de taille. Je vais donc simplement le copier d'ici. Je vais le tester. Ici. Certains sont comme ça. Je vais ajuster la taille. OK. Alors maintenant je vais en faire un composant, puis je vais en faire une variante. Et je vais simplement sélectionner ceci et modifier ces éléments. 38. Il y en aura 39. Puis le pote. Ce sera 39, puis ce sera 40. Puis un autre donc Nous avons donc créé nos composants et nos variantes pour cela Je vais donc revenir à notre cadre Dover à haut rendement, et je vais simplement passer à notre actif. Je vais le faire glisser ici, le couper. Je vais juste le remplacer. Je vais ajuster la taille et passer au prototype, est déjà quadrillé horizontalement, non ? Nous avons donc créé nos composants pour cela. Nous allons maintenant essayer de créer des composants pour cette carte. Je vais donc passer au système de conception. Je vais le placer ici. Cette image, nous devons utiliser l'image de nos composants. Nous allons donc utiliser celui-ci. Je vais juste le copier et coller ici, le remplacer, non ? Alors maintenant je sélectionne cette carte, j'en fais un composant. Ensuite, nous allons faire de ce titre cette catégorie, le texte, le prix, tout, en changeant automatiquement les composants. Alors, comment pouvons-nous le faire ? Pour cela, nous devons créer des variables locales. D'accord, nous allons donc passer aux variables locales ou créer une collection. Je vais donc renommer cette collection en produit Okay. Nous allons donc créer une collection. Nous allons donc créer une variable. Et le nom de la première variable est duct, A. Je vais donc l'appeler ni ax tom set and zero. Et je vais lui donner le nom de tous. Ensuite, j'en créerai un autre. Ce sera notre engouement. Le premier sera donc notre Don so. OK. Ensuite, nous avons notre prix. C'est un chiffre, non ? Asseyez-vous, le prix sera de 220, non ? Ensuite, nous avons le nombre d'articles. C'est le nombre d'articles que nous avons achetés. Je vais donc faire en sorte qu'un autre objet compte zéro. Et une autre question que nous devons faire est que cet article soit ajouté à la carte ou non. Nous devons donc créer une propriété du lingot ou une variable du bolan qui est ajoutée Donc ça devrait être des fourrures. Bon, maintenant nous devons créer pour chacune de ces quatre cartes, non ? Un, deux, trois, quatre, alors créons. Donc, un autre, on peut le nommer. Soren M Je suis ronde. Celui-ci, ce sera notre shot Shoe. Le prix sera de 350€, et ce sera le même. Nous allons en créer un autre. Jusqu'ici, tout va bien. Nous avons créé toutes les variables dont nous avons besoin. Alors, qu'allons-nous faire ? Nous allons passer à ce texte. Nous allons aller ici et le lier au nom de notre produit. Pour celui-ci, nous allons le lier à notre produit. Tapez. Ici, nous devons modifier un peu ce qui sera Cela en fera une copie et je vais juste le rester. Et pour cela, je vais juste m'en tenir là. Ce sont donc nos deux tags, non ? Je vais relier celui-ci à la presse. Et je vais appliquer une variable à ce texte avec notre nombre d'articles. OK. Et une autre chose que nous devons faire ici pour l'image, nous appliquerons la propriété d' échange instantané. Je vais donc sélectionner l' image. Je vais aller ici. J'écrirai une image, et j'ajouterai la collection pour les chaussures WinShrt Celui que je vais appliquer celui-ci et cette chaussure bleue. Ouais. Je vais simplement créer cette propriété. Nous allons donc maintenant revenir à notre haute fidélité ou à notre cadre et nous allons passer à l' actif, ajoutez-le ici. Coupez-le, et je sélectionnerai tout cela. Un, deux, trois, quatre, et je vais les remplacer dans tout ça. Ensuite, les variables sont déjà appliquées à celle-ci. Maintenant, je vais sélectionner ceci et nous verrons que nous pouvons changer de chaussure. Nous pouvons aller ici, accéder aux produits et sélectionner le second, cela changera automatiquement le titre, le type de chaussure et tout le reste. Nous ferons la même chose ici. Découvrez comment nous pouvons facilement peser des composants. Grâce aux variables locales, nous pouvons facilement changer et modifier nos cartes. Je vais donc terminer cette conférence ici. À partir de la prochaine texture, nous continuerons à mouiller notre système de conception à partir de là . Alors d'ici là, prends soin de toi. Au revoir. 26. Créer les composants d'une liste de panier: Ian va revenir. Dans la dernière conférence, nous avons créé ces composants et variantes de cartes avec nos variables locales. Maintenant, nous allons revenir à notre hypedl design. Et dans cette conférence, nous allons créer les composants de cette liste de cartes. Je vais donc simplement le copier. Je vais le tester ici. Maintenant, ce que nous allons faire pour cette image, c'est la remplacer par les composants que nous avons créés. Donc, juste en copiant ceci, je vais aller ici. Je vais juste le remplacer. OK. Nous allons en fait créer une autre variable locale pour l'écran de notre carte. Je vais donc simplement créer une collection. Ce sera notre carte. Maintenant, ce que nous allons faire, créer une autre collection de cartes. Nous allons donc l'appeler carte, puis nous allons créer des variables. Ainsi, l'une des variables est vide ou non. Nous allons donc le rendre vrai par défaut. Maintenant, ce que nous allons faire, nous allons lier celui-ci et appliquer une variable dans le nom du produit, celui-ci, le type de produit, et celui-ci à notre prix. Et celui-ci, nous le lierons à notre nombre d'objets, n'est-ce pas ? Donc, si vous remarquez ici, nous n'avons pas notre symbole dollar. Donc, ce que nous allons faire, nous allons simplement créer le signe 1$, et nous allons simplement l'ajuster ici. Et nous pouvons l'ajuster un peu ici. Nous pouvons ajuster cela, non ? Jusqu'ici, tout va bien. Nous allons donc maintenant en faire un composant. Pour cette image, nous devons appliquer notre propriété d'échange instantané. Nous allons donc cliquer ici sur les images. Nous ajouterons une collection pour celui-ci. Celui-ci et notre collection de chaussures noires, non ? Ils sont petits, non ? OK, super propriété. Maintenant, ce que nous allons faire, nous allons passer à notre intervaframe à pédales élevées Nous allons accéder à notre actif. On va le faire glisser ici, on va le couper. Nous allons sélectionner ces deux options, et nous les remplacerons comme ceci. OK. Alors maintenant, les deux premiers vont bien. Mais pour le second, on peut aller ici et on peut sélectionner celui-ci. Et pour cela, il suffit de sélectionner la deuxième œuvre. Tu vois, c'est changé automatiquement. OK. C'est ainsi que nous pouvons facilement créer des composants pour la liste d'écran de notre panier. Ainsi, nous avons fini par créer nos composants et nos variables, et nous avons conçu avec succès notre système de conception pour ce projet. Je vais donc terminer cette conférence ici pour la prochaine conférence, nous allons commencer à faire notre prototypage Je vais donc terminer cette conférence ici. Rendez-vous lors de la prochaine conférence d' ici là, occupez-vous de 27. Prototypage d'écran d'éclaboussure et d'écran d'accueil: Bonjour à tous. Bon retour. Lors de la dernière conférence, nous avons terminé avec succès la conception de notre système de conception. À partir de cette conférence, nous commencerons à réaliser notre prototypage. Commençons donc notre prototypage à partir de l'écran de démarrage, vous voyez ? notre prototypage à partir de l'écran de démarrage, vous voyez Nous avons donc un bouton ici. Donc, chaque fois que nous arriverons à cet écran éclatant, nous devons faire glisser ce bouton de gauche à droite et nous aurons un texte de bienvenue Pour réaliser ce prototypage, nous devons donc revenir à notre système de conception. Et nous devons faire ce prototypage ici dans les composants principaux Donc, ce que nous allons faire, nous allons le sélectionner. Nous allons passer en mode prototype. Nous allons donc sélectionner celle-ci, et nous passerons à la deuxième variante. Et ici, nous allons sélectionner sur la bonne voie, non ? Et nous allons sélectionner L'animation intelligente est sortie, c'est bon. Ensuite, de celui-ci à celui-ci, nous sélectionnerons After Delay et il sera sorti, donc tout ira bien. Alors maintenant, si nous revenons en arrière et vérifions, est-ce que cela fonctionne parfaitement ou non. Donc, de celui-ci à celui-ci, nous pouvons accéder à notre écran d'accueil. OK. Maintenant, comment allons-nous vérifier notre prototypage ? Nous allons donc sélectionner ce cadre. Nous allons appuyer sur Shift space. Ensuite, un aperçu apparaîtra et nous pourrons voir. Nous allons donc le faire glisser d' ici à ici. Tu peux voir. Maintenant, c'est le bienvenu, et si nous cliquons, nous reviendrons à notre écran d'accueil. Donc oui, cela fonctionne parfaitement. Ensuite, sur l'écran d'accueil, nous avons quelques prototypes à réaliser Revenons donc à notre système de conception et commençons par le prototypage ici Ainsi, lorsque nous sélectionnerons ce mode de vie, nous passerons à notre variante de style de vie. Lorsque nous sélectionnerons cette course, nous passerons à notre variante de course. Lorsque nous sélectionnerons ce football, nous passerons à notre variante de football. Variante de basket-ball. Et tout sera une animation intelligente. Ou nous pouvons le donner à instantané, instantané. Pas malin. Nous consacrerons tout cela à une transition instantanée. Ce sera notre instant. Ce sera notre instant. Nous allons donc faire de même pour le reste de l'article. OK. Jusqu'à présent, tout va bien, nous en avons fait un ProtypingT. Alors, vérifions-le. Nous allons revenir à notre cadre de haute tour FDL. Nous allons sélectionner ce cadre et simplement déplacer l'espace. Et nous pouvons voir que nous pouvons l' épeler, non ? Donc, si nous sélectionnons celui-ci, il sera sélectionné. Celui-ci sera sélectionné. Celui-ci sélectionné, celui-ci sélectionné. Cela fonctionne donc parfaitement. OK, nous pouvons donc faire le reste du prototypage. Nous avons ce menu, cette barre de navigation inférieure, non ? Nous devons donc faire le prototypage pour cela. Je vais donc sélectionner ceci. Lorsque nous sélectionnons cette icône de carte, nous devons passer à celle-ci. Instantané. OK. Oui. Quand nous irons ici, nous ne donnerons pas un instant. Nous allons confier celui-ci à l'animation intelligente. Lorsque nous irons ici, nous sélectionnerons celle-ci, l'animation intelligente. Celui-ci sélectionnera celui-ci pour l'animation intelligente. Faisons donc la même chose pour le reste de cette option. Mmm, hum. Maman, hum. Mm. Je vais donc sélectionner à nouveau cet écran d'accueil, en forme d'espace. Maintenant, nous l'avons déjà fait, non ? Voyons maintenant si nous sélectionnons celui-ci. Un. Celui-ci fonctionne parfaitement, non ? Ensuite, nous devons faire notre prototypage pour cela. Nous allons sélectionner cet article et passer à l'écran des données de ce produit OK. Dans cette conférence, nous avons donc réalisé notre prototypage pour l'écran de démarrage et l'écran d'accueil Lors de la prochaine conférence, nous procéderons au prototypage du reste de l'écran. Alors d' ici là, prends soin de toi. Au revoir. 28. Prototypage d'écran des détails du produit: Tout le monde. Bon retour. Dans la dernière conférence, nous avons conçu ce prototype de barre de navigation inférieure. Dans cette conférence, nous allons essayer de concevoir ce composant ou appliquer notre prototypage à ce composant Commençons donc. Donc, avant de déménager, nous devons renommer toutes ces variantes, non ? Donc, la première variante devrait être nommée 38. Celui-ci doit être nommé 39. Bien, maintenant, ce que nous allons faire, nous allons passer à notre ambiance de prototypage Chaque fois que nous sélectionnons ce 39, nous devons passer à celui-ci. 40, nous devrions passer à ce 40, et nous devrions le changer en instantané. Celui-ci, également, nous devrions le changer en instantané. OK, alors 41 devrait nous mener à celui-ci. 42 devrait nous mener à celui-ci. 43 devraient nous y amener. 44, celui-ci, 45, celui-ci. OK, alors cette deuxième rangée. Mmm, hum. Mmm. Nous avons donc fait notre prototypage pour ces éléments, et voyons voir, nous allons revenir à notre cadre de niveau haute résolution Nous allons accéder à notre actif. Et nous allons sélectionner celui-ci. Nous allons le couper et le remplacer. Je vais juste le remplacer. Je vais le redimensionner Je vais passer au prototypage, et il est déjà défilable horizontalement Alors maintenant, je vais vérifier si cela fonctionne parfaitement ou non. Alors changez d'espace. Vous pouvez donc voir ce menu déroulant, et nous pouvons sélectionner chacun d'entre eux, n'est-ce pas ? Donc, oui. Je vais donc terminer cette conférence ici. Nous commencerons à prototyper le reste de ces éléments dès le prochain cours Alors d'ici là, prends soin de toi. Au revoir. 29. Prototypage complet de l'écran des détails du produit: Bienvenue à tous. Lors de la dernière conférence, nous avons réalisé le prototypage de ces éléments Maintenant, nous allons passer à notre cadre à foetus élevé, et nous pouvons voir que nous avons fait le prototypage de celui-ci Dans cette conférence, nous allons donc essayer de prototyper le reste des éléments Nous allons donc passer au mode prototypage. Après avoir cliqué sur le bouton de confirmation, nous passerons à celui-ci, n'est-ce pas ? Voyons voir. Avons-nous appliqué le prototypage à ces boutons ? Non. Alors revenons en arrière. Chaque fois que nous le sélectionnons, nous devons passer à celui-ci. Oui, cela devrait être notre animation et notre survol intelligents. Lorsque nous sommes en vol stationnaire, pendant le vol stationnaire. Nous ferons la même chose pour le reste des boutons. Pendant le vol stationnaire. Animation intelligente ? OK. Ils devraient être comme ça. Pendant que Hering. Animation intelligente. OK. Alors maintenant, revenons en arrière. Nous avons donc fait le prototypage pour celui-ci, celui-ci, et maintenant nous devons appliquer le prototypage à cette section de couleur, Donc, ce que je vais faire, c'est créer deux autres pages de variantes pour cette page de détails du produit. Je vais donc les déplacer un peu. Je vais le dupliquer 12 fois, une, deux, un peu plus. OK, donc ce que je vais faire, c'est que chaque fois que nous aurons celui-ci, nous devrons passer à cette page ou à cet écran. OK ? Cela devrait être notre instant. OK, jusqu'ici tout va bien. Et chaque fois que nous cliquons sur celui-ci, sur le bouton noir, nous devons passer à celui-ci. Alors maintenant, nous devons changer la couleur et le type de chaussures, tout, n'est-ce pas ? Je vais donc changer cette chaussure. Maintenant, ce que nous pouvons faire, c'est supprimer tout cela. Je vais donc séparer un peu cette ombre ici. Je vais supprimer celui-ci, celui-ci et celui-ci. Je vais maintenant passer à notre actif. Je vais sélectionner celui-ci. Je vais ajuster la taille. Je vais également ajuster celui-ci ici, voyons s'il se trouve sous cet écran du produit. OK. Alors maintenant, ça a l'air bien. Donc, pour celui-ci, nous allons réellement changer de couleur. Nous allons donc changer cette couleur en ceci, et nous allons changer cette couleur en ceci, peut-être un peu plus foncé. OK. Nous allons maintenant sélectionner la chaussure bleue. Je vais aller ici. Je vais passer à celui-ci et je vais juste le traîner ici. Voyons quelle est la taille de ces 377, 308. Donc 377308. OK. Et nous allons simplement faire glisser cette ombre d' ici à ici, n'est-ce pas ? Je vais juste copier cette ombre. Et je vais le coller ici. OK. Donc c'est bon. Je vais également le coller ici. Et pour celui-ci, on peut changer la couleur en noir. Celui-ci doit être noir et celui-ci doit également être noir. C'est bon. Nous allons donc maintenant choisir notre chaussure noire. Voici donc notre chaussure noire. Les tailles seront 377 et 308. OK. Je pense qu'il a l' air un peu grand, donc je vais le réduire un peu plus. OK, jusqu'ici tout va bien. Ainsi, chaque fois que nous cliquons sur celui-ci, cela nous amène à ce cadre ou à cet écran. Chaque fois que nous cliquons sur celui-ci, il nous amène à cet écran. Nous devrions donc faire la même chose ici. Donc, ce que je vais faire, c'est simplement le déplacer ici. Je vais le donner à cette couleur, et celui-ci, je vais le donner à cette couleur. OK. Cela signifie qu'il est sélectionné ici. La même chose que je vais faire, je vais le donner à cette couleur noire. Je vais le donner à cette couleur bleue, et je vais le donner à cette couleur verte. OK. Alors maintenant, ce que nous allons faire, nous allons également appliquer le prototypage ici Donc, lorsque nous sélectionnons ceci, nous passons à ce cadre. Lorsque nous sélectionnons le noir, nous devrions être dans cet écran. Lorsque nous sélectionnons cet écran, nous devrions nous diriger vers cet écran. Ce bleu devrait se diriger vers cet écran. OK, jusqu'ici tout va bien. Maintenant, nous avons presque terminé ce prototypage, et enfin, nous pouvons appliquer le prototypage, appliquer le prototypage à ce bouton Retour, également à la flèche de retour, où se trouve notre flèche de retour C'est notre flèche arrière. Ainsi, lorsque nous cliquons dessus, nous devons accéder à l'écran d' accueil de la même manière. Lorsque nous le sélectionnons, nous devrions accéder à cet écran d'accueil. C'est bon. la même manière, nous devons ensuite faire le prototypage de ce bouton de confirmation. Ainsi, chaque fois que nous appuyons enfin sur Confirmer, nous devons revenir à l'écran d'accueil , revenir à l'écran d'accueil , revenir à l'écran d'accueil. Nous avons donc presque terminé le prototypage. Alors maintenant, vérifions-le. Je vais simplement sélectionner l' écran d'accueil et appuyer sur Shift Space. Et supposons que nous ayons sélectionné cette carte, nous sommes redirigés vers cet écran de données de production. Maintenant, je peux sélectionner la taille, sélectionner la couleur. Et ça confirme. OK. Alors maintenant, cela fonctionne parfaitement. Maintenant, je vais sélectionner à nouveau tout cela et appliquer de l' horogène à ce sic OK. Je vais donc terminer cette conférence ici, et à partir de la prochaine conférence, nous continuerons à faire notre prototypage à partir d'ici Alors d'ici là, prends soin de toi. Au revoir. 30. Prototypage de composants de la carte: Bienvenue à tous. Lors de la dernière conférence, nous avons réalisé un prototypage pour l'écran des détails de notre produit Maintenant, nous devons faire le prototypage de ces cartes, de ces cartes spécifiques et de notre écran de cartes, n'est-ce pas Nous allons donc commencer à réaliser notre prototypage à partir des principaux composants Nous allons donc pouvoir en aborder les principaux éléments de deux manières. Nous pouvons utiliser un système de conception, ou nous pouvons sélectionner celui-ci. Et ici, vous pouvez voir que nous pouvons passer au composant principal. Si nous sélectionnons cette option, nous serons redirigés vers le composant principal. Nous allons donc maintenant appliquer notre prototypage à cela. Alors maintenant, ce que nous allons faire. Je vais simplement copier celui-ci, le remplacer ici, et aussi ici. Hein ? Alors maintenant, ce que nous allons faire où que nous soyons, comme vous pouvez le voir, nous avons déjà créé nos variables locales. Si vous remarquez que nous avons des produits. Nous avons des produits, une collection. Nous avons déjà créé nos variables locales. Donc, ce que nous allons faire, chaque fois que nous sélectionnons ou que nous cliquons sur ces champs nous devons créer une interaction Cela doit se faire par le biais d'une certaine interaction. Je vais donc sélectionner ce rapport pour définir la variable. Et nous devons faire l' addition à notre nombre d'articles. Donc, comptez le nombre d'articles plus un, n'est-ce pas ? Nous avons donc fait notre ajout de la même manière que nous devons le faire pour celui-ci. Donc interaction, variable définie, éléments, nombre d'éléments, soustraction moins un, n'est-ce pas ? Mais voici le cadeau. Lorsque nous cliquons sur le signe moins, cela peut nous amener au nombre d'éléments à valeur négative. Nous devons donc le restreindre, non ? Nous devons donc appliquer une condition. Nous allons donc appliquer une condition, nous allons donc passer ici, nous appliquerons une condition si nombre d'articles est supérieur à zéro, n'est-ce pas ? Si le nombre d'articles est supérieur à zéro, vous pouvez appliquer cette variable de cellule. Je vais donc juste le résoudre ici. Alors maintenant, vérifions-le. Nous allons passer à notre cadre de porte à alimentation élevée. Nous pouvons voir si nous sélectionnons cette base de travail, maintenant, si vous remarquez que plus, voir et moins moins moins moins. Mais lorsque vous cliquez à nouveau dessus, il ne revient pas en arrière car nous avons défini une condition. Cela fonctionne donc parfaitement. Alors maintenant, ce que nous allons faire, nous devons définir une variable pour notre voiture, n'est-ce pas ? Nous allons donc passer ici, aux variables locales. Nous devons aller chercher nos cartes. Ici, nous devons créer une autre variable qui sera notre carte c maintenant, nous allons aller ici et ici. Si vous voyez ici, nous double-cliquerons sur ce numéro. Nous appliquerons le nombre de cartes. Nous devons appliquer le nombre de nos cartes ici. Mais comment pouvons-nous calculer le tous ces articles total de tous ces articles et l'indiquer sur le nombre de nos cartes ? Pour cela, nous devons appliquer notre condition sur le bouton plus, n'est-ce pas ? Alors revenons en arrière. Maintenant, ce que nous allons faire, nous allons aller ici. Nous allons maintenant définir à nouveau une variable , cette fois pour le nombre de nos cartes, le nombre de cartes. Il s'agit en fait du nombre d' articles, du nombre d'articles plus le nombre d'articles, plus le nombre d'articles. Et ce nombre d'objets est en fait le premier article. C' est le second. C'est le troisième, et c'est le quatrième, car nous avons quatre éléments ou quatre cartes à l' écran, n'est-ce pas ? Nous ferons donc la même chose pour notre condition négative. Nous allons définir une variable. Cette fois, notre variable concerne le nombre de cartes. Ce sera notre nombre d'articles plus le nombre d' articles plus le groupe d'articles plus le nombre d' articles le nombre d'articles Le même site Web, premier élément, deuxième élément, troisième élément et quatrième élément, n'est-ce pas ? Jusqu'ici, tout va bien. Alors, vérifions-le. Lorsque nous sommes dans notre espace de changement d'écran d'accueil, maintenant, je suppose que vous en remarquez un, il change, deux , trois, quatre, cinq, six. Maintenant, si nous configurons un moins cinq, quatre, cela fonctionne parfaitement. Hein ? Enfin, lorsque nous cliquons sur celui-ci, nous devrions accéder à l'écran de notre carte. Tout ça. OK, nous avons donc fini de taper. Je vais donc maintenant terminer cette conférence ici. Dans la prochaine conférence, nous verrons comment nous pouvons jouer au prototypage sur cet écran à cartouches Je vais donc terminer cette conférence ici, à la prochaine conférence. D'ici là, prends soin de toi. Au revoir. 31. Prototypage de l'écran de panier: Bienvenue à tous. Lors de la dernière conférence, nous avons réalisé le prototypage de ces pièces Nous allons maintenant commencer à faire du prototypage opérationnel pour l'écran de notre carte Dans un premier temps, je lierai ce numéro au nombre de nos cartes. Oui Ensuite, je sélectionne cette carte à l'extérieur, et j'ajouterai ces éléments deux autres nombres premiers. Désolée. OK, maintenant je vais le placer au milieu, je vais ajuster le cadre et je vais le changer à partir d'ici. Pour celui-ci, je vais choisir celui-ci noir. Et pour celui-ci, je choisirai le bleu. Je choisis ce que je choisis. OK, jusqu'ici tout va bien. Et ce que je vais faire, c'est ajuster le côté du cadre, cliquer sur le contenu. Je vais l'emmener ici. Tu peux le faire. Alors maintenant, ce que nous allons faire, c'est appliquer nos variables ici, les variables booléennes Pour celui-ci, je vais aller ici. Je vais cliquer avec le bouton droit sur cette icône, et je vais appliquer que c'est vide. Pour celle-ci, je vais aller ici, nous postulons à deux cartes car elle est fausse, elle ne sera donc pas montrée ici. Donc, pour celui-ci, cliquez avec le bouton droit de la souris sur deux cartes. Maintenant, nous pouvons voir qu'aucun article n'a été ajouté, il ne s'affiche donc pas, et nous devons créer d' autres variables dans notre collection de cartes. Ce sera notre chiffre total, qui est nul. Je vais m'appliquer à ce texte ou à cette variable totale. Maintenant, nous devons contrôler cette liste de cartes depuis notre composant principal. Nous y retournerons donc. Passons à l'ambiance du prototypage. Et lorsque nous appuyons sur notre icône plus, nous devons définir la variable selon laquelle nous avons ajouté deux cartes. Désolé, deux cartes ajoutées devraient être vraies ou fausses, n'est-ce pas ? Et nous devons définir une autre variable. Notre moyen vide doit être faux, car nous ne voulons pas que cet article de carte soit vide. Nous devons donc faire la même chose dans nos conditions négatives. Donc, lorsque nous atteignons notre point négatif, nous devons nous rappeler que si nous devons nous rappeler que si le nombre d'articles est égal à zéro, alors notre carte ajoutée à la carte ajoutée à carte doit être fausse, n'est-ce pas ? Nous ne devrions pas manquer cette carte, une carte en particulier. Une autre variable que nous devons ajouter est le total de notre carte. Le nombre de nos cartes est égal au O. Elles sont alors vides. Notre vide ne devrait plus être vrai. Nous devrions montrer notre iPhone à carte vide. Voyons donc si cela fonctionne parfaitement ou non. Nous allons donc revenir à notre cadre haute fidélité. Maintenant, nous pouvons appliquer ici cet homicel. Mmm, hum. Enfin, nous pouvons l'appliquer car vérifiez maintenant si cela fonctionne parfaitement ou non. Je vais donc aller ici, changer d'espace. Voyons maintenant qu'au début, si nous vérifions, aucun élément n' a été ajouté sur le cloud, nous y retournerons donc. Si nous sélectionnons cette option, vous pouvez voir qu'un article a été ajouté. Si nous sélectionnons ce C, trois éléments sont ajoutés. Maintenant, si nous cliquons sur celui-ci, il sera égal à zéro, non ? Le nombre d'éléments de la courbe sera nul. Il disparaîtra donc Il voit Vanish. C'est Vanish. Tu vois, il y en a deux, c'est Ngansh et cette icône apparaît. Cela fonctionne donc parfaitement. Maintenant, ce que nous devons faire, c'est calculer le prix de tous les articles et indiquer le total. Alors allons-y. Nous allons donc revenir ici. Et dans la classe, ce que nous allons faire, nous allons définir notre variable. Et cette fois, c'est notre total, non ? C'est donc notre total. Et ce total est en fait notre nombre d'articles, multipliez par le prix plus le nombre d'articles, multipliez par le prix, plus je compte, multipliez plus, désolé, je compte, multipliez par le prix. Nous devons le faire quatre fois. Pourquoi ? Parce que nous avons quatre articles, non ? Donc, le premier sera celui-ci , le prix sera le premier, le second. Donc troisième, troisième, quatrième et quatre. Maintenant, nous avons ce calcul. Nous devons faire la même chose pour R moins. Donc, vous savez, allez ici, définissez notre variable pour le total. OK. Alors maintenant, vérifions-le. Maintenant, nous allons aller ici, nous appuyons sur Shift Space. Ensuite, si nous voyons qu'aucun élément n' est sélectionné, le total est donc nul. Nous pouvons ajouter un article, deux articles, trois articles ou article, nous pouvons aller ici. Nous pouvons voir que cela se voit parfaitement. Supposons que ce soit le cas pour que ce soit la somme totale de tout cela. Si nous ne le voulons pas, additionnez tout cela. Si nous ne voulons rien, encore une fois, nous pouvons ajouter Itans Wiens, et confirmer, nous nous dirigerons vers l'escouade des cinq hoars Nous pouvons donc enfin l'ajouter à notre case d'accueil. Alors oui. Je vais donc terminer cette conférence ici. Dans la dernière conférence, nous verrons quoi ressemblera notre prototype final. Je vais donc terminer cette conférence ici d'ici là. Au revoir. 32. Prototypage final: Bonjour, tout le monde. Bon retour. Lors de la dernière conférence, nous avons terminé le prototypage de tous les écrans Dans cette conférence, nous allons donc voir à quoi ressemblera notre prototype final et comment fonctionne réellement cette application. Je vais donc sélectionner ceci. Je vais passer en mode prototypage et je vais sélectionner la classe Alors maintenant, nous pouvons voir que nous avons un bel écran de démarrage. Maintenant, je vais simplement le faire glisser d'ici à ici. Nous avons reçu un message de bienvenue. Je vais cliquer dessus. Nous allons passer à notre écran d'accueil. Supposons que j'aie sélectionné celui-ci. Je souhaite voir les détails de cet article. Je vais le sélectionner. Nous pouvons voir les détails. Nous pouvons changer de couleur. Nous pouvons sélectionner la taille. Nous allons financer. Et si nous passons à notre carte, aucun article n'a été ajouté jusqu'à présent. Nous allons donc maintenant ajouter notre article. Nous pouvons donc ajouter des éléments à partir d'ici, et nous avons une barre de navigation inférieure interactive. Tu vois ? Maintenant, ce que nous allons faire, nous allons ajouter des éléments. Je vais donc ajouter celui-ci, celui-ci, celui-ci, celui-ci. Et nous allons ici, nous pouvons voir que nous avons ajouté nos articles. Alors peut-être que nous ajouterons celui-ci également. Nous pouvons voir. Nous avons un barème total. Nous avons deux couches, supposons que oui, alors nous pouvons confirmer. D'accord. Notre commande a été passée avec succès. Nous pouvons retourner à notre projection. C'est ça. C'est à cela que ressemblera notre prototype final, et c'est ainsi que nos applications fonctionneront. C'était donc l'ensemble de notre projet, et j'espère que vous avez apprécié ce projet et que vous avez appris comment nous pouvons concevoir une application complète de magasin de chaussures à partir de zéro effectuer le prototypage avancé et créer un système de design interactif Je vais donc terminer cette série où j'espère que vous avez beaucoup apprécié. Alors d'ici là, prends soin de toi, au revoir.