Masterclass pour débutants sur Figma : conception de votre première application et de l'interface utilisateur de votre site web

1. Bienvenue dans Figma pour débutants masterclass !: Bienvenue au master class pour débutants de Figma. Si vous avez toujours voulu concevoir un site Web ou une application mobile, mais que vous ne saviez pas exactement par où commencer, ce cours est fait pour vous. Bonjour, je m'appelle Ahmed l Hassan et je suis un designer UIUX avec plus de cinq ans d' expérience dans la conception de produits, d' interfaces et d'expériences numériques interfaces et d'expériences Au fil des ans, j'ai tout conçu, des concepts d'applications les plus simples aux systèmes de conception complets. Et je vais vous guider à travers le même flux de travail convivial pour les débutants que j'aurais aimé avoir à mes débuts. Dans ce cours, nous allons créer une conception d' interface utilisateur complète à partir de zéro. Ce faisant, nous apprendrons les bases de Figma étape par étape ensemble Nous allons d'abord nous familiariser avec interface de base de Figma, puis créer notre Ensuite, nous apprendrons à utiliser les éléments les plus élémentaires tels que le texte, formes, les couleurs, la typographie, l'espacement et de nombreuses notions de base de Figma Au fur et à mesure de notre progression, nous en apprendrons davantage sur des outils plus complexes tels que les mises en page automatiques et les composants qui nous aident réellement garder notre conception évolutive et organisée en même temps Vous en apprendrez également beaucoup plus sur le prototypage connexion de différents écrans entre eux et la création d'animations simples, éléments qui rendent réellement votre design fonctionnel et interactif À la fin de ce cours, vous aurez créé votre propre interface de conception d'interface utilisateur, et en même temps, vous aurez compris le flux de travail fondamental utilisé par les concepteurs Figma que vous souhaitiez devenir vous-même designer ou que vous souhaitiez simplement améliorer vos compétences créatives, ou que vous souhaitiez simplement apprendre un outil de conception moderne et puissant. Ce cours est le point de départ idéal. Commençons donc. 2. Introduction : Ce que vous apprendrez et construirez dans ce cours: Bonjour et bienvenue au master class pour débutants de Figma. Un cours dans lequel vous apprendrez les bases et les éléments de base dont vous avez besoin pour entrer dans le monde du design avec Figma Figma est un programme de design formidable, prometteur et très fondamental dans le domaine de nos jours, je dis « prometteur » comme s'il était tout nouveau, mais il existe depuis un certain temps et a pris sa place dans le monde du design C'est l'une des principales entreprises et l'un des principaux programmes de design utilisés actuellement par de nombreux designers, en particulier dans le domaine de conception de produits ou de conception UIUX. Hum, mais il est également en pleine expansion, non ? Alors, tu sais, bienvenue au cours. Donc, que vous soyez un débutant, un débutant complet ou que vous connaissiez déjà Figma ou non , mais peut-être d'autres programmes de conception tels que les programmes Adobe, ce cours est fait pour Je vais vous expliquer ce cours de la manière la plus simple possible, mais aussi vous donner des conseils et astuces pour aller de l'avant, non seulement pour apprendre les bases, mais aussi pour prendre un peu d'avance et devenir un designer professionnel avec de bonnes bases . Qu'allez-vous apprendre dans ce cours ? Il y a certaines choses que tu vas apprendre. Tout d'abord, ce sont les bases du design. Nous allons donc apprendre les bases du design, comment créer les éléments de conception les plus élémentaires, cadres, les objets, formes, ainsi que l'utilisation d'un stylo, etc., et comprendre comment vous pouvez les utiliser pour créer différents composants, etc. En plus de comprendre les couleurs, la typographie, ces bases de base du design. Nous allons les passer en revue. Si vous avez déjà quelques connaissances, ce ne sera qu' une petite critique. Nous allons utiliser tout cela, nous appuyer dessus et commencer à créer des écrans d'interface utilisateur. Ce sont donc des interfaces utilisateur que nous allons créer en utilisant ces éléments, ce que nous avons appris jusqu'à présent, ce que nous avons construit jusqu'à présent, pour créer quelque chose de plus grand. Cela passe des cellules aux organismes, puis aux corps complets. Il s'agit de l'une des premières étapes. À partir de là, nous allons explorer le prototypage. Maintenant, la façon de penser au prototypage, au cas où vous ne le connaîtriez pas, c' est essentiellement ce que vous pourriez appeler des animations et des fonctionnalités Donc, concevoir un bouton, c'est du design. Mais le fait que le bouton soit cliquable, utilisable, ait une jolie petite animation lorsque vous passez la souris dessus ou que vous cliquez dessus, c'est du prototypage, et nous allons apprendre cela également Ensuite, l'une des dernières choses que vous allez apprendre est de partager votre travail, car après tout, c'est l'une des étapes les plus importantes et l'une des dernières du processus. Après avoir fait tout cela, le fait de vouloir partager votre travail, avec des clients, ce soit avec des clients, avec des utilisateurs que ce soit avec des clients, avec des utilisateurs ou avec vos collègues, cela en fait partie. Partager votre travail et comprendre comment vous pouvez l'utiliser pour collaborer avec vos collègues, c'est quelque chose de très essentiel, et nous allons également l'apprendre Maintenant, une deuxième question est qu'allez-vous construire avec cela ? C'est une question que vous auriez dû clarifier jusqu'à présent. Je veux dire, suivre ce cours. Pourquoi es-tu venu ici ? Qu' est-ce que vous essayez de réaliser ? Ou que voulez-vous apprendre à construire et peut-être à construire ici, vous pouvez vous heurter à quelques malentendus Lorsque nous disons construire ici, nous parlons du processus de conception. Il ne s'agit pas de créer un produit réel. Il ne s'agit pas de créer un site Web, de le programmer, mais plutôt de concevoir à quoi il ressemblerait et comment il fonctionnerait. Alors, qu' allez-vous construire ou que serez-vous capable de construire avec ce cours ? Les sites Web, c'est une chose. Être capable de créer des sites Web, quelque chose que vous allez pouvoir imaginer à n'importe quel site Web en tête, c'est quelque chose que vous allez pouvoir faire. Vous voulez créer le nouveau Facebook, le nouvel Instagram, vous voulez créer le nouveau Google. C'est quelque chose que vous pouvez faire que vous pouvez créer et prototyper dans le cadre de ce cours ou après avoir suivi ce cours Une autre chose concerne les applications mobiles qui peuvent être destinées aux téléphones, aux tablettes, quel que soit le produit auquel vous pensez. Vous pouvez créer des applications ou concevoir ces applications via Figma. Une autre chose est le design graphique. Cela ressemble à un cas d'utilisation qui est de plus en plus fréquent sur Figma. Beaucoup de gens utilisent Figma pour le graphisme, que ce soit pour créer des affiches ou des visuels, des identités de marque ou peut-être du contenu pour les réseaux sociaux C'est quelque chose que vous pouvez désormais faire avec Figma. étonnant à propos de Figma, c'est qu' elle ne cesse de se développer. Elle grandit avec les designers. Personnellement, j'ai peut-être l'impression que les autres programmes de design n'ont pas très bien fonctionné. plupart du temps, c'était comme si chaque année il y avait une nouvelle version de n' importe quel programme de design XYZ, et c'était presque pareil Ils ont juste ajouté quelques fonctionnalités pour les utilisateurs très avancés, mais le programme n'a pas vraiment beaucoup changé. Il n'a pas apporté quelque chose de nouveau, il n'a pas révolutionné le design Mais Figma ne cesse de grandir et de changer. Et vous voyez quelques points que j'ai soulignés, je veux dire, que j'ai écrits ici, mais qui sont flous parce que juste pour vous donner l' impression qu'il y a beaucoup plus de cas d'utilisation que vous allez apprendre et que vous pouvez créer à l'aide de Figma Nous n'allons pas toutes les aborder dans le cadre de ce cours, puisqu'il s'agit d'un cours pour débutants. Mais juste pour vous donner un aperçu, je veux dire, vous pouvez voir qu'à moitié floue, c'est comme des présentations Vous pouvez créer des présentations avec Figma. Peut réellement créer des sites Web. Sans programmation, vous pouvez publier un site Web avec FIGMA Mais ce sont d'autres outils Figma dont nous n'allons pas parler dans le cadre N'oubliez pas que Figma est un univers à part entière. Ils continuent de s'étendre, en ajoutant des fonctionnalités d' IA, des plugins, etc. C'est pourquoi c'est formidable que vous commenciez dès maintenant. C'est le but de ce cours. C'est ici que vous allez apprendre et commençons. 3. Démarrer avec Figma ma: Bonjour. Il s'agit donc de la première leçon Figma pour explorer et comprendre comment configurer votre espace Je suppose donc que vous avez téléchargé l' application ou au moins ouvert la version Web juste pour votre information. Vous n'êtes pas obligé de télécharger l'application. Vous pouvez simplement ouvrir le site Web et l'utiliser à partir de là depuis votre navigateur. Je suppose que vous vous êtes également connecté. Je ne pense pas devoir vous guider dans ce processus, mais cela devrait être assez simple. Maintenant que votre Figma est déjà installée et que vous l'utilisez, voici à quoi elle devrait ressembler Peut-être en avez-vous une version allégée. C'est peut-être le mode sombre, mais c'est fondamentalement la même chose. Tu as beaucoup de choses à faire. C'est à lui de vous faire savoir, qu'il y a des raisons, une communauté. Ne vous laissez donc pas distraire par tous ces éléments et cliquez sur Créer, puis sur Design Maintenant, vous pouvez voir cela différemment, vous pouvez les considérer comme des services différents. Alors allez-y, cliquez sur le design, et cela ouvrira un nouvel onglet pour vous. Ce nouvel onglet est essentiellement un nouveau fichier de projet , un fichier de projet peut contenir plusieurs pages. À l'heure actuelle, nous sommes dans ce dossier. Il n'a pas de titre pour le moment et je vais passer en revue les différents éléments présents à l'écran avec vous un par un La première chose que nous allons examiner est le panoramique de gauche. Nous avons maintenant, tout d'abord, le logo Figma Lorsque vous cliquez dessus, vous avez ces onglets réguliers, les onglets standard du fichier, de la vue d'édition. Ils peuvent vous offrir beaucoup plus d'options pour modifier des éléments, configurer le fichier, configurer certaines choses, exporter, etc., modifier vos préférences. Mais ils sont à peu près cachés, car vous n'avez pas besoin de trop les utiliser Ils sont donc cachés ici sous ce logo Figma. Ensuite, vous avez le titre. Vous pouvez donner un nom à votre projet Projet X, par exemple, cela vous indique qu'il s'agit d'un projet d'équipe, vous pouvez également modifier le nom du projet d'équipe, et cela indique que nous avons ces options ici, et en dessous, nous avons deux onglets différents. Nous avons un dossier et des actifs. Désormais, les actifs concernent les actifs de conception que vous pouvez emprunter. Mais c'est un peu plus avancé. Mais disons que vous avez ici ces bibliothèques. Vous avez donc, par exemple, des éléments de design IOS que vous pouvez emprunter ici et ajouter sur la page. Mais pour l'instant, restons-en au dossier. Maintenant, sous Fichier, vous avez des pages. Vous voyez donc ici la page numéro un, indique qu'il reste deux pages libres. C'est le cas si vous avez la version gratuite comme je le fais pour ce compte. Et vous pouvez ajouter une autre page. Maintenant, vous pourriez vous demander : quel est l'intérêt des pages ? Je veux dire, est-ce que vous savez, nous écrivons un livre ici ? Non, il ne s'agit pas du tout de ça. Il s'agit de documents complètement différents ici. Ainsi, lorsque nous allons à la première page et que nous créons un rectangle, et que vous passez à la page deux, ce rectangle est introuvable. D'accord ? Alors gardez cela à l'esprit. Les pages sont en quelque sorte des documents différents au sein d'un même projet. C'est un peu comme un fichier ou vous pouvez dire un dossier, accord, et il contient plusieurs pages. Alors allons-y, cliquez avec le bouton droit de la souris et supprimez cette page. Et puis nous avons des couches. Maintenant, avec les couches, vous pouvez simplement voir les couches, les objets, les groupes, les cadres, tous les types d'éléments que vous avez sur votre canevas. Si nous créons un autre rectangle ici, nous pouvons voir les rectangles un et deux. Si nous créons un rectangle avec une forme différente, vous pouvez également voir un peu la forme montrée ici. Il n'en montre pas la couleur, mais sa forme générale, juste pour vous donner une idée. C'est donc à peu près pour vous donner un aperçu de ce qui se passe dans votre dossier. Vous pouvez également y rechercher des objets. Vous pouvez donc rechercher un texte différent ou rechercher des noms de fichiers, etc. Vous pouvez également remplacer, vous pouvez choisir ce que vous recherchez exactement, c'est-à-dire une image, une forme, etc. Il existe de nombreuses options et vous pouvez également réduire ce menu ou ce panneau ici afin disposer de plus d'espace pour voir un projet. Mais je vous recommande de le garder ici. Vous pouvez le minimiser ou agrandir si vous avez un écran plus grand, par exemple, et que vous pouvez vous le permettre. Il suffit d'avoir une idée générale de ce qui se passe. Sur votre dossier de conception. Vous pouvez voir toutes les couches ici. C'est vraiment utile. Ensuite, en bas, nous avons une barre d'outils. Vous pouvez souvent supposer ou vous attendre à ce que la barre d'outils soit là-haut ou peut-être sur la gauche ou quelque chose comme ça. Mais non, sur Figma, c'est ci-dessous, et vous ne pouvez pas y faire grand-chose, pour être honnête Tu ne peux pas le déplacer, tu ne peux pas y faire grand-chose. Beaucoup de gens considèrent cela comme limitatif, mais pour être honnête, je trouve que c'est plus simple, mieux c'est. Je ne veux pas être capable de jeter mes outils partout, mais plutôt de les avoir au même endroit et je sais qu'ils seront toujours là. Nous parlerons des outils séparément plus tard. Mais pour l'instant, regardons le panneau de droite. Et ici, nous avons le design. Donc, au stade de la conception, vous avez le design et le prototype. Il s'agit de deux points de vue différents. Comme je l'ai déjà dit, prototype concerne davantage les animations et la façon dont vous présentez le projet. Ainsi, lorsque vous voulez le montrer à un client, quoi il ressemblerait, puis vous avez le design. Le design est lié au design Je veux dire, lorsque vous ne sélectionnez rien, vous pouvez changer de page. Donc, la couleur de l'arrière-plan peut être blanche ou foncée. C'est à vous de décider. Vous pouvez également modifier le style des variables, mais ce sont des choses dont nous n'avons pas encore parlé, et elles sont un peu plus avancées, n'est-ce pas ? Alors ne vous contentez pas d'y aller. Mais lorsque vous cliquez sur un objet, ce rectangle commence à vous montrer les propriétés Donc, à partir de la position, vous voyez les X et les Y , vous avez la rotation, ainsi que quelques boutons d'alignement rapide, etc. Vous pouvez refléter l'objet, le retourner, etc. Vous avez également la mise en page, donc cela concerne la taille, la hauteur, vous pouvez la modifier, la largeur, l'apparence, l'opacité, les coins arrondis, le remplissage, le contour, les effets et l'exportation Si vous souhaitez l'exporter sous forme d'image au format PDF, vous pouvez également le faire. Il y a beaucoup d'options ici. Et vous pourriez me demander, c'est quoi ce petit bouton ici ou là ou quoi que ce soit d'autre ? Nous en parlerons en temps voulu. Mais oui, vous devriez avoir une compréhension générale de votre dossier. Où se trouvent quoi et comment puis-je les utiliser ? C'est ce que j' essaie de te donner maintenant. Comme nous l'avons mentionné, le panneau de gauche représente votre fichier et vos couches. Vous avez ici votre barre d'outils. Où vous pouvez choisir différents outils. Vous pouvez également utiliser un raccourci. Ici, il est écrit le rectangle R. Par exemple, vous pouvez simplement appuyer sur R pour l'obtenir. Vous pouvez appuyer sur V pour obtenir l'outil de déplacement normal, et ainsi de suite. Sur la droite, vous avez les spécifications de conception ou les propriétés de l' objet que vous sélectionnez. Il y a un bouton très, très important qui se trouve juste ici, c'est le bouton Play. Lorsque vous cliquez sur ce bouton, il vous permet de voir ce sur quoi vous travaillez du point de vue de l'utilisateur. Mais pour cela, il vous faut un cadre. Nous allons parler de ce que sont les cadres dans la leçon suivante. 4. Configurer votre premier écran: Cadres, cadres et cadres. Que sont réellement les cadres ? Les cadres sont donc votre toile. Ils sont l'outil ou le matériau, disons, sur lequel vous peignez. Ce n'est pas le pinceau, ce n'est pas la palette de couleurs, mais c'est votre fenêtre pour l'utilisateur, n'est-ce pas ? C'est ce qu'est le produit final et ce qui sera livré aux utilisateurs au final. C'est ce qu'est un cadre. Tu ne peux pas dessiner dans l'air, mais tu peux dessiner sur un mur. Mais dans ce sens, le mur est votre toile et c'est exactement ce que sont les cadres pour Figma Ici, vous sélectionnez l'outil de cadre, et vous pouvez simplement créer n'importe quel cadre de n'importe quelle taille et ainsi, vous avez un cadre. Voici l'écran. Voici l'écran. Cela peut être un écran d'ordinateur, un écran de téléphone, peu importe ce que c'est. Lorsque vous le maintenez enfoncé, lorsque vous cliquez dessus et que vous allez jouer, vous ouvrez un nouvel onglet sur Figma qui vous permet de voir à quoi ressemble ce cadre Les cadres sont uniques parce que vous pouvez placer des objets dans des cadres. Vous pouvez mettre des rectangles, les colorier ou les copier, les coller, les placer ailleurs, et vous pouvez voir à quoi cela ressemble Il s'agit de l'écran que vous êtes en train de créer et que vous pouvez visualiser. Maintenant, il y a quelques points à garder à l'esprit. Vous pouvez avoir des cadres dans des cadres. Créez un cadre ici, donnez-lui une couleur, fabriquez-le. Il s'agit donc d'un cadre dans un cadre. Cela ressemble à un rectangle normal, mais c'est en fait un cadre. Mais le cadre extérieur est la toile, et celle-ci devient comme un contenant dans une toile dans une toile. Nous allons discuter des raisons pour lesquelles vous pourriez vouloir le faire et de la différence entre un rectangle et un cadre. Mais pour l'instant, voyons ce que sont les cadres et comment les utiliser pour créer des écrans. OK. Maintenant, une chose à comprendre est que vous pouvez créer des cadres de différentes tailles, et FigMA vous y aide déjà Ainsi, lorsque vous cliquez sur l'outil de cadre et que vous accédez au panneau de droite, vous verrez différents cadres. Il y a donc un cadre d'iPhone, non ? iPhone 17, 15, P max, tout ce que vous voulez, différentes tailles, ainsi qu'Android. Vous avez des tablettes, des ordinateurs de bureau, des MacBooks, des téléviseurs. Donc, quoi que vous souhaitiez créer, vous pouvez en créer un cadre. En cliquant simplement sur un MacBook Air, nous pouvons le créer et il vous montre sa taille réelle C'est la dimension d'un MacBook Air. Lorsque nous cliquons dessus et que nous cliquons sur Play, nous allons voir ce qu'il y a dans ce MacBook, quoi il ressemble C'est essentiellement ainsi que vous créez un écran. Vous pouvez créer le cadre d'un iPhone ou vous pouvez même créer le cadre d'un téléviseur ou d'une Apple Watch. Tout cela est possible. Une chose que tu peux faire en supplément. Lorsque vous créez ce cadre, désélectionnez tout. Ne choisissez rien, cliquez dans le champ, juste ici, puis passez au prototype. Figma nous permet de montrer le cadre d'un appareil. Puisque nous avons choisi le MacBook Air, vous pouvez choisir le MacBook Air ici même en tant qu'appareil Parfois, il le fait automatiquement pour vous. Ce qui va faire, c' est ajouter une image du MacBook pour montrer votre design comme s' il s' agissait d'un vrai Mac. C'est vraiment chouette car c'est très immersif et cela donne à l'utilisateur une expérience utilisateur ou l'impression qu'il utilise réellement un MacBook Il s'agit d'un site Web réel affiché sur un ordinateur portable. Maintenant, comparez cela avec le fait d'être affiché sur rien, sur aucun appareil. Elle a l'air très sèche. C'est une chose que vous pouvez faire que je recommande personnellement. Mais l'idée de cette leçon est que les cadres sont votre toile. Vous ne pouvez pas simplement créer dans la nature. Il faut avoir un cadre, une toile et y mettre de la peinture. Tout ce qui se trouve à l'extérieur de ce cadre, si je crée ici un rectangle, et que nous le plaçons ici, il ne sera pas affiché parce qu'il est au-dessus, mais il n'est pas à l'intérieur Si je le place ici, il n'est pas non plus visible. C'est juste qu'il n'y a rien. Mais quand je le fais glisser et que je le place ici, il est maintenant dans le cadre. C'est visible et vous pouvez le voir ici. Vous pouvez voir que le cadre peut contenir des objets Une fois que vous l'avez retiré à l'extérieur, le rectangle est maintenant à l'extérieur. Même s'il est en haut, vous pouvez le voir ici, mais il n'est pas visible. C'est ainsi que vous pouvez utiliser les cadres comme toile. 5. Ajouter du texte et des éléments de base: Bonjour. Dans cette leçon, nous allons créer ou apprendre à créer des formes, des zones de texte, des vecteurs, etc. Tout d'abord, commençons par nous familiariser un peu avec cette barre d'outils. Maintenant, nous avons déjà exploré l'outil de déplacement, et c'est l'outil par défaut que vous utilisez et que vous devriez utiliser lors de la sélection d' objets et autres Gardez-le donc toujours à portée de main et vous aurez l'outil de cadre. Il s'agit d'un outil que nous connaissons également et que nous avons appris à utiliser, essentiellement pour créer des cadres, puis nous avons cet outil rectangulaire. Et chacun d'entre eux a son raccourci. Vous pouvez donc cliquer sur R pour le choisir. Vous pouvez cliquer sur V pour choisir celui qui se déplace Vous pouvez donc simplement passer de l'une à l'autre avec ces lettres. OK ? Il suffit de le mémoriser. Ensuite, vous avez cet outil carré ou rectangle. Vous pouvez le créer comme ça et vous pouvez créer un rectangle. C'est aussi simple que cela. Vous pouvez faire la même chose avec Line Tool. Hein ? Et vous avez l'outil ellipse, l' outil flèche, beaucoup de choses différentes Maintenant, vous devez savoir qu'il est très important de maintenir la touche Maj enfoncée alors que la création d'une forme vous permet essentiellement de la rectifier. Cela rend les dimensions égales. Les dimensions sont donc 154 x 154. De cette façon, il conserve exactement la même taille. Il en va de même lorsque vous souhaitez créer un rectangle. Ainsi, il devient un carré plutôt qu'un rectangle. C'est donc très pratique. Une autre chose est que lorsque vous créez quelque chose comme une ligne, maintenez la touche Maj enfoncée pour qu'elle soit droite. Si je supprime le décalage, regardez ce qui se passe, je peux le créer à de nombreux degrés et dans tous les types de degrés. Mais si je maintiens la touche Maj enfoncée, elle devient droite et gauche, ou elle peut monter et descendre, ou elle peut être diagonale. Alors on descend, d'accord ? C'est donc une chose à garder à l'esprit, c'est très pratique car la plupart du temps, vous voulez garder les choses droites et propres. Mais si ce n'est pas le cas, cela dépend entièrement de vous. Vous pouvez donc essayer les autres outils et créer des objets avec eux, mais ils fonctionnent généralement selon des principes similaires, d'accord ? Et puis nous avons le stylo. Maintenant, la façon dont l' outil stylo est également assez simple. Donc, tu cliques une fois, puis tu crées un point, d'accord ? Alors cliquez, vous avez un point, puis vous en créez un autre. Et si vous maintenez la touche enfoncée, vous pouvez essentiellement créer une courbe. Vous pouvez le rendre incurvé. Tu vois ? Juste comme ça, j'ai créé cette courbe. Maintenant, je peux créer très belles formes ou autres avec elle en jouant Donc, juste pour vous montrer ce que je veux dire, j'essaie simplement de créer cette forme en trois D. Je ne sais pas de quelle forme il s'agit, mais cela ressemble à une baignoire. Ouais. Juste comme ça, vous pouvez créer différentes formes, avec différentes lignes, etc. Maintenant, vous pouvez les modifier, vous pouvez les changer, vous pouvez les changer. Bien sûr, si vous passez au design, vous pouvez également modifier le trait pour augmenter les lignes, et c'est quelque chose que vous pouvez faire avec chacune d'entre elles. Ainsi, une fois que vous avez choisi une ligne ou un vecteur comme celui-ci, vous pouvez venir ici et voir le trait. Il n'en est qu'une maintenant, tu peux prendre du poids. Vous pouvez lui donner plus de poids pour qu'il devienne plus épais. Il existe d'autres paramètres, vous pouvez changer la couleur et la même chose avec ces formes, vous pouvez également modifier le remplissage, choisir une couleur différente, lui donner une opacité différente, etc. Parce que comme nous en avons parlé, ce panneau de droite vous permet de choisir et de modifier les propriétés de vos formes ou de vos autres éléments tels que les cadres. Vous pouvez y ajouter un trait, le rendre noir, rendre rouge, et vous pouvez également ajouter des effets, mais c'est un peu plus avancé. Mais c'est essentiellement ainsi que vous pouvez créer différentes formes. Avec ces formes, vous essayez de créer votre interface utilisateur. Ce que nous avons également, c'est un outil de texte. Avec l'outil de texte, il existe deux méthodes principales pour créer du texte Vous pouvez donc simplement cliquer n'importe où et commencer à taper. Tu peux dire bonjour. Monde, puis tapez aussi longtemps que vous le souhaitez. Ce qui va se passer, c'est que ça va continuer à durer aussi longtemps que vous le souhaitez. Il ne va pas passer à une deuxième ligne, car il n'a pas de forme définie. Je veux dire, vous pouvez voir ce schéma, mais il ne cesse de s'étendre. Il s'agrandit et se contracte fonction de la taille en fonction de la quantité de texte dont vous disposez. Il existe une autre méthode : en créant une forme, en la maintenant enfoncée, en cliquant sur le bouton de maintien puis en la quittant, vous pouvez dire bonjour à tout le monde. Et puis, lorsque vous tapez plusieurs A, vous verrez le résultat descendre sur l'autre ligne. Il y a donc une pause, et c'est essentiellement une différence entre ces deux manières différentes de procéder. Si vous connaissez la forme que vous voulez créer, donc si vous dites « Hé, je veux une zone de texte juste ici », vous pouvez la créer de cette façon, bien sûr, nous pourrons modifier les paramètres plus tard, mais surtout, que vous la configuriez au début comme vous le souhaitez, puis vous pourrez la modifier plus tard Mais écrivons ici, je veux dire, Bonjour tout le monde. Nous pouvons mettre cela en évidence et ensuite dans cette petite section, nous pouvons modifier la typographie Nous pouvons changer la police, choisir quelque chose de drôle, changer la taille de la police. il s'agit d'une version normale ou s'il existe version en gras, nous pouvons également choisir celle-ci. Laissez-moi vous montrer qu'il existe ces versions que nous pouvons choisir. Nous pouvons modifier l'espacement des lettres, par exemple, nous pouvons les rapprocher ou les éloigner S'il y a plusieurs lignes, créons-en une autre. Nous pouvons également changer l'espacement entre eux en interligne, ou nous pouvons écrire Auto pour que cela devienne Ensuite, nous pouvons le remettre à zéro pour en faire une normale. Nous pouvons également modifier l'alignement des paragraphes , de l'alignement au milieu ou de la droite à la gauche. Nous pouvons également choisir en termes de zone de texte, elle est plus vers le bas ou si elle est au centre ou si elle est horizontale et verticale. Vous pouvez configurer et modifier ces deux éléments. Je vous recommande vivement d' essayer d'explorer ces options et essayer de les découvrir par vous-même pour comprendre comment vous pouvez manipuler des objets, des formes et des zones de texte pour obtenir ce que vous voulez. OK ? Prends juste quelques minutes pour essayer de comprendre et de comprendre, d'accord ? Donc, comme je l'ai mentionné, ce qui est bien, c'est que la plupart des éléments ont les mêmes paramètres. Donc, qu'il s'agisse d'un élément de texte d'un rectangle ou d'un carré, ils sont pratiquement identiques. Uniquement des objets de texte, ils ont la section appelée typographie Mais tout le reste est pareil. Vous avez le remplissage, trait, l' effet, la mise en page. Vous pouvez augmenter ou modifier la taille. Vous pouvez également modifier le positionnement et ainsi de suite. Maintenant que nous l'avons, nous avons compris comment créer différentes formes. Nous pouvons créer des lignes. Nous pouvons créer des zones de texte. Mais il y a certaines choses que vous savez, plus encore. Une chose très rapidement, Lines. Les files d'attente sont géniales. Les files d'attente sont belles. Mais une chose que vous devez savoir c'est que lorsque vous augmentez la largeur, vous pouvez voir que cette ligne est très carrée ou rectangulaire. Il a également des arêtes vives. Nous pouvons changer cela en arrondissant les bords. C'est une chose que tu peux faire. Une autre chose est que vous pouvez transformer une extrémité en flèche ou flèche triangulaire ou en flèche circulaire inversée et ainsi de suite. est intéressant de garder à l'esprit que Il est intéressant de garder à l'esprit que vous pouvez également jouer avec ces paramètres, en particulier en ce qui concerne les lignes. Ils sont très polyvalents et ainsi de suite. Nous avons maintenant appris à créer des objets et à en modifier les propriétés. Dans la leçon suivante, nous allons parler un peu plus de la façon dont nous pouvons avoir différentes relations avec ces objets et de la manière dont nous pouvons travailler avec des groupes et des cadres. Je te verrai dans la prochaine leçon. 6. Cadres vs. groupes vs. formes: donc les groupes et les cadres Quels sont donc les groupes et les cadres et comment pouvons-nous les utiliser ? Ainsi, en tant que designer, vous allez souvent rencontrer une situation dans laquelle vous voudrez assembler quelques éléments Vous voulez qu'ils soient maintenus ensemble, qu'ils aillent ensemble. Vous savez, vous ne voulez pas qu'ils soient séparés, mais qu'ils forment une seule forme. Et juste pour vous donner un exemple, nous avons cette baignoire ici. Nous pouvons revenir à la normale, et nous avons ces lignes. Mais le problème est que ces lignes sont toutes distinctes. Donc, ce que nous faisons normalement dans le monde du design, c'est de les regrouper pour les réunir dans la même forme, dans le même groupe. De cette façon, nous savons comment les prendre ensemble et les déplacer ensemble, etc. Maintenant, le moyen de le faire est de les maintenir, faire glisser et de les sélectionner tous. Vous faites maintenant glisser votre sélection et vous pouvez voir ces sélections à partir d'ici Vous pouvez également le faire à partir d'ici, Maj enfoncée, puis en descendant, puis en cliquant. Il va tout sélectionner entre ceci et cela. Ensuite, vous pouvez cliquer sur Control G ou cliquer avec le bouton droit de la souris, cliquer avec le bouton droit de la souris et sélectionner un groupe. Et juste comme ça, tu as maintenant le groupe numéro un. Maintenant, bien sûr, vous pouvez créer un autre groupe en plus ou en plus de cela. Mais je veux dire, ça ne va pas faire grand-chose, ça ne va pas beaucoup t'aider. Maintenant, c'est une façon de le faire. Il s'agit d'un groupe. Ce qui est bien avec un groupe, c'est qu' il évolue ensemble. Donc, si les dimensions, toutes les lignes, se rejoignent, elles bougent ensemble. Mais parfois, ce n'est pas génial car cela peut donner un aspect très déformé. Ce n'est peut-être pas ce que tu veux. Une alternative à cela, je viens d'y retourner, je l'ai défait Maintenant, ce ne sont que des vecteurs séparés, il suffit cliquer avec le bouton droit de la souris et de choisir la sélection du cadre. Maintenant, ce qui est intéressant avec un cadre c'est qu'il n' étire pas les choses. Lorsque vous le déplacez, il s'ouvre simplement et il peut bouger avec lui, mais il ne va pas l'étirer. Comme vous pouvez le constater, il ne s'agit pas de l'étendre à moins d'entrer dans des paramètres plus approfondis, mais ce n'est pas ce que nous faisons actuellement. L'une des différences entre les cadres et les groupes est qu'ils fonctionnent différemment. Les objets qu'ils contiennent se déplacent différemment. Une chose avec les cadres, c'est que vous pouvez avoir beaucoup d'espace qui n'est pas occupé. Mais dans le cas des groupes, il ne contient que l'article lui-même. Si nous le groupons maintenant, je vais le regrouper au lieu de l'encadrer. Vous pouvez voir qu'il n'y a pas d'espace vide. Cela arrive juste à la frontière. Donc, si je l'étire, ça va tout étirer. Mais parfois, vous voulez laisser un peu d' espace vide et ainsi de suite C'est donc une différence. Passons maintenant à une autre question, quelle est la différence entre un cadre et un rectangle. Alors laisse-moi créer un cadre ici, d'accord ? Je peux aussi le mettre ici. Laissez-moi juste le mettre ici et lui donner une autre couleur, lui donner du rouge, lui donner un trait. Comme vous pouvez le constater, ils ne sont pas très différents. Ils n'ont pas du tout l'air différents. Ils ont l'air presque identiques. C'est pourquoi nous devons nous demander quelle est la différence. La différence est que les cadres peuvent contenir des objets. Pour vous donner un exemple, je peux placer ce cercle dans ce cadre en le faisant glisser Maintenant, lorsque nous examinons les couches, l'ellipse, le cercle se trouve dans le cadre et vous pouvez voir qu'il est coupé lorsqu'il quitte le cadre Si nous le maintenons, le faisons glisser et déposons à l'extérieur, il quitte le cadre. C'est une chose que les cadres peuvent faire. Essayez de le mettre dans un carré dans un rectangle, cela ne fonctionne pas. Cela ne fonctionne pas de la même manière, et c'est l'une des principales différences. Chaque fois que vous créez une forme, vous devez vous demander si je crée un rectangle, est-ce que je veux que ce soit juste un rectangle ou est-ce que je veux y mettre quelque chose ? Est-ce que je veux qu'il contienne d'autres formes et zones de texte, etc. ? Dans ce cas, vous devriez peut-être créer un cadre. Je sais que c'est un peu difficile à comprendre, mais je pense qu'avec de la pratique, cela deviendra un peu plus facile à comprendre. résumé, les groupes sont parfaits lorsque vous souhaitez regrouper plusieurs éléments en une seule forme, en particulier si vous voulez que cela devienne une forme à part entière, extensible, redimensionnable, et que les cadres sont bons pour contenir éléments en opposition ou en contraste avec les rectangles ou autres formes qui ne peuvent pas contenir d'éléments ou contenir des éléments En résumé, les groupes sont parfaits lorsque vous souhaitez regrouper plusieurs éléments en une seule forme, en particulier si vous voulez que cela devienne une forme à part entière, extensible, redimensionnable, et que les cadres sont bons pour contenir des éléments en opposition ou en contraste avec les rectangles ou autres formes qui ne peuvent pas contenir d'éléments ou contenir des éléments sous eux. C'est là l'une des principales différences. Je te verrai dans la prochaine leçon. 7. Créer des cadres: Nous avons donc parlé de formes. Nous avons parlé des cadres et des groupes et des différences entre eux. Mais maintenant, allons-y. Essayons de créer une jolie petite interface utilisateur en utilisant ces éléments que nous avons appris. Donc, ce que je vais faire, c'est me demander je veux créer quelque chose maintenant, mais est-ce qu'il va contenir d'autres choses ? Qu'est-ce que je vais créer ? Eh bien, je veux créer une carte et je veux que cette carte contienne d'autres éléments. Je vais utiliser un cadre. Je pense créer une application de fitness qui vous montre un tableau de bord, ainsi que d'autres informations. C'est un peu comme Apple Fitness , une application qui vous indique le nombre de pas que vous avez effectués, nombre de calories que vous avez brûlées, etc. Nous allons essayer de le concevoir différemment, mais il reposera plus ou moins sur les mêmes principes . plus ou moins sur les mêmes principes pas grave, car l'objectif ici est d'apprendre et nous pouvons apprendre en copiant, en essayant d' imiter et de nous inspirer d' autres bons produits Maintenant, j'ai l'outil pour le cadre. Je vais créer un cadre ici et je vais le rendre rectangulaire comme ça, et je vais lui donner un peu de couleur, très légèrement, d'accord, super. Ensuite, je vais lui en donner 16. C'est le rayon, le rayon des coins, d'accord ? Alors maintenant je lui en donne 16, il a donc ces jolis petits coins arrondis. Ensuite, je vais ajouter du texte ici et je vais écrire les étapes. OK ? Restez simple. Rien de trop chic. Vous pouvez choisir une autre police. J'aime généralement utiliser un support plutôt qu'un support normal pour ce qui est du poids car c'est un peu plus lisible. OK ? Maintenant, assurons-nous que le texte est lisible. 12 c'est bien, 14 c'est mieux. Donc oui, c'est une chose à garder à l'esprit. Ensuite, nous allons continuer et créer quelque chose pour nous montrer quelles sont ces étapes. Je vais utiliser des rectangles parce que, comme je l'ai dit, quand je me demande si je veux qu'ils contiennent d'autres éléments. Non. Je vais créer ce rectangle et lui donner également 16 rayons, ce qui le rendra complètement rond, puis je vais le rendre bleu ou bleuté Maintenant c'est bleu, puis je peux copier et coller en utilisant Control C, Control V, et l'amener ici, changer la hauteur. Je peux aussi simplement le maintenir puis le faire glisser, puis le faire glisser. Il va le copier. Ça va faire un doublon. Maintenant, je veux montrer la semaine complète. Nous en avons un, deux, trois, quatre, cinq, six, sept. OK ? Maintenant, vous pouvez voir l'espacement entre eux est de six, c'est écrit Maintenant, ce que nous pouvons faire, c'est les garder. J'ai choisi de les maintenir toutes en cliquant sur Shift, d'accord ? Cliquez donc sur Shift, maintenez la touche Maj enfoncée, puis cliquez sur chacune d'elles. Ensuite, si je le fais, ils auront tous plus de largeur, ce que je ne suis pas sûr que ce soit ce que je veux parce que maintenant c'est trop gros Mais ce que je peux faire, c'est conserver cet espace et ajouter un peu plus d'espacement entre eux. Maintenant, cela semble correct, je dirais, puis je vais essayer de les faire varier un peu. Ensuite, je pourrais faire le modèle actuel, je n'ai pas de couleur différente ou quelque chose comme ça. Pour montrer que cela est calculé maintenant ou qu'il est actuel, ou quelque chose comme ça. Je ne suis pas sûr. Il s'agit d'une interface utilisateur très, très simpliste montrant les étapes, n'est-ce Mais il manque quelque chose. Je veux dire, combien de pas ai-je fait dans la journée ? Nous pouvons le faire. Peut-être que nous pouvons le montrer ici à droite pour pouvoir dire, je ne sais pas, 8 600 Et nous pouvons également changer les couleurs. Je veux dire, je peux le rendre un peu plus gris foncé et donner un peu plus d'importance à ce chiffre. Je peux également le faire en le rendant audacieux. Je pourrais peut-être faire du bleu ou peut-être pas. Mais c'est une jolie petite interface utilisateur et c'est ainsi que nous avons créé une carte. Comme vous pouvez le voir, c'est un cadre, le cadre a une couleur et il contient ces autres éléments. Vous pouvez le voir ici. Dans le cadre numéro deux, toutes ces formes sont réunies. Il contient les zones de texte et ainsi de suite. Juste comme ça, vous pouvez créer un cadre très simple et avec ce cadre, vous pouvez y ajouter des éléments. J'espère que cela vous semblait logique, mais allez-y, essayez-le vous-même et voyez ce que vous pouvez trouver. 8. Effets: J'ai donc joué un peu avec cet élément que nous avons ici, mais il manque quelque chose et je ne peux pas vraiment mettre le doigt dessus, mais peut-être pouvons-nous voir ce que nous pouvons faire en matière d'effets. Alors aujourd'hui, je vais vous montrer un peu comment vous pouvez jouer avec quelques effets quand il s'agit de figma Ce que vous allez faire, c'est cliquer sur le cadre ou l'objet auquel vous souhaitez ajouter l'effet. Nous avons donc ici beaucoup d'objets, mais nous voulons les appliquer à un cadre général. Donc, ce que je vais faire, c'est passer aux effets ici. Je clique sur Plus. Ce que cela va faire, c'est ajouter une ombre immédiatement. Maintenant, Drop Shadow est intéressant car il possède déjà quelques valeurs. Mais lorsque vous cliquez ici, vous pouvez modifier ces valeurs. Vous pouvez modifier l'ombre en termes de X et de Y. Verticalement et horizontalement, est-elle déplacée, légèrement supprimée ou plus bas sur la droite, quelle que soit la direction dans laquelle vous souhaitez qu'elle descende en fonction de la source de lumière ? Ensuite, vous pouvez également ajouter le flou. Maintenant, j'aime vraiment utiliser beaucoup de flou, peut-être 24, peut-être 16, peut-être même plus Ensuite, vous avez également propagé. L'étalement ne fait qu' étendre l'ombre sur toute sa surface. je ne recommanderais pas de l'utiliser Pour être honnête, je ne recommanderais pas de l'utiliser. Faisons-le comme ça. Je vais en ajouter 16 et je vais rendre la couleur un peu plus pâle , donc peut-être 15 % Ensuite, je vais faire en sorte que le fond soit entièrement blanc. Et puis voici à quoi ça ressemble maintenant. Il a l'air beaucoup plus propre, beaucoup plus moderne. Et l'ombre est très discrète, très subtile. Ce n'est pas très visible et c'est exactement ça. Nous ne voulons pas le faire. Ils se focalisent trop sur la couleur de la carte, mais plutôt sur le contenu. D'accord ? C'est donc un effet que vous pouvez appliquer, et vous pouvez jouer avec lui jusqu'à ce que vous trouviez la bonne valeur. Je veux dire, tu peux faire le Y, tu peux aussi en faire 16. Vous pouvez le faire baisser autant ou vous pouvez le faire baisser de huit. Vous pouvez créer un flou 36 , puis vous aurez beaucoup d'ombre ici, et vous aurez l'impression que l'arrière-plan est gris, mais ce n'est pas le cas en fait Il y a juste beaucoup d'ombre ici. Mais c'est une chose que tu peux faire. Il y a également d'autres effets. Lorsque j'ajoute un effet, l'ombre est automatiquement supprimée, mais il y a aussi une ombre intérieure, a les mêmes caractéristiques, les mêmes caractéristiques que vous pouvez modifier. Maintenant, celle-ci donne l'impression que cette carte est encastrée dans le canevas, dans le mur. C'est ce que l'on ressent. C'est une chose que tu peux essayer. Il y a un flou entre les couches. Cela brouille l'ensemble de la couche Il y a un flou d'arrière-plan, cela brouille l'arrière-plan s' il y a quelque chose, mais vous avez besoin de quelque chose pour l'arrière-plan pour Il y a du bruit, du verre texturé, etc. Allez-y, essayez-les et voyez ce qui fonctionne. Mais pour être honnête, je dirais que dans le cas de Figma, l'effet le plus utilisé est le drop shadow, car lorsqu'il s'agit de toile, ombres occupent une place centrale dans les couches stylisées et sont également très faciles à couches stylisées et sont également très faciles C'est essentiellement ainsi que vous pouvez rendre vos éléments un peu plus beaux. 9. Mise en page, alignement et espacement: Maintenant que nous avons créé nos éléments de design et que nous avons commencé à concevoir ce joli petit écran, il est temps d'être un peu plus précis. En tant que designers, vous savez, nous sommes des artistes. C'est notre travail de créer quelque chose de beau, et nous sommes en train de le faire. C'est ce que nous essayons de faire. Mais il est également de notre devoir d' être précis lorsqu'il s'agit de prendre des mesures. Nous ne sommes pas censés créer des choses bon gré mal gré. Nous ne sommes pas censés simplement créer des choses et juste, euh, estimer les distances dans l'espacement Il est très important pour nous d' être précis en ce qui concerne l'espacement, lorsqu'il s'agit d' aligner les choses. Les choses ne peuvent pas être légèrement décalées, ne serait-ce que d' un petit pixel, car cela peut très mal paraître pour nous en tant que designers. Cela peut être très dérangeant pour les utilisateurs qui regardent notre design. C'est pourquoi nous devons prendre des mesures pour nous assurer que nos designs sont correctement alignés et qu'ils ne sont pas décalés, même au pixel près. Maintenant, il existe plusieurs façons de le faire. L'un des moyens d'y parvenir est d' utiliser ce que nous appelons des grilles. Ainsi, lorsque vous cliquez sur le cadre que vous avez, l'ensemble du cadre, vous pouvez venir ici, naviguer, et vous pouvez naviguer jusqu' au guide de mise en page. Et lorsque vous cliquez sur le signe plus, cela crée une grille. C'est comme si ce carnet de lycée que vous aviez en main comportait tout en petits carrés. Maintenant, il y a différentes choses que vous pouvez créer. Vous pouvez également créer des colonnes ou des lignes. Cela dépend vraiment de ce que vous essayez de faire. Je vous recommande personnellement de travailler avec des colonnes car elles sont généralement plus standard et plus faciles à utiliser. Cela va diviser votre écran en colonnes, mais vous pouvez en configurer les paramètres. Vous pouvez donc définir une marge et dire : je ne veux pas que l'écran soit sur le bord. Je veux que le contenu soit un peu au milieu. Je vais lui donner 24 ou 16 marges. Disons 16. Vous pouvez ensuite décider du nombre de colonnes que vous souhaitez avoir. Allons-y avec quatre. Je pense que quatre est un bon chiffre , et puis il y a aussi le caniveau La gouttière est l' espace qui les sépare entre ces colonnes Vous pouvez le rendre très petit ou très grand selon l'espacement que vous souhaitez avoir entre eux. Faisons le caniveau maintenant, juste dix. Et puis nous pouvons également changer la couleur, d'ailleurs, si vous le souhaitez. Je le trouve souvent plus beau que rouge parce que le rouge est tellement alarmant Je le fais en noir et je le fais à 10 % ou 5 %, juste pour que je puisse le voir, mais ce n'est pas ennuyeux. Ensuite, nous pouvons commencer à aligner nos éléments. est bien, c'est que tu sais que ça ne devrait plus aller vers la gauche. C'est parfait vu d'ici. Sur la droite, cela demande un peu de travail. Nous pouvons essayer de le redimensionner comme ça à la main, je vais déplacer ces éléments un peu à la main Ensuite, je vais choisir toutes ces options et diminuer l'espacement. Maintenant, ça a l'air beaucoup plus propre. En ce qui concerne le second, il est maintenant également éteint. Je vais juste le copier en maintenant Alt et Shift en appuyant sur Alt et Shift et je vais l'aligner ici. Je vais juste copier les valeurs d' ici ainsi que les couleurs. Que je vais le supprimer ici. C'est une façon de procéder. Comme vous pouvez le constater maintenant, lorsque nous désactivons cette grille, cela peut être un peu gênant pour les yeux. Vous pouvez constater qu'ils sont désormais mieux alignés. C'est une façon de procéder, et je trouve que c'est tout à fait logique. Cela implique beaucoup de regarder avec vos yeux et de deviner ou de ne pas vraiment deviner, mais simplement de juger avec vos Mais c'est quelque chose que vous allez beaucoup faire en tant que designer. Une autre façon de le faire est de le faire avec une règle. Maintenant, vous l'avez probablement remarqué ici en haut, nous avons ces chiffres, et il vous suffit de les maintenir et de les faire glisser. Vous allez simplement faire glisser le pointeur comme ça, puis vous obtiendrez cette règle. Ainsi, lorsque vous le placez ici, vous pouvez essayer de le configurer, vous pouvez l'aligner sur les bords et vous assurer que tout est aligné. Maintenant, je vais le faire de ce côté, horizontalement, parce que c'est plus logique. De cette façon, nous pouvons nous assurer que ces deux éléments sont au même niveau. Vous pouvez faire la même chose avec le texte au cas où quelque chose ne tournerait pas rond, et vous pouvez simplement vous assurer de tous les côtés que tout va bien. Et oui, c'est une façon de procéder. Vous pouvez également le faire verticalement Ainsi, lorsque vous créez d'autres éléments, vous suffit de vous assurer qu' ils se situent dans ces limites C'est une autre façon de procéder, mais celle-ci est plus agréable parce que vous avez un peu plus de contrôle Vous pouvez contrôler ce petit détail, vous pouvez dire : qu'en est-il de ces colonnes, de celles qui se trouvent à l'intérieur ? Qu'en est-il de celui-ci ? Est-il correctement aligné ou non ? C'est une autre façon de procéder, et il y en a une troisième. Une troisième voie. OK. La troisième méthode consiste donc à vérifier la nature des formes. Ainsi, lorsque je choisis ces deux formes, par exemple, lorsque je les tiens enfoncées, lorsque je les sélectionne Maj enfoncée en cliquant sur les deux. Vous pouvez voir que je vois instantanément un espacement ici, je peux changer l'espacement C'est une chose que vous pouvez faire pour assurer que tout est correct Nous avons déjà fait la même chose pour ces colonnes. Vous pouvez également le faire comme ça. Vous pouvez les choisir et vous assurer que l'espacement est correct ou non C'est une chose que vous pouvez faire pour mieux aligner les choses et vous offrir une autre solution, une autre fonctionnalité. Disons que nous le copions, le collons ici et le mettons là. Mais maintenant, vous pouvez voir que l' espacement est un peu décalé. Au lieu de créer des colonnes, des lignes et nous pouvons toutes les choisir. Je choisis ces trois, puis nous aurons ce bouton ici. Tu le vois ? Ici. Habituellement, c'est dans le coin inférieur droit. Lorsque vous cliquez dessus, Figma égalise l'espacement et à partir de là, vous pouvez modifier l'espacement comme vous le souhaitez. Nous en avions dix là-bas, vous pouvez aussi en faire dix ici si vous le souhaitez. Cela dépend entièrement de vous. Mais oui, c'est une chose que tu peux faire. Une autre façon d'aligner les choses est également directement à partir des objets eux-mêmes. Vous cliquez sur l'objet que vous souhaitez aligner, puis vous pouvez choisir ces positions. On peut dire que je veux que ce soit centré. Je veux qu'il soit aligné à gauche du cadre, à droite , en haut, au centre , en bas, etc. Ce qui est chouette, c'est que vous pouvez aussi, je veux dire, disons que c'est un peu bizarre. Vous pouvez également choisir plusieurs éléments et les aligner pour qu' ils soient centrés les uns sur les autres. Horizontalement, ils sont centrés maintenant ou vous pouvez dire, je veux qu'ils soient centrés verticalement. Maintenant, ils sont les uns sur les autres et ainsi de suite. Ce sont des choses vraiment intéressantes qui sont pratiques pour que vous puissiez aligner vos objets. Parce que, comme je l'ai mentionné, c' est un élément essentiel du design. Nous sommes à mi-chemin entre les artistes et les architectes, non ? Nous ne créons pas ces bâtiments très précis en termes de chiffres , de techniques, etc. Nous créons quelque chose qui devrait avoir des chiffres exacts. Pas trop. Ce n'est pas si grave. Nous ne construisons pas un gratte-ciel, mais nous créons un site Web devrait être assez précis Mais en même temps, nous avons un rôle artistique. Nous devons être artistiques, nous devons être créatifs. Nous avons un peu plus de liberté que les architectes. Nous ne sommes pas liés par la physique, nous sommes liés par d'autres directives de conception. Mais encore une fois, nous devons être au milieu, pas trop artistiques, pas trop précis, mais trouver un petit équilibre entre les deux. Il ne s'agit donc que de quelques manières de manipuler vos objets pour les aligner ensemble. Nous avons donc envisagé de le faire avec des guides. Nous mettons en page les guides en colonnes avec des grilles, etc. Nous avons exploré comment procéder avec les règles et oui, ce que l'on pourrait dire, ce sont des lignes de règles et ainsi de suite. Et vous pouvez également le faire à l'aide de ces boutons d'aide ici. Ils vous aident à aligner les choses. Il vous suffit de déterminer comment vous voulez le faire. Ou comme nous l'avons mentionné, lorsque vous sélectionnez plusieurs objets qui ne sont pas alignés, vous obtenez également un ici Si vous voulez aligner plusieurs objets, vous pouvez simplement les choisir comme ils les aiment, puis vous obtenez un joli petit bouton sur lequel vous pouvez cliquer et puis, comme ça, tout est aligné. Allez-y, testez-le et voyez à quel point vous pouvez être précis. Je te verrai dans la prochaine leçon. 10. Couleurs: Bonjour. Dans cette leçon, nous allons parler des couleurs. Maintenant, en ce qui concerne les couleurs, cela devient un peu difficile. Ce n'est pas un thème ou une tâche facile pour plupart des designers, car nous avons tous notre propre approche en ce qui concerne les couleurs, la façon dont nous choisissons les couleurs, manière dont nous nous assurons qu'elles s'harmonisent manière dont nous les utilisons réellement dans le design, façon dont elles prennent place, disons Parce que nous avons souvent un plan, puis quand il s'agit de le mettre en œuvre et d'utiliser les couleurs, ce n'est pas exactement comme prévu. Permettez-moi de vous expliquer ce que je veux dire par une plongée directe dans le vif du sujet. Maintenant, lorsqu'il s'agit de couleurs dans un design dans une application ou un site Web ou autre, vous avez généralement un certain nombre de couleurs qui restent cohérentes tout au long du design. Maintenant, j'ai créé ces carrés ici juste pour vous montrer ce que je veux dire. Nous pouvons choisir, par exemple, six couleurs qui sont les principales couleurs que nous allons utiliser. Nous allons donc remplir les couleurs que nous voulons. Tout d'abord, j'aime commencer par le noir et blanc parce que la plupart des designs, moins les modèles modernes, ont généralement un fond blanc sauf si vous utilisez un thème sombre, mais oui, généralement un fond blanc, et vous utilisez du noir. Ce que nous pouvons faire, c'est choisir du blanc ou vous pouvez choisir du blanc cassé selon ce que vous faites. Mais je vais choisir le blanc juste au-dessus du blanc, et je vais lui donner une bordure juste pour qu'il soit visible. D'accord ? C'est donc notre blanc que nous allons utiliser, puis nous pouvons également avoir du noir. Maintenant, nous pouvons soit avoir du noir droit , soit parfois utiliser une sorte de gris foncé très noir cassé. Vous savez, ce n'est pas visible ou il est impossible de distinguer qu' il n'est pas complètement noir Mais parfois, c'est bien de le faire pour atténuer le contraste car entre le blanc et le noir, il y a une distance énorme. fait de choisir des couleurs blanches ou noires permet donc de réduire ce fort contraste. C'est ce que je vais choisir pour ce 252525 ici. Ensuite, ce que j'aime avoir, c'est aussi un peu de gris. J'utilise différentes nuances de gris. Il y a généralement du gris foncé suffisamment foncé pour être lisible. Et puis, par exemple, ce gris. Je vais juste le prendre ici, copier le code hexadécimal et le coller C'est assez sombre pour être lisible. Mais nous pouvons également utiliser un gris ici, comme ces lignes. Il n'est pas nécessaire qu'il soit visible. C'est celui-ci. Il n'a donc pas besoin d'être visible. Ce n'est pas très visible, mais ce n'est pas un élément essentiel, il doit donc être visible. Est-ce que cela a du sens ? D'une certaine manière, c'est formidable de l'avoir. Si tu peux le voir, tu peux le voir. Si vous ne le voyez pas, vous ne perdez aucune information réelle. Maintenant, nous pouvons les réorganiser, pour être honnête. Je vais juste les réorganiser pour que cela ait plus de sens Laisse-moi voir. Je vais juste le mettre ici et les reprendre. Allons-y. Je pense que c'est suffisant. Vous voyez en blanc, puis en gris clair, gris foncé, puis en noir cassé. Ensuite, pour être honnête, nous pouvons ajouter une couleur de plus. Ensuite, nous avons ces couleurs. Maintenant, il s'agit généralement du primaire, du secondaire et du tertiaire. En général, les gens commencent par ceux-ci, pour être honnête. Mais en gros, l' idée est que chaque fois que vous avez une application ou une identité de marque, vous avez des couleurs qui se répètent, et certaines d' entre elles se répètent plus que d'autres. Par exemple, je peux utiliser le rouge ici pour indiquer un point d' exclamation, et c'est comme le rouge pour indiquer qu'il y a un risque, un problème Mais cela ne signifie pas que je vais utiliser le rouge sur tout l'écran. Même chose ici, j'ai du bleu, j'ai de l'orange. Cela ne veut pas dire que je vais les réutiliser tout le temps. Mais pour être honnête, il est bon de s'assurer que les couleurs que vous utilisez se répètent. Disons que le bleu et l'orange pourraient peut-être être des couleurs essentielles que nous utilisons dans notre design. Habituellement, lorsqu'il s'agit d'applications de fitness, vous n'avez pas qu'une seule couleur qui se répète, mais est-ce que cela a du sens ? Par exemple, nous pouvons prendre le bleu ici. Je vais cliquer sur I, j'ouvre l'outil compte-gouttes, puis nous pouvons prendre cette orange Maintenant, j'ai ce bleu et ce orange. Ce que nous pourrions faire, c'est utiliser le bleu pour les boutons aussi bien que l' orange pour les boutons. Cela fonctionne également, et nous pouvons choisir une autre couleur. L'une des premières couleurs. Il pourrait donc s'agir d'une sorte de rouge , nous pourrions essayer de l' adoucir comme ça. Nous pourrions choisir quelque chose de différent. Maintenant, le jaune est généralement un peu plus difficile à lire ou plus difficile à voir en général. Je l'évitais souvent ou je le rendais foncé, mais une fois que vous l'avez fait noir, il prend cette couleur sale. Est-ce que c'est de la couleur kaki ou quelque chose comme ça. Mais il n'est pas très souvent utilisé, du moins pas dans les designs modernes. Nous pouvons avoir du vert, mais il ne correspond pas exactement à ces couleurs. C'est un endroit où vous devez juger par vous-même en tant que designer. Il existe des théories sur la façon de procéder, mais vous pouvez également le faire vous-même. Nous pouvons choisir un bleu foncé adapté à ces exercices. Nous pourrions obtenir une couleur violette ou rosée. Ouais Ce sont nos options auxquelles nous sommes confrontés. J'ai l'impression de me tourner vers le rouge, car nous avons alors une sélection de couleurs très basiques qui fonctionnent toujours ensemble. Je veux dire, c'est une application de fitness, donc il n'est pas nécessaire que ce soit quelque chose de fou. Maintenant, une couleur souvent utilisée ce vert fluo, est souvent utilisée pour les applications de fitness C'est quelque chose que nous pouvons également opter pour cela. Mais je ne choisirais pas cette couleur comme couleur principale et j'essaierais de l' ajuster un peu. Ça nous plaît. Je ne suis pas sûr. Vous devez également vous assurer qu'il est beau sur fond blanc. C'est tout à fait essentiel. Ensuite, je passerais au bleu et je ferais de celui-ci notre primaire, celui-ci notre secondaire et celui-ci notre tertiaire. Mais je n'en suis toujours pas totalement convaincu, pour être honnête. J'ai envie de vérifier le ton. Maintenant, c'est plutôt vers le jaune. D'accord. Je pense que c'est suffisant, d'accord ? Nous avons donc maintenant cette palette. Il n'est pas nécessaire que ce soit la meilleure palette de tous les temps, mais c'est une palette à laquelle nous pouvons essayer de nous en tenir. Nous avons maintenant une palette de couleurs générale, et nous allons essayer de l' intégrer dans notre design. Au cours des prochaines leçons, alors que nous créons différents composants, différents éléments, je vais essayer de les inclure davantage et vous verrez à quoi il semble que nous puissions revenir en arrière, les revoir et réorganiser ou modifier les couleurs que nous avons juste pour nous assurer que tout va bien Une chose que vous pouvez également faire, et c'est facultatif c'est que vous pouvez choisir une teinte pour chaque couleur. Donc, par exemple, ici vous avez le bleu. Nous pouvons choisir un bleu plus foncé juste pour nous assurer de pouvoir l'utiliser comme effet, comme effet de survol ou quelque chose comme ça Je veux dire, nous avons déjà le bleu clair, non ? Nous pourrions donc également avoir le bleu léger sous forme de tons différents de ce que nous avons. Lorsque vous faites quelque chose comme ça, vous devenez en quelque sorte plus professionnel. Vous avez un meilleur système car vous disposez alors d'une sauvegarde pour tout. Donc, au cas où vous auriez besoin d'une version plus sombre, vous avez déjà cette configuration. Et pareil pour l'orange, il en existe une version plus foncée. Vous pouvez même le rendre un peu plus rouge. Je trouve aussi que c'est toujours mieux de changer un peu la teinte. Nous pouvons le rendre sale, mais une fois que vous l'avez davantage orienté vers l'orange ou jaune, c'est peut-être mieux vers le vert. Tu vois ? Nous avons maintenant des versions plus claires des couleurs ainsi que des versions plus sombres au cas où nous en aurions besoin. Hein ? Mais ce sont les couleurs principales et les couleurs secondaires, il suffit de les remplacer au cas où nous en aurions besoin pour certains effets. D'accord ? C'est ainsi que vous pouvez choisir votre palette de couleurs. Comme je l'ai mentionné, il existe différentes façons de le faire, pour s'assurer que vos couleurs fonctionnent ensemble, mais cela relève davantage de la théorie. Et pour être honnête, en tant que designer, avec le temps et l'expérience, vous devriez être capable d'avoir un œil sur ces couleurs, comprendre quand elles fonctionnent ensemble et quand elles ne fonctionnent pas. noter que ce n'est pas parce que nous avons choisi ces couleurs que nous devons les placer les unes au-dessus des autres ou juste à côté autres. Il n'est pas nécessaire qu'il en soit ainsi. Il peut s'agir de différents éléments et de différents endroits, etc. Gardez cela à l'esprit. Maintenant, nous avons terminé les couleurs et nous devons choisir la typographie telle qu'elle apparaît dans la police, ce que nous allons faire dans la prochaine leçon 11. Typographie: Il est donc temps de choisir la typographie afin de choisir les polices appropriées pour notre design Maintenant, comme toujours, je vais faire quelque chose de plus simpliste. Cela pourrait être un problème beaucoup plus complexe, mais nous allons essayer de le régler doucement maintenant. Donc, tout d'abord, tapons simplement quelque chose ici et écrivons un titre ou quelque chose comme ça Ensuite, nous allons le copier et écrire le sous-titre. Vous pouvez utiliser une seule police pour l'ensemble de votre application ou deux polices différentes, l'une pour les titres et l'autre pour les sous-titres. Donc, pour les gros titres, ils sont généralement plus grands, donc 24, ils peuvent être en gras, et ensuite vous pourriez avoir quelque chose de plus petit, peut-être 16, mais pas en gras, moyen ou normal, d'accord ? Donc, pour le moment, nous utilisons Enter, et c'est vraiment cool de s'en tenir à Inter comme typographie Mais peut-être voudriez-vous explorer différentes options. Maintenant, bien sûr, il existe des options de base comme Montserrat Pour être honnête, c'est mon préféré. J'aime vraiment ça. Il y a aussi un chemin de fer. Maintenant, vous pouvez voir que chacun a une ambiance ou une atmosphère différente Je vais juste y retourner un peu pour que vous puissiez remarquer certains d'entre eux, celui-ci est incliné différemment Le E, vous pouvez trouver le D a une petite fusée avec le chemin de fer. Une lettre en fait un peu flair sur la droite. Certains d'entre eux semblent plus petits, d'autres sont plus épais. Vous pouvez voir ici que l'épaisseur change. Cela varie. D'ici à là, c'est différent. Ici, ça devient plus épais. La ligne s'épaissit, tandis que Montserrat conserve une largeur presque inégale l' ensemble du tracé De petites différences peuvent l' affecter, peuvent l'affecter. Vous pouvez avoir de nombreuses polices différentes. S'il y a un impact. Vous pourriez avoir un impact en tant que police. Vous pouvez simplement consulter différentes polices. Certaines d'entre elles sont plus difficiles, plus grandes et chaque police a une connotation, disons, non ? Cette police est donc quelque chose que vous ne vous attendriez pas à voir dans une application, n'est-ce pas ? Même chose pour celui-ci. Je veux dire, peut-être en fait, cela peut dépendre du type d'application, peut-être une application de prise de notes, peut-être une petite application, mais pas une application sportive. Donc ici, vous faites du fitness, vous n'allez pas voir cette police. Je veux dire, pour une raison, c' est une police pour autre chose, peut-être pour la dictée, pour l'écriture de livres, pour quelque chose comme ça, mais pas vraiment pour le fitness De plus, c'est un peu plus difficile à lire. Ce sont donc deux choses auxquelles vous devez faire attention. Cela correspond-il au thème, non ? Le style s'harmonise-t-il correctement avec l' idée de l'application La deuxième chose, est-ce lisible ? Est-ce quelque chose que vous pouvez lire et bien comprendre ? Celui-ci est cool, mais par exemple, il n'est pas très pratique. Si je dois écrire ce mot de huit lettres, est-ce qu'il occupera tout l'espace ? Cela n'a aucun sens. Essayez donc de trouver quelque chose qui se trouve au milieu. Ce n'est pas trop ludique, mais ce n'est pas trop chic non plus. Ni trop cursif, ni trop manuscrit, quelque chose entre les deux Comme je l'ai dit, en ce moment, nous examinons les polices une par une. Mais généralement, chaque concepteur a testé et essayé des polices, polices avec lesquelles il a essayé et réussi et qui correspondent assez bien à la plupart des thèmes. OK ? Nous pouvons donc, par exemple, essayer d'avoir un impact et peut-être pourrions-nous tout écrire en majuscules. Voyons peut-être à quoi ça ressemble. Nous pouvons donc l'essayer et écrire ici, par exemple, des statistiques. Voyons à quoi cela ressemble, juste pour nous faire une idée. À l'heure actuelle, il est à 24 ans et il semble un peu trop énorme. Et si on changeait de couleur ? Il semble encore trop grand. Cela ne correspond pas au thème que nous avons ici. Personnellement, je ne l'accepterais pas. Voyons maintenant à quoi ressemblerait un chemin de fer. Voyons voir. Je suis là. OK. Ce n' est pas vraiment mon style. Je veux dire, parce que c'est une majuscule. Et si nous écrivions vos statistiques ? Cela ressemble plus à ça, pour être honnête. Ça a l'air un peu mieux. Comparons-le à Montserrat. J'ai l'impression qu'ici, le chemin de fer a beaucoup plus de caractère. Supposons qu' il y ait Geist, par exemple. Dans ce cas, j'ai l'impression que Geist est un peu plus standardisé, ni trop flamboyant , ni trop sophistiqué. Cela convient donc, mais voyons voir, est-ce si différent de l'Inter ? Oui, je veux dire, pour être honnête, ce n'est pas si différent. Nous pouvons continuer à chercher. Nous pouvons choisir quelque chose d'un peu plus sympa. OK, donc cette police est vraiment intéressante parce que j'ai l' impression que ces types de polices serif sont de plus en plus populaires et qu'ils ne correspondent pas exactement à l'ambiance, mais ils introduisent une rupture de style, mais une police intéressante qui, selon moi, fonctionne vraiment bien Je voudrais donc y aller , même si j'ai l' impression que cela ne convient pas à 100 %, mais essayons-le. Pourquoi pas ? On peut le changer, le changer plus tard ? Pas de problème Prendons-le et écrivons-le ici. DM Serif, affichage DM, et écrivons-le simplement avec des lettres normales Ensuite, l'autre police, nous pourrions prendre le chemin de fer, peut-être, pour être honnête, tester, ou nous pourrions simplement prendre Geist ou Inter. Pour être honnête, Inter est très standard Nous pouvons donc le prendre pour le moment et ne pas trop y réfléchir. Ce sont donc tous des Inter, et puis nous avons DM Serif. Et juste comme ça, nous avons vos statistiques et vous pouvez voir, je veux dire, c'est très intéressant. Nous pouvons essayer de les faire également afficher des serfs, et ils sont beaux, mais pas si beaux, pour être honnête, afin que nous puissions revenir Donc, uniquement pour les gros titres, pour les en-têtes comme celui-ci, nous pouvons l'utiliser, mais pour le texte plus petit, nous pouvons le laisser à Inter Juste comme ça, nous avons choisi une police. Comme vous pouvez le constater, ce n'est pas si complexe. Vous n'avez pas à trancher 1 million de cas différents. Cependant, il y a encore une étape à franchir, qui consiste à définir les différents niveaux ou hiérarchies de polices. Vous n'avez pas à trop vous compliquer les choses, mais il s'agit simplement de rester constant Par exemple, nous avons ici vos statistiques. Lorsque vous souhaitez ajouter une autre section ici et que vous souhaitez indiquer vos activités, vos activités, ou vous pouvez simplement l'appeler activités. Il suffit de rester simple. Alors ne faites pas 36, car alors, en quoi cela a-t-il du sens ? Pourquoi cette taille est-elle différente ? Parce que la taille signifie que cela a un niveau d'importance différent, non ? Donc oui, quand vous faites cela et quand vous avez une police avant cela, en disant, par exemple, je ne suis pas sûr. Vous pouvez dire vos statistiques ou votre état de santé aujourd'hui, puis vous pouvez appeler cela. Alors celui-ci inclut tout. Il contient toutes ces différentes sections. Donc oui, celui-ci, tu pourrais en faire 32 ou 36. C'est plus logique. Il s' agit d'avoir une hiérarchie. Je ne veux pas en faire trop, car il s' agit d'un cours pour débutants Mais l'idée, c' est qu'il y a différents niveaux. Donc, quand c'est un gros titre, il contient tout le reste, vous pouvez en faire 32 et ensuite ce une zone plus petite, juste des statistiques, puis vous pouvez en faire 24 et ensuite une autre zone d' égale importance, puis ce serait aussi 24 et ainsi de suite Ne vous compliquez pas les choses, mais c' est généralement ainsi que vous devriez travailler avec la typographie Merci de m'avoir écouté, je vous verrai dans la prochaine leçon. 12. Introduction à la mise en page automatique: Donc, depuis la dernière leçon, j'ai fait quelques ajustements ici et là J'ai ajouté cette carte pour afficher un résumé. C'est quelque chose de standard que font la plupart des applications de fitness. Et oui, j'ai juste fait une petite bêtise, j'ai hiérarchisé la typographie Mais dans cette leçon, j'aimerais parler d' une fonctionnalité très importante de Figma, une fonctionnalité que j'aime beaucoup, qui s'appelle les mises en page automatiques Maintenant, il est un peu difficile de comprendre comment cela fonctionne et de s'y habituer, mais c'est très utile. Désormais, la mise en page automatique est une fonctionnalité de Figma qui permet d'organiser plus facilement les éléments horizontalement verticalement au sein d'une mise en page Au lieu d'avoir à tout aligner vous-même en termes de textes comme ceux-ci et autres, la mise automatique vous facilite la tâche et vous aide à le faire différemment Laisse-moi t'expliquer. Donc, en gros, une mise en page automatique est quelque chose que vous pouvez appliquer à un cadre et uniquement à un cadre. La façon de procéder consiste donc à sélectionner plusieurs éléments. Donc, ce que je vais faire, c'est appliquer une mise en page automatique, par exemple, ici même, j'ai ces cartes et je veux les montrer dans la même section. Donc, tout d'abord, je vais les ajouter à une mise en page automatique. Maintenant, pour ce faire, je peux maintenir la touche A enfoncée, qui le fait automatiquement, ou je vais annuler cela. Ce que vous allez vouloir faire, c'est cliquer avec le bouton droit de la souris et cliquer sur la sélection du cadre. Maintenant, c'est un cadre. Ensuite, vous allez cliquer sur ce bouton, qui indique d'activer la mise en page automatique Et lorsque vous le faites, il détectera automatiquement de quel type de mise en page il s'agit. On sait déjà que c'est horizontal. Donc, vous avez les deux ensemble et il y a ici une voiture. Il s'agit donc de l'espacement automatique. Cela signifie que lorsque j' étire le cadre, il l'espacera automatiquement jusqu'à ce qu' il l'atteigne. D'accord ? C'est une petite fonctionnalité intéressante. Si vous le souhaitez, vous pouvez lui donner un chiffre ici, qui est dix, je crois, par exemple. Maintenant, ce n'est pas Auto, donc c'est juste dix, non ? C'est donc quelque chose que vous pouvez faire pour vous et en fonction de votre design. Mais maintenant, nous l'avons dans une mise en page ou une mise en page automatique pour être plus précis. Ce n'est pas si facile à comprendre. Maintenant, vous avez l'espacement, l'écart horizontal entre les objets, vous pouvez donc le configurer et voici l'alignement Voulez-vous qu'il soit aligné vers la gauche, vers le centre, n'importe où ? Disons que nous l' alignons vers la droite. Cela signifie que si la mise en page automatique est étendue, elle reste à droite, ou plutôt à gauche. OK, donc tu comprends. Maintenant, c'est la même chose quand on le fait de haut en bas, tu sais ? Donc, en gros, vous dites, une fois que c'est étiré, où devraient aller les objets. D'accord ? Et je vais expliquer plus tard pourquoi c'est utile. Je veux dire, dans ce cas, on ne sait peut-être pas pourquoi c'est utile parce que c'est déjà le cas, nous avons déjà tout parfaitement aligné. Nous allons donc simplement fixer l'espacement à dix, puis maintenant je vais le choisir et en faire une mise en page automatique avec celui-ci Mais ça va être vertical parce que c'est du haut vers le bas. Donc, comme nous l'avons dit, cliquez sur R, sélectionnez le cadre, puis ajoutez une mise en page automatique. Ici, vous voyez que l'espacement est de 15. Nous pouvons déjà dire : « Hé, pourquoi est-ce 15 ? Passons à dix pour que tous les espacements soient égaux. Cela nous facilite déjà la vie. Je veux dire, nous n'avons pas fait attention à cet espacement au préalable. Maintenant, nous y prêtons attention. Ensuite, nous pouvons continuer et l' ajouter également à la mise en page automatique. La façon dont nous pouvons le faire est de simplement faire glisser ici et vous pouvez voir un endroit ici. Et juste comme ça en faisait partie. Nous avons maintenant toute cette mise en page automatique. Nous pouvons modifier l'espacement plus tard. Cela nous permet de le faire vraiment plus facilement si nous le voulons. Mais une autre chose que nous pouvons en faire, c'est que nous pouvons également modifier les alignements. Par exemple, je l'ai mis au centre. Maintenant, nous pouvons voir à quoi cela ressemble. Je veux dire, lorsque nous l'alignons au centre et que nous pouvons voir vos statistiques aujourd'hui, il est plutôt beau au centre, mais revenons en arrière. La mise en page automatique vous permet donc de faire ce genre de choses pour éviter perdre quelque chose par erreur Tu vois, c'est lié au même endroit. Vous pouvez changer l'ordre des choses, vous pouvez les déplacer. Mais ce qui est bien, c' est qu'il n'y a pas de petits problèmes d'alignement, car ce que j'ai remarqué, surtout en travaillant avec des coéquipiers, c'est que parfois, par accident, vous déplaciez le texte un peu comme ça Plus tard, quand vous viendriez, vous verriez peut-être que votre collègue l' avait fait par erreur, puis vous deviez vous aligner et dire : « Hé, où était-ce réellement ? C'est pénible. C'est pourquoi la mise en page automatique facilite les choses, car elle détermine tout avec des chiffres exacts. La prochaine étape serait donc de faire de l'ensemble une mise en page automatique. C'est ce que j'adore faire. Nous allons maintenant aller ici et activer la mise en page automatique Ce que cela va faire, c' est faire l'ensemble une mise en page automatique. Tous les éléments de ce cadre sont une mise en page automatique. Et c'est une création en quelque sorte parce que vous pouvez voir tout cela est une mise en page automatique. Il contient une mise en page automatique. Cette mise en page automatique contient également une mise en page automatique. C'est le plus gros , puis celui-ci , puis celui-ci. C'est ainsi que fonctionne la FINMA. Et lorsque vous travaillez de manière vraiment efficace, vous travaillez avec une grande partie de la mise en page automatique les uns dans les autres. Mais attendez une minute, je voudrais vous montrer quelque chose d'intéressant. Maintenant, nous avons fait de l'ensemble de ce cadre une mise en page automatique, n'est-ce pas ? Il y a ici quelques paramètres plus intéressants qui sont essentiellement le rembourrage. C'est comme ça que nous l'appelons, non ? Ici, vous pouvez voir le rembourrage depuis la gauche, depuis le haut, le rembourrage supérieur, le rembourrage droit et le rembourrage inférieur Cela vous indique en gros cette distance ici, c'est le rembourrage Ce qui est cool, c' est qu'il permet de tout éloigner des côtés de 24 ou 16 ici. Nous pouvons toujours changer cela. On peut dire 24. Faisons en sorte que la marge soit serrée ou autre. C'est quelque chose que tu peux toujours changer. Vous en avez 60, nous pourrions en faire 100. Portez le score à 60. Maintenant, ce rembourrage en bas, nous n'en avons pas vraiment besoin car nous l'avons déjà aligné vers le haut, n'est-ce Tout cela est donc aligné vers le haut. Nous pouvons l'aligner vers le bas comme ça ou vers le milieu vers le centre ou, comme nous l'avions fait auparavant, l'aligner en haut à gauche. C'est la meilleure façon de procéder. Je veux dire, lorsque vous créez une application comme celle-ci, ou que c'est à vous de décider. Cela dépend entièrement de vous, mais pour ce qui nous concerne, c'est la voie à suivre, et vous verrez que ce rembourrage fonctionne bien, 16 depuis la droite, 16 depuis la gauche et 60 depuis le haut Voyons à quoi cela ressemble. Parfait Assurez-vous donc que rien ne se chevauche derrière la caméra car normalement, les applications ne le font pas Mais il y a un problème qui concerne l'espacement. Je suppose donc que Figma est allée de l'avant et qu'elle en a fait 21 toute seule, pensant, vous savez, parce qu' elle essaie d'estimer l'espace avant d' en faire une mise en page automatique Mais nous allons aller de l'avant et y arriver, par exemple, je ne sais pas. 16. Maintenant, une chose importante est de s'assurer que l'espacement dans une zone comme celle-ci est de dix Cela signifie que l'espacement entre les autres éléments entre les autres zones doit être supérieur à dix La raison en est de comprendre qu'il s'agit d'un domaine complètement différent de celui-ci, qui est complètement différent de celui-ci. Même si c'est une petite différence, pour l'œil, cela explique toute l'idée. Nous avons maintenant la mise en page automatique dans les mises en page automatiques. Nous avons maintenant vu comment fonctionnent les mises en page automatiques sur l'ensemble du canevas Qu'en est-il de la création d'un élément en tant que mise en page automatique ? Essayons-le. Je veux créer une carte, pas pour les activités, mais ensuite, disons, créons un autre titre ici et disons en savoir plus. Ou peut-être intéressant pour vous ou quelque chose comme ça. Maintenant, je clique sur F , puis je vais créer quelque chose directement ici, dans cet endroit. Je vais lui donner 16 rayons carnoadius , puis je vais le colorier avec cette couleur ici, ce devrait être un élément qui indique aux gens de lire plus, voici un article, voici un article Je vais écrire un article. Je vais copier ce texte et cette zone de texte et les coller ici à l'intérieur, et je vais écrire meilleurs conseils de course pour 2026 ou quelque chose comme ça Ensuite, je vais maintenir la touche Alt enfoncée et la faire glisser vers le bas. En gros, je l' ai dupliqué et je vais faire cet inter et 16, puis je vais écrire Read Me OK. Vous pouvez même le porter à 14 ou quelque chose comme ça. Nous avons ce type de carte, et ce que je veux faire, c'est également choisir une image libre de droits Donc je cherche juste quelque chose ici, peut-être quelque chose avec un humain dessus qui pourrait être bon. Choisissons une belle photo de quelqu'un. Je veux dire, peut-être cette photo ou celle-ci. Pourquoi pas ? Vous pouvez le télécharger ou parfois, ce que j'aime faire, c'est cliquer et copier l'image. C'est ainsi que vous pouvez parfois apporter des images à Figma, mais le problème est qu'elles sont parfois de très mauvaise qualité Je vais le supprimer et je vais juste télécharger gratuitement l'image. Maintenant que je l'ai téléchargé, je vais juste le glisser et le déposer dans Figma C'est en gros comme ça que je le fais toujours. Nous avons donc maintenant une image énorme de bonne qualité. Ensuite, ce que vous allez vouloir faire, c'est y intégrer cette image. Mais avant de le faire, avant d'entrer ceci, faisons-en une mise en page automatique. le moment, il s'agit d'un cadre, et nous allons simplement cliquer sur Mise en page automatique. Et la FIMA est intelligente, car elle organise les choses, mais elle élimine également l' espace inutilisé Il a donc découvert que ce sont les objets que nous voulions, et il n'a ajouté aucun espacement entre eux, mais nous pouvons en mettre huit peut-être ou en fait, nous n'avons pas besoin d'autant d' espacement entre Nous allons donc aller de l'avant et l'étendre comme nous le souhaitons. C'est la taille que je veux, et je vais l'aligner en bas à gauche. Alors je veux mettre cette image ici. Maintenant, l'une des façons de le faire est simplement le faire glisser et de le déposer ici, et ce qui va se passer, c'est qu'il fera partie de la mise en page automatique. Mais l'avantage de Figma lorsqu'il s'agit d' importer des images et des vidéos, c'est que les images sont en fait des remplissages, tout comme une couleur Vous pouvez donc copier ce remplissage et le coller ici, n'est-ce pas ? Donc, ce qui se passe, c'est que vous avez l'image en guise de remplissage par-dessus. Mais lorsque vous cliquez dessus, vous pouvez également cliquer sur ici et recadrer, est en train de remplir l'image maintenant, mais l'image ne s'affiche pas bien. Je ne peux pas le voir. Je vais la recadrer, puis je déplacerai l'image comme ça, et je vais redimensionner ou me laisser simplement la garder comme ça OK. Nous avons donc maintenant l' image en arrière-plan, pas parfaitement placée, mais elle est bonne. Mais nous voulons qu'il soit lisible. Je veux dire, pour le moment, nous ne pouvons rien lire , nous ne pouvons pas lire grand-chose. Une chose à faire à ce sujet, nous pouvons apporter cette couleur ici, puis cliquer sur cette petite gouttelette, est que nous pouvons apporter cette couleur ici, puis cliquer sur cette petite gouttelette, appelée mode fusion sur cette icône, puis choisir ces modes qui vous permettent de modifier la façon dont les couleurs se mélangent Je vais essayer de choisir quelque chose de chouette et d'artistique à la fois. Mais cela ne lui gâche pas le visage. Je pense que multiplier est vraiment sympa, mais cela pose toujours des problèmes de lisibilité Ce que je vais faire, c'est prendre ce type, redimensionner, le mettre ici sur la droite Juste comme ça, il est à l'écart. Cela a l'air d'un gentil petit gardien artistique, mais je voudrais aller plus loin. Je n'aime pas la façon dont c'est ici. Je vais en ajouter un autre et en faire un dégradé. Il s'agit de remplissages normaux et de remplissages dégradés. Je vais faire pivoter le dégradé ici, amener ces points ici. Ensuite, ce que je vais faire, c'est les colorier de la même couleur ici. Je crois que c'est celui-ci, copié-collé. Nous allons rendre ce point transparent ici , puis ce point à 100 % ou même le contraire. Je vais juste l' inverser ici. Ensuite, je vais lui donner une opacité de 100 %. Et juste comme ça, nous avons maintenant un effet fatal, ce qui est vraiment chouette, pour être honnête. Ça a l'air d'aller bien. Ça a l'air bien. De cette façon, nous avons notre petite carte qui donne aux gens les meilleurs conseils de course à pied, en savoir plus. Si jamais nous décidons de mettre la suite en avant, nous pouvons le faire. Il s'agit d'une mise en page automatique. Assurez-vous simplement que les valeurs que vous avez en termes de rembourrage ne sont pas aléatoires Pour le moment, ils sont un peu aléatoires. Tu sais, de droite à gauche, c'est 14 ans, de haut en bas, 20 ans ? Je ne suis pas sûr. Nous pouvons faire en sorte que ce soit 16 et 16 ou quelque chose comme ça ou 24, 24. Cela dépend entièrement de vous, mais je vais juste passer à 16 ou 16 ans, et c'est parti. Voilà à quoi ça ressemble. C'est très simpliste. Je dirais cependant que cette zone est un peu vide ici. Peut-être pourrions-nous y ajouter quelque chose, et je ne sais pas ce que ce serait, mais je vais juste le copier ici, c'est possible, je ne sais pas le numéro un, puis je vais juste le redimensionner Ensuite, c'est juste le compte à rebours des articles ou quelque chose comme ça. À titre d'exemple, je ne suis pas totalement amoureux de cette idée, mais nous pouvons l'essayer, non. C'est peut-être trop gros. Oui, c'est comme Netflix, façon dont il a choisi le numéro un, le film numéro un, le film numéro deux. Je ne suis pas sûr que le hashtag lui rende justice. Peut-être que ça pourrait être comme ça. Une grande partie du design consiste à essayer des choses et à voir ce qui fonctionne et ce qui ne fonctionne pas. Alors oui, crois-moi ça. Et oui, je vais dire que ça pourrait être intéressant pour toi ou quelque chose comme ça. Pour l'instant, je le changerai peut-être plus tard. Autre chose, assurez-vous simplement que la hiérarchie ici est logique si les activités peuvent être intéressantes. C'est la même taille , ce qui n'a aucun sens. Alors peut-être que tu pourrais le réduire un peu. Et juste comme ça, c'est un peu plus beau. C'est essentiellement ainsi que vous pouvez utiliser les mises en page automatiques pour mieux organiser et aligner vos éléments de conception dans le design Merci de m'avoir écouté, je vous verrai dans la prochaine leçon. 13. Créer des composants simples: Bonjour pour une autre leçon du cours pour débutants de Figma. Dans cette leçon, nous allons parler de ce que sont les composants manière dont nous pouvons les utiliser de manière très simple pour soutenir nos conceptions. Tout d'abord, définissons ou essayons de comprendre ce qu'est un composant. Un composant est essentiellement un élément récurrent réutilisable de votre conception Et je sais que je l'ai peut-être déjà dit et que j'ai déjà décrit les choses de cette façon. Mais un composant est essentiellement un élément, un élément de design. Il peut s'agir d'un bouton, d'une carte comme les cartes que nous avons créées ici, et c'est quelque chose qui va être utilisé et réutilisé Ce n'est donc pas une affaire ponctuelle. Et ce qui est utilisé et réutilisé a une structure spécifique Par exemple, si nous prenons cette carte comme exemple, vous avez un numéro, puis vous avez un titre, puis vous avez une action, lisez la suite, puis vous avez une photo. Lorsque nous avons une telle structure et qu'elle se répète de la même manière, mais juste avec une image différente, un titre différent, un texte différent, cela devient quelque chose que nous pouvons utiliser comme composant. Ce qui est vraiment bien avec les composants quand il s'agit de Figma, c'est que les composants reviennent tous à l'original Ils sont toujours connectés d'une manière ou d'une autre. Permettez-moi de vous expliquer cela par la pratique. Allons-y et commençons créer un composant ou un bouton, quelque chose que nous pouvons utiliser comme composant, comme exemple de composant puis voyons comment nous l'utilisons. Je vais le faire en faisant une mise en page automatique. Donc, si vous n'avez pas suivi cette leçon, revenez en arrière, assurez-vous d'avoir bien compris comment cela fonctionne, car cela va être de plus en plus essentiel tout au long des leçons. OK ? Ce que je pense ajouter ici se trouve dans la rubrique Activités parce que je veux que tout cela devienne complet sur tout l'écran. Nous avons nos statistiques, nous avons un résumé, vos pas, puis vous avez votre distance, et je pense que nous devons donner aux utilisateurs la possibilité de bloquer leurs temps ou leurs exercices très facilement. Personnellement, j'ai du mal à utiliser certaines applications, parce que certaines applications veulent que vous cliquiez Je vais courir maintenant, cliquez sur Démarrer. S'ils veulent que je le fasse, ils devraient dire très clairement sur le premier écran. Ça, tu sais, il y a un bouton qui me dit  : « Hé, tu veux courir  ? Cliquez ici Hey, tu veux aller te promener ? Je ne veux pas non plus passer en revue et filtrer tous les petits exercices, si cela a du sens. Il est donc très important pour nous de montrer aux utilisateurs la possibilité de le faire sur le premier écran. Donc je pense peut-être à rester minimaliste Peut-être pouvons-nous utiliser un pictogramme ou ce que nous pourrions appeler une icône Tu sais, plus communément appelée icône. En gros, c'est comme un dessin ou quelque chose comme ça, comme ceux que j'ai utilisés ici et qui vous montrent ce qui est fait. Donc, si quelqu'un court, vous savez, vous affichez cette icône de course. Et si je ne connais pas quelqu' utilise un minuteur, vous l'utiliseriez, non ? Mais nous allons nous concentrer sur différents types d'exercices, d'accord ? Commençons donc à le faire. Je vais donc ajouter un élément de texte, afin que vous puissiez cliquer ici ou cliquer sur T, puis écrire Exécuter, n'est-ce pas ? Je vais donc copier ceci en maintenant la touche Alt enfoncée. J'ai déjà une police ici appelée Font Awesome. Donc, au cas où vous ne le sauriez pas, je veux dire, ce n'est pas très connu. Il s'agit d'une police qui vous montre essentiellement différentes icônes. C'est un concept vraiment cool. Donc, vous la téléchargez sous forme de police et je suis sur la version gratuite en ce moment, puis vous pouvez accéder à un site Web où ils ont toutes les polices, et vous n'avez qu'à copier et coller les polices ou vous pouvez les écrire. Parfois, vous pouvez simplement écrire quelque chose comme « Je ne sais pas », puis une horloge apparaît. Vous pourriez écrire « vélo » et cela apparaîtrait. C'est quelque chose que nous pouvons faire. Je veux dire, ici, il pourrait être en train de courir. Par exemple, il s' agissait d'un pictogramme, ou vous pourriez simplement aller sur le site Web, simplement utiliser une police géniale et vous trouverez toutes les icônes qu'ils contiennent Mais étant familière avec cette police, je tape simplement le mot qui me vient à l'esprit, et j'ai généralement quelques icônes mémorisées Quoi qu'il en soit, assez de mise en valeur. Nous avons donc ici inter, donc je vais juste configurer cette police. Je vais faire en sorte que ce soit moyen, disons 14. Maintenant, nous avons ceci et cela , nous allons choisir les deux , puis cliquer sur Shift an A, soit ça, soit vous pouvez aller plus loin et cliquer sur Ajouter une mise en page automatique. Choisissez-les tous les deux, cliquez avec le bouton droit de la souris et cliquez sur Ajouter une mise en page automatique et, comme ça, cela crée un cadre et en fait une mise en page automatique. Je vois que l'espacement est de huit, je vais en faire quatre, les rapprocher. Et maintenant, nous allons passer par le processus de création d'un bouton. Il s'agit donc probablement d'un bouton. Pour ce faire, nous avons besoin d'un historique. Je veux dire, les boutons ont généralement un look spécifique, non ? Elles ressemblent à des cartes, mais elles sont beaucoup plus petites. Alors, comment s'y prendre exactement ? Eh bien, la façon de le faire, du moins dans ce cas, est d'ajouter un remplissage. Mais nous avons un problème car maintenant le fond est blanc, le texte est blanc. Je vais choisir le texte et l'icône et je vais le rendre noir pour le moment. Mais maintenant c'est trop près des bords. Vous voyez le texte ici, il n'y a pas beaucoup d'espacement, c'est pourquoi nous avons besoin d'un rembourrage Je vais donc expérimenter avec le rembourrage et en ajouter quatre. Maintenant, ça a l'air plutôt bien, mais permettez-moi d'ajouter quelques coins arrondis. Je vais à la comparution et j'écris 16 ici. Laissez-moi voir quel était le rayon ici, 16. Oui, c'est à peu près juste. Maintenant, nous l'avons à 16 ans, et il ressemble à un joli bouton, mais j'aimerais un peu plus de rembourrage Habituellement, à droite et à gauche, nous avons plus de rembourrage avec des boutons Je veux dire, c'est une décision de design, mais vous pourriez le faire juste pour faire respirer un peu, surtout avec du texte, n'est-ce pas ? Et ce que nous pourrions également faire, nous pourrions même lui donner plus d'espace depuis le haut. Cela dépend entièrement de nous. Nous pouvons l' expérimenter. Allons-y et décidons d'un look général. Je vais juste y donner un peu de couleur. Je vais donc le rendre bleu, par exemple. Nous allons maintenant le nommer Bouton d'exercice. C'est spécifiquement pour l'exercice, pas pour autre chose. Je vais maintenant en faire un composant. ce faire, vous pouvez soit cliquer avec le bouton droit souris et cliquer sur Créer des composants, soit vous pouvez venir ici et vous avez ce bouton ici, créer des composants. Vous cliquez dessus, puis il devient violet. Le violet met en évidence les éléments qui sont des composants. Mais il y a une chose très importante à savoir. Il existe un composant parent et un composant enfant. Si vous connaissez le codage, c'est probablement un concept familier pour vous. En gros, il s'agit d'un composant parent car il s'agit de l'original. C'est la pièce originale que nous venons de créer. Nous avons donné naissance à Control V. Il s'agit d'une version identique lorsque vous copiez ceci, que vous allez ailleurs et que vous le collez. Mais si vous avez remarqué que le titre est dessus, ce n'est pas le cas, mais ce n'est pas la seule différence. Je veux dire, ils ont l'air complètement identiques sinon. Mais le fait est qu'ici, comme vous pouvez le voir, il y a quatre petits carrés ici. Il s'agit du composant d'origine, le composant parent. Bien qu'il s'agisse d'un exemple. Je pense que c'est le terme exact. Il s'agit d'une instance ou vous pouvez l' appeler un composant enfant. Et il y a là une relation intéressante car, tout comme les parents, les enfants acquièrent les qualités de leurs parents. Si un parent a les yeux bleus, l'enfant aura les yeux bleus. Si le parent a les yeux vert fluo, alors l'enfant aura aussi les yeux vert fluo, annulons Si nous changeons les choses, ils vont tous les deux changer. Lorsque nous allons voir l'enfant et disons qu' porte des lentilles ou, je ne sais pas, qu' il fait quelque chose, il change d'apparence ou qu'il change quelque chose d' héréditaire et qu'il change la couleur de ses yeux, comme nous l'avons dit, il met des lentilles Eh bien, quand ça arrive, rien, parents. C'est exactement la même logique. C'est pourquoi j'adore cette étiquette ou le nom selon lequel il s'agit du composant parent et composant enfant, car il décrit parfaitement la relation entre ces éléments Ainsi, les enfants ou les instances sont autorisés dans une certaine mesure à se détacher des qualités de leurs parents. Vous pouvez arriver à ce cas et vous pouvez changer le mot ici et dire « fun » au lieu de « courir », vous pouvez changer de couleur. Vous pouvez également modifier l'icône. Tu pourrais écrire «   vélo ». C'est pourquoi Awesome Fanta est plutôt cool parce que vous pouvez simplement taper des choses, vous pouvez changer toute la couleur de ces choses Vous pouvez modifier le rembourrage. Il y a beaucoup de choses que vous pouvez changer, à tel point qu'il semble que cela ne soit même pas lié. Vous pouvez même supprimer l'icône, le texte ou quoi que ce soit d'autre. Annulons tout cela. Mais une fois que vous aurez fait quelque chose comme ça, refaisons-le Ensuite, vous venez et vous dites : « Hé, je veux que l'icône soit une orange ». Alors cela ne se traduira pas dans votre design. La raison en est que, je veux dire, tu as supprimé l'icône. Il n'y est plus. Il y a une règle à cela. Il y a certaines règles. Les qualités que vous modifiez dans les instances ne sont plus déconnectées de celles des parents. Maintenant que nous changeons le rembourrage, par exemple, et que nous disons : « Hé, changeons le rembourrage Tu sais, ça ne va pas changer, non ? Cela ne va pas changer. Mais certaines choses, par exemple le rayon, le rayon des angles, je l'ai juste changé. Il est toujours connecté. Et malheureusement, il n'y a pas qu'un seul moyen de le savoir. Figma ne vous dit pas ce qui est toujours lié au parent et ce qui ne l'est pas, qui peut être source de confusion la plupart du temps Mais il faut y repenser ou y penser logiquement Par exemple, ici, le mot a été changé, la couleur a été modifiée, le rembourrage a été changé Ils ne sont donc évidemment plus connectés. OK ? Gardez cela à l'esprit, mais il ne s'agit que d'un aperçu très général de la façon dont ces choses fonctionnent. Je peux le supprimer, pas de problème, mais une fois que j'ai supprimé le composant parent, c'est un problème. Alors essaie de ne pas faire ça, d'accord ? Je veux dire, ce ne serait pas un gros problème, mais c'est vrai. Copiez-le, collez-le où vous le souhaitez, puis vous pouvez le copier-coller. Vous pouvez le copier-coller. Et c'est ce que nous allons faire. Nous allons en créer différentes versions, donc nous allons dire « courir et faire du vélo » ou disons « vélo », un terme plus officiel, puis nous pouvons écrire cycle ou peut-être cycling man euh, bike man, person cycling. Du vélo ? Je ne suis pas sûr. C'est pourquoi cela devient difficile. Oh, tu vois, voilà. Personne faisant du vélo. Il est donc parfois un peu difficile de les obtenir. Et faisons-en une autre. Je veux dire, nager, non ? Nageur qui nage. Natation. Oui, allons-y. Et nous allons nager. Nous essayons donc de faire en sorte que cela soit aussi court que possible. Nous ne voulons pas le faire nager. Faire du vélo, faire un marathon. Ce serait un peu trop pour le petit écran des petits téléphones. Alors, que pouvons-nous faire ? Je veux dire, donc tu peux courir, tu peux aussi marcher, je suppose, faire une promenade. Donc, je marche. Donc personne ne marche cette fois. Ensuite, nous pourrions en mettre un autre, bien sûr, nous pourrions juste en mettre un de plus juste pour pouvoir le remplir. En copiant ceci et disons le football peut-être, espérons-le. OK. Soccer, ballon de football. Ouais. C'est bon. Je vais juste appeler ça du football. Je suis désolée, s'il y a des Américains qui regardent, c'est du football. Quoi qu'il en soit. Maintenant, ce que nous pouvons faire , c'est les ajouter tous dans une mise en page automatique, d'accord ? Il suffit de changer de poste A, puis je vais aller ici et je vais le mettre dans la rubrique Activités. Maintenant que j'ai ceci, je remarque que le fond est déjà blanc, même s'il semble gris, mais il est en fait Il ne faut pas oublier d'ajouter l'ombre. Nous pouvons simplement le prendre à partir des effets ici, nous allons le coller ici. Maintenant, nous avons un peu d' ombre, mais elle est trop forte, donc je vais la reculer un peu pour ramener les valeurs un peu en arrière. Ou bien, ce que nous pourrions faire c'est simplement ajouter un trait. Comme vous pouvez le voir, ce qui est vraiment cool, c'est que je ne fais modifier cette instance et que cela change toutes ces choses ensemble. C'est super incroyable. C'est ce que j' aime dans ces composants. Voyons maintenant à quoi cela ressemble. Oui, ça n'a pas l'air trop mal. Personnellement, j'ajouterais un peu plus, disons, du rembourrage. La raison en est que je voudrais autoriser les gens à cliquer dessus parce que nous devons tenir compte du fait que les gens ont de gros doigts. Je veux dire, nous le faisons tous, devant l'écran du téléphone. Mais il y a aussi des gens parmi nous qui ont de gros doigts, et c'est en fait quelque chose dont nous devons tenir compte en tant que designers. Je pense qu'il y avait ce qu'on appelait règle du gros doigt ou quelque chose comme ça, la règle du gros doigt ou quelque chose comme ça, à savoir le fait qu'il faut fabriquer des objets suffisamment grands pour que, des objets suffisamment grands pour que lorsque les gens cliquent dessus, ils ratent un clic et un autre endroit. Nous pouvons faire la même chose ici en ajoutant un peu plus d' espacement juste pour que les gens puissent se différencier C'est ainsi que nous avons différents types d'activités. Je changerais peut-être même les couleurs, pour être honnête, mais pas intentionnellement, mais un peu au hasard, juste pour leur donner un aspect différent. D'une certaine façon. Ou nous pourrions simplement les garder de la même couleur. Je veux dire, c'est plus facile à faire, d' autant plus que nous avons choisi cette couleur comme couleur principale. Mais oui, c'est une version de la façon dont nous pourrions utiliser les boutons. Nous pourrions également les faire, comme nous l'avons mentionné, uniquement avec Shadow. Mais je dirais que si vous voulez faire quelque chose comme ça, assurez-vous que l'ombre ne soit pas complètement folle comme ça. Je veux dire, c'est un peu fou pour ces cartes. Mais ici, avec les cartes, elles ne sont pas vraiment cliquables, ou vous pouvez cliquer dessus, mais c'est une autre histoire Mais ici, toute la fonction de ceux-ci est qu'ils doivent être cliquables Nous voulons donc les rendre aussi visibles que possible, d'accord ? Alors gardez cela à l'esprit. Donc oui, c'est essentiellement ainsi que vous pouvez utiliser les composants, créer différents types d'éléments de conception tout au long de votre conception et vous assurer qu'ils restent cohérents. Et c'est en fait, tu sais, le but au cas où je n'en aurais pas parlé directement. L'idée même des composants est que nous ne voulons pas, vous savez, avoir des designs différents partout. Nous ne voulons pas avoir dix types de boutons différents. Nous voulons plutôt avoir un système de conception cohérent. Un système de conception est un ensemble d'éléments ou de composants de conception qui seront utilisés et réutilisés, et ils doivent tenir compte de tout Si vous dites qu'il va y avoir une icône, mettons une option pour avoir une icône. S'il doit y avoir une ombre, s'il doit y avoir un contour, vous savez, un trait, peu importe, alors nous devons en tenir compte . Alors vas-y. Testez-le, essayez-le, essayez de créer vos propres composants et voyez ce que vous pouvez en faire. C'est vraiment amusant et cela facilite beaucoup les choses. Et il n'est jamais trop tard si vous pensez : « OK, hé, c'est un objet cool que j'ai, vous pouvez le transformer en composant assez facilement, puis vous pouvez l' utiliser, le réutiliser et créer une version différente. Et ce qui est encore plus cool c'est que plus tard , lorsque vous direz Hé, je n'aime pas l'apparence de ce design », «   Hé, je n'aime pas l'apparence de ce design », vous pourrez le changer une seule fois. Vous n'êtes pas obligé de le changer chaque écran, car pour être honnête, une chose que je peux vous dire en tant que designer chevronné travaillant dans le domaine depuis un certain temps, designer chevronné travaillant dans le domaine depuis c'est que vous arrivez souvent à un point où vous avez tellement d'éléments différents et parfois les mêmes éléments sur tous vos L'idée d'aller voir chacune d' entre elles et de les changer est donc chacune d' entre elles et de les changer un véritable cauchemar. C'est impossible, souvent, nous nous retrouvons avec autant de changements, autant d'éléments différents légèrement différents les uns des autres, conséquence le fait de ne pas démarrer proprement C'est pourquoi je vous conseille d' y aller, de commencer par le nettoyage, apprendre à utiliser les composants et à les utiliser pour ne pas le regretter plus tard et d'avoir à effectuer beaucoup de travail manuel. Merci beaucoup de m' avoir écouté, et aujourd'hui nous venons d' apprendre les composants. Je te verrai à la prochaine leçon. 14. Affiner la conception de l'UI ;: Bon retour à une autre leçon. Dans cette leçon, nous allons réfléchir un peu. Nous allons examiner tout le travail que nous avons accompli jusqu'à présent à présent critiquer un peu et voir ce qui manque. Vous savez, dans l'ensemble , et c'est un bon exercice pour vous en tant que designer, vous devriez apprendre à regarder votre travail manière plus objective. Il est impossible d'être totalement objectif, mais essayez de le voir sous un autre angle, en particulier du point de vue d'un utilisateur potentiel, d'accord ? Et critiquez-le et essayez part de vos propres commentaires , que vous pourrez utiliser pour améliorer votre produit ou votre design. C'est ce que nous allons faire aujourd'hui, puis nous allons l' améliorer. C'est bon. Alors maintenant, ne vous inquiétez pas si vous avez l' impression que les idées ne vous viennent pas à l'esprit. Ne vous inquiétez pas si vous pensez que cela n'a aucun sens. Mon professeur est mon instructeur, il est absolument incroyable. Il s'accroche à tout ce qui lui manque. Comment pourrais-je être comme lui ? Ne t'inquiète pas pour ça. Évidemment, j'ai quelques années d'expérience dans le domaine, donc cela me vient un peu plus naturellement, mais c'est quelque chose que vous pouvez simplement pratiquer. Avec le temps qui passe de plus en plus à critiquer, vous pouvez en arriver à un point où vous pouvez immédiatement repérer ces choses Il y a d'autres choses lesquelles on ne peut pas dire qu' il y a le bien et le mal. C'est simplement une question d' opinion, d'opinion subjective. Ou peut-être devons-nous le tester. Nous devons faire de nombreux tests jusqu'à ce que nous trouvions la bonne méthode et nous n' avons ni le temps ni l'argent pour cela. ce moment, je le regarde en tant qu'utilisateur et je consulte ce tableau de bord mais je n'aime peut-être pas. Ça a l'air plutôt sympa. Il y a des choses où vous dites : «  Au lieu du bleu, je préfère le violet ». Au lieu de l'orange, je préfère le bleu. Mais nous n'avions pas grand-chose à ajouter. C'est pourquoi nous avons créé ces couleurs. Oui, en ce moment, nous réfléchissons davantage du point de vue de la convivialité. Alors, comment l'utilisateur voit-il cela ? Qu'est-ce qui manque à l'utilisateur ? Qu'est-ce qui peut être gênant optiquement, dérangeant pour l'utilisateur, exemple ce qui est beau, moins beau pour les yeux, etc. Donc, la première chose que je dirais personnellement, c'est je suis un grand fan de ce type de conversation avec l' utilisateur en lui disant «   Salut, Ahmed », et lui parlant directement en l' appelant par son nom. Cela diffère d'une application à l'autre. Beaucoup de gens ne l'utilisent pas. Ce n'est pas très courant. Mais quand quelqu'un fait cela, je m'attends à avoir un espace où je peux accéder à mes données personnelles et voir bonjour Ahmed, qui est Ahmed ? Où puis-je changer de nom ? Et si le nom n'est pas le bon ? Ou je veux voir les paramètres de mon profil, etc. Souvent, il s'agit généralement d'un cercle juste ici ou ici à gauche ou à droite, où vous pouvez simplement accéder à vos propres données, ouvrir votre profil, etc. C'est une chose que j'ajouterais qui me manque déjà. Une deuxième chose, et d'ailleurs, n'hésitez pas à vous arrêter et à penser par vous-même. Je voulais te laisser le temps pour ça, mais tu peux juste faire une pause et le faire toi-même. La deuxième chose est que l'espacement est un peu décalé, je trouve. L'espacement entre vos statistiques actuelles et les cartes situées en dessous est un espacement spécifique Ensuite, lorsque vous regardez entre les activités, le mot activités, le titre et les activités réelles, l'espacement n'est pas encore là. Je veux dire, ce qui peut être source de confusion ici, c'est le fait que vous examinez les activités et que vous ne savez pas si cela appartient à la région auparavant. Ou après. Parce qu'il a un espacement égal, et c'est à ce moment-là que vous vous dites, c'est pourquoi l'espacement est important car il nous donne inconsciemment, il nous indique la relation entre les différents éléments, et c'est exactement ce qu'on ne nous dit pas pour le moment que vous vous dites, c'est pourquoi l'espacement est important car il nous donne inconsciemment, il nous indique la relation entre les différents éléments, et c'est exactement ce qu'on ne nous dit pas pour C'est pourquoi je le remarque personnellement davantage. C'est pourquoi il est bon de revenir sur vos créations. Il se peut que vous ayez oublié quelque chose. Donc, ce que je ferais, c'est soit diminuer l'espacement ici, soit ajouter ces deux éléments, le texte et tous ces boutons Je les ajouterais dans une mise en page automatique et je diminuerais l'espacement. La même chose pourrait être intéressante pour vous et cette carte, sinon je ferais une mise en page automatique. Je les mettrais ensemble, mais j' augmenterais l'espacement entre tout le reste. Je fais une mise en page automatique de toute façon. Je les regroupe ou ne disons pas regroupement parce que les groupes sont différents. Je les place dans une mise en page automatique et j'augmente ou diminue l' espace entre les deux Cela aura plus de sens plus tard. C'est bon. Ça a l'air plutôt cool. Nous avons maintenant cette information. Maintenant, bien sûr, nous pouvons remplir le premier écran avec beaucoup plus d'informations, mais je tiens à ce que les choses restent simples pour vous. Cela s'appuie sur le fait d'avoir une photo de profil ici sur laquelle cliquer. Cela sert à la navigation et nous en avons besoin. Quelle est cette page sur laquelle je me trouve ? Est-ce que c'est chez nous ? Est-ce un tableau de bord ? Est-ce un résumé ? Qu'est-ce que c'est ? Y a-t-il d'autres écrans que je peux voir ? En fait, le sujet de la prochaine leçon est l' ajout d'un deuxième écran, et c'est exactement ce que nous allons faire. La question qui se pose ici est la suivante : comment puis-je consulter mon profil ? Y a-t-il un aspect social dans cette application ? Y a-t-il une partie conseils, une partie éducative dans cette application, ou peut-être y a-t-il une partie amis où vous pouvez rivaliser avec vos amis. Ce sont toutes des idées proposées par d'autres applications. Lorsque vous ne le faites pas et que vous n'en tenez même pas compte, vous passez déjà à côté d'une occasion. D'accord ? Alors continuez et gardez cela à l'esprit. C'est une chose que nous allons également faire, c'est ajouter une barre de navigation C'est ce que nous appelons une barre de navigation où nous avons plusieurs boutons, peut-être trois, quatre, cinq, à vous de choisir et vous pouvez dire, ici, c'est la maison, ceci est un résumé, ce sont des amis, comme vous voulez l'appeler, c'est vous voulez l'appeler, c' quelque chose que nous allons faire. À part ça, je pense que je vais bien. Je pense que l'écart entre High Ahmed et vos statistiques d'aujourd'hui est peut-être un peu trop important. Je ne sais pas J'en ai envie, mais voyons comment nous pouvons résoudre ce problème. Allons-y. Tout d'abord, je veux déjà en finir avec l'espacement Je les mets déjà dans une mise en page automatique et je les mets dans une mise en page automatique. Je vois que l'espacement ici est de 16, et c'est l'espacement pour l'ensemble du cadre Je vais voir l' espacement dont nous disposons ici. Ça fait dix. Je vais en faire huit, et je vais en faire huit aussi. Voyons à quoi ça ressemble maintenant. Vous pouvez maintenant voir ici que l' espacement est désormais double. Ce n'est pas si visible. C'est ce qui compte. Votre cerveau l'a déjà compris. Votre cerveau a dit : « D'accord, les activités liées à ces activités et rien d'autre ne pourrait vous intéresser sont connectées à cette carte, rien d'autre. Votre cerveau l'a compris, donc vous n'avez rien à faire pour cela, d'accord ? Maintenant, nous en avons fini avec ça et passons à la question du profil. Je pense que le problème que j'ai avec cela est que le fait que ce texte est peut-être un peu trop élevé. Il est trop haut. Alors maintenant je le baisse pour voir s'il va se rapprocher, vous savez, pas tant que ça. Tout va bien. Je veux dire, parfois en ce qui concerne l'espacement, il faut garder à l'esprit qu'il faut être plus méthodique à ce sujet Comme vous pouvez le constater, nous indiquons des chiffres précis ici et ainsi de suite . Alors là, ça a l'air bizarre, et peut-être qu'un graphiste aurait dit, oui, mets-le plus près de ça. En tant que design d'écran, vous ne pouvez pas faire cela. D'accord ? Tu ne peux pas juste aller de l'avant et dire, tu sais, juste pour que ça soit plus beau. Non, tu dois rester, tu sais, rester constant. Si vous avez dit 16 ou 16, cela devrait également être 16, d'accord ? Donc, tu sais, lâche-toi de ça. D'accord ? Maintenant, allons-y et créons notre bouton de profil. Maintenant, je vais le créer en cliquant simplement sur O , pour obtenir l' ovale, je suppose Ensuite, maintenez Shift enfoncé, vous l'agrandissez, et puis je compare pour le moment, il semble être de bonne taille. Ensuite, ce que nous allons faire c'est obtenir une image de quelqu'un. C'est bon. Je viens donc de recevoir une image. Je ne sais pas si c' est vraiment de l'IA, mais je viens d'avoir l'image d'une personne. Je vais donc copier le remplissage, le coller ici, et c'est notre photo de profil, d'accord ? Je vais donc l'ajouter à la mise en page, et je vais choisir ces deux éléments, l'image et le texte, maintenir la touche Shift et A enfoncée, faire une mise en page automatique, en gros, puis je vais les rendre horizontaux et les rendre centrés ou peut-être plus bas. Et je vais les aligner vers la gauche. Voyons à quoi cela ressemble lorsque la photo est sur la gauche, elle est étrange, alors je vais la mettre sur la droite. Mais je vais faire en sorte que l'espacement soit automatique. Comme je l'ai déjà expliqué, cela pousse les deux éléments de l'autre côté. Cela permet essentiellement d' espacer autant que possible. C'est ce qu'il fait. Maintenant, nous avons cette photo de profil ici et j'ai l' impression que cela ne suffit pas. Je vais lui donner une ombre, copiant l'ombre d' ici et en la collant ici. Rendez-le un peu moins flou. Et rapprochez-le. Ce n'est pas si visible, pour être honnête. Je vais juste le rendre plus flou. Cela semble à peu près correct. Ou ce que vous pourriez faire, c'est le rendre beaucoup plus petit. Vous pouvez également supprimer complètement le flou. Cela dépend entièrement de vous et nous pourrions également l'agrandir beaucoup. C'est également une option, quelque chose que nous pouvons faire. Mais je vais juste m' assurer qu'ils sont centrés l'un sur l'autre. C'est bon. Nous l'avons donc maintenant. Je ne suis toujours pas très content de l'ombre, mais c'est bon. Nous pourrions donc essayer d' ajouter un trait pour le rendre plus beau le différencier de l'arrière-plan. Je pense que cela résout un peu notre problème. Maintenant, nous passons à autre chose et nous allons créer notre élément de navigation. Maintenant, je pense faire quelque chose d'un peu similaire à ce que nous avons fait ici avec ces boutons, rien de trop différent, en ajoutant une icône, en ajoutant du texte et en gardant les choses rien de trop différent, en ajoutant une icône, simples. Et la plupart des barres de navigation sont exactement comme ça. D'accord ? Donc, ce que je vais faire, c'est créer un cadre, donc appuyer sur F, amener ce cadre et je vais essayer de l'adapter ici, d'accord ? Oui, quelque chose autour de ça. Ensuite, je vais faire le tour. Et je veux y ajouter différents boutons, mais créer des boutons peut être un peu difficile. Alors laisse-moi le copier. Je viens de le copier, et je vais créer un bouton. Maintenant, permettez-moi d'emprunter ces éléments ici. Je les copie et je les colle ici et je vais voir quelle est ma vision Je vais les mettre comme ça. Ensuite, je vais dire que c'est chez vous et que c'est votre maison, et je vais l'agrandir un peu. Je vais donc en faire une mise en page automatique maintenant pour tout rassembler. Et cela n'a pas l'air trop mal, pour être honnête. Je ne sais pas si c'est trop gros, mais testons-le. Je vais l'ajouter ici et je vais en faire une mise en page automatique. Je vais lui donner une autre couleur juste pour voir. D'accord. Redimensionnez-le Je vais le redimensionner et lui donner un rembourrage approprié. C'est juste aléatoire, donc je vais juste faire huit par 12 ou quelque chose comme ça. Maintenant, je vais le sortir. J'en ferai un composant et je dirai le bouton Navbar. Je vais le copier maintenant, le coller ici, copier et le coller à nouveau, coup-coller à nouveau. Je vais le rendre horizontal et leur donner un espacement de huit Avec le rembourrage, je vais aussi en faire huit. Et je vais faire huit à partir de deux ou peut-être voyons voir, peut-être que nous allons faire quatre ou quatre. Je vais supprimer la couleur d'ici pour le moment. Vous voyez maintenant qu'ils sont très bien espacés parce que nous avons travaillé avec un espacement constant Nous avons travaillé avec un rembourrage uniforme sur tout le pourtour, et il semble maintenant très bien équilibré Je vais en faire un composant. Je vais en faire un bar à nab. Je vais prendre ce nab bar et je vais l'ajouter ici. Et je vais essayer de le centrer. Maintenant, pour y parvenir, il y une que je ne vous ai pas encore enseignée, mais maintenant je vous l'enseigne. Lorsque vous avez une mise en page automatique, tout est organisé d'une manière spécifique, ici nous avons une mise en page automatique. Tout est aligné en haut à gauche. Les objets ont un espacement de 16, etc. Mais il existe un moyen de dire à Figma d'ignorer la mise en page automatique Et de faire ce que tu veux. Cette méthode consiste à choisir l'élément que vous souhaitez retirer de tout cela, puis vous allez cliquer sur ce bouton et il est écrit « ignorer la mise en page automatique ». Ensuite, cela vous permettra simplement de le déplacer comme vous le souhaitez , dans n' souhaitez , dans importe quelle direction et à n'importe quel endroit, quel que soit l'espacement, peu importe C'est donc ce que nous sommes en train de faire. Nous avons maintenant ces éléments, et pour être honnête, cela ne convient pas à l'ensemble de l'écran. Si quelque chose ne va pas, peut-être pourrions-nous en ajouter un autre. Peut-être que cela pourrait résoudre notre problème ou que nous pourrions ajouter beaucoup plus d' espacement entre eux. Mais cela crée un petit problème d' espacement, comme vous pouvez le constater Le rembourrage ici est de quatre , puis l'espacement est de 16. Ouais Peut-être que nous pouvons simplement travailler avec ce type de petite barre de navigation. D'accord ? Pour l'instant, nous pouvons travailler avec cela et nous pouvons le modifier plus tard. Je vais le copier-coller pour donner l'impression qu'il y a plus de contenu. Je vais juste ajouter des couleurs différentes. Donnez l'impression que nous avons plus de contenu en arrière-plan. Maintenant, voici une chose que je veux faire, qui est assez courante, juste pour vous montrer à titre d'exemple, c'est de le faire davantage dans le style d'Apple. Nous ne nous en tenons pas exactement à leur style de design, etc., mais nous essayons de l'imiter un peu, c'est ce que font de nombreuses applications Lorsqu'ils fonctionnent sous IOS sur le système Apple, ils l'imitent Et ce que je veux imiter, c'est l'effet de verre car nous avons cette Figma Ce n'est pas exactement pareil, mais c'est plutôt cool. ce faire, vous allez aller de l'avant et donner à votre objet, votre barre de navigation, la couleur blanche Ensuite, vous allez passer aux effets. Et au lieu de drop shadow, nous pouvons aussi faire drop shadow, pour être honnête. C'est ce que nous allons faire. Pourquoi pas ? Au lieu de cela, nous allons également faire verre et le faire seul, cela vous donnera un très bel effet vitreux, qui est vraiment chouette Il comporte d'autres paramètres très complexes, mais c'est quand même très agréable à essayer. Mais pour ce faire, nous devons également rendre les couleurs plus appropriées. Rendons-les blancs pour le moment et voyons à quoi cela ressemble. Et bien sûr, je recommande toujours que lorsque vous faites une telle chose vous y alliez et vous la comparez à ce que vous essayez de copier. Dans ce cas, nous essayons de copier Apple, alors voyons comment ils s'y prennent, et maintenant, ils ne font plus du blanc. Je veux dire, ils sont noirs. La couleur noire. Donc, pour de tels boutons, ils seraient couleur noire ou peut-être pas exactement en noir, mais nous pouvons enlever le noir ici et l'utiliser. C'est adaptatif. Si l'arrière-plan est coloré, ils le rendent blanc, sinon, ils le rendent noir. Dans ce cas, nous avons un arrière-plan très sombre, nous allons donc simplement le rendre blanc. Tu vois ce que j' y ai fait ? Je suis allée de l'avant , j'ai vérifié, j'ai vu ce qu'ils faisaient et j'ai dit : OK, laissez-moi un OK, alors maintenant allons-y et créons les différentes sections. Disons donc que nous avons une maison, ce qui n'est pas si descriptif de nos jours, pour être honnête. Par exemple, vous devez préciser, est-ce que c'est votre fil d'actualité ? Est-ce votre résumé ? Qu'est-ce que c'est exactement ? Alors peut-être que nous allons simplement écrire ici un résumé. Mais si nous écrivons cela, nous avons besoin d' une jolie petite icône. Et j'ai juste écrit un diagramme circulaire, qui a plutôt bien fonctionné. Pour l'instant Je vais juste appeler ça un résumé. C'est bon. Ensuite, je vais venir ici. Donc, au lieu de rentrer chez nous, peut-être que nous avons des amis ou quelque chose comme ça ou des réseaux sociaux. Je vais écrire aux utilisateurs et je vais juste écrire ici. Des amis. Profil, nous avons le profil ouvert. Nous pourrions faire une partie éducative. Alors peut-être un haltère. Ouais Et nous pourrions écrire ici une formation. Maintenant, nous avons un peu foiré les choses parce que maintenant les noms ou les boutons ont tous des tailles différentes de celles que nous avons normalement Pour être honnête, je remarque également que le texte est un peu trop long pour être Nous pouvons aller de l'avant, changer cela et en faire 12 peut-être Ce que nous allons vouloir faire, c'est aussi leur donner une taille unique. Je vais choisir la taille de la plus grande, qui est de 79, donc je vais juste leur donner 80, soit une largeur de 80. Juste comme ça, ils sont un peu plus égaux ce moment. Ils ont l'air plus beaux. Mais cet effet de flou est un peu trop fort, nous pouvons donc essayer de l'ajuster nous pouvons faire plus de glaçage, honnête, nous pouvons faire plus de glaçage, ce qui gâche tout cet effet Mais comme vous pouvez le constater, sans givrage, c'est vraiment transparent Nous faisons un peu plus de glaçage. Je vais juste laisser ça. glaçage permet de ne pas avoir un effet de transparence, et vous pouvez alors voir les couleurs un peu mieux Oui, c'est vraiment sympa. Si nous voulons imiter Apple jusqu'au bout, nous devons le rendre vraiment rond et le tout un peu plus petit Cela devrait peut-être réduire un peu les icônes. Et ici, nous avons un rembourrage de huit, donc nous pouvons peut-être en faire quatre. Regarde à quoi ça ressemble. Je dirais que ça ressemble un peu plus à ça. C'est un peu plus difficile à voir avec l'effet du verre entier. Je veux dire, quand on fait ça, c'est beaucoup plus agréable. Mais oui, je veux dire, pour le moment, elle semble un peu plus lisible, mais peut-être que je vais agrandir un peu l'icône , pour qu'elle soit encore plus belle Donc, ce que nous pourrions faire, c'est ajouter également un joli petit bouton de recherche. Donc, ce que je vais faire, c'est prendre une instance, un enfant de ce composant, et je vais les supprimer. Maintenant, il n'y en a qu'un au lieu d'être multiple, nous n'avons donc pas besoin d'écrire le mot. Nous n'aurons que l'icône. Ensuite, je vais faire 60 x 60, je suppose, ou 54 x 54. Je vais le prendre ici et je vais également faire en sorte qu'il ignore la mise en page automatique et que je l'aligne ici. Voyons si la hauteur ici est de 54, elle devrait également être de 54 ici. Vérifions-le à nouveau. Il y a un petit problème avec le rendu, je crois. Très bien, voici à quoi ça ressemble maintenant. Nous avons donc ces icônes. Nous avons également une icône pour la recherche. Notre barre de navigation est donc plutôt belle Pour être honnête, je dois dire qu' elle n'est pas vraiment parfaite pour Apple, mais elle nous sert bien pour le design que nous avons ici D'accord ? La prochaine étape sera de concevoir un deuxième écran, ce qui sera une tâche ardue. Ne soyez pas trop arrogant, mais nous allons passer par là ensemble Alors n'ayez pas peur non plus. Nous allons essayer de créer un autre écran. En utilisant les mêmes principes, en utilisant les mêmes idées que nous avons apprises, nous allons créer un deuxième écran. Merci beaucoup de m'avoir écouté et je vous verrai lors de la prochaine leçon. 15. Ajouter un deuxième écran: Bonjour. Aujourd'hui, nous allons créer un deuxième écran pour notre design. Dans cette leçon, nous allons donc essayer de comprendre comment nous pouvons développer des conceptions que nous avons déjà commencées et que nous avons déjà créées pour les développer, les développer et peut-être intégrer de nouveaux éléments, etc. Mais en même temps, outre l' introduction de ces nouveautés, nous voulons maintenir la cohérence. Et c'est pourquoi cette leçon est quelque chose à considérer. C'est pourquoi nous avons veillé à inclure cette leçon. Parce que lire un écran est une chose, et c'est une excellente compétence, mais passer de l'écran à un autre, en s' assurant qu'ils aient la même apparence que s' ils se trouvaient dans la même application, c'est un défi. Aujourd'hui, nous allons donc relever ce défi. Dans le cadre de cette leçon, je vais choisir de créer la page de formation. Nous allons donc créer un deuxième écran, qui sera l'écran d'entraînement. Et dans cet écran, nous allons créer une page ou une section de l'application spécialisée pour aider les gens à s'entraîner. Cela inclut de donner des didacticiels vidéo, peut-être des articles, mais en restant très légers, peut-être des outils utiles pour la formation. Je n'en suis pas vraiment sûr. Mais restons simples, car, encore une fois, le fait de réfléchir à ce que l'application devrait avoir, à ses caractéristiques et ses fonctions, c'est autre chose. C'est quelque chose dans lequel vous devez absolument investir du temps. Mais pour les besoins actuels, ce que nous faisons, c'est nous entraîner à donner vie à ces idées. Donc, pas comment trouver les idées, mais comment les mettre en œuvre dans un design réel. Commençons donc. Maintenant, normalement, vous pouvez choisir l'outil de cadre et obtenir un tout nouveau cadre. Mais j'aime travailler sur ce que nous avons déjà eu. Je vais donc le nommer ici comme si je n'étais pas sûre d'une application de fitness, et nous n'avons pas encore décidé d'un nom, d'une marque ou quoi que ce soit d'autre, et ce n'est pas grave pour le moment. Je vais juste le copier-coller. FINMA va juste créer un deuxième écran pour moi et je peux l'appeler, je veux dire, au lieu d'une simple application de fitness, je pourrais l'appeler page de résumé Tout cela est une application de fitness, mais ceci et ceci est une page d'entraînement. OK, ou vous pouvez l' appeler écran, vous pouvez l' appeler comme vous voulez. Ensuite, je vais supprimer les sections qui, pour moi, ne sont pas intéressantes ou ne sont pas vraiment utilisables ou réutilisables. Alors voyons voir. Moi, je veux garder ce genre de livre, je vais le mettre ici. Nous garderons cette première ligne ou peut-être pourrons-nous la supprimer. Cela se concentre donc sur la forme physique ou revenons-en à la forme physique ou quelque chose comme ça. Ensuite, nous allons le supprimer. Nous allons l'aligner sur la gauche. Ici, nous avons des activités, vos statistiques, nous allons les récupérer. Peut-être voulons-nous que certains articles prennent la forme suivante ou je ne suis pas sûr, mais gardons cela à l'esprit. Maintenant, nous avons un problème, c'est que ces boutons ne s'adaptent pas, ils ne sont pas adaptatifs aux couleurs. Nous devons trouver un moyen ne pas trop mal paraître lorsque cela se produit. Tu devrais peut-être juste le rendre grisâtre. Je pense que c'est bien mieux. Le remplissage ici est blanc, mais ici c'est noir, ce qui est assez intéressant. Je veux dire, on vient de le changer. Nous pouvons également le rendre noir. Oui, je pense que c'est suffisant juste pour s'assurer que c'est lisible dans une certaine mesure. Une chose que nous voulons nous assurer, c'est que nous voulons également nous assurer qu'il est également clair avant de commencer, quelle page nous choisissons, quelle page est choisie en ce moment. Pour ce faire, nous pouvons venir ici. Nous avons déjà créé cet élément, n'est-ce pas ? Alors maintenant, il s'agit d'une fonctionnalité supplémentaire ou d'une chose supplémentaire que vous devez apprendre. Ainsi, lorsque vous créez un composant, peut avoir plusieurs variantes ou ce que nous appelons variance. Donc, vous dites que c'est le bouton de la barre de navigation, voici à quoi il ressemble Mais nous devons également nous assurer qu'il existe une version quelque peu surlignée Lorsque vous êtes sur la page de résumé, elle doit vous indiquer que vous êtes sur la page de résumé. instant, cela ne nous le dit pas. Nous allons donc cliquer sur ce bouton ici, qui contient Ajouter une variante, et cela va ajouter une autre variante ici. Donc, ce que nous allons faire, c'est ajouter un remplissage. Nous allons faire en sorte que cela remplisse peut-être 5 %, peut-être 10 %. C'est ce que nous allons faire. Et puis, quand nous viendrons ici, nous choisirons ce résumé. Et nous allons choisir la variante 2. Nous pouvons également lui donner un nom. Voyons maintenant à quoi cela ressemble. Cela semble un peu bizarre en termes de rembourrage, et peut-être devrions-nous ajuster notre rembourrage pour nous assurer qu'il fonctionne Donc, ce que nous pourrions faire ici c'est qu'au lieu d'avoir le rembourrage B huit, nous pouvons l'avoir B quatre, et ce serait alors cohérent Et oui, maintenant nous l' avons compris. Maintenant, nous devons juste nous assurer que ce bouton est également redimensionné, faire 55 par 55 et nous l'apporterons ici Maintenant, je vais les supprimer et je vais simplement les ajouter à nouveau. Voyons à quoi ils ressemblent. Nous y voilà. Maintenant, cela est mis en évidence et nous pouvons jouer avec le point fort. Je veux dire, devrait-il être plus clair ou plus foncé ? Encore une fois, juste pour vous donner une idée, comme je l'ai dit, nous ne prenons pas en compte les couleurs réelles du design d'Apple Nous le copions avec l'effet de verre, mais pour le reste, nous le faisons très rapidement. Oui, pas besoin de trop se concentrer là-dessus. Donc, ce que nous pourrions faire, c' est également le faire de telle sorte que lorsqu'il est surligné, il ait également une certaine couleur. Donc ici, par exemple, cela pourrait être cette couleur. Ou cette couleur que nous avions, mais comme vous pouvez le constater, mélange pas très bien. Je choisirais cette couleur car elle est très lumineuse. Donc, ce que nous allons faire, c'est venir ici et nous allons cette valeur par défaut et cette page est dédiée à la formation. Nous allons donc choisir la deuxième variante pour l'entraînement. OK ? Et ça ressemble à ça. Maintenant, comme je l'ai mentionné, nous n'avons pas d'éléments adaptatifs. Lorsque vous codez, vous pourriez dire que lorsque l'arrière-plan est clair, cela devrait avoir beaucoup plus d'opacité, 50 % ou quelque chose comme ça Cela garantirait essentiellement qu'il n' y aurait aucun problème en termes de visibilité. Mais maintenant, comme nous ne pouvons pas vraiment coder cela, nous ne pouvons pas vraiment suivre cette logique, vous vous retrouvez parfois avec des éléments peu lisibles. OK ? Vous pouvez donc soit procéder manuellement et dire, eh bien, dans ce cas, il n'y en a pas, l' arrière-plan n'est pas trop clair, peu importe, soit vous pouvez laisser le soin au développeur qui en décidera. OK ? Mais c'est une histoire pour un autre jour. Revenons-en maintenant au design. Maintenant, il est beaucoup plus clair qu'il s'agit du résumé et de la page de formation. Parfait. Alors maintenant, nous devons nous demander : à quoi s'attend-on normalement sur une page de formation ? Donc, personnellement, je m' attendrais dans une certaine mesure à ce qu' il existe des boutons qui m'aident à choisir quelque chose très rapidement, non ? J'adore ces petits boutons ou puces, quel que soit le nom que vous leur donnez, car ils sont très faciles d'accès et vous aident à accéder au contenu dont vous avez besoin. OK ? Mais il se peut que nous ayons un problème ici parce que dans cette section, il était clair que vous commenciez une activité, et peut-être pourrions-nous même le préciser avec le titre, le début de l'activité ou quelque chose comme ça. Mais ici, cela ressemble davantage à un filtre. Alors peut-être devrions-nous faire un peu attention à la façon dont nous formulons ces choses. Je veux dire, est-ce que tu commences une activité ? Ou filtrez-vous, vous savez, les leçons ou les vidéos que vous souhaitez voir ? Peut-être pourrions-nous le faire différemment. Créons donc une variante différente ici. Nous avons donc ce composant. Nous venons d'en faire une autre variante. Mais au lieu qu'il y ait des ombres et tout le reste, nous allons supprimer l'ombre , le remplissage, et nous allons conserver le trait, d'accord ? Nous avions un design en forme de trait, nous allons donc le conserver. Et voyons à quoi ça ressemble. Et pour ce faire, il suffit de sélectionner chaque puce que nous avons , puis de passer à la variante deux. Alors maintenant, vous pouvez voir la différence, la principale différence entre eux est qu'ils étaient remplis d'ombres. Maintenant, ils ressemblent davantage à des puces filtrantes. Ils sont principalement utilisés pour le filtrage. Et nous pouvons essayer de faire autre chose pour nous assurer que c'est le cas, je ne suis pas sûr. Il est compréhensible que ce ne soit que pour le filtrage. Peut-être pourrions-nous également changer les couleurs de l'icône. Pour ne pas donner l'impression que c'est interactif. Mais ce n'est qu'une idée. OK ? À mon avis, c'est quelque chose que nous pouvons faire pour essayer d'obtenir cet effet. Maintenant que c'est fait, nous avons des activités, nous pouvons simplement les supprimer et il va de soi que vous pouvez filtrer en fonction de celles-ci. Peut-être qu'ici, nous pouvons clarifier encore plus clairement l'activité. OK. Alors lancez l'activité. Tu peux courir, faire du vélo, nager, peu importe. Ici, vous avez les mêmes activités, mais elles sont juste séparées. Mais je dirais que cela n'a aucun sens que vous essayiez de regarder une vidéo sur la course à pied. Je ne pense pas que ce soit une chose. Donc, ce qui serait encore plus clair, c'est de trouver les bonnes catégories. Je dirais donc que les catégories appropriées seraient la musculation, non ? Comme des poids. Et puis ici on pourrait écrire haltère Nous pourrions écrire yoga comme un tout. Voyons donc s'ils font du yoga. Nous cherchons juste à méditer. Assurez-vous de filtrer gratuitement. Vous pouvez donc demander à une personne de prier, mais cela ne convient pas vraiment aux mains qui prient, quelque chose comme ça. Peut-être, euh, détente ou relaxation, spa. Je ne sais pas si cela le symbolise vraiment, mais disons que les mains prient. Mais comme je l'ai dit, il s'agit de la version gratuite. heure actuelle, nous n' avons pas les meilleures icônes, mais si vous voulez réellement développer une application concevoir ou si vous travaillez dans une entreprise, je vous recommande de vous procurer le package complet, l'abonnement, afin que vous puissiez obtenir toutes les icônes et il y en a beaucoup d'excellentes. OK ? Alors, que pouvez-vous faire d'autre ? Tu as du poids ? Vous faites du yoga ? Voyons voir. Je veux dire, je regarde sur mon téléphone. Laissez-moi consulter mon application de fitness et voir ce qu'ils contiennent. Ou peut-être appelons-nous cela de la méditation plutôt que du yoga. Et je ne suis pas sûr de ce qu'il y a là. Disons cardio, puis demandons à quelqu'un de courir. Et trouvons encore une chose. Oui, disons simplement le yoga, mais ensuite nous devons trouver quelque chose pour cela. Yoga, tapis, matelas, oreiller, tissu extensible. Je veux dire, n'y a-t-il vraiment rien qui symbolise le yoga ? Je veux dire, ils ont une personne qui médite, par exemple. Cela pourrait être une bonne chose. Ce sont donc tous les types d'exercices qu'ils proposent. Choisissons quelque chose de différent. Disons simplement que nous allons simplement courir. OK, nous l'avons donc ici. Nous n'avons pas beaucoup changé, mais nous avons des poids et de la méditation au début. Nous allons donc inscrire pourrait être intéressant encore, vous savez, à la fin du design. J'aime avoir de tels éléments parce que ce sont des points forts intéressants, mais ce sont aussi des fonctionnalités ou du contenu supplémentaires, disons. Lorsque l'utilisateur ne trouve pas ce qu'il cherche, il y en a toujours, vous savez, qui peuvent vous intéresser, peuvent vous intéresser ou peuvent être juste pour vous, pour être honnête. C'est aussi une bonne façon de dire que c'est de donner à quelqu'un un un sujet intéressant et de lui dire : « Hé, cela pourrait être chose pour toi, quelque chose que tu pourrais faire. Donc oui, gardons ça. Mais comme je l'ai dit, c'est du contenu supplémentaire. Je veux dire, idéalement, il devrait être filtré en fonction de la personne, de ses intérêts et de la page. Voici une page de fitness. Je veux dire, toute l'application est une application de fitness. Je viens de me rendre compte que ce n'est pas une page de fitness. C'est une page de formation. On pourrait parler ici de formation. Nous avons maintenant ce type de formation pour vous. Créons maintenant un élément ou un composant contenant une vidéo. Cliquez sur F et créez une jolie petite boîte. Créons quelque chose à regarder. Mais le fait est que le format que vous voyez ici est un format très courant pour les ordinateurs. C'est le format pour les ordinateurs. C'est un paysage. Mais de nos jours, de nombreuses applications, beaucoup de choses deviennent verticales. Ils sont en train de devenir des portraits, et c'est à cause du téléphone. L'une des choses que vous pouvez faire avec vos designs est de vous assurer qu'ils sont verticaux plutôt qu'horizontaux, car c'est vraiment mieux optimisé pour les téléphones. Donc, ce que nous pourrions faire, c'est donner ceci, je veux dire, quel rayon d'angle avons-nous ? 16 ans ? Nous pourrions donc lui donner 16. Et je vais prendre cette image pour le moment, la même image que nous avions juste à titre d'exemple. Je vais cliquer dessus et je vais choisir au lieu de recadrer, je vais dire remplir. Il va déterminer les dimensions pour moi et pour tout le reste. OK, alors maintenant nous l'avons ici, non ? Maintenant, le défi va être de l'agrandir un peu. Le défi sera d'écrire du texte, n'est-ce pas ? Donc, lorsque vous avez quelque chose d'horizontal, il peut être difficile d' écrire du texte dessus. Voyons voir si c'est Inter Inter et nous allons porter le score à 16. Tout ce qui est inférieur à 16 est généralement plus difficile à lire, d'accord ? Ces titres devraient donc être très courts. Je vais donc le rendre noir, même si nous ne pouvons pas vraiment en voir beaucoup pour le moment. Nous avons donc deux options, donc nous pouvons soit écrire sur l'image réelle, soit écrire en dessous. Pour des raisons de lisibilité, il est toujours préférable d'écrire dessous ou à côté car vous ne savez pas quel type d'image va apparaître Assurez-vous donc que c'est bien fait afin de tenir compte de toutes les possibilités. Vous savez, de cette façon, je sais qu'il y aura du texte noir et en dessous, il y aura du blanc, donc ça marche. Je vais donc en faire un composant, et je vais dire vidéo, d'accord ? Alors maintenant je vais le copier, et c'est ce que j'aime faire. J'aime bien le coller déjà et le coller à nouveau. Ensuite, choisissez-les et faites-en une mise en page automatique en touche Maj enfoncée dans A, puis je les rendrai horizontaux, puis je vais copier-coller, copier-coller. Ou nous n'en avons pas besoin, je veux dire, c'est suffisant. Maintenant, nous pouvons voir à quoi cela ressemble et nous pouvons en juger par nous-mêmes. Hé, peut-être que ça prend trop de place sur l'écran, changeons-le. Modifions-le un peu, et voyons ce que nous pouvons faire. Peut-être que nous pouvons réduire l' espacement entre eux, ou peut-être que c'est une mauvaise idée Seul le temps nous le dira. Essayons maintenant de trouver un joli petit titre, quelque chose de minimal. Encore une fois, je cherche une application juste pour voir comment Apple s'y est prise, par exemple, euh, et je ne le fais pas pour une raison précise simplement parce que mon téléphone est un téléphone spacieux, il est donc plus facile d'y accéder à partir de là. Je vois qu'ils ont de la force avec Kim, de la force avec Jen. Par exemple, ce sont les entraînements qu'ils ont, non ? Par exemple, ils disent HIIT avec Jamie Ray avec Brian. C'est donc vraiment cool parce que quand on y pense du point de vue de l'expérience utilisateur, j'imagine qu'ils essaient de vous connecter à la personne. Il s'agit donc d'un lien humain. La seule différence entre telle ou telle leçon, c'est que celle-ci est avec Brian et celle-ci avec Bakari, par exemple C'est donc quelque chose de vraiment cool, mais cela leur facilite aussi la tâche, car vous savez, vont-ils écrire HII T un, deux et trois ? Cela n'a aucun sens non plus. Mais essayons de le tester et voir à quoi cela ressemblerait sur notre page. Donc, si je dis HIIT à Brian, non ? C'est trop long. Le texte est trop long pour être honnête. Alors, faisons-en 12. Et voyons à quoi ça ressemble. Je vais donc le choisir , appuyer sur Play. OK, allons-y. Pour être honnête, le texte n'est pas trop petit et il est plutôt bon. C'est plutôt cool. Et oui, comme vous pouvez le voir, nous utilisons très bien cet espace, et nous pouvons même en ajouter un autre. De cette façon, vous pouvez ajouter un joli petit teaser. Vous pouvez voir, hé, il y a autre chose pour vous là-bas. Je vais juste réduire cet élément. C'est juste ici. Ensuite, j' aimerais prendre ce texte, le copier, le coller. Je me déplace avec le pavé tactile de haut en bas. Pour le faire passer par différentes choses. Maintenant, nous le faisons ici, nous le mettons ici, et nous devons appeler cela un entraînement. Et je vais les ajouter tous les deux dans une mise en page automatique. Donc, la distance ici est de huit, donc je vais faire en sorte qu'elle soit également de huit ici. Encore une fois, c'est le même principe, non ? Et c'est là que la cohérence est très importante, c'est de comprendre, hé, l'espacement entre ceci et cela et tout ce qui doit être égal dans une certaine mesure, pas complètement égal, mais il doit être cohérent Voici donc huit, huit, huit, mais entre toutes ces différentes sections à 16. Assurez-vous donc de toujours suivre les directives que vous avez définies précédemment. OK ? Alors continuons. Nous avons maintenant cette configuration. Gardons le titre vide ou par défaut pour le moment, nous allons donc simplement écrire le nom de la vidéo. Ensuite, nous pouvons renseigner ces informations. Nous pouvons donc appeler cela le Yoga avec Matt. C'est marrant parce que vous avez un tapis de yoga, et ensuite on peut dire HIT with Brian. Nous pourrions donc suivre cette voie ou suivre une autre voie, pour être honnête, parce que maintenant je pense que la façon dont Apple l'a fait est cool, mais bon, nous pouvons faire quelque chose de plus cool. Maintenant, laissez-moi réfléchir à ce qu'il faut faire. Il y a une chose que nous pouvons faire. Je vais le copier et le coller. Nous avons donc maintenant une ligne supplémentaire. Nous modifions donc directement le tout sur tous ces éléments. Maintenant, je vais appuyer sur Shift et A pour choisir ceci. J'en ai fait une mise en page automatique, en incluant uniquement le texte. Maintenant, je vais ajouter quatre et quatre rembourrages. Je vais ajouter un remplissage. Je vais rendre le remplissage un peu gris, ou peut-être que vous pouvez lui donner une couleur un peu bleue. Ensuite, je vais lui donner 24 coins arrondis. Ensuite, je vais écrire ici pour écrire un tag. C'est une étiquette de ce que nous allons vouloir dire. Permettez-moi d'ajouter un peu plus de rembourrage à gauche et à droite Je veux m'assurer que cela s'intègre également dans le texte lui-même. Je ne veux pas que ça prenne toute la place. Voyons voir ici c'était moyen, ça devrait être moyen. OK. Et ça devrait être à moitié audacieux, je suppose. Ou nous pouvons, je ne sais pas. Je veux dire, c'est audacieux, donc on peut s'y tenir. Nous pouvons garder les choses en gras, mais avoir beaucoup de texte en gras est également un peu audacieux. Restons moyens, d'accord ? Et ensuite, prenons un exemple. Ici, au lieu de dire yoga avec MP, on pourrait dire débutant, non ? Alors, des niveaux, peut-être en ajoutant des niveaux ou en ajoutant un objectif, quel en est le but ? Et on pourrait dire ici pro. Disons ici au milieu que je ne veux pas dire « moyen » ou « milieu » ou quelque chose comme ça ou je ne suis pas sûr. Je veux dire, moyen peut aussi avoir un mauvais sens de nos jours. Mais disons moyen. Difficulté moyenne, difficulté débutant, difficulté pro ou Max ou quel que soit le nom que vous voulez, ce n'est vraiment pas si important. Donc, ce que nous pouvons faire, prendre cette balise et en faire son propre composant. C'est quelque chose que nous pouvons déjà faire. Je vais le supprimer, en faire un composant, l' appeler tag, et je vais en créer trois variantes. L'un d'eux va commencer. L'un va être méga, l'autre va être dur ou pro. Je veux dire, au lieu de dire fort, nous allons dire que vous êtes pro, c'est du niveau professionnel. Ensuite, nous pouvons jouer avec les pros. Le rouge est jaune, le débutant est le vert, peut-être. Cela dépend vraiment de nous. Je vais juste l'ajouter par défaut en tant que débutant , puis chaque fois que vous voulez le changer, vous pouvez choisir Medium, Pro, etc. Encore une fois, vous pouvez revenir aux couleurs et dire : «   Hé, je n'ai pas vraiment aimé ça. Restons-le bleuté ou peut-être que le rouge peut parfois être considéré comme une connotation négative Ainsi, lorsque vous le rendez bleu, il devient plus positif. Mais peut-être pourrions-nous aussi augmenter un peu toutes ces couleurs avec un peu plus de saturation juste pour qu'elles soient claires. Alors maintenant, vérifions-le. OK, ça a l'air beaucoup plus joli, mais maintenant je pense que nous pourrions le rendre régulier juste pour qu'il ne ressorte pas trop Et en termes d'espacement, vous pouvez peut-être créer une mise en page automatique avec le tag, comme le titre du tag, et faire en sorte que quatre soient plus proches les uns Maintenant, nous avons le yoga avec Matt Beginner. Sinon, ce que nous pourrions faire, c'est donner une touche différente à chaque séance de yoga. Donc, par exemple, du yoga paisible, non ? Ensuite, vous pouvez dire HIIT, vous pouvez dire, euh, rapidement HIIT Vous donnez une petite image de marque, c'est du yoga, mais le but de cette séance de yoga est d'être très paisible ou relaxante. Je veux dire, le yoga est censé être ça de toute façon, mais on pourrait dire yoga intensif pour les pros, non ? Nous avons donc P. Quel type d' exercice pourrait être la course à pied intense ? D'accord, ou un marathon marathon-marathon, non ? Vous y ajoutez donc un peu plus, vous ajoutez de l' image de marque et vous intéressez les gens parce que je trouve que ce qu'Apple a fait est très sympathique mais pas fou, intéressant. Ici, je serais comme un marathon. Waouh. Oui, j'ai regardé la vidéo de Marathon Run. J'ai vu le défi qu'ils ont et je l'ai relevé. C'est peut-être comme une vidéo que vous mettez sur votre téléphone, puis vous courez et vous les écoutez. C'est comme avoir quelqu'un comme un ami qui court avec vous ou quelque chose comme ça. Je ne sais pas, en inventant des idées différentes. Mais n'oubliez pas que lorsque vous créez une telle chose, en créant des balises, par exemple, vous créez directives pour la personne qui ajoutera le contenu. Vous n'allez probablement pas ajouter le contenu vous-même, n'est-ce pas ? Vous devez donc garder cela à l'esprit. Lorsque vous créez un tel design, vous posez les bases pour que quelqu'un d'autre vienne remplir le contenu. Si vous n'aviez pas inclus le tag débutant ou le tag de difficulté, cela n'aurait probablement pas été fait. Celui qui l'a rempli aurait dit que ce n'est pas nécessaire et qu'il ne l' aurait pas fait. Mais cela aurait été négatif pour l'utilisateur. OK. Une autre chose qui m'est venue à l'esprit, c'est le temps. Tu sais, il me reste combien de temps ? Si je veux participer à un marathon, je ne suis pas là ? Est-ce que cela fait 2 heures ? 5 heures, 1 heure ? Je ne sais pas Par exemple, quel type de vidéo est-ce que je vais regarder maintenant ? C'est vraiment important de l'ajouter. Je dirais donc, copiez-collez ici et ajoutez de la durée. Vous pourriez donc dire que vous pouvez soit dire, , cela fait 20 minutes ou quelque chose comme ça, vous pouvez, vous savez, donner la durée plus exactement et dire, vous savez, c'est 1020, n'est-ce pas ? Quelque chose comme ça. Les choses de cette façon. Mais essayons de voir comment nous pouvons le formater de la meilleure façon. Choisissons une couleur ici. Peut-être celui-ci. Je ne veux rien modifier ici, donc je ne gâche pas les composants, je vais donc tout modifier directement ici. OK. Maintenant, nous avons le temps, mais je pense que c'est peut-être plus facile si nous écrivons 10 minutes ou quelque chose comme ça. Parce qu'il est plus difficile pour les gens de dire 1057. Oh, techniquement, c'est 11. Non, 10 minutes, 11. Vous leur demandez donc de calculer des choses. Non, dis juste 10 minutes, tu sais ? Et encore mieux, si c'est 11 minutes, ne dites pas 11 minutes, disons 10 minutes. Il suffit de l'arrondir pour qu' il ressemble à un joli petit chiffre. OK ? Encore une fois, comme je l'ai dit, ici, vous ajoutez plus de valeur. Il y a beaucoup de valeur ici. Pour celui qui va le remplir, il trouve maintenant un endroit où ajouter le titre. Ils ont un endroit où ajouter le temps et la difficulté. De quoi d'autre pourrait-on avoir besoin ? Je veux dire, je ne suis pas vraiment sûr. Allons-y maintenant et ajoutons-en un pour cette dernière chose ici. On pourrait simplement parler de HIIT intensif. TOUCHEZ et faites-en un badge professionnel. Je veux dire, ça s'appelle un badge ou une puce ou quel que soit le nom que vous voulez. Alors essayons de trouver des photos. Je vais généralement sur Pexels ou il existe un autre site Web appelé Free PIC. Nous pourrions simplement taper Yoga, par exemple. Je vais juste prendre les photos les plus faciles que je puisse trouver. Je veux dire, ça ne ressemble pas vraiment à la leçon. Maintenant, comme vous pouvez le voir, vous pouvez l'ajouter directement à l'instance. Je l'ai déjà montré, mais il suffit de le copier en guise de remplissage. Au lieu de le copier ici, ne commettez pas cette erreur. Si vous le copiez ici, cela ne fonctionne pas toujours, copiez le remplissage puis collez-le ici. Vous pouvez ensuite supprimer les autres remplissages précédents. Il en va de même pour le HIIT, je ne suis pas sûr de ce que c' est, pour être honnête Je pense que c'est un entraînement intensif de haute intensité ou quelque chose comme ça. Mais emmenons ce type ici. Une autre chose importante lorsque vous faites cela, comme vous pouvez le constater, nous faisons les choses très rapidement, mais ce serait également formidable si vous pouviez définir un style spécifique pour la personne chargée de remplir le contenu. Vous savez, choisir des images lumineuses, par exemple, choisir des images qui le sont, je ne suis pas sûr que les images sont bien éclairées, bonne qualité, et cela pourrait vraiment faire beaucoup de chemin. Je vais donc remplacer cette image ici et mettre l'image intensive ici parce que son entraînement semble un peu plus facile, même s'ils font la même chose. Mais il a enlevé sa chemise et il transpire. J'ai l'impression qu'il est vraiment en train de le traverser et qu'il fait noir, donc je veux que cela n'entre pas dans l'interface utilisateur ici. Le marathon convient vraiment, mais laissez-moi en faire une meilleure. Cliquez donc avec le bouton droit sur Copier l'image. sûr, l'image n'est pas de la plus haute qualité, mais pour moi, ça va. Nous y voilà. Nous avons maintenant ces images. C'est plein, pas génial. Comme je l'ai dit, vous devriez essayer de montrer l'exemple. Mais ici, nous essayons de le faire très rapidement, mais idéalement, vous devriez donner l' exemple du type de photos à ajouter ici et de celles qui ne devraient pas l'être. La dernière chose dont je veux parler est peut-être l'ajout d'un bouton de lecture. D'habitude, j'aime bien le faire moi-même. Je maintiens simplement la touche Maj enfoncée et je m'assure qu'ils ont le même angle. Ensuite, je m' y essaie un peu, l' étire et je le remplis. Maintenant, nous pouvons le copier et venir ici. C'est l'avantage d'ajouter cette image non pas en tant qu'image, mais en tant que cadre, car je peux alors y ajouter des éléments, comme un bouton de lecture. Maintenant, l'ajout d'un énorme bouton de lecture prend beaucoup de place. Je recommanderais de le redimensionner peut-être en le rendant un peu arrondi. De nos jours, c'est plutôt le style. Vous pouvez peut-être l'ajouter dans un coin, lui donner un peu d'ombre, juste pour qu'il soit visible. Vous pouvez également le rendre transparent, un peu pas trop. Tu pourrais le mettre au milieu. Cela dépend vraiment de vous, mais vous devriez voir ce qui fonctionne mieux, car les différentes plateformes le font différemment. Et cela montre vraiment aux gens que ce n'est pas une image, mais plutôt une vidéo. Nous pourrions donc le placer au milieu, pour être honnête, mais en essayant de ne pas trop occuper cet espace. OK, alors que pourrions-nous également faire ici dans cette section ? Une chose que je pense faire, c'est peut-être que nous pourrions ajouter des articles ou quelque chose comme ça, conseils, je ne suis pas sûre. Peut-être que cela pourrait être une question de nutrition. Je veux dire, ici c'est l'entraînement, mais nous allons parler de nutrition. S'agit-il d'une application nutritionnelle ? Je ne sais pas Mais ajoutons le titre. connaissances pour vous ou des articles pour vous ou nous pourrions simplement vous le dire pour votre information. L'important est de garder le ton intéressant. Je veux dire, parfois, tu sais, ici c'est une conversation. Vos statistiques d'aujourd'hui démarrent l'activité pour vous. Ici, ce sont des séances d'entraînement, c'est un peu plus formel, puis c'est pour votre information. Ce n'est pas si formel, mais c'est aussi un peu conversationnel Mais tout va bien. Assurez-vous simplement que le ton n'est pas partout. Nous allons donc maintenant créer un élément différent car nous voulons nous assurer qu'il s' agit d'un article et non d'une simple vidéo. Je vais juste le créer et non le rendre horizontal, désolé, pas vertical, mais plutôt horizontal parce que ce n'est pas une vidéo. C'est un vrai format, c'est un format Tik Tok, mais ce n'est pas le cas. Maintenant, j'essaie de l'apporter ici pour voir la taille, juste pour m' assurer qu'elle est bonne. Alors ce que je pourrais faire, c'est copier ces éléments ici. Et je vais juste les amener ici. Mettez-les dans une mise en page automatique, puis mettez-les dans une mise en page automatique, puis nous pourrions le faire de cette façon Je vais créer ce composant et l'appeler article. Même chose, copiez-le. Apportez-le ici, collez-le, collez-le à nouveau, faites-en une mise en page automatique, rendez-le horizontal, et ajoutons-le. Maintenant, permettez-moi de mettre ces menus et tout le reste, les mettre en haut pour qu' ils ne nous ennuient pas Nous allons lui donner une couleur différente pour qu'il soit clair et je vais le noter. Nous pouvons maintenant travailler là-dessus, en faire une mise en page automatique, lui donner huit espacements. Maintenant, il indique le nom de la vidéo, mais il devrait indiquer le nom de l'article. Nous allons modifier le nom et la durée de cet article. Je me suis rendu compte ici des durées que nous ne les faisions pas varier, alors faites-le comme ça et ensuite pour votre information Ici, nous avons plusieurs articles. Comme vous pouvez le constater, nous faisons preuve de simplicité en ce qui concerne les éléments. Vous n'êtes pas obligé de tout mettre en œuvre, mais cela dépend vraiment du design et du style. Nous avons utilisé beaucoup d'ombres ici. Nous pourrions essayer de les intégrer. Nous pourrions essayer de les intégrer à notre design. Permettez-moi donc de les ajouter ici, cela ajoute de la profondeur, un joli look, pour être honnête. Mais je ne suis pas totalement convaincu, mais je pense que c'est normal, car de cette façon nous pouvons ajouter certains des éléments que nous avions déjà, alors pourquoi pas ? Nous avons ici plusieurs articles, nous pouvons donc écrire quelques exemples. Mais avant cela, assurez-vous simplement que l' espacement est similaire Ici, il y en a huit. Nous pourrions également en faire huit ici, puis nous pourrons simplement noter les régimes protéinés. Je n'aime pas préparer les repas en tête-à-tête. Assurez-vous que le texte est déjà étiré. Donc, préparer un repas en tête-à-tête, et on pourrait dire 5 minutes de lecture. J'ai mangé cette information que beaucoup de gens lisent 5 minutes. Cela ne vous prendra pas trop de temps, alors ne vous inquiétez pas, d'accord ? Donc c'est vraiment cool. Ici, nous avons la préparation des repas. OK, alors peut-être que nous pouvons simplement dire applications ou entraînements. OK. Entraînements pour les abdos. Cinq séances d'entraînement ou abdos, puis on peut dire que c'est une lecture de 10 minutes ou 3 minutes. Je ne sais pas Au final, on peut parler de cardio ou conseils cardio donnés par des pros. Je ne sais pas Je veux dire, les gens ne peuvent pas le lire de toute façon, puis nous dirons que c' est une lecture de 10 minutes, puis nous choisirons les photos. Nous pouvons donc simplement prendre une photo de quelqu'un qui court pour que je puisse prendre cette photo. Maintenant, comme c'est vertical, tu dois t'assurer qu'il va être légèrement coupé. Vous devez vous assurer que la mise au point est au milieu pour que, lorsqu'elle est coupée ou redimensionnée, elle ait une belle apparence Nous avons ici des conseils sur le cardio. Je veux dire, ce n'est pas visible de toute façon, donc peu importe. Entraînez-vous pour les abdos, disons les abdos. Entraînement abdominal ou voyons quelqu'un entraîner ses abdos. OK. Nous y voilà. Ensuite, il y a la préparation des repas. Pas de préparation. Ça a l'air vraiment bien. Ça a l'air délicieux aussi. OK. Donc tu vas le prendre, le mettre ici, et le tour est joué Ça a l'air vraiment bien. Nous avons donc maintenant une page pleine. La dernière chose que nous puissions faire est peut-être de remplacer l'image ici parce que nous l'avons déjà utilisée plusieurs fois. Ajoutons donc un autre article. Écrivons simplement un exercice, alors copiez-le, collez-le et vous pourrez le mettre ici. Nous pouvons le recadrer comme avant, et je vais juste le redimensionner tout en maintenant la touche Shift enfoncée, mettre ce type ici juste pour qu'il soit visible. Supprimez l'image. Et maintenant je vais juste m' assurer qu'il est là. Comme je l'ai dit, il y en a plein. Vous pouvez avoir plusieurs remplissages Vous devez donc vous assurer qu'ils sont ordonnés de la bonne manière afin obtenir ce dégradé linéaire comme vous le souhaitez. Et ce que nous pouvons faire ici c'est que nous pouvons changer toute cette couleur de toute façon. Bleu et collez simplement le code hexadécimal ici. Mais je n'aime pas ça. Je n' aime pas ce à quoi ça ressemble en ce moment. Nous pouvons le rendre dur , mais peut-être 50 %. Ensuite, nous pouvons rendre tout ce texte blanc. Regardez comme ça s'est bien passé maintenant, nous avons changé certaines choses et maintenant ça a l'air beaucoup mieux. Alors au lieu de, je ne sais pas, peut-être pourrions-nous mettre des chiffres. Mais mettons le chiffre ici aussi. Je vais dire le meilleur moyen de perdre du poids soulevant des poids. a l'air bien. Ensuite, nous allons noter comme ça. Maintenant, nous avons un deuxième écran rempli d'informations, rempli de contenus offrant toutes sortes de possibilités. C'est complètement différent. Ici, nous avons un tableau de bord. Cela vous donne quelques informations. Il vous suggère du contenu. C'est génial. Mais ici, nous en avons inclus beaucoup plus. Vous savez, des tags où vous pouvez filtrer. Vous pouvez choisir certains entraînements. Vous pouvez en avoir pour information. Vous avez également du contenu pour vous. Vous savez, il y a beaucoup de choses que nous pouvons améliorer par rapport à cela, juste pour vous le faire savoir. Comme, par exemple, pour tous les entraînements, nous pouvons avoir un bouton indiquant tous les entraînements ou plusieurs entraînements. Même chose pour les informations. Nous pourrions l'avoir. Nous pourrions également avoir une fonction de recherche en haut, en fait, nous 16. Les bases du prototypage: Bonjour. Dans cette leçon, nous allons parler de la partie prototypage de Figma Maintenant, nous avons beaucoup parlé de l' aspect design, car il est en fait très riche en fonctionnalités, en flux, etc. La partie prototypage peut être un peu plus compliquée, mais elle n'est pas aussi complète que la partie conception Cela devrait donc être plus facile ou plus rapide à expliquer, mais vous devez vous entraîner un peu plus pour vous y habituer. Donc, lorsque nous parlons de prototypage, nous voulons dire différentes choses Maintenant, ce design que nous avons ici est techniquement appelé un prototype. C'est ce que l'on peut appeler un wireframe ou un prototype. Mais lorsque nous parlons de prototypage, nous parlons de jouer avec les interactions et les micro-interactions Donc, lorsque vous cliquez sur un bouton ou que vous passez le pointeur sur un bouton, qu'il a une forme différente une couleur différente ou autre, lorsque vous cliquez sur un bouton et que cela vous amène à une autre page, ce lorsque vous cliquez sur un bouton et que cela vous amène à une autre page, sont toutes des interactions et des micro-interactions , d'accord ? Lorsque vous faites défiler l'écran ou des choses comme ça, lorsque vous faites défiler la page vers le bas et vers la droite, gauche, peu importe, vous ouvrez une vidéo. Ce sont toutes des interactions. Cela signifie que le prototype ou le design cesse d'être une image statique. Pour le moment, il ne s'agit que d'une image. Tu vois, ça a l'air sympa. Vous auriez pu le concevoir sur un autre programme. Vous pourriez l' imprimer et c'est tout. Mais ce qui nous différencie, c'est que vous pouvez peut-être cliquer sur quelque chose pour obtenir un menu. Vous pouvez cliquer sur formation et accéder à la page de formation. C'est exactement ce dont nous allons parler aujourd'hui. Donc, la première chose dont nous voulons parler, savoir que sur le panneau de droite se trouvent les paramètres de prototypage, d'accord ? Ainsi, lorsque vous cliquez sur un élément, vous obtenez des options de prototypage ici Et nous allons parler de trois éléments principaux : les interactions ici , la position et le débordement Commençons donc par les interactions car il s' agit de la fonctionnalité la plus utilisée. Alors parlons-en. Comme nous l'avons dit, l'interaction se produit lorsque vous cliquez sur un bouton et qu'il fait quelque chose, que vous passez la souris dessus ou que vous interagissez avec lui à quelque titre que ce soit, et qu'il fait quelque chose OK. Nous pouvons donc le faire uniquement avec le menu. D'accord ? Commençons par le menu. Nous avons un résumé, des amis et une formation, et la chose la plus simple que vous devriez pouvoir faire est de cliquer sur entraînement, puis de vous rendre sur la page de formation. Nous pouvons donc le faire directement ici, mais je préférerais que vous le fassiez du côté des composants. Il est donc connecté à chaque page, à chaque instance. Donc, ce que vous allez faire, c'est accéder au composant ou à la partie que vous souhaitez rendre interactive. Dans ce cas, il s'agit donc de ce bouton Napbar. Vous pouvez donc cliquer d' ici sur Interactions pour en ajouter une. Ou ce que vous pouvez faire, c'est simplement passer la souris dessus et vous trouverez ces boutons Je suggère que vous le fassiez, puis que vous le mainteniez enfoncé et qu'il apparaisse avec une flèche. Pour l'entraînement, vous allez l'amener ce cadre et vous allez le lâcher. Dès que vous aurez fait cela, il configurera quelques paramètres pour vous. La première chose, c'est le déclencheur. Cela signifie que lorsque vous cliquez sur le bouton, lorsque vous appuyez dessus, il y aura une action. Cette action permet de naviguer vers une destination, la page de formation Comme nous avons pointé cette flèche ici, elle a déjà saisi toutes ces informations , puis elle vous demande simplement quel type d' animation souhaitez-vous que ce soit. Dans ce cas, c'est instantané et on peut vivre avec. Essayons-le. Voyons si ça a vraiment marché. À l'heure actuelle, nous allons ouvrir cette page. Nous allons donc cliquer sur formation. Et comme vous pouvez le constater, ce qui s'est passé, qu'ils nous ont immédiatement redirigés vers la page de formation, répétons-le. Entraînement BAM, c'est facile. C'est ça. Si vous cliquez ailleurs, cela ne fait rien. Si vous cliquez sur Nulle part, cela vous montre quels éléments sont interactifs et dans ce cas, c'est juste ici. Vous cliquez ici, vous y êtes B. Maintenant, il y a d'autres options, allons-y. Vous pouvez configurer le déclencheur de manière à ce que le déclencheur puisse être déplacé lorsque vous faites glisser ce bouton, lorsque vous placez le pointeur dessus ou lorsque vous appuyez uniquement sur lorsque vous appuyez uniquement une touche ou une manette de jeu, exemple si vous appuyez sur un bouton, si vous appuyez sur la lettre S ou R ou quelque chose comme si vous appuyez sur la lettre S ou R ou quelque chose Il y a plus d'options ici, mais je vous suggère de vous en tenir aux premières, car elles sont les plus courantes. Détachez le pointeur et faites glisser le pointeur, et la plupart du temps, les trois premiers sont très pertinents et très utilisés En ce qui concerne les animations, il existe différentes animations. L'un d'eux est Dissolve et Figma vous donne un aperçu de ce à quoi cela ressemble Lorsque vous cliquez dessus, c'est ce qu'il fait. Ils ajoutent des paramètres supplémentaires lorsque vous insérez une animation, ce qui facilite la tâche. Cela concerne le déroulement de l'animation, mais celui-ci est un peu plus avancé et sa durée. Cela fait maintenant 300 millisecondes. Voyons également à quoi ressemble Dissolve. Donc, lorsque nous allons ici, nous cliquons dessus. Comme vous le voyez, c'est un peu comme un fondu dans une animation. Il s'y dissout simplement. Et puis il y a Smart Animate, qui est vraiment cool car il s'occupe de beaucoup de choses S'il y a un texte ou un objet qui est passé de haut en bas, il l'emportera avec vous. Voyons comment il s'y prend. Comme vous pouvez le constater, cette carte est tombée en panne parce qu' elle reconnaissait que nous utilisions le même élément et le nombre de jetons a augmenté. Voir. Mais il s'agit d'une animation vraiment difficile à transformer en application. Je vous conseille donc de ne pas en abuser. Je veux dire, dans un tel cas, lorsque vous naviguez, c'est vraiment difficile, et cela n'a aucun sens Je veux dire, pourquoi voulez-vous que les gens voient que cet élément a diminué et que ces jetons ont augmenté ? Parce que ce sont désormais des éléments de design techniquement différents. Ils ne devraient pas, ils n'ont aucun lien avec ça, d'accord ? Je ne vous suggère donc pas de le faire lorsque vous le faites entre le passage d' une image à l'autre. Il y a une autre option, c'est-à-dire qu'il y a d'autres animations, emménager, donc ça entre comme ça, bouger vers l'extérieur, pousser. Maintenant, dans ce cas, je recommande vraiment l'animation push car vous allez du côté gauche vers le côté droit. Il est donc poussé, mais vous devez le configurer manière à ce qu'il soit dans la bonne direction. Dans ce cas, c'est laissé, donc ça se passe comme ça. Listons-le maintenant. Tu cliques dessus, et ça te prend comme ça. OK. Donc c'est vraiment cool. Cela fonctionne très bien et, logiquement, cela a du sens. Cela fait comprendre aux gens que oh c'est à gauche, c'est à droite. Mais comme vous pouvez le constater, même le menu est également supprimé, ce qui n'est pas idéal. Mais c'est pourquoi il y a ce petit bouton ici, cette case à cocher. Cliquez dessus pour animer les couches correspondantes. Cela signifie que s'il existe une couche correspondante comme celle-ci, elle l'animera Il va faire de l'animation intelligente pour cela. Voyons ce que cela signifie ici. Dans ce cas, vous cliquez sur entraînement comme vous pouvez le voir, tout est déplacé à l' exception des couches correspondantes. Dans ce cas, la couche correspondante est celle-ci. Je n'ai pas changé. Mais aussi, encore une fois, cette carte et ces jetons, ce qui est dommage, mais il existe une solution. Les corrections, vous allez accéder aux cadres et vous allez changer leur nom car ici, ce cadre s'appelle cadre 24 et ici ce cadre s' appelle également 24. Ce que vous allez faire, c'est que vous pouvez simplement dire 24 X et la même chose ici pour vous, 25 X, ou vous pouvez lui donner un chiffre différent. Maintenant, voyons voir. Parfait Absolument parfait Comme vous pouvez le voir, tout est poussé, comment activer l'animation, à part le menu. C'est exactement ce que nous voulons voir se produire. Et oui, juste comme ça, nous avons une très bonne interaction en cours pour nous. Maintenant, nous pouvons appliquer l'animation opposée, et si vous le souhaitez, vous pouvez la configurer vous-même ou simplement la copier d'ici, cliquer sur cet élément et le coller. Mais au lieu que la flèche vienne ici, tu peux la faire venir ici. Alors maintenant, testons-le. OK, il y a un problème. J'espère que vous l'avez remarqué et que c'est la direction à suivre. Nous allons juste inverser la direction, et maintenant voyons voir. Parfait Ce qui est cool , c'est qu' il y a maintenant un flux logique. Je veux dire, de préférence, nous devrions avoir un panel d'amis au milieu. Mais pour le moment, nous ne l'avons pas encore prototypé . Nous ne l'avons pas conçu. Vous passez simplement du résumé à l' entraînement comme ça. Et il y a beaucoup de choses qui ont du sens. C'est un flux logique de gauche à droite, de droite à gauche. Et en même temps, le menu reste fixe et c' est absolument parfait. D'accord ? C'est donc une façon d'animer les choses. Il y a d'autres choses à faire, d'autres choses que vous pouvez peut-être faire pour animer ou prototyper, comme on dit L'une de ces choses est donc le défilement. D'accord ? Donc, lorsque nous arrivons à ces pages, ce que nous pouvons faire pour activer défilement, c'est simplement le réduire Et puis, lorsque vous accédez à cette page, vous pouvez simplement faire défiler la page vers le bas. D'accord ? Il existe donc une autre façon de procéder. Lorsque vous le ramenez et que vous dites que c'est la taille de l'iPhone, donc je veux qu'il reste exactement de la même taille, vous allez accéder au panneau de prototypage Vous allez choisir la page. Comme pour l'ensemble du cadre, allez dans le panneau de prototypage et juste autour du comportement de défilement, vous allez voir un débordement débordement désigne le contenu qui s' écoule sur le cadre comme celui-ci. Par exemple, vous allez décider dès maintenant que le défilement est configuré par défaut, mais vous pouvez décider si vous souhaitez un défilement horizontal, vertical ou dans les deux sens Demandez-vous si la personne est censée faire défiler la page dans quelle direction ? Eh bien, verticalement. Ensuite, lorsque vous faites cela, vous descendez et vous activez le défilement Vous pouvez faire défiler la page vers le bas. Pas vraiment debout. Vous pouvez l'étirer , mais il ne défile pas. Mais ce qui est cool , c'est que vous pouvez avoir plein de choses différentes, mais elles sont cachées et vous pouvez ensuite faire défiler l'écran jusqu'à ce qu'elles soient cachées. Mais c'est une solution et comme je l'ai dit, si nous le réinitialisons, un moyen simple consiste simplement à l'étendre aussi longtemps que le cadre, puis à faire défiler la page vers le bas. Pratiquons la même chose ici. nous sommes un peu comme un slider ou un carrousel où vous êtes censé aller vers la droite Nous pouvons faire la même chose avec le défilement. Il suffit donc de choisir le cadre qui contient les objets, et vous avez la même chose ici, un trop-plein, il suffit de le mettre à l'horizontale Voyons maintenant si cela fonctionne. Maintenant, nous essayons de faire défiler la page, mais cela ne fonctionne pas, et ce n'est pas pour rien que ce paramètre de débordement ne fonctionne que si le contenu passe au-dessus du cadre C'est en train de devenir trop élevé, ça dépasse les limites. Comme vous pouvez le voir ici, les limites, tout le contenu est dans les limites. Je veux dire, vous ne pouvez pas voir le reste, mais c'est dans la boîte. La solution la plus simple consiste simplement à minimiser cette boîte, à la réduire pour qu'elle s'adapte au cadre visible. Maintenant, cela est considéré comme un débordement. Ça coule dessus. Vous pouvez maintenant faire défiler la gauche dans la direction que vous voulez. Vous pouvez pratiquer cela pour différentes personnes. Je peux le faire ici aussi, horizontalement, puis le réduire et ensuite nous pourrons faire défiler la page. Même chose ici. Même chose ici, horizontalement et adaptez-le. Maintenant, tout est défilable. Ensuite, comme je l'ai mentionné, nous pouvons agrandir le tout , puis nous pouvons faire défiler la page vers le bas. Tout ce que nous pouvons parcourir parfaitement. Mais il y a un problème. Un petit problème. Eh bien, c' est un peu plus avancé. Mais si vous remarquez que le menu fait également défiler le menu, n'est-ce Et vous savez probablement quand vous êtes au téléphone et qu'il y a un menu, certains éléments ne défilent pas vraiment vers le bas, autres restent fixes, que d' autres restent fixes, et c'est ce à quoi vous vous attendez normalement, pas qu'ils augmentent comme ça. Ils devraient rester au même endroit. Il existe un moyen simple de le faire, le plus simple est d'accéder à ces éléments ici, puis de les placer dans un cadre. Je vais les additionner, et je vais les mettre dans une mise en page automatique en maintenant Shift et A. Je vais leur faire ignorer à nouveau la mise en page. Parce qu'ils ont été remis à leur place, mais nous ne voulons pas les ramener chez eux. Vous allez simplement accéder au prototype pour vous positionner puis cliquer sur Corriger. Maintenant, testons-le. Maintenant, nous l'avons ici, et comme vous pouvez le voir, il est maintenant réparé. Lorsque vous montez et descendez, il reste en place et il effet de verre vraiment cool partout Juste comme ça, vous décidez où il va se trouver et vous le faites réparer. Vous dites que la position est fixe. Maintenant, nous pouvons faire la même chose ici. Nous allons en faire une mise en page automatique. Ensuite, nous allons lui dire d' ignorer la mise en page automatique , puis nous allons le mettre dans la même position. Nous pouvons copier la position Y ici et la coller ici pour être exacte, puis passer au prototype et la corriger. Maintenant c'est foiré. La raison en est que maintenant cela fonctionne comme un « voyons voir ». Cela fonctionne quand vous y allez, mais nous avons foiré l'animation, et je vais vous expliquer pourquoi et comment nous pouvons y remédier OK. Mais maintenant, ils sont tous les deux réparés, ce qui est parfait. Mais ce qui est embrouillé, c'est que maintenant ces couches ne sont plus considérées comme les mêmes couches Ils ne sont pas considérés comme correspondants. Et la raison en est que maintenant ils ont des noms différents, il faut donc vraiment y prêter attention. Ici, il est écrit 38 et voici 37. Donc, une solution rapide est de leur donner le même nom, c' est-à-dire frame 37, ou vous pouvez les appeler Navbar ou ce que vous voulez Maintenant qu'elles sont identifiées comme des couches correspondantes par Figma, cela fonctionne parfaitement Et comme je l'ai mentionné, vous pouvez tout faire défiler , tout est défilable Ce sont les microinteractions, les animations qui rendent vraiment une application super immersive et engageante Assurez-vous donc d' essayer de le pratiquer vous-même, d'essayer de le comprendre. Nous ne voulions pas trop vous compliquer les choses car le prototypage n'est pas la chose la plus facile C'est pourquoi j'ai fait en sorte que cela soit aussi simple que possible, mais il y a beaucoup plus de réglages, beaucoup plus de possibilités que vous pouvez apprendre par vous-même. Et ils pourraient vraiment faire passer votre jeu à un niveau supérieur. Allez-y, essayez-le, essayez différents prototypages, animations, interactions, peu importe ce que vous avez Merci de m'avoir écouté, je vous verrai dans la prochaine leçon. 17. Prévisualiser votre prototype: Maintenant, nous avons beaucoup appris sur les bases du design, du prototypage, des couleurs et de la typographie, et sur beaucoup de choses différentes Mais en fin de compte, ce que nous voulons vraiment faire ou ce que nous devons faire , c'est prévisualiser correctement nos créations, pour les voir par nous-mêmes et pour les montrer à d'autres personnes. Il existe de nombreuses façons de le faire, mais elles sont toutes simples, donc ne vous inquiétez pas, je vais vous les montrer. Tout au long du cours, nous avons déjà vu quelques-unes de ces méthodes, mais je voudrais juste faire un petit tour d'horizon. Le moyen le plus simple et le plus rapide de visualiser et de prévisualiser votre prototype est donc le plus rapide de visualiser et de prévisualiser votre prototype de cliquer sur le cadre que vous souhaitez voir, puis d' appuyer sur le bouton d'affichage Cela vous permet de présenter le design que vous avez ici. Peu importe le type de prototype, type de cadre que vous choisissez, il va le montrer. C'est le principal moyen de procéder. Mais il existe différentes manières de s'y prendre. Maintenant, une chose que vous pouvez faire, surtout si vous avez un écran plus grand, vous pouvez choisir l'option de prévisualisation. Cela permet d'ouvrir un écran de téléphone juste à côté vous pour que vous puissiez voir le design pendant que vous le faites. Pendant que je suis en train de concevoir ici, vous pouvez le redimensionner d'ailleurs, et vous pouvez même essayer de vous assurer que je place mon téléphone dans la vraie vie en ce moment Je le place à côté de l'écran pour m'assurer que le design correspond. Maintenant, je peux imaginer que c'est mon téléphone et je peux l' essayer et me demander si mon téléphone et je peux l' essayer et je peux lire le texte. Est-ce lisible, est-ce que les choses sont correctes, belles, peu importe. Et en même temps, je peux modifier les choses directement sur le fichier de design, ce qui est plutôt cool. C'est une autre façon de procéder. Mais il existe également ce que l'on appelle les flux. Lorsque vous cliquez sur un cadre et que vous accédez à l'onglet Prototype, ce que l'on appelle le point de départ du flux. heure actuelle, cela est considéré par Figma comme un flux et c'est ce qu' on appelle le flux 1 C'est un point de départ. Lorsque nous passons à l'aperçu, nous avons ce petit panneau que vous pouvez retirer et qui indique : «   Voici vos flux ». C'est le premier point de départ que nous avons choisi. Il y en a une autre ici, mais je pense qu'elle a été faite par erreur ou que Figma l'a peut-être mal identifiée C'est probablement ici. La barre de navigation, on peut la supprimer d'ici. Mais pour créer un flux, vous allez sur la page que vous souhaitez afficher et vous pouvez cliquer ici. Vous pouvez avoir un point de départ de flux et vous pouvez l' appeler page de formation, par exemple. Il vous indique de quel cadre il s'agit. Vous pouvez le changer simplement en choisissant ici et vous pouvez également lui donner une petite description. Vous pouvez donc dire ici que les utilisateurs peuvent s'informer et regarder des vidéos ou des articles relatifs à la formation. OK. Donc, lorsque vous allez ici, vous pouvez cliquer dessus, puis il vous indique exactement vous donne une description pour vous l'expliquer. Ce n'est évidemment pas pour vous, mais peut-être pour vos coéquipiers ou pour les utilisateurs qui testent, personnes qui testent ce design pour qu'ils puissent le comprendre. Mais je pense que les meilleurs tests sont effectués sans donner de description, sans donner d'informations. Je veux dire, vous voulez que les gens entrent et en fassent l'expérience de première main sans instructions supplémentaires ou quoi que ce soit d'autre. OK ? Mais c'est ainsi que vous pouvez créer ces points de départ de flux et les modifier. Et lorsque vous désélectionnez tout, vous trouverez vos flux ici Vous pouvez également modifier les noms et dire, eh bien, il s'agit d'un tableau de bord ou d'une page de résumé. Vous pouvez changer les positions, et vous pouvez également les prévisualiser directement, copier le lien du flux, le cadre. Tu peux voir de quel cadre il s'agit ? Oh, d'accord, celui-ci. Ça. C'est bon. Vous trouverez ici de nombreux paramètres et options utiles qui vous aideront à vous y retrouver dans votre design. Mais ce sont les principaux moyens de prévisualiser le prototype arrière. N'oubliez pas, bien sûr, que nous en avons parlé , des paramètres de prototypage. Nous l'avons configuré ici comme iPhone 17, mais vous pouvez changer cadre ou vous pouvez simplement ne pas avoir d'appareil. n'y a qu'un seul problème lorsque vous n'avez pas d'appareil, c'est que la longueur complète sera affichée de manière très simple, juste comme ça. Cela peut être un peu peu déplaisant. Assurez-vous donc que si vous le montrez pour des téléphones portables, vous avez un cadre, et que c'est immersif de toute façon de le montrer de cette façon. Mais au cas où vous deviez ou voudriez le montrer de cette façon, certains paramètres de prototypage supplémentaires sont disponibles lorsque vous êtes ici dans cette vue Il suffit donc de cliquer sur ce bouton, et il vous donnera des paramètres différents. Il y a donc la taille réelle. Donc cela vous montre, vous savez, la taille ou la taille supposée du cadre, d'accord ? Il existe une largeur et une hauteur de coupe. Ainsi, vous pouvez voir l'ensemble du cadre du début à la fin. Je ne le recommanderais pas vraiment. Ce que je recommanderais, c'est la largeur d'ajustement. C'est donc très similaire en ce moment, dans ce cas, à la taille réelle, mais cela correspondrait la largeur d'une manière qui ne soit pas, vous savez, exagérée Il est également réactif, mais si vous n'avez pas conçu votre prototype pour qu' il soit réactif, il aura l'air très déformé comme ça. Je ne le recommanderais pas non plus. Uniquement si vous avez créé votre design de manière réactive. Il y a aussi l'écran de remplissage, et encore une fois, cela n'a pas l'air beau , mais tout dépend de vos objectifs , de ce que vous essayez de faire, de l'apparence de votre design , de sa taille, etc. Je vous recommande de jouer avec ceux-ci et de voir ce qui vous convient le mieux. Pour moi, en ce moment, cela fonctionne plutôt bien car vous pouvez voir la navigation. Vous pouvez en voir un peu en dessous, mais pas trop. Mais je ne recommanderais pas la largeur de coupe pour la nuit. Ce n'est pas génial. s'agit donc quelques paramètres de prototypage différents qui peuvent vous aider à prévisualiser correctement vos conceptions car il s'agit de l'une des étapes les plus importantes Je dirais de prévisualiser votre design et de le partager. Ce sont des étapes importantes, car si vous avez un design époustouflant, que vous ne le montrez pas correctement et que les gens le voient d'une manière déformée, comme dans cette vue que nous venons de voir, il ne sera pas très bien vu . Je dirais donc que lorsque vous le montrez, assurez-vous que vous êtes bien préparé et que tout semble avoir la bonne taille et qu'il n'est pas étiré comme sur cette image Voici donc essentiellement comment prévisualiser votre prototype. Merci de m'avoir écouté, je vous verrai dans la prochaine leçon. 18. Partager et exporter: Ainsi, outre la prévisualisation de vos prototypes, une autre étape importante consiste partager et à exporter votre travail Comme nous l'avons mentionné, il s'agit d'une étape importante car c'est à ce moment-là que vous pouvez montrer votre travail et le partager avec des gens, des clients, des collègues. Il est donc important que vous fassiez les choses correctement, vous obteniez la bonne exportation, vous savez, vous leur donniez un lien de partage qu'ils peuvent consulter correctement et qui ne soit pas mal vu ou involontaire C'est ainsi que vous pouvez le faire très simplement. Commençons maintenant par le partage, car c'est un peu plus facile car vous avez un très gros bouton de partage à droite. Il existe donc deux types de partage différents. Vous pouvez partager un projet à modifier C'est pourquoi Figma possède généralement un fichier d'édition, un onglet d'édition, comme vous pouvez voir cette icône ici, puis un onglet de visualisation ou de prévisualisation Ainsi, lorsque vous cliquez sur Partager ici, vous partagez le fichier en tant que fichier de conception. Soyez donc prudent, car vous le partagez peut-être en pensant le donner au client pour qu'il le consulte, mais il verra ensuite toute cette vue complexe. Ils vont être bouleversés et ils vont voir des choses qu'ils ne devraient probablement pas voir. OK. Ce lien sert donc à le partager avec des personnes pour qu'elles puissent consulter le fichier ou peut-être même devenir collaborateurs ou commenter. Vous pouvez voir les paramètres ici, donc qui y a accès. Donc uniquement ceux qui sont invités. Ou n'importe qui, soyez prudent lorsque vous modifiez ces paramètres. Vous pouvez le configurer pour que tous membres du projet d'équipe puissent voir les personnes qui y ont accès, par exemple, ici, j'ai accès. Ensuite, ils vous montrent également d' autres options pratiques comme copier Dvmodlink, vous pouvez envoyer à quelqu'un juste un DevMDlink Cela signifie que si quelqu'un est développeur, il ne voit que ce qui est pertinent pour lui. Ils ne voient pas toutes ces options de conception. Vous pouvez également copier le lien de prototypage ou le lien de prototype C'est pour eux de le prévisualiser et vous pouvez le publier dans la communauté, obtenir du code intégré, mais ceux-ci sont un peu plus avancés Mais voici tout ce dont vous avez besoin. Vous pouvez copier le lien à partir d'ici, modifier l'accès ou copier Dvmodlink ou l'encre du prototype Une autre chose à faire est d' aller dans l'onglet d'aperçu, et c'est ce que j'adore faire car ici je ne peux pas me tromper. Il vous suffit de cliquer sur Partager le prototype. Il ne s'agit pas de partager comme ici. Il s'agit spécifiquement du prototype Share. C'est ici que vous pouvez décider, d'accord, copier le lien. Est-ce que ce sont uniquement les personnes invitées ou est-ce que quelqu'un a un lien ? Et ici, vous ne pouvez pas vraiment faire d'erreur. Dites comment vous pouvez partager un projet, mais vous devez garder à l'esprit que vous ne partagez pas un fichier ici, vous ne le partagez pas sous forme de fichier, mais plutôt sous forme de lien Web. C'est un lien basé sur le Web, ils doivent donc avoir Internet. Ils doivent disposer d'un navigateur leur permettant de surfer sur Internet. Je veux dire, voyons à quoi cela ressemble, je vais partager le prototype, et je vais le fabriquer n'importe qui. Vous pouvez également avoir un mot de passe, définir un mot de passe pour celui-ci, copier le lien, puis le coller y avoir accès. Je pense que cela va fonctionner parce que je suis déjà connecté en tant que moi-même J'y ai donc accès et je le consulte avec les paramètres enregistrés. Assurez-vous que les paramètres que vous avez définis étaient corrects et que vous êtes sur le bon rythme. avons maintenant terminé avec le partage ou plus précisément le partage d'un lien. Parlons maintenant de l'exportation. Il existe maintenant différentes manières d'exporter. Maintenant, vous pouvez exporter un élément ou un cadre complet. Il existe différentes manières d' exporter votre travail. À présent, vous pouvez soit exporter un élément seul, soit exporter un cadre complet, soit exporter l'ensemble du projet, tous les écrans. Laissez-moi vous expliquer comment cela fonctionne. C'est super simple. Vous allez accéder à l' onglet Design , puis vous allez cliquer sur un cadre lorsque vous descendez À la fin, vous allez voir Exporter. Lorsque vous cliquez dessus, plusieurs options vous seront proposées. Vous pouvez passer du format PNG au format JPEG, SVG ou PDF. Vous pouvez choisir n'importe lequel d'entre eux, ce qui est cool, c'est que lorsque vous cliquez dessus, vous choisissez le PNG, vous pouvez également choisir l'échelle. Voulez-vous qu'il soit exactement de la même taille ou voulez-vous qu'il soit deux fois plus grand ? Vous pouvez voir que la taille ici est de 402 x 963. Vous pouvez faire un point X, deux X, quatre X, et toutes ces options différentes vous permettent essentiellement de l' agrandir parce que parfois, lorsque vous lorsque vous exportez quelque chose sous forme d'image, la qualité n'est pas exactement au rendez-vous , ce n'est pas très bon. Pour être sûr, exportez-le en 1,5, deux X, trois X, juste pour vous assurer que la qualité est excellente. Et si vous avez quelque chose comme un design, un logo ou autre chose, vous pouvez l'exporter, vous pouvez l'agrandir. Vous pouvez apporter le design et l'agrandir beaucoup, ou vous pouvez simplement l'exporter d' ici comme s'il s'agissait d'un design beaucoup plus grand. OK ? Comme je l'ai dit, sont les types de fichiers sous lesquels vous pouvez l'exporter. Et avec le PDF, vous n'avez rien. Ainsi, avec le PDF, vous n' avez aucune option de mise à l'échelle. Vous pouvez également avoir plus d'options ici si vous connaissez bien ces paramètres, mais je dirais que c'est un peu trop complexe pour vous en ce moment Accédez simplement à la page Résumé des exportations et vous pouvez simplement le coller comme ça Ensuite, vous pouvez simplement cliquer sur OK, puis il est exporté. Vous pouvez également définir plusieurs paramètres d'exportation. Vous pourriez dire, je le veux au format PNG, mais aussi au format JPEG, un X, je le veux aussi au format PDF. Et ce qui est encore plus cool, c' est que vous pouvez choisir plusieurs cadres. Vous pouvez même choisir différents éléments. Vous pouvez choisir n'importe quoi, n'importe quelle couche, et l'exporter. Et vous pouvez dire que je veux tout exporter au format JPex. Ensuite, lorsque vous cliquez ici, le message «   Exporter cinq couches » s'affiche. Il va donc le faire pour toi. Vous pouvez exporter n'importe quel type de fichier, n'importe quel type de cadre, n'importe quel type de groupe, de cadre , peu importe, c'est possible et vous pouvez les faire ensemble. J'aime beaucoup cette fonctionnalité car elle facilite les choses. Vous n'êtes pas obligé de faire les choses à la main à chaque fois. C'est tout simplement simplifié pour vous. C'est ainsi que vous pouvez savoir, notamment grâce aux couches que vous pouvez exporter séparément ou encadrer séparément. Mais il existe également une fonction d'exportation ici. Ainsi, lorsque vous venez ici, vous pouvez exporter l'ensemble du projet. Essayons donc de le faire avec Export Project. Nous pouvons donc changer les paramètres, comme je l'ai dit, et cela vous donne ici un petit aperçu sympa. Maintenant, le point négatif, c'est que cela va tout exporter, y compris ces petits détails qui ne sont peut-être pas si importants. Vous voyez donc ici que lorsque vous cliquez sur Exporter, cela indique l' une des options sélectionnées. Alors, êtes-vous sûr de vouloir l'exporter et je veux l'exporter ? Cela va prendre un certain temps, mais finalement ça va marcher. Voilà à quoi cela ressemblerait. Il exporte le tout sous la forme d'un canevas, d'une seule page, ce qui n'est évidemment pas idéal. Je ne sais pas quel en est le cas d'utilisation, pourquoi vous voudriez le faire, mais ce n'est pas idéal. Personne ne peut regarder ça et se dire : « Oh, oui, c'est une application cool parce qu' elle ne ressemble pas à une application. Je ne vous recommanderais pas de le faire. Je retirerais ceci d'ici. Une autre façon de le faire est de passer par ici et d'accéder au dossier. Et exportez les cadres au format PDF. Maintenant, c'est une bien meilleure option car elle ne prendra que les cadres. Voilà à quoi ça ressemble maintenant. Il a simplement exporté les cadres, mais il les a exportés séparément au lieu d'un canevas entier, mais ils ont quand même exporté les composants et tout le reste. Ce sont donc les principaux moyens par lesquels vous pouvez exporter vos cadres. Maintenant, bien sûr, il existe d'autres moyens plus avancés de le faire. La simplicité est toujours meilleure. Essayez donc de ne pas trop compliquer ce processus pour vous-même et pour les Assurez-vous simplement d'exporter vos designs de manière à ce qu'ils soient beaux et faciles à visualiser, et c'est tout ce qui compte. Merci beaucoup de m' avoir écouté, je vous verrai la prochaine fois. 19. Projet de cours : créer votre propre conception d'interface utilisateur dans Figma: Il est maintenant temps pour vous de créer votre propre design d'interface utilisateur. Pour ce projet de classe, il vous sera demandé de créer une interface utilisateur très simple Figma en utilisant les techniques que vous avez apprises tout au long de ce cours Vous pouvez créer une application mobile une page de destination ou toute autre interface simple que vous souhaitez. Commençons par créer un cadre et une structure, puis par ajouter du texte, des couleurs, puis par créer quelques boutons. Assurez-vous de faire attention à l'espacement et la disposition générale pour que le design soit moderne et épuré Ensuite, utilisez la mise en page automatique et les composants pour organiser votre fichier de conception un peu mieux et plus efficacement, et assurez-vous de créer au moins deux écrans connectés afin pouvoir créer un prototype doté de certaines fonctionnalités de base. Une fois votre projet terminé, exportez vos écrans au format PDF, ou vous pouvez simplement partager les liens d'exportation, assurer qu'ils sont visibles publiquement dans les paramètres, puis partagez-les dans la galerie de projets Vous pouvez également ajouter une brève explication pour parler de votre design, expliquer ce que vous avez fait et peut-être défendre certaines de vos options de conception. Ce projet consiste pratique le flux de travail Figma pour débutants, mettre en pratique le flux de travail Figma pour débutants, de l' idée à la mise en œuvre et à création d'un prototype interactif à partir de celle-ci Alors allez-y, essayez des choses , expérimentez. N'ayez pas peur de faire des bêtises et amusez-vous bien. 20. Félicitations ! Et ensuite ?: Félicitations pour avoir terminé le cours. Vous avez maintenant appris les bases de Figma, qu'il s'agisse de naviguer dans l'interface créer des mises en page de base ou de créer des composants et C'est déjà un grand pas dans le monde de l' interface utilisateur et de l'UX design. La chose la plus importante à faire maintenant est de continuer à pratiquer. Essayez de recréer des interfaces que vous aimez, expérimenter différentes mises en page et styles, et de simplement créer des designs pour continuer à perfectionner vos compétences Vous ne l'avez pas encore fait, veuillez télécharger vos propres projets dans la galerie de projets afin que je puisse voir ce que vous faites. J'adorerais vraiment voir ce que vous allez trouver. Comme toujours, si vous avez apprécié ce cours, n' hésitez pas à nous laisser un commentaire. Cela nous aide vraiment à améliorer et à créer des cours encore meilleurs pour vous. Merci encore de votre participation et je vous verrai lors du prochain cours.