Les bases pratiques de Figma : interface utilisateur de l'application de films de design

1. Introduction au cours: Ils veulent apprendre les bases de Figma et ses fonctionnalités essentielles en partant de zéro. Et si une femme veut appliquer rapidement tous ces outils à la pratique, alors vous êtes certainement au bon endroit. Car qu'est-ce qu'un cours pratique ? Nous allons concevoir une application pour les films. C'est l'occasion idéale de couvrir tous les outils de base et les stigmates tels que la mise en page, les grilles, le texte, les couleurs, les styles, etc. Mais nous aborderons également toutes les fonctionnalités importantes, y compris les composants, la variance et les prototypes. Donc, si vous êtes prêt à concevoir l'application de films, n'attendez pas et inscrivez-vous à ce cours dès maintenant. 2. Actifs Figma [Fiche gratuite]: Donc, exactement pour ce cours, j'ai créé un fichier Figma, que vous pouvez ensuite utiliser comme référence. Ce fichier est très pratique car je crée tous les types de couleurs, de styles, textiles, de superbes styles, ainsi que les composants que vous devez utiliser pour ce projet. Vous pouvez trouver les styles les plus anciens ici, dans la barre de menu de droite, et les réutiliser tout au long de ce cours. Vous pouvez également consulter tous les différents composants que j'ai préparés pour vous et dont nous aborderons également certains. Il existe également une autre page appelée écrans de conception. Et ici, vous pouvez voir tous les différents designs pertinents pour cette application cinématographique. Plus précisément, nous nous concentrerons ensemble sur l'accueil et l'ensemble de l'écran, mais vous pouvez également parcourir et consulter d'autres écrans que j'ai préparés pour vous. C'est une excellente occasion d'utiliser les écrans pour votre pratique d'apprentissage. Et peut-être aussi si vous souhaitez les réutiliser pour votre portefeuille. Assurez-vous donc que vous ne voulez pas ce fichier Figma. J'ai laissé le lien sous la description de ce cours. Et allons-y. 3. Écran de bienvenue de design - Partie 1: Commençons donc par concevoir notre premier écran d'accueil. Si vous souhaitez utiliser mon fichier Figma, vous pouvez immédiatement accéder à l'onglet Pages et ajouter une nouvelle page. Je vais donc faire exactement la même chose et nommer cette page en taille experte. N'hésitez pas à nommer cette page comme vous le souhaitez. La raison pour laquelle je travaille exactement dans le même fichier est que j' ai déjà défini tous ces textiles, couleurs, styles et styles de grille. Bien sûr, je vais tout expliquer à partir de zéro, comment tout a été conçu initialement par moi. Donc, la première chose à faire dans Figma lorsque nous commençons à concevoir notre application Web, dans ce cas, pour l'application de films, nous allons aller dans la barre de menu supérieure et sélectionner le cadre. Frame nous permet de créer une sorte d'écran que nous allons utiliser pour notre application Web. Dans le cadre sur le côté droit, vous avez de nombreux préréglages que vous pouvez utiliser pour vos projets. Ainsi, par exemple, si vous travaillez avec des applications mobiles pour avoir différentes tailles d'écran pour iPhone, Android, etc. Mais dans notre cas, je suis très heureuse de travailler avec un ordinateur de bureau. Je vais juste récupérer rapidement ce modèle et cliquer dessus ici. Nous avons donc créé notre premier cadre. Vous pourrez également le voir dans une étape ultérieure. Ainsi, sur la barre de menu de droite, vous pouvez voir que sa largeur est de 14, 40 et également sa hauteur, 1024 pixels. Renommons rapidement ce cadre. Le nom est l'écran de bienvenue. Alors maintenant, la première chose à faire est changer la couleur de remplissage de ce cadre. Assurez-vous donc de naviguer jusqu'à la section et de pouvoir le faire, par exemple manuellement , pour sélectionner la couleur que vous souhaitez appliquer à ce projet. Vous pouvez également accéder au menu des styles et sélectionner l'un des styles de couleurs que j'ai préparés pour ce projet. Donc, exactement pour celui-ci, je vais utiliser un dégradé angulaire foncé que je vais simplement appliquer et en un clic, ai déjà ce magnifique dégradé pour mon écran. Si vous voulez savoir comment il a été créé, vous pouvez toujours cliquer sur Détacher le style. Et ici, vous pouvez voir exactement comment ce dégradé a été créé. Donc, par exemple, la couleur dorée pour cette couleur violette et mettez également une couleur foncée et tous les autres paramètres applicables à ce dégradé. Mais je vais simplement revenir à mes styles de couleurs et les appliquer à nouveau juste pour des raisons de cohérence. Ensuite, je vais saisir un rectangle, essentiellement créé à l'intérieur de mon cadre. Je vais donc m'assurer que les dimensions sont exactement les mêmes que celles de mon cadre pour correspondre exactement à la taille. Vous pouvez également voir que le rectangle appartient à l'intérieur du cadre. Assurez-vous donc qu'il est placé exactement à l'intérieur, car vous pouvez par exemple facilement voir s'il ne fait pas partie du cadre. Il est également visible dans le panneau des couches. Donc, exactement pour ce rectangle, je veux appliquer une image. Et pour cela, je vais utiliser quelques plugins applicables dans Figma. Donc, ici, dans la bouteille de ressources, nous pouvons accéder aux plugins et rechercher les plugins que nous voulons utiliser. Et dans mon cas, trouvons Unsplash. Ce wagon vous aide à trouver de nombreuses images de ressources gratuites que vous pouvez appliquer à votre projet. Et nous allons utiliser ce plug-in pour Silence de nombreuses fois. Donc, ici, je vais juste taper film et trouver exactement l'image à appliquer à mon arrière-plan. Et cliquons rapidement sur cette image. Je pense que ça a l'air génial. Mais le fait est que vous pouvez voir que le champ doit être stylé en fonction de la couleur unie et de l'image. Supprimons rapidement cette couleur unie. Et je vais réduire l'opacité de cette image à environ 10 %. Et je pense que ça a l'air génial parce que maintenant notre parcours est beaucoup plus intéressant. Très bien, la prochaine étape sera d' ajouter une véritable grille de mise en page pour notre cadre, ici même dans le style. Vous pouvez donc à nouveau accéder aux styles de grille et les sélectionner Calm Center. Déballons rapidement ce style juste pour voir comment tout cela fonctionne. Vous pouvez donc voir une liste déroulante. Il existe trois types de grille de mise en page, mais pour les applications Web, nous utiliserons toujours des colonnes. Le compte est donc de dix colonnes, soit le nombre de colonnes que vous pouvez voir ici même à l'écran. De plus, la largeur est définie sur 104, qui signifie que cette colonne Rep a ce type de où la gouttière est réglée sur 16 pixels. Et c'est exactement la distance entre la plupart des colonnes que vous pouvez voir. Bien entendu, le cinq est aligné au centre. 4. Écran de bienvenue de design - Partie 2: Nous pouvons maintenant ajouter rapidement tous nos éléments visuels à cet écran. Je vais donc accéder rapidement aux ressources et trouver mes logos. Je vais donc le glisser-déposer rapidement ici dans mon cadre. Si vous voulez voir comment il est créé, assurez-vous simplement d' ouvrir ce composant et de voir tous les types de formes vectorielles que j'ai appliquées, ainsi que le texte. Mais pour l'instant, nous allons simplement le laisser tel quel. Et je voudrais juste m'assurer qu'il est aligné horizontalement. Ensuite, nous allons sélectionner des decks et taper ici des textes qui inciteront les utilisateurs à se connecter. Styles. Je vais sélectionner 18 pixels normaux. Donc, si nous déballons ce style, nous pouvons voir que j'utilise des marionnettes comme étang. Et l'épaisseur est normale , de même que la taille de la police si elle infecte des cellules et que la hauteur de ligne est de 20. Alignons-le à nouveau au centre. Et je vais rapidement réduire la largeur entre ces deux couches. Pour savoir exactement combien de pixels trouvent entre les deux couches, vous pouvez maintenir la touche Option sur Mac ou Alt sur le clavier Windows enfoncée. Ensuite, je vais sélectionner un rectangle et lancer mon bouton ici qui correspond à deux colonnes de mon écran. Je vais également modifier rapidement le rayon d'angle avec la valeur 14 et le plus élevé sera de 54 pixels. Alors rapidement, encore une fois, je vais changer la couleur en violet et ajouter un autre texte ici. Pour m'assurer que mon texte est exactement aligné au centre de ce bouton, je vais sélectionner cette couche rectangulaire ainsi que cette couche inférieure, et les aligner horizontalement et verticalement. Enfin, passons rapidement à l'aide de la souris droite et cliquons sur la sélection de groupes pour créer un groupe dans notre section de couches Nous pouvons également le renommer bouton de connexion juste pour notre propre référence. J'ai juste abaissé exactement le bas et je vais peut-être aussi diminuer la distance ici. Nous allons également récupérer cette couche de texte et la dupliquer à l'aide d'un raccourci clavier qui est Control plus ou Command plus B sur votre Mac. Je vais donc le faire glisser exactement ici et nous allons modifier le texte qui indique qu'il n'y a pas de comptes. Inscrivez vous. Je vais également réduire rapidement la taille de ce texte et assurer qu'il est sélectionné lors de l'inscription et qu'il est remplacé par le boulon. Attends. Passons également rapidement aux paramètres des polices et ajoutons l'outil sous-jacent, notre inscription, parfaite. Nous allons donc sélectionner toutes ces couches, les aligner les unes sur les autres, et également cliquer avec le bouton droit la souris et sélectionner le groupe de sélection. Enfin, nous pouvons également tout aligner à nouveau en fonction de notre français juste pour voir le résultat final. Assurez-vous donc de sélectionner également votre cadre d'écran de bienvenue. Et nous pouvons masquer cette grille de mise en page. De cette façon, vous pouvez voir exactement le design et la façon dont tout est aligné. Perfect guys, qui a créé cet écran extrêmement simple, mais j'espère que vous avez réussi à répéter toutes les étapes que nous venons de suivre ensemble. 5. Créer une navigation latérale de tableau de bord: Nous venons de terminer la conception de notre premier écran d'accueil. Et maintenant, nous allons créer un tableau de bord, qui sera notre premier écran d'accueil initial pour l'application de films. Naviguons donc à nouveau vers la barre de menu supérieure et cliquez sur le cadre. Et aussi dans les préréglages du cadre, je cliquerai sur le cadre du bureau. Renommez-le rapidement en écran d'accueil. Et j'appliquerai immédiatement le style de couleur à l'arrière-plan du cadre. Et ce sera un style de couleur foncée. Alors, tout d'abord, concevons une barre de navigation pour le site. Et nous pouvons le faire en sélectionnant un outil rectangulaire et en le jetant sur le côté gauche de notre écran, je vais changer la largeur à 274 pixels. Assurez-vous de l'aligner vers la gauche et également vers le centre. Ici, je vais appliquer ce type de couleur. Voici donc le code hexadécimal. Elle est légèrement plus claire que notre couleur de fond foncée. Prévoyez également une certaine séparation visuelle. Je vais passer aux effets et appliquer des ombres. Je vais donc utiliser cette couleur qui est en fait violette et qui aura une opacité de 40 %. Et je vais m'assurer que la position de cette valeur est égale à zéro pixel sur l'axe Y et aussi à des pixels juste ici, la valeur du flou, je vais l'augmenter à 90 degrés. heure actuelle, vous pouvez voir une sorte de lueur violette qui provient de notre barre de menu latérale. Aucune. Encore une fois, prenons notre logo et nous allons l'aligner exactement au centre. Et cela changera également sa position pour s'assurer que la distance par rapport au sommet est de 40 et que la même distance se fera depuis le côté gauche. allons maintenant sélectionner l'outil Texte dans lequel nous allons créer quelques couches de texte, c'est-à-dire les pages de nos tableaux de bord. Donc, le premier va rentrer chez lui. Et j'appliquerai immédiatement la police normale de 16e pixels. Et vous pouvez en voir le but. La hauteur de ligne est de 24 pixels et la taille est de 16. Je vais juste le dupliquer quelques fois. Maintenant, il ne me reste plus qu'à en modifier le contenu. Comme nous allons être situés sur notre page d'accueil initiale, je vais modifier son poids en gras. est donc également judicieux d' ajouter des icônes visuelles dans cette barre de menu pour symboliser l'implication de l'utilisateur dans mes actifs. J'ai préparé un tas d'icônes que vous pouvez simplement glisser-déposer ici dans cette zone et les appliquer à votre projet. Si vous voulez trouver cette icône, revenez de zéro. Vous pouvez accéder rapidement à la section des plugins et taper des icônes météo. Et c'est exactement le plug-in que j'utilise pour travailler dans mes applications. Ainsi, par exemple si vous tapez film, vous pouvez voir exactement la même icône que celle que je viens d'appliquer ici. La seule différence est que, par défaut, il a des couleurs noires Vous devez donc modifier le style en fonction de votre projet. Quoi qu'il en soit, sélectionnons toutes ces icônes en maintenant la touche Shift enfoncée. Et je vais les aligner exactement au centre. Nous pouvons donc maintenant voir que la distance est de 12 pixels. C'est ce que je souhaite réaliser dans ce design. Et maintenant, nous allons procéder un par un et appliquer exactement l'alignement vertical à notre couche de texte et à la couche IP. Et pour chacune, c'est une icône, je vais créer un groupe avec le contrôle et le raccourci G. Vous pouvez également y parvenir en cliquant avec le bouton droit de la souris et en cliquant sur Sélection de groupes. Vous pouvez maintenant voir que la nouvelle section de couches comportera un tas de groupes différents. Je vais donc sélectionner tous ces groupes et m'assurer de tout ranger. Et la distance entre toutes ces icônes sera de 35 pixels. Je veillerai également à ce qu'ils soient également alignés à gauche de mon logo. Ici aussi, la distance sera de 58 pixels. Et je souhaite également séparer certains de ces éléments de menu. Donc, par exemple, je vais les baisser complètement. Enfin, je souhaite également séparer ce type de joueurs, donc je vais également les réduire complètement. Parfait. Et en fait, la dernière chose que nous allons faire avec tous les éléments de notre menu, à l'exception de notre page d'accueil, est de les sélectionner. Dans une étape ultérieure, nous allons également réduire l'opacité à 80 %. Et la raison en est que je souhaite montrer visuellement à nos utilisateurs qu'ils se trouvent sur la page d'accueil. Enfin, quand nous aurons tout obtenu, sélectionnons-le puis groupons-le par intrigue contrôlée, raccourci de triche. Et je vais juste créer rapidement un composant. Et nous allons réutiliser ce composant dans l'ensemble de notre application. Renommons rapidement ce composant ici et appelons-le barre de navigation du site. 6. Introduction aux composants dans Figma: Pour vous expliquer brièvement composants si vous les utilisez pour la première fois, cela signifie que nous avons tout d' abord notre composant principal. Vous pouvez vous asseoir dans votre panneau de couches si, sans le k, nous avons en fait un composant enfant qui est en fait appelé instance dans Figma. Nous pouvons également dupliquer un nombre illimité d'instances dans Figma, ce qui signifie, par exemple si je vais dans mon composant principal, vous pouvez le voir également dans la barre de menu, par exemple je veux changer la couleur de fond de mon rectangle. Vous pouvez également voir comment tout est en train de changer. Cela accélère donc réellement votre flux de travail et votre processus de conception. Ainsi, par exemple vous n'aurez pas à accéder à toutes les copies de votre barre de navigation et à les modifier manuellement, mais vous pouvez le faire en un seul clic. Mais pour l'instant, supprimons toutes ces instances et concentrons-nous uniquement sur notre écran d'accueil. 7. Bannière de film de conception - Section de héros: Pour notre écran d'accueil. Alors décidez plus loin. Je vais appliquer une grille de mise en page parce que je veux m' assurer que tout est correctement aligné. Passons donc à nos styles de grille de mise en page. Et cette fois, nous allons sélectionner 12 colonnes à grain latéral. Et vous pouvez voir que la grille est en fait déplacée davantage vers la droite, qu'elle n'apparaît pas dans notre barre de navigation. Donc, si vous décompressez ce style de grille de mise en page, vous pouvez voir que le nombre de colonnes est 12 et que tout est aligné vers la gauche. La différence avant que nous n'ayons tout, c'était qu'elle était plus visible au centre de l'écran. Mais dans ce cas, nous devons vraiment travailler avec un alignement à gauche. Vous pouvez également voir la valeur de largeur de chacune des colonnes. Le décalage est de 306 et la valeur de la gouttière est de 24 pixels. Maintenant, je veux créer une barre de navigation Opera qui sera assez simple. Nous allons donc commencer par une couche de texte et taper des films. Je vais donc simplement sélectionner le 16e style de police normal à 6 volets. Et cela garantira qu'il est aligné sur le côté de cette grille. Dupliquons deux fois la couche d'ensembles aide de Control D ou Command et du raccourci. Ici, nous allons plonger dans des séries documentaires. Je vais sélectionner trois couches et cliquer également sur Ranger assurer que la distance entre elles est de 32 pixels. Regroupons-les rapidement et envoyons simplement un texto. Ici, je veux ajouter un avatar, donc je vais cliquer sur Alice. Et en fait, en maintenant la touche Shift enfoncée, je vais dessiner une ellipse d'une valeur de 16 x six pixels. Cette ellipse sera mon avatar. Je vais donc utiliser à nouveau l'outil Unsplash. Avec Unsplash to allergenes, trouvez le portrait que je souhaite appliquer à cet avatar. Ici, avec une couche de texte, je vais à nouveau taper mon nom et m'assurer qu'ils sont tous deux alignés au centre. Faisons donc également en sorte que la distance entre ce texte et Avatar soit de huit pixels. Et pour l'instant, je pense que cette Alix semble plutôt petite par rapport au texte, je vais donc simplement augmenter ses dimensions à la valeur de 32 pixels. Et pour l'instant, je pense que c'est beaucoup, beaucoup mieux. Faisons à nouveau un groupe. Enfin, je souhaite ajouter deux icônes supplémentaires pour mon panneau d'actifs, qui sont en fait une icône en forme de cloche et également une icône de recherche. Ces éléments ne sont que des publicités visuelles supplémentaires que nous pouvons utiliser dans notre style. Faisons donc en sorte que la distance entre ces trois couches soit de 24 pixels. Et je vais tous les regrouper et m'assurer qu'ils sont également correctement alignés ici le côté gauche de ma grille de colonnes. Génial. Maintenant, nous pouvons tout saisir ici et l'aligner les uns sur les autres. Je vais donc créer un autre groupe et l'appeler barre supérieure. heure actuelle, je vais à nouveau créer un composant que nous allons réutiliser dans le cadre de notre projet. Faisons donc en sorte que la distance jusqu'en haut de notre écran soit de 40 pixels. Bref, voici à quoi ressemble notre tableau de bord d'accueil en ce moment, qui, je pense, commence à prendre forme. Je vais réactiver ma colonne correspondante et nous allons ajouter un autre élément visuel. Voici le film principal que nous allons montrer à nos utilisateurs. instant, je vais dessiner un rectangle, assurer qu'il est correctement aligné vers la gauche plutôt que vers la droite, et que sa hauteur est de 455 pixels. Maintenant, je vais l'aligner exactement en haut de l'écran. Assurez-vous donc que dans vos couches, votre rectangle est placé tout en bas afin que vous puissiez voir les autres éléments que nous venons de créer ensemble. Maintenant, je vais désactiver la grille, et je vais également chercher une autre image ici que nous allons utiliser pour ce film. Celui-ci semble assez gris et je vais appliquer un autre dégradé linéaire afin que nous puissions avoir plus de contraste entre les textes à venir et les autres éléments visuels et l'arrière-plan du terrain. Sélectionnons un dégradé linéaire et changeons simplement ses marqueurs comme ceci. Et assurez-vous également que l'opacité est de 100 %. Nous avons donc ici une transition bien meilleure et plus fluide que nous utiliserons pour cet élément. Maintenant, créons le titre du film, par exemple «  inside » ou « this is shift », ce nom super aléatoire que j'ai trouvé. Mais vous pouvez utiliser d'autres versions de films que vous aimez. instant, je vais appliquer 48 pixels à la moitié des deux polices Poppins. Assurons-nous donc également qu'il est aligné à gauche de ma barre de navigation Opera. Je vais dupliquer cette couche et la renommer. Et je vais changer le style du texte pour qu'il soit fixe et que les pixels soient réguliers. Peut-être que c'est aussi une meilleure idée de réduire légèrement la taille de la police. Enfin, ce que je dois faire, c'est concevoir des boutons. Prenons notre rectangle et dessinons-le ici. Et je vais modifier les dimensions de 139 à 54 pixels. De plus, le rayon d' angle aura quatre pixels. Alors maintenant, passons au remplissage et modifions-le, la couleur violette. Et bien sûr, nous devons taper call-to-action, qui s'appelle watch. Maintenant, ce sera à nouveau, les 16e pixels, taille de police moyenne. Et nous allons simplement saisir ces deux couches et les aligner l'une sur l'autre. Ce bouton va devenir un autre composant que nous allons réutiliser dans le cadre de ce projet. Maintenant, je souhaite enfin créer un autre bouton secondaire qui permettra à nos utilisateurs d'aimer et de ne pas aimer nos films, ce qui signifie qu'ils pourront les enregistrer dans leurs favoris. Je vais donc sélectionner le rectangle, et en maintenant la touche Shift enfoncée, je vais dessiner un rectangle qui a en fait des dimensions de 54 x 54 pixels. De plus, notre rayon d' angle aura quatre pixels. Ici. Je vais saisir à nouveau une icône, et je vais changer la couleur de sélection de cette icône, qui a un trait en violet foncé. Alignons à nouveau le tout l'un sur l'autre et vous pouvez voir quel point il s'agit d'un carré parfait et que la distance de chaque côté est de cinquième et de pixels. Cette icône n'est qu'un simple gris et présente un simple défaut grave. Mais je vais accéder à mes styles de remplissage et sélectionner un autre style qui nous permettra de rendre cette icône beaucoup plus floue. Ajoutons également un trait, et je vais simplement sélectionner cette ligne près du fond. Cliquez sur Control plus C, sélectionnez la droite ici et cliquez sur Control plus b pour pouvoir modifier la couleur de remplissage de cet élément. De plus, si vous n'aimez pas l'apparence de cette icône, vous pouvez toujours modifier simplement sa valeur. Donc, par exemple, quelque chose d' opacité ou autre. Très bien, c'est pour ça que ça a l'air tellement mieux. Et pour l'instant, fermons notre dégradé linéaire. Encore une fois, nous allons regrouper ces couches et créer un autre composant que nous allons renommer, le bouton J'aime. 8. Comme des boutons - Variantes dans Figma: Voici donc à quoi ressemble notre écran d'accueil pour le moment. Je le trouve super cool, mais n'hésitez pas à utiliser d'autres images ou d'autres cellules si vous le souhaitez, avant de continuer. Dans les autres sections de l'écran, je souhaite vous présenter un nouveau concept , appelé variance. Et c'est un autre sujet qui concerne nos composants. Et je vais vous montrer rapidement un exemple. Alors, attrapons ce bouton « J'aime ». Et le fait est que tout au long de ce projet, je souhaite avoir différentes variantes de ce composant, qui ressemble à une batterie et qui ne le ressemble pas. Donc, ce que je vais faire, c'est aller dans le menu des composants et cliquer sur Ajouter une variante. heure actuelle, vous voyez qu'à l'intérieur de mon composant principal se trouveront deux variantes différentes que nous venons de créer. Je vais donc essentiellement renommer cet outil de propriété. Contrairement à ce qui se passe ici, c'est que notre cœur va être rempli. Cela signifie donc que l'univers a exactement enregistré ce film et qu'il ou elle est également capable de le sauvegarder. Nous pouvons donc également renommer rapidement la propriété du composant en celle-ci, vous avez donc maintenant ce type de rectangle violet autour de notre variance. Et ça n'a pas l'air très beau car cela ne fait même pas partie du design. Donc, ce que je vais faire, c'est le déplacer rapidement hors de notre cadre, juste pour le moment, pendant un moment. Et je vais simplement accéder au panneau Actifs. Et c'est ici, lorsque vous travaillez avec vos actifs , que vous accédez à la page d'exercices. C'est sur cette page que nous travaillons en ce moment. Et vous pouvez réellement faire glisser ce bouton en forme de like ici. Et maintenant, ce qui est cool, c'est que lorsque vous voyez ici les propriétés de variance, vous pouvez passer d'une propriété similaire à une autre. Et je pense que c'est super incroyable, car cela va également accélérer notre processus de conception. Et cela va nous aider beaucoup à créer des interactions pour notre conception dans Sigma. 9. Concevoir des cartes de films tendance: Très bien, nous sommes donc prêts à définir d'autres sections pour cet écran d'accueil. Et je vais commencer par créer le titre de la fraction. Prenons donc notre outil de texte et je vais taper tendance. Donc, ici, nous allons utiliser 20 pixels, semi-gras, dans le style OpenStack. Et je vais également m'assurer que la distance entre l'image principale et les six pixels, et qui est également correctement alignée sur le côté gauche, correspond à que la distance entre l'image principale et les six pixels, et qui est également correctement alignée sur le côté gauche, correspond à tous les autres éléments pour créer un Before. Je vais à nouveau activer mes critiques, car nous allons créer des cartes vidéo avec lesquelles l'utilisateur pourra interagir. Reprenons donc notre rectangle et nous allons le dessiner ici avec une largeur de 254 pixels et une hauteur de 300. Je vais modifier la valeur du rayon d' angle de 20 pixels et également modifier la distance entre la tendance et ce rectangle à la valeur de 16. En fait, 24, c'est un peu mieux. Ajoutons donc également une couleur de trait, qui est également avec un fond gris. Et nous allons trouver une image symbolique pour cette carte vidéo. Encore une fois, je vais aller dans Plugins et cliquer sur Unsplash pour trouver l' image qui convient ici. Celui-ci est donc parfaitement un exemple. Nous pouvons donc voir que les sorcières ont notre image et le texte. Je vais saisir à nouveau ce rectangle, le dupliquer avec le contrôle plus C. Et au lieu du remplissage, je vais utiliser solide pour le moment. Je vais également modifier le rayon des coins, ce qui signifie que les coins supérieurs auront une valeur de zéro. Et notez, c' est exactement que nous allons créer cette section des cartes vidéo où nous allons écrire le texte du titre du film et aussi le sous-titre. Maintenant, NFL, je vais également appliquer ces radians de bureau en verre afin que nous puissions mieux voir comment tout se situe. Prenons donc notre couche de texte et nous allons augmenter le nombre de titres. Par exemple, le train de Tokyo. Ensuite, je vais dupliquer cette couche de texte avec le raccourci sournois du plan de contrôle et modifier son contenu. Réduisons également cette taille de police. Donc, ici, la valeur est de 16 pixels sur 16. Et de la même manière, nous allons tout aligner sur le côté gauche et déplacer sa position un peu plus bas avec une valeur de huit pixels par rapport à la distance. Je vais également modifier la police. Donc, pour l'instant, notre carte vidéo est presque prête. La seule chose, c'est que je vais revenir à mes actifs et que je l'ai marqué sur le bouton J'aime. Dans ce cas, le bouton semble un peu trop grand Nous allons donc sélectionner un outil de mise à l'échelle en maintenant la touche Shift enfoncée Je vais réduire cette taille à la valeur de 32 x 32 pixels. Parfait. Et modifions également sa possession pour nous assurer qu'elle est alignée de 16 x 16 pixels. Super, donc tout est prêt ici. Déplaçons donc simplement la carte à la verticale. Et je vais créer un autre composant que nous allons réutiliser dans le cadre de ce projet. Dupliquons donc rapidement ces cartes vidéo à l'aide des raccourcis Control Plus DQ. Et je vais répéter cette action des dizaines de fois. heure actuelle, nous avons quatre cartes et la seule chose à faire est de modifier son image et son contenu textuel. Très bien, c'est ainsi que nous en avons presque terminé avec notre écran d'accueil pour le tableau de bord de ce film. 10. Section de poursuite de l'observation: Enfin, terminons cet écran de conception en créant notre section finale. Donc, tout d'abord, je vais récupérer cette couche de tendance et dupliquer avec Control Plus D qui se trouve ici. Et je vais juste le renommer pour continuer à regarder. Ensuite, je vais dupliquer à nouveau cette carte vidéo. Et pour l'instant, je vais le placer en dehors de mon cadre. Donc, ce que je vais faire, c'est tout d'abord détacher cette instance. Cela signifie que cette instance ne fera plus partie de notre ensemble de composants. Cela signifie que si je reviens à mon composant principal et que j'apporte quelques modifications de style, il ne sera pas influencé par cela si facilement, je l'ai dit, je peux simplement récupérer cette couche et la supprimer de la même manière que je ferai avec notre couche de textes. La seule chose que j'ai à faire est donc de modifier les dimensions de ce chariot. Ici, la largeur sera de 348 et la hauteur de 200. Ensuite, de la même manière, je vais modifier la position du curseur. Donc, cette valeur est en fait à la limite de 16 sur 16. heure actuelle, vous voyez que l'image n'est plus aussi belle. C'est un peu pixelisé. Mais ce que nous pouvons faire, c'est ajouter les images que nous voulons pour notre projet de la même manière, avec ces cartes. Encore une fois, regroupons cette carte. Maintenant, je vais renommer cette carte en carte vidéo horizontale et créer un autre composant. C'est pourquoi je peux dupliquer ce composant deux fois et le placer juste ici, sur le côté gauche, et m'assurer que la distance entre toutes ces voitures est de 24 pixels. Et c'est exactement ce que nous pouvons faire glisser. Encore une fois, revient à notre écran d'accueil , comme ici en bas. Encore une fois, nous devrons simplement nous assurer que notre contenu est différent, exemple en utilisant le plugin Unsplash ou simplement en nous basant sur nos propres images. Vous pouvez voir quand je me base ma première image et comme c'est le composant principal, d'autres instances ont obtenu exactement la même image. Mais nous pouvons également facilement modifier l'image d'autres instances. Parfait, maintenant, cela ressemble à un tableau de bord vraiment cool que nous avons pour notre application cinématographique. Si vous le souhaitez, vous pouvez également accéder à ce bouton J'aime et modifier le statut de la variante . Et comme je travaille dans mon composant principal, vous pouvez le constater, encore une fois, tout a changé. Je vais donc passer à Control Z that, accéder à l' instance et appliquer le bouton J'aime juste ici. Bravo à tous, nous avons terminé la section dans laquelle nous avons créé un écran complet pour notre tableau de bord. 11. Prototype de base et animations dans Figma: Puisque nous avons fini de concevoir deux écrans, nous pouvons maintenant passer rapidement à une autre partie de ce cours. Ce que nous allons créer est une interaction très simple entre ces deux cadres. Donc, tout d'abord, je vais connecter mon écran d'accueil à mon écran d'accueil et vice versa. Pour cela, je vais devoir accéder à la section des prototypes, et c'est là que je vais commencer mon projet. Passons rapidement à mon écran d'accueil. Et je vais sélectionner ce bouton de connexion et connecter à mon deuxième cadre. Dans les détails de l'interaction, nous avons tous les types de paramètres différents pour notre interaction. Ici, nous avons notre déclencheur et nous allons travailler avec onclick, ce qui signifie que lorsque je clique sur ce bouton de connexion, je vois également une autre image d'animation. Je vais utiliser Smart Animate. Et cette animation est super cool car elle peut simplement vous montrer une très bonne traduction car elle correspond à toutes les couches similaires, ce qui lui permet de la rendre plus fluide et plus fluide de la même manière . Passons à mon groupe de déconnexion et je vais revenir à notre première image. Et pour les détails de l'interaction, je vais effectuer exactement les mêmes réglages avec le déclencheur onclick et l'animation intelligente. Alors, vérifiez rapidement notre interaction simple. Nous allons accéder à notre flux ici sur le bouton Play. Nous avons donc ici notre mode de présentation dans lequel nous pouvons interagir avec notre côté produit. Donc, si vous ne savez pas où cliquer, vous pouvez simplement cliquer sur une zone vide. Et ici, vous voyez le surlignage bleu. Et c'est exactement dans la boue épaisse L2 où se trouve le point d'accès , c'est-à-dire le point interactif . Cliquez rapidement sur le bouton de connexion. C'est ainsi que nous effectuons cette transition en douceur vers notre écran d'accueil. la même manière, nous cliquerons sur notre déconnexion car nous ne voulons plus utiliser cette application. Et nous retournerons facilement à l'écran de connexion. Vous pouvez donc jouer et rendre ce champignon d'animation complexe, mais l'idée est très simple car il vous suffit de retourner dans votre zone de travail Figma et établir différents types de connexions. Et dans Figma, vous pouvez établir un nombre illimité de connexions prototypes entre les cadres. 12. Composants interactifs dans Figma: Parlons maintenant de l' animation de nos boutons J'aime. Donc, ce qui me manque ici, dans mon prototype, lorsque je me connecte, que je ne peux pas vraiment aimer ou ne pas aimer ces films, ce qui signifie que je ne peux pas les enregistrer en tant qu'utilisateur. Pour ce faire, étant donné que nous avons déjà travaillé sur la variance, si vous vous souvenez de la section précédente, nous pouvons également simplement les prototyper. Cela signifie que nous n'avons pas plusieurs images dupliquées à de nombreuses reprises nous ne pouvons établir qu'une seule connexion et cela fonctionnera parfaitement pour nous. Donc, en gros, cela permet de s'assurer que vous êtes à nouveau dans le prototype si vous avez de la chance dans l'onglet Design. Maintenant, sélectionnons notre première variante et connectons-la à la seconde variante. Ici, nous utiliserons à nouveau OnClick Trigger avec des paramètres d'animation intelligents. De la même manière. Connectons notre deuxième variante, qui est différente de la première, comme bottom, avec les mêmes détails d'interaction. Et en gros, si c'est très simple, seules deux connexions sont créées dans notre ensemble de composants. Et c'est exactement ainsi que l'on a créé un composant interactif. Donc, en gros, c'est tout. Nous pouvons revenir à notre mode présentation, et je vais me connecter à tout mon écran. À l'heure actuelle. Vous pouvez voir à quel point je peux rapidement aimer et me différencier de mes boutons ici, qui interagissent avec les composants musculaires de la carte vidéo. Et nous appliquons en fait exactement toute la transition aux autres cartes restantes. Ici. Si je travaille avec des instances, je peux rapidement aimer et différencier mes films comme je le souhaite. Comme vous pouvez le constater, les composants interactifs me facilitent la tâche, car dans notre fichier, nous n'avions que le quake, une simple connexion. Nous n'avons pas eu à faire toutes les différentes copies des cadres. Et deux semaines ce type d'interaction. J'espère donc que vous avez réussi à répéter toutes ces actions créer une expérience vraiment incroyable pour cette connexion, pour notre design. 13. Bravo ! Perspectives finales: Félicitations mon ami, vous avez enfin terminé ce mini-cours. Et j'espère que vous apprécierez vraiment la conception ces applications de films super simples. Nous avons donc essentiellement abordé les composants, les bases de la mise en page, la grille de mise en page et d'autres éléments visuels. Au final, je suis très heureuse que nous ayons également réussi à créer une connexion produit très simple et couvrir les bases des composants interactifs. Si vous aimez ce cours, assurez-vous le diffuser auprès de vos amis, vos collègues et de votre réseau. Et n'oubliez pas de me laisser un avis dans le cadre de ce cours. J'apprécie tous vos commentaires honnêtes, car j'essaie toujours d' améliorer mon contenu et de m' assurer que vous êtes satisfait des cours suivants. Merci beaucoup et je vous revois.