Construire un système de conception dans Figma à partir de Scratch - Classe maître UX UI

1. Ce que vous allez apprendre dans ce cours de système de conception: Bienvenue dans ma classe sur la conception de systèmes utilisant Figma. Dans ce cours, nous allons apprendre ce que sont les systèmes de conception, comment nous constituons notre système de conception et comment nous le convertissons ou le concevons en Figma. Et nous pouvons réutiliser cela dans nos projets avec des développeurs, avec nos coéquipiers et différents concepteurs. Avant de nous pencher sur les systèmes de conception, nous allons en apprendre un peu plus sur nos principes de conception. Quel est le but de vos systèmes de conception ? Quels sont les différents composants ? Quelles sont leurs qualités ? Comment doit être un composant ? Que sont les jetons, les règles, les thèmes ? Nous allons donc apprendre beaucoup de choses avant de nous pencher sur la conception de notre système de conception. Alors restez à l'écoute de moi. Nous allons travailler sur les grilles. Nous allons travailler sur des icônes, des illustrations. Nous allons travailler sur différents systèmes de grille, exposer beaucoup de choses, y compris nos boutons. Ensuite, nous allons créer des composants plus simples que nous allons créer. Les composants les plus gros sont appelés molécules. Si vous connaissez le système de conception atomique. C'est tout ce que nous allons couvrir dans cette classe. Nous allons créer un thème sombre, souvent une application d'apprentissage d'applications à l'aide de Figma. Et nous allons construire son système de conception. Et je vais partager avec vous mes techniques, comment nous allons utiliser les mises en page automatiques et comment nous allons utiliser différents composants et comment nous pouvons facilement échanger différents composants uns avec les autres ou nous peuvent facilement les manipuler. J'espère que vous apprendrez beaucoup de choses avec moi. Apprenons ensemble et commençons ce cours de système de conception avec moi. Je vous rencontrerai bientôt en classe. D'ici là, prenez soin de vous. 2. Introduction à le système de conception, les avantages et les extrants du système de conception: Dans cette vidéo, nous allons parler de systèmes de conception. Maintenant, les premières questions qui se posent même dans nos esprits sont de savoir ce qui est réellement conçu système. Pensez donc à tout ce qui se maquille dans n'importe quel produit. Vous avez, par exemple, n'importe quelle application mobile ou n'importe quelle entreprise, disons Google. Quelle que soit la mise en page qu'ils utilisent, les couleurs, les icônes, la topographie, le ton et la voix. Quels sont leurs styles, différents styles de designs. Ensuite, nous avons des conventions de codage. Tous ces éléments constituent donc un système de conception. Gardez à l'esprit que les systèmes de conception vont faire partie de toutes ces choses. Votre ton et votre style, votre grammaire, votre personnalité, produit, votre personnalité, ce sera votre style ou votre voix de votre produit. Ensuite, nous avons la typographie, les couleurs, différentes animations, même les micro-animations, font également partie de vos systèmes de conception. Comment le bouton va-t-il être cliqué quand, que va-t-il se passer lorsque vous allez cliquer sur le bouton ? Ou ce qui va se passer, quelle animation va y jouer pendant un certain temps. Tous ces éléments font donc partie intégrante de votre système de conception. Nous allons étudier certains des piliers du système de conception. Beaucoup d'entre vous, ils ont mal compris les systèmes de conception. Beaucoup d'entre nous pensent que composants ou la bibliothèque de modèles, ou simplement le guide de style, est votre système de conception, mais ce n'est pas le cas. Nous allons donc examiner cinq piliers du système de conception, puis nous allons examiner les différents avantages des systèmes de conception. Quelles seront les entrées, désolé, les sorties des systèmes de conception. Commençons et voyons ce que sont ces choses. abord, nous allons examiner les piliers du système de conception. Et ce sont en fait des directives de marque qui seront votre première étape. Les directives de marque sont principalement développées lorsque vous concevez les logos ou l'image de marque. Il inclut le ton et la voix, la personnalité de votre marque. Ensuite, nous avons, en fait, ce qu'il dit, c' est que c' est votre présence globale de votre marque ou de votre produit. Par exemple, si je suis une personne et que je sors au marché, tout mon habillage, mon ton, mon style de parole, mon style de marche, tout cela fera partie de ma personnalité. Ce sont donc les éléments qui seront définis dans les directives de votre marque. Ensuite, nous avons un guide de style. guides de style contiendront toutes vos typographies, vos icônes ou vos illustrations. Toutes ces choses vont en fait figurer dans le guide de style. Il s'agit principalement de conception au niveau atomique. Vous voulez dire que les éléments de base et les éléments de votre conception, les plus petits éléments de votre conception, les grilles, les grilles en font également partie. Ensuite, nous avons un langage visuel. Le langage visuel est en fait la sensation de votre produit. Si je n'utilise qu'un mot, ce sera la sensation de votre produit, vous ressentez réellement. Ensuite, nous avons la bibliothèque CSS, bien que ce soit à la fin de votre processus, mais c'est une partie très importante. bibliothèque Css ou le framework CSS est essentiellement le style de codage ou la bibliothèque de codage que vous utilisez. Chaque fois que vos codeurs utilisent une bibliothèque spécifique, vous devez, en tant que concepteur, respecter ces règles ou vous devez les adopter dans vos propres conceptions. Par exemple, si vous regardez Bootstrap, toutes les applications ou sites Web créés par Bootstrap, ils se ressemblent presque. De même, nous avons Foundation. Récemment, nous avons du CSS à vent arrière. J'adore vraiment cette créatrice. J'ai acheté certains cours auprès de ce développeur. En fait, c'est un concepteur plus développeur lourd d'abord en tant que développeur, puis il est allé au design. J'ai appris le design à partir de lui aussi. Ensuite, nous avons fondation, bootstrap, Bulmer, CSS et d' autres plateformes CSS. Ou vous pouvez également les appeler frameworks frontaux. Ils vont en fait vous aider à mettre en page l' ensemble de votre interface au format HTML et CSS. Le dernier est la bibliothèque de modèles. En fait, la meilleure bibliothèque est en fait la deuxième dernière. Mais pour l'instant, peu importe ce qui vous vient à l'esprit, je vais vous dire que la cinquième est la bibliothèque de modèles, qui sera vos composants, par exemple vos cartes, vos cartes reproductibles. Par exemple, vous avez des articles de blog. Il y a des paragraphes, des boutons et des en-têtes. Vous allez donc les combiner et créer une bibliothèque de composants. Parlons maintenant des avantages des systèmes de conception. Beaucoup de gens, surtout de grandes entreprises, si vous êtes un nouveau designer, ils vont résister au fait que nous n'avons pas besoin d'un système de conception. Et comment vous allez les convaincre. Les systèmes de conception vont en fait éliminer toutes les incohérences dans vos interprétations. Par exemple, j'ai conçu quelque chose et cela va être, par exemple, j'ai conçu un bouton et l' état du survol du bouton va avoir une animation de l'ombre portée. C'est ma propre perception, vous pouvez dire, de ce design pendant que j'étais en train de concevoir. Maintenant, quand ce design va à un développeur, il pourrait penser que même ne remarquez même pas ce léger changement dans l'ombre. Ces problèmes vont donc se multiplier de temps en temps et d'ici un an ou deux ans, il y aura beaucoup d' incohérences, ce qui s'appelle en fait la profondeur de conception de l'interface utilisateur. Cette profondeur va continuer à collecter. Et le système de conception ne peut en fait pas réduire cette profondeur de conception ni les problèmes d'interprétation. Mon développeur pense peut-être que c'est autre chose. Je pense peut-être que c'est autre chose. Ces interprétations vont être réduites. Ensuite, nous avons une source unique de vérité pour les développeurs et les concepteurs. Les développeurs savent que c' est le bloc qu'ils vont utiliser. Ils vont extraire ce bloc de code CSS et ils vont utiliser la plupart du système de conception. Ils sont également accompagnés d' exemples codés de ces composants. C'est une autre chose que beaucoup, beaucoup de designers qu'ils ne comprennent pas. Nous avons ensuite une approche cohérente, uniformité et cohérente de conception dans tous nos différents produits. La plupart des choses comme vous pouvez voir que vous utilisez Facebook, Google, toutes les autres applications, les grandes entreprises, elles se trouvent sur plusieurs plateformes ou même si votre application n'est qu'un site Web et une application mobile, application produit ou deux produits à facettes sont deux phases d'un même produit. Pourtant, ce système de conception peut vous aider beaucoup. Donc, si vous avez deux phases, vous pouvez montrer la même personnalité dans les deux directions de votre. Par exemple, si je suis une personne et que je porte un t-shirt et un pyjama ou peut-être des baskets. Et quand je tourne de l'autre côté, je porte un smoking. C'est vraiment irritant pour les utilisateurs. Par exemple, l'espacement des boutons de conception de votre site Web est différent et sur votre application mobile, il est différent. Cela va créer beaucoup de problèmes. Donc cohésion, cohérence entre vos différentes plateformes. Par exemple, une application similaire a la même apparence sur iOS et presque la même sur les téléphones Android. Cela peut donc être réalisé avec des systèmes de conception. Ensuite, nous avons une autre chose, c'est que les développeurs et les concepteurs n' ont pas à se battre encore et encore pour de petits problèmes de conception. Par exemple, je veux cette orange et le développeur dit, je veux cette orange, ce ton de l'orange. Il s'agit donc d'un très petit problème. Une fois que vous nous aurez conçu le système de conception, ces problèmes ne se poseront pas. Vous devez résoudre les problèmes réels de l'utilisateur ou les problèmes les plus importants que vous devez regarder dans l'ensemble. Plutôt que de régler les petits changements et les petits problèmes. Tout cela concerne les avantages du système de conception. Et regardons quels seront les résultats du système de conception. Beaucoup d'entre nous, nous ne savons pas quel sera le résultat. La sortie est en fait une documentation claire et à jour où tout est expliqué. Ensuite, nous avons des directives, des directives de conception, des règles , des styles, tout ce qui est facile à comprendre pour les développeurs et pour les concepteurs. Deuxièmement, il faut documenter les raisons pour lesquelles nous avons réellement choisi ce design ou cette animation. C'est en fait, que vous pouvez facilement justifier. Par exemple, après six mois, votre PDG ou votre responsable vous appelle pour vous expliquer pourquoi cette animation se déroule de cette façon. Vous pouvez leur montrer que c' était la raison derrière tout cela. Les utilisateurs l'ont vraiment adoré. Peut-être autre chose. Nous avons ensuite des outils et des processus qui vous aident à mettre en œuvre le système de conception au quotidien. En fait, par exemple, si vous avez choisi un Figma ou que vous avez choisi un framework CSS spécifique ou spécifique, vous pouvez dire conventions de dénomination. Il s'agit en fait de différentes terminologies qui peuvent avoir impact très important sur le moment où vous allez collaborer avec vos concepteurs et développeurs. De même, nous pouvons, dans différents processus comme par exemple, nous pouvons, par exemple, si je veux modifier l'ensemble du thème de mon application, par exemple, je veux une mise à jour ou mon PDG m'appelle pour me dire que nous devons mettre à jour notre système de conception vers un look plus moderne ou peut-être autre chose. Nous pouvons, nous pouvons le mettre en œuvre de nombreuses manières différentes. Nous pouvons implémenter cela dans un seul produit et voir quelle est la réponse des utilisateurs. Il existe de nombreux processus que vous pouvez développer pour implémenter ce système de conception. Et vous pouvez dire à vos développeurs ou aux chefs de produits que c'est ainsi que nous allons mettre en œuvre ce système de conception, cette terminologie de conception ou quelque chose de nouveau. Si vous apportez quelque chose de nouveau dans votre système de conception, nous allons l' avoir comme ça. Ce sera notre processus. Ce sont toutes les choses au sujet du système de conception. Ensuite, nous avons appris les piliers du système de conception ou les principales parties du système de conception. Quels sont les avantages du système de conception ? J'espère que cette leçon vous a plu. D'ici là, nous allons en apprendre beaucoup sur les systèmes de conception. Nous allons construire notre premier système de conception de cette catégorie. Et je vais bientôt vous voir dans une autre leçon. D'ici là, prenez soin de vous. Au revoir. 3. Déclaration des objectifs dans les systèmes de conception: Chaque fois que nous commençons notre système conception ou que nous construisons en tant que système de conception, la première chose nous avons à faire est construire une déclaration d'objectif de notre système de conception. Maintenant, pour l'énoncé des objectifs, nous allons poser seulement trois ou quatre questions simples à toutes nos parties prenantes. Designers, développeurs, chefs d'équipe produit, PDG, chef de produit ou autre, la personne qui est investie dans cette application. Les questions seront donc, la première question sera : quel est l'objectif de ce produit ? Alors, pourquoi est-ce important ? Pourquoi créez-vous ce système de conception ? Et ensuite, la troisième est comment cela va-t-il nous aider ? Et le quatrième est, qui s'adresse-t-il ? Il peut y avoir des réponses différentes pour différentes équipes ou différentes applications pour la même question, les mêmes questions. La réponse pourrait être que notre système de conception nous aidera à libérer notre temps pour nos concepteurs et développeurs de produits. Ils peuvent également se concentrer sur les problèmes majeurs rencontrés par les utilisateurs ou sur les problèmes majeurs auxquels sont confrontés les utilisateurs. La seconde est la raison pour laquelle est-ce important ? Il peut y avoir de nombreuses réponses à celle-ci, mais un exemple est ici. Si nous ne voulons pas innover, nos produits seront consommés par nos concurrents. Il se peut aussi que nos utilisateurs soient confondus avec l'incohérence de la conception de nos produits. Troisièmement, comment cela va-t-il nous aider ? Alors, comment cela va-t-il nous aider ? En fait, cela va gagner au fil du temps. Nous n'allons pas faire de même. Vous pouvez dire des discussions sur la couleur du bouton ou la taille du bouton. Cela permettra d'économiser beaucoup de temps et d'argent. Nous allons donc avoir des schémas répétables. Nous pouvons les réutiliser encore et encore. Cela va gagner beaucoup de temps et beaucoup de maux de tête pour nos développeurs et nos concepteurs. Maintenant, le quatrième, c'est à qui s'adresse-t-il ? Normalement, c'est pour toute notre équipe produit. Et ils vont l' utiliser, à l'exclusion du, je pense que le PDG ou le propriétaire de cette société, principalement les concepteurs, les développeurs, voire les chefs de produit. Peut-être devraient-ils aussi les utiliser de temps en temps lorsqu'ils développent des filaires ou des maquettes ou quelque chose comme ça. Voici donc les questions que vous allez poser à vos parties prenantes, à vos développeurs ou à vos concepteurs avant commencer à créer un système de conception, assurez-vous de créer ces questions. Vous obtenez au moins la direction selon laquelle il s'agira de notre système de conception. C'est le but du système de conception. Pourquoi est-ce important ? Comment cela va-t-il nous aider et à qui s'adresse-t-il ? Je vais donc partager avec vous toutes les diapositives. Il y a deux exemples ici, alors assurez-vous de télécharger ces fichiers PDF et tous nœuds avec ce cours, vous pouvez les réviser et chaque fois que je publie cela, vous devez les soumettre votre mission, vous pouvez facilement le soumettre. C'est tout au sujet de l' énoncé d'objectif du système de conception. J'espère que ça vous a plu, appris quelque chose de nouveau, nous vous rencontrerons dans une autre leçon. Passons à la nouvelle leçon. Prends soin de toi. Adieu. 4. Principes de conception et comment les trouver: Dans cette vidéo, nous allons en apprendre davantage sur les principes de conception. Quels sont leurs deux principaux types et comment organiser un atelier sur les principes de conception. Comment allez-vous rassembler toutes vos équipes et quelles questions, et comment nous allons élaborer ces principes, ces principes de conception. Commençons donc. Tout d'abord, nous allons introduire ce qui est réellement des principes de conception. Les principes de conception sont essentiellement lignes directrices qui vous aideront tout au long de votre processus de conception, du début à la fin, là où se trouve la direction de la conception. Alors pourquoi ? Parce que nous pouvons avoir une expérience plus alignée ou une expérience similaire sur différents produits ou plateformes. Maintenant, cela va devenir clair lorsque nous allons voir certains exemples. Et c'est délicieux et simple. Ce ne sont que des mots, mais ils comptent beaucoup. Ces principes sont appelés principes universels. Deliful va s'appliquer à tout un ensemble de produits. Mais si vous voulez accéder à un produit spécifique, un principe de conception spécifique, par exemple, comme le principe de conception Intercom, ils ont quelque chose comme des transactions de conception, Design Conversations définissent ce qui transactions. Cela signifie donc que les transactions sont très robotiques si vous vous rendez dans une banque ou un institut de ce type, les gens seront très formels. Ils vont nécessiter beaucoup de documents, de documents et de choses comme ça. Ils ne sont pas chaleureux et très accueillants, sont très sympathiques. Les conversations de conception plutôt que les transactions sont un des principes de conception, statiques , très spécifiques, selon lesquels nous allons avoir une sensation très accueillante ou très chaleureuse de notre produit. Pourquoi avons-nous besoin de ces principes de conception ? Il s'agit en fait de l'ensemble de votre design, du comportement de votre produit, de votre ton et de votre voix, tout sera en fait partie intégrante de vos principes de conception. La raison principale de cela est que nous allons utiliser ces principes de conception pour prendre de meilleures décisions de conception. C'est en fait, vous pouvez dire, que vous pouvez dire le principe de l'épée du design. Alors pourquoi avons-nous besoin de cela ? Nous, par exemple, nous avons deux ensembles de boutons ou styles de boutons et nous devons décider de l'un d'eux ou d' un thème, l' un d'entre eux nous avons plusieurs thèmes et l'un d'entre eux, il reflète notre design des principes comme une délicieuse simplicité. Et l'autre est un peu, vous pouvez dire formel ou vous pouvez dire un peu ennuyeux dans leur thème. Donc, lequel nous allons décider aller vers thème plus simple et plus ravissant, ou un bouton simple plutôt que le volume complexe ou formel. Ces principes de conception vont guider nos décisions de conception. Parlons de la façon dont nous allons organiser un atelier sur les principes de conception et comment nous allons élaborer ces principes de conception. La première étape consiste maintenant à rassembler tous les membres de notre équipe. Cela inclut les développeurs, les concepteurs, les rédacteurs et les experts SEO. Ensuite, nous avons des chefs de produits ou toute personne qui est investie dans le produit qui est liée à ce produit. Deuxièmement, nous allons obtenir une heure tous les matériaux, par exemple, note post-it ou des Sharpies aigres, des marqueurs ou tout ce dont vous avez besoin. Ensuite, nous allons remettre ces documents aux membres de notre équipe et leur demander d'écrire au moins cinq principes. Nous allons rassembler tous ces principes et nous allons les poster sur un tableau et nous allons les réorganiser et faire converger un thème. Et le thème est la prochaine étape. Ainsi, une fois que le thème sera formé, nous allons les combiner, en les votant et en les classant que ce sont les meilleurs principes. En fait, ce sont là les principes qui reflètent notre produit. C'est comme ça que c'est notre produit. Il s'agit donc en fait d'un sentiment plutôt que de solutions de conception concrètes. C'est en fait, cependant, le ton sera ce qui sera, vous pouvez dire, la personnalité de nos produits. Nous pouvons donc facilement les classer , puis les voter et nous allons en sélectionner cinq. Plus de cinq personnes vont les oublier. Assurez-vous donc qu'il s'agit de moins de cinq principes de conception pour votre produit qui feront partie de votre système de conception. J'espère que vous avez beaucoup appris et apprécié cette leçon sur les principes de conception, comment ils aident à prendre nos décisions de conception et comment ils vont faire partie de notre système de conception. Passons donc à la prochaine leçon et apprenons quelque chose de nouveau. Adieu. 5. 7 étapes pour créer votre système de conception: Dans cette vidéo, nous allons discuter de certaines étapes, de la façon dont nous allons construire un système de conception. Mais avant cela, avant d'entrer dans ce domaine, nous allons examiner différentes choses que nous avons déjà. Ainsi, chaque fois que nous allons commencer à construire notre système de conception, nous commencerons par ce que nous avons déjà. Il y a donc essentiellement deux ou trois groupes de parties prenantes qui seront présents pour examiner ce que nous avons déjà et quels problèmes nous avons déjà. Commencez donc par vos PDG, vos chefs de produits, votre responsable marketing, ainsi que votre équipe de développeurs et votre équipe de conception. Demandez-leur donc tous ce qu'ils ont déjà, ce dont ils ont besoin, quels sont leurs problèmes ? Nous allons demander à ces parties prenantes ce qu'elles ont déjà. Ce qu'ils ont déjà est appelé inventaire de l'interface utilisateur. Vous devez construire ça. Nous allons voir quelques-unes des étapes de la prochaine diapositive. Avant cela, nous devons examiner toutes les différentes plates-formes ou surfaces, essentiellement des surfaces qui feront partie de notre système de conception. Par exemple, il se peut que vous ayez besoin modèles de courrier électronique pour le marketing vous avez besoin et d'articles de blog, modèles ou de conceptions de billets de blog pour le marketing. Vous devez comprendre que votre système de conception ne sera pas seulement votre application Web ou mobile, mais qu'il va également toucher toutes les différentes surfaces. Par exemple, le marketing, par exemple, acquisition de nouveaux clients à partir de publicités Facebook. Il y aura donc beaucoup de surfaces différentes, vous pouvez dire, attachées à votre système de conception. Passons donc à la suivante et nous allons voir toutes les étapes. Nous allons maintenant examiner sept étapes différentes que nous devons prendre pour créer notre système de conception. Encore une fois, comme je l'ai déjà dit, que nous allons commencer par ce que nous avons déjà, donc nous allons faire l' inventaire de ce que nous avons déjà aujourd'hui. Nous allons faire l'inventaire de notre interface utilisateur. Il y a une leçon sur l'inventaire des EAU. Je vais vous montrer comment faire ça. La prochaine étape consiste à intégrer tout le monde avec votre système de conception, votre développeur, dans votre équipe de conception, vos PDG ou vos gestionnaires, ou d'autres parties prenantes, vous devez les intégrer dont nous avons vraiment besoin. pour développer notre système de conception. Troisièmement, les composants de base sont établis. Les composants de base sont donc essentiellement les principaux composants qui seront les éléments constitutifs de votre système a, votre application mobile ou de votre site Web. Sans cela, vous ne pouvez rien construire. Il s'agit des composants de base. Nous allons construire tout cela. Par exemple, vos boutons, listes déroulantes, tout ce qui se forme. Ensuite, nous avons des billets, des bulletins de vote, de la topographie, des échelles , de la typographie et des couleurs est, je pense, le principal composant d'association de votre système de conception qui va définir votre langage de marque, votre contour de conception. Il va donc décider où va réellement votre conception , dans quelle direction. Le cinquième est Strand, non ? Ils standardisent ces produits dans tous vos produits. N'essayez pas d'exagérer votre système de conception. Au début, il faut créer des choses simples. Vous n'avez pas besoin de créer beaucoup de systèmes de conception complexes sont très gros système de conception. Vous devez d'abord normaliser les portes, toutes les couleurs, les palettes de couleurs que ces topographies, polices de caractères sur toutes vos plateformes, site Web de votre laboratoire mobile, elles devraient paraître presque harmonieuses, Je ne pense pas identique, mais harmonieux. Et ils devraient avoir l'air de faire partie du même système, d'un produit ou d'une entreprise. Nous devons ensuite intégrer le système de conception à notre processus. Nous devons élaborer un processus sur la façon dont nous allons créer notre système de conception sur la façon dont nous allons mettre en œuvre cela. Comment nos conceptions de figma ou de notre système de conception dans notre outil de conception vont être traitées vers les développeurs dans quel format. Nous allons plutôt utiliser JSON en fonction du langage CSS ou du HTML, peu importe. Vous devez créer un processus. Ensuite, le dernier est de maintenir votre système de conception. Nous devons le maintenir. Parce que le système de conception va évoluer sans cesse. Vous ne pouvez pas disposer d'un système de conception statique pendant cinq ans. Vous devez créer de nouveaux composants. Vous n'avez peut-être pas besoin composant ou de bouton que vous devez créer. Peut-être qu'après un ou deux ans, devez-vous créer un nouveau thème pour l'ensemble de votre système de design ? Peut-être avez-vous besoin d'un thème sombre et d'un éclairage pour votre système de conception. Il y aura des changements que vous devrez maintenir. Il y aura donc une équipe de designers ou peut-être un développeur qui vous aidera à construire, à conserver ou à entretenir votre système de conception. C'est tout, ce sont toutes les étapes de la construction d'un système de conception. Sept étapes. Nous allons en discuter un peu plus dans les prochaines leçons. Ensuite, nous allons à Figma et nous commencerons notre système de conception de base dans Figma. D'ici là, prenons, voyons vous voir et nous retrouverons bientôt dans la prochaine leçon. D'ici là, prenez soin de vous. Au revoir. 6. Comment vérifier l'inventaire de l'UI ?: Dans cette vidéo, nous allons apprendre comment auditer votre inventaire de conception d'interface utilisateur ou ce que vous possédez déjà. Vous devez commencer par la vertu avoir déjà un protocole d'entente ou construire un système de conception. Il y a quelques étapes. Je ne vais pas être très élaboré à ce sujet ni en faire une très longue conférence. Il s'agira d'une courte vidéo de deux ou trois minutes, et nous allons voir quoi, comment auditer notre inventaire UA. La première étape consiste donc à prendre les captures d'écran de tous les différents écrans. Maintenant, ce que nous recherchons, nous recherchons des incohérences. Gardez cela à l'esprit. Nous recherchons des incohérences entre les couleurs, les tailles de diaphyse et de typhée, les tailles de police. Ensuite, nous recherchons des incohérences dans les styles, peut-être vos dégradés. Il faut prendre ces incohérences. Prenez les captures d'écran, vous devez regarder tous les écrans que nous avons déjà conçus ou construits. Si votre entreprise ou votre produit est neuf, vous n'avez rien construit. Ce n'est pas ce dont vous avez besoin. Cela s'applique si l' entreprise a déjà construit quelque chose et que vous devez vérifier l'inventaire de l'interface utilisateur. Prenez donc ces captures d'écran de toutes ces incohérences, puis nous allons les regrouper dans différentes catégories telles que l'en-tête de navigation, menu déroulant, les cartes ou quelles que soient ces différentes catégories. Ensuite, nous pouvons également sous-catégoriser les états du bouton J'aime. Il peut y avoir des différences dans les états des boutons. Ensuite, nous devons montrer ces incohérences au PDG, à votre équipe de développeurs ou à votre équipe de conception qu'il s' agit des incohérences entre vos différents produits, sur vos différentes plateformes. Et c'est tout. Nous devons lutter contre ces incohérences. Nous devons les limiter. Nous devons les unifier en un seul système de conception. Je vais partager avec vous un article écrit par ici, nous avons l'article que je pense qu'il est écrit par Je ne suis pas sûr. Brad Frost. Brad Foster est un gars célèbre. Il s'agit de ces molécules, atomes et de tous ces systèmes de conception. Vous pouvez voir ici l' exemple du site Web de ma banque. Et ici, vous pouvez voir l'incohérence ANS dans les conceptions de boutons. Il y a comme je pense qu'ils ont dix types de boutons différents. Il existe différents styles, ils sont de tailles différentes. Il existe plusieurs incohérences dans tous ces boutons. Vous pouvez donc voir que ce ne sont que des captures d'écran. Il a pris. Un autre ici. Vous pouvez voir simplement le bouton En savoir plus ou Commencer avec cette flèche. Il comporte dix variantes différentes et c'est vraiment frustrant. Ici vous pouvez voir pour chaque C, vous pouvez voir ici qu'ils ont toutes différentes incohérences peuvent insister dans le bouton. Vous pouvez voir les tailles, même les dégradés, ils sont différents. Il s'agit d'un gris total, il s'agit d'un dégradé grisâtre et c'est un peu différent de celui que nous avons deux différents, vous pouvez voir l'inscription et la suggestion qu'ils ont deux dégradés différents. L'un est un peu plus sombre et l'autre est un peu plus léger. Vous pouvez voir le paiement avec PayPal ou l'ajouter au panier. Je pense qu'ils signifient des actions différentes, mais ils ont la même couleur. Vous pouvez voir comment vous allez découvrir différentes incohérences et vous devez les signaler. Vous devez commencer par ces audits d'interface utilisateur. Vous devez donc créer un fichier séparé dans Figma ou n'importe quel logiciel que vous utilisez. Prenez ces captures d'écran et regroupez-les dans différentes catégories et présentez-les à votre direction. Il s'agit de savoir comment auditer votre inventaire d'interface utilisateur. J'espère que vous avez apprécié cette leçon et que vous en avez tiré quelque chose, de bonnes connaissances. Nous vous verrons bientôt. Je vous verrai bientôt dans la prochaine leçon. D'ici là, prenez soin de vous. Au revoir. 7. Quels sont les composants du système de conception: Cette vidéo est consacrée aux composants. Ce sont les composants de notre grille ou comment construire un bon composant, et comment les trier, comment les catégoriser et ce qui devrait être présent dans un composant dont il est le, cela donne le plus de valeur. Commençons par voir comment nous allons les nommer, comment nous allons les catégoriser. Que devrait-il être présent dans le composant ? La première chose est qu'il existe deux principaux types de composants. Comment allons-nous construire un composant. Essayez de voir quelle est la chose ou l' élément de design le plus fréquemment utilisé par Lee sur votre conception. Par exemple, les boutons vont être utilisés encore et encore, taxes qui seront utilisées encore et encore. titres, ils vont être utilisés encore et encore. Tous ces éléments peuvent être des composants. Il pourrait y avoir des composants plus petits, il pourrait y avoir des composants composites majeurs qui sont des composants plus grands que l'on appelle molécules. Nous allons donc d'abord examiner les composants haute fréquence, les composants qui seront utilisés encore et encore. Deuxièmement, nous allons voir quel composant va montrer l'essence de notre marque ou de notre salon. Vous pouvez voir chaque fois qu'un client regarde ce composant, il va deviner que c'est le produit de Google. Voici Airbnb. Nous devons, ces composants, ils ont des composants de grande valeur car ils vont montrer votre marque. Ils vont raconter l'histoire de votre marque. Vous devez donc aussi les classer par catégories. Vous devez également créer des composants haute fréquence à haute valeur ajoutée . Qu'est-ce qui est différent ? Vous pouvez dire différentes propriétés d'un bon composant. Donc, d'abord, c'est utile. Chaque fois que vous créez un composant, il doit résoudre notre problème de conception. S'il ne résout pas un problème de conception, je pense qu'il ne s'agit pas d'un composant. Deuxièmement, est-ce réutilisable ? Réutilisable ne signifie pas que nous devons utiliser le même bouton encore et encore. Réutilisable signifie que nous pouvons facilement changer de couleur et de forme. Il n'est pas bon pour un seul cas d'utilisation, ou il n'est pas utilisé uniquement sous forme de formulaires. Vous pouvez les utiliser n'importe où. Troisièmement, il doit être flexible. La flexibilité provient, vous pouvez changer sa couleur, changer sa taille, changer son style. Ce sont donc trois choses qui vont le rendre flexible, la taille, la couleur et le style. Vous pouvez peut-être définir ce même bouton et l'utiliser ailleurs. C'est-à-dire que je vais vous montrer quelques exemples ici. Voyons voir, voyons un exemple. Ici. Vous pouvez voir, laissez-moi vous montrer. Vous pouvez voir ici, si vous regardez cette page Airbnb, ce composant plus important, ce composant d'en-tête supérieur où nous avons Afficher toutes les photos très spécifique à Airbnb. Chaque fois que vous le montrez, tout ce produit, tout ce composant, le plus gros composant, n'importe où n' importe qui va deviner qu'il s'agit du site Web Airbnb. Encore une fois, cette composante ici, ce 13$ par nuit, tout ce bloc de carte de prix de carte ou carte de départ montre en fait l'essence de toute cette marque, cette entreprise de trous ou ferme. Un. Cela va être très, très unique à ce produit. Il s'agit donc de composants de grande valeur. Passons à la réutilisabilité de la flexibilité d'un composant. Vous pouvez voir ici, ici nous avons vérifié la disponibilité, un bouton très bien conçu. Et si nous nous refroidissons ici, vous pouvez voir que c'est encore un bouton montrant les 11 commodités. Et c'est la même forme, la même hauteur, les mêmes courbes des bordures, la rondeur des bordures, les coins et le même style, la même taille, tout, même la taille du texte est la même, juste les couleurs sont différents et il y a des logiciels de style différents, ligne de bordure mince. C'est ce qu'on appelle la flexibilité d'un composant. Il s'agit donc d' un même composant, mais avec un style différent. Voilà donc ce que vous devriez avoir dans un composant, réutilisabilité, la flexibilité dans la résolution d'un problème. Par exemple, vous pouvez voir ici que ce bouton montre tout ce que cet endroit va offrir. Il cache en fait certaines fonctionnalités. Donc, si vous cliquez dessus et cela va s'afficher. Dans les 11 commodités différentes ici. Similaire, mais ce bouton, cela résout en fait un problème très unique, qui est en fait une caractéristique unique du produit qui est en fait vérifier la disponibilité. Cela va en fait réserver ou vous montrer la disponibilité de cet endroit. De même, vous pouvez voir ce bouton, c'est totalement différent. Il a une taille plus petite, il a une icône, il a moins d'espacement autour car il sert un but différent. Tout à fait. Il va vous montrer toutes les photos. Il s'agit de styles de boutons différents et ils ont des objectifs différents. Bon, donc c'est ça. Passons à la diapositive suivante. La question suivante est de savoir comment nous allons les regrouper ? Comment allons-nous nommer ces composants ? C'est une question très importante. La première chose est de toujours les catégoriser en fonction de leur objectif. Donc, si vous avez des en-têtes ou des textes, ils seront assis sur une seule page, page de guide de style où vous allez styliser tous les textes. Ensuite, nous avons un but comme par exemple, nous avons une page de paiement. Nous avons une page de propriété Airbnb, par exemple, supposons que nous ayons une page de propriété. Nous allons être désolés. Nous allons regrouper toutes ces cartes ou tous les composants associés qui vont s'asseoir sont liés à cette page spécifique ou à cette fonctionnalité spécifique. Vous allez les regrouper comme ça. Cela va donc vous aider à créer des plus grands ou à regrouper de plus grands composants comme nous avons des cartes. Nous ne pouvons pas programmer ces cartes sur différentes pages. Par exemple, toutes les cartes liées à la page produit, nous devons les conserver sur une seule page. La prochaine fois, chaque fois qu'un nouveau designer arrive, il peut facilement voir que c'est le cas, ce sont tous les composants liés à notre page produit. C'est ainsi que vous allez regrouper vos composants. Ensuite, permettez-moi de vous montrer quelques-unes des conventions de dénomination. Par exemple, les titres. Nous pouvons avoir la méga position H1, H2, H3. Nous pouvons également les nommer en fonction de ce que les codeurs utilisent réellement. Notre blog familier avec le titre de tableau de bord. Vous pouvez voir que ce blog de point-dash est très lié à l'objectif de ce titre plutôt qu'à sa taille. Je catégorise ou utilise le nom fonction du but de cette rubrique, que ce sera le titre du blog, du billet de blog. Ensuite, nous avons des cartes, cartes de prêt, une carte d'inscription, un pied de page, une grande. Il s'agit de voitures différentes qui seront payées spécifiques ou vous pouvez dire que ce nom indique le but. Le troisième est Button. Ne nommez jamais vos boutons comme un bouton bleu, bouton rouge ou un bouton vert. Cela ne montre ni ne raconte l'histoire d'un but. Vous devez leur nommer les boutons d'action principaux. Boutons d'action secondaires. Les boutons déroulant sont peut-être que vous pouvez également les appeler boutons de paiement ou bouton de page de paiement, quelque chose comme ça. Cela va montrer le but de ce bouton. Permettez-moi donc de vous montrer l'exemple. Permettez-moi de vous montrer à nouveau la même page ici, Airbnb que vous pouvez voir ici, si vous regardez ce bouton rouge rosé, c'est en fait le bouton d'action principal ici. C'est donc le bouton principal ici sur cette page. Si vous regardez tous les autres boutons, ils ne montrent pas beaucoup de bop. Bop signifie qu'ils ne sont pas très visibles, qu'ils sont un peu tamisés, ou qu'ils ont été limités dans leur style. Et vous pouvez dire saturation. Vous pouvez voir qu'il s'agit d'un bouton gris, blanc et gris à nouveau ici. Si nous regardons ici, c'est encore un bouton blanc grisâtre. Il n'a pas de couleurs. Ensuite, si nous descendons, contactez l'hôte à nouveau. Bouton terne et gris mélangé avec, presque mélangé à l'arrière-plan. Mais vous pouvez voir ici, si nous le laissons tomber, vous pouvez voir que la disponibilité est toujours haut et cela vous montre qu'il s'agit d'une action principale, mais vous devez les nommer qu'il s'agit d'un bouton d'action principal. Et vous pouvez voir ici ce style est en fait notre bouton d'action secondaire ou notre bouton d'action tertiaire. Il s'agit donc la hiérarchie et du but intégrés à votre système de conception. J'espère que vous avez apprécié cette leçon et appris quelque chose de nouveau. Je vous rencontrerai bientôt dans la prochaine leçon. D'ici là, prenez soin de vous et adieu. 8. Comment la hiérarchie des composants fonctionne dans les systèmes de conception: Dans cette vidéo, je vais parler différents niveaux ou hiérarchies de composants. hiérarchie ne signifie pas que les composants seront les plus importants. Il s'agit de savoir quelles sont les différentes classes de composants, de base à avancée. Le premier est en fait vos composants de base ou stationnaires qui seront vos boutons forment vos champs de saisie qui sont en fait, vous êtes aussi vos icônes. Ils vont se situer au niveau de base ou de base. Nous avons ensuite des composants composites. Ce sont les composants qui seront un peu plus gros, mais ils vont être fabriqués en combinant deux ou trois composants. Par exemple, nous avons un en-tête sur la navigation qui va combiner différents liens et peut-être un bouton et un logo. Il s'agit d'un composant composite. Ensuite, nous avons des conteneurs. Les conteneurs sont en fait, par exemple, une section, par exemple, j'ai un conteneur de cartes de nouvelles. Ce sera donc un conteneur, il aura 1234 nouvelles différentes. Je vais vous montrer les exemples. Ne vous inquiétez pas pour l'instant. Nous avons donc une mise en page. Le dernier est la mise en page. Nous devons montrer aux développeurs que vous allez mettre tous ces conteneurs dans une page. Ce sera la dernière partie. Assurez-vous que chaque fois que vous créez un composant, vous devez indiquer son objectif, ce qu'il résout et quelle en était la raison. Vous avez également un document. Permettez-moi de vous montrer quelques-uns des exemples. Et voici le New York Times. Vous pouvez donc voir en haut que nous avons cet abonnement maintenant. s'agit en fait d' un composite, Il s'agit en fait d' un composite, d'un composant ou d'un gros composant et il y a un bouton, texte et des logos ici. Si nous descendons, vous pouvez voir ici, c'est le premier. Il s'agit là encore d'un composant composite. Ou vous pouvez voir notre conteneur, peut-être un conteneur car il s'agit d'un en-tête et il a de l'espace. Beaucoup de styles sont comme cette navigation, c'est en fait la navigation est un composant composite. Ensuite, nous avons deux boutons. Ensuite, nous avons cette température, date et tout ce qui est ici. Il s'agit donc en fait d'un composant, un composant composite, et il fait également partie du conteneur de mise en page. Il s'agit en fait d'un conteneur. C'est donc en fait notre tête ou notre tête de mât. Ensuite, vous pouvez voir à gauche que nous avons de très grandes nouvelles qui sont en fait un composant très spécifique spécifique à cette marque ou à ce New York Times. Et vous pouvez voir que ce colorant craint le style. Ce petit texte, super x. Il montre déjà que c'est une nouvelle du New York Times. Sur la droite, vous pouvez voir encore une fois que nous avons une nouveauté sur la droite, et il s'agit d'un élément totalement différent. Sur la droite, nous avons un conteneur séparé qui contient toutes les nouvelles différentes. Sur la gauche, nous avons un conteneur qui est en fait de 60 ou 60 %, soit 70 % de la largeur et qui ne contient que des nouvelles différentes dans la mise en page de haut en bas. En fait, cela va aider à construire la mise en page. La mise en page sera que nous avons un nom de fonctionnalité ici. Ensuite, nous avons une petite composante, petites nouvelles en direct, quelque chose ici. Ensuite, nous devons faire des nouvelles ou de mauvaises nouvelles. Ensuite, nous avons de nouveau une petite nouveauté en vedette ici. Je pense que c'est encore une fois, le même style caractéristique, on peut voir presque la même chose. Juste le texte. Le traitement par Dex de la rubrique est différent, tout est pareil. Vous pouvez voir qu'il s'agit en fait de la mise en page. Vous devez leur dire cette fonctionnalité. Ensuite, nous devons montrer du texte, des nouvelles textuelles, puis une fois encore une vedette. Ensuite, vous pouvez voir à nouveau que nous avons quelques éléments graphiques et graphiques. L'ensemble de ce composant composite est en fait un conteneur. Il s'agit en fait des mises à jour. Vous pouvez les appeler mettre à jour les mises à jour des conteneurs à partir de toutes les nouvelles sur le coronavirus. Ensuite, nous avons encore une nouvelle nouvelle qui est à nouveau présentée. C'est juste ce côté gauche. Maintenant, si vous regardez du bon côté, la mise en page est totalement différente. Nous avons ce premier élément qui est notre actualité sur la droite. Ensuite, nous avons de nouveau un texte pour que vous puissiez voir les similitudes dans la répétitivité d'une même chambre. Encore une fois, nous avons deux textes d'actualité, puis encore une fois. Une seule opinion est utilisée. Ok, donc une autre chose se trouve à droite, vous pouvez voir que la police utilisée est très différente. Il est très grand. Et encore une fois, nous avons quelque chose avec une image. Encore une fois, quelques nouvelles ou peut-être des articles. Encore une fois, un autre qui est encore avec une petite vidéo. Encore une fois à la fonctionnalité, la fonctionnalité ou à quelque chose du genre. Et puis nous avons ce genre de chose qui peut aussi être. En fait, c'est que vous allez leur dire dans la partie mise en page de votre système de conception. C'est un peu avancé. Si vous avez un produit très important de produits très importants, vous devez leur montrer que c'est ainsi que vous allez présenter votre page de destination ou la première page. Ensuite, si vous allez dans cette entreprise, il aura une disposition différente. Vous pouvez voir que la disposition de la section supérieure a été modifiée. Vous pouvez voir que cela a été écrasé. Très petit. Navigation supérieure. Ensuite, nous avons ce nouveau deck d'activité composant, où nous avons différentes catégories d'activités. Et vous pouvez voir la mise en page a été modifiée, totalement modifiée. Vous pouvez voir maintenant que nous avons trois colonnes sur cette page. Nous avons donc cette actualité en tant que nouveautés un peu plus petites. Ensuite, nous avons du bon côté, nous avons encore deux nouvelles différentes que j'ai une petite image et que le style est différent. Un peu d' arrangement différent, mais le composant de base, le textile, que le traitement du texte est presque le même. Ensuite, nous avons ce conteneur ici. Il s'agit là encore d'un conteneur de nouvelles de fonctionnalités ou de choses du genre. Il était également présent sur le salaire le plus élevé. Laissez-moi vous montrer si on traîne vers le bas. Voyons ici que nous avons le même composant. Il s'agit d'un ou de plusieurs conteneurs composites courants. Vous pouvez voir qu'il contient quatre gardes qui sont essentiellement des nouvelles. Cela va encore se répéter en bas, si je descends, vous pouvez voir à nouveau que cela a été répété ici. Et encore une fois, mettez-le ici. Et encore une fois. La même chose a été répétée ici, quatre domaines. Et c'est tout. C'est ainsi que vous allez créer vos composants. Ce bouton est en fait notre composant de base, le composant de départ de base. Encore une fois ce lien, vous pouvez voir ce traitement des liens. Il s'agit là encore d'un composant de base. Et toute cette navigation est un composant composite. Tout cela, cette section est un conteneur. Il a beaucoup de composants disposés dans la mise en page pour créer cet en-tête hétéro correspondant. J'espère que vous avez industriel tous ces différents conteneurs de mise en page, composants de base ou composants composites. Passons à la prochaine leçon, puis quelque chose de nouveau. D'ici là, prenez soin de vous. Au revoir. 9. Tokens, valeurs de rôle dans le système de conception: Si vous souhaitez commencer à créer un système de conception, vous devez comprendre ce que sont les jetons, leurs valeurs et leurs rôles. C'est donc la leçon à leur sujet. C'est la leçon la plus importante, je pense dans tout ce cours ou dans toute cette classe. Commençons donc par voir quels sont ces jetons et leurs valeurs. Ok, donc juste pour comprendre que le jeton est en fait un code, en fait, il est extrait de ce que les développeurs utilisent pour faire. Ils avaient l'habitude d'attribuer une variable à une valeur. Il s'agit en fait du même concept que celui qui a été importé dans le système de conception. Ce que nous faisons, c'est, par exemple, que nous avons un signe de textes. Ainsi, le jeton de texte peut être appliqué à la règle des textes primaires, il peut s'agir d'un texte de bouton, il peut s'agir de n'importe quoi. Chaque règle ou chaque rôle de jeton peut donc être différent. Il y aurait donc cinq ou six ou peut-être 20 jetons dans votre système de conception de conception. Et il y aurait deux ou trois rôles différents pour chaque jeton. Par exemple, nous pouvons donner la règle des textes primaires au texte. De même, la valeur est en fait la variable ou statique. Je suis désolé, la valeur sera variable, le nom sera statique, nom sera statique, ce qui est en fait le même concept que celui que nous utilisons en programmation. Si vous venez d'un milieu de programmation, vous le savez déjà, que nous avons un nom statique d' une variable et que la valeur change réellement. Jetons de conception. Vous pouvez voir que nous avons des valeurs de table, arrière-plan, de page, d'arrière-plan, d' arrière-plan, de page, d'arrière-plan, de valeur d'éclairage, de thèmes sombres. Surface est en fait ce qui se trouve au sommet de cet arrière-plan. Component BG ou vous pouvez dire qu'il s'agit d'une carte BD, vous pouvez le nommer en fonction de ce que vos développeurs ou votre équipe utilisent. Peut-être que votre équipe utilise des cartes, utilise la carte BG pour l' arrière-plan, le thème clair, l'équipe sombre, la valeur du texte, le jeton de texte va avoir du texte principal. Ensuite, nous avons l'équipe de lumière, de lumière et d'obscurité. De même, nous avons mis en sourdine les textes. L'action interactive est en fait le bouton que vous pouvez également utiliser. Plutôt que d'avoir une action interactive de jeton, vous pouvez utiliser le bouton à la place. Ce n'est pas un, pas vraiment, vous pouvez dire, tout dépend de ce que votre équipe utilise réellement. Vous pouvez également utiliser des boutons et des liens séparément. C'est à vous de décider, interactif sur les textes ou sur le bouton sur le texte, c'est à vous de décider. Vous pouvez donc constater que nous avons presque compris le concept de jetons et leurs rôles. Parlons maintenant de la façon dont nous allons les nommer. Il existe une méthode très simple que nous devons d' abord utiliser la catégorie, puis taper, quel est le type de ce composant ou de ce jeton, puis l'élément et ensuite son état. Par exemple, nous avons une catégorie de boutons. Et le type serait de quel type de bouton il s'agit. Il s'agit d'un bouton d'appel à l'action ou d'un bouton désactivé ou quoi que ce soit, un bouton désactivé. Nous avons donc un tiret de bouton ou un petit tiret CTA, CTA pour le bouton Call to Action. Ensuite, nous avons un tableau de bord, quel est l'article ? Il s'agit en fait d'un arrière-plan. Ensuite, nous avons l'article est en fait état. Ici, nous n'avons pas d'état car c'est une couleur. Donc, la couleur va en fait simplement rouler la couleur d'arrière-plan. Nous allons le nommer bouton CTA, couleur d'arrière-plan. Ce sera notre nom. De même, vous pouvez utiliser de nombreux autres noms différents. Par exemple, si vous ne faites que nommer une section, un bouton ou un texte, ou s'il y a un bouton, il aura un état actif, désactivé ou pressé, quelque chose comme ça. L'état sera donc à la fin. Voici un exemple du code qui sera utilisé par les développeurs. Je le colle juste ici pour que vous puissiez comprendre ce que ce sera. Vous pouvez voir ici que nous avons un jeton de couleur d'arrière-plan, puis nous avons une autre valeur ou une règle qui lui est appliquée. Lumière de couleur d'arrière-plan. lumière de couleur d'arrière-plan est en fait un thème clair. Et puis nous avons une bordure, bordure, une racine des cheveux, un rayon de bordure. Il peut s'agir d' un rayon de roulis régulier ou quelque chose comme ça. Peut-être que dans le rayon quelque chose, nous avons peut-être trois ou deux rôles différents que nous pouvons appliquer ici. Il est donc très facile de changer un thème en quelque chose. De même, vous pouvez voir ici Bill inverse est en fait la couleur d' arrière-plan, la couleur bordure foncée est en fait la couleur d'arrière-plan, couleur foncée, la couleur du texte clair. Il s'agit donc d'un schéma inversé. C'est vraiment très facile si vous savez comment nommer des jetons et qu'il s'agit de variables et de leurs valeurs. Voici en fait la représentation visuelle de ce dont nous parlions. C'est le contexte. Ensuite, nous avons la surface sur le dessus. Ensuite, nous avons du texte qui est notre, vous pouvez voir le texte est notre titre ou notre titre de paragraphe. Ensuite, nous avons des textes en sourdine, ce qui est un peu terne. Ce n'est pas un texte très net ou régulier, c'est un delta x. Ensuite, nous avons une action interactive, qui est un bouton, qui est l'arrière-plan du bouton. Ensuite, nous avons un texte interactif sur le texte qui signifie qu'il s'agit du bouton sur le texte. Vous pouvez utiliser le bouton à la place si vous le souhaitez. C'est une autre chose. Sur la droite, vous pouvez voir que nous avons personnalisé votre mode d'expédition. C'est un thème inversé de la même chose pour que nous puissions modifier les valeurs comme nous le voulons. Il s'agit du concept le plus simple de rôles et de valeurs de jetons. Comment les utiliser pour transformer facilement un thème entier en quelque chose d'autre. Et nous pouvons également raccourcir notre travail de conservation de nombreuses variables. Les jetons sont en fait la solution à tout ce gâchis de conception. Nous avons donc 15 ou 20 couleurs différentes à utiliser. Différentes surfaces, différentes ombres, différentes. Vous pouvez voir l'espacement. Tout ce que vous pouvez faire, c'est simplement leur attribuer un jeton et modifier les règles. C'est tout. J'espère que cette leçon vous a plu. Nous allons passer à une autre leçon pour apprendre quelque chose de nouveau. Passons à la prochaine leçon. 10. La typographie pour vous: Dans cette vidéo, je vais simplifier votre système de conception où nous parlons de typographie. Alors, où relèvera-t-il notre topographie dans le système de conception et combien de tailles utiliserons-nous ? Comment va-t-on nommer ces diaphyses et leurs tailles ? Commençons donc. Maintenant, la première étape sera de sélectionner et de commencer par une taille de base. Vous devez donc sélectionner la taille de votre texte, qui correspond à votre taille de base. Par exemple, 16 pixels, 18 pixels, 19 pixels, qui dépendent de la phase TI. Et si vous voulez en savoir plus à ce sujet, vous pouvez suivre mon cours de typographie. Une fois que vous aurez choisi votre taille de base, lisible, facilement lisible, illisible, vous allez générer une échelle de typographie de type. Le prochain, nous allons décider de la hauteur de la ligne. Donc, si nous voulons que notre design soit très local ou que nous l'avons fait, nous voulons avoir une mise en page moderne. Il y aura plus d'espace entre la hauteur de la ligne. Si vous voulez un design de danse où nous avons, par exemple, une actualité ou un blog où nous voulons le montrer comme si nous avions un journal ou peut-être un autre site Web qui utilise une mise en page très dense, une mise en page plus sombre, nous avons pour les rapprocher. La hauteur de la ligne sera inférieure. La question suivante est de savoir comment nommer notre échelle de type ou différentes tailles de types. Ce que je fais en fait, c'est que j' utilise au maximum quatre ou cinq catégories différentes. Comme si nous avions une méga rubrique qui sera présente sur notre zone d' image de héros en haut, tout en haut, lorsque vous atterrissez sur une page de destination de site Web. Ensuite, nous avons à ces trois rubriques, rubriques 123, la plus grande rubrique, la deuxième et la troisième position. Ensuite, nous avons des textes normaux, c'est-à-dire un paragraphe qui est notre taille de base. Ensuite, nous avons des légendes ou du petit texte ou des métadonnées où nous avons nos, vous pouvez dire, si vous lisez le rouge, vous avez lu tous les articles de blog que vous avez vus qui sont écrits par nom d'auteur et la date qui est en fait des métadonnées. Nous utilisons en fait une très petite taille pour les métadonnées ou une petite taille de typhus pour les métadonnées ou les légendes. Ce sera notre petite catégorie. Ensuite, nous avons peut-être une taille différente pour nos boutons, quel que soit le texte sur les boutons, peut-être que j'utilise 18 pixels pour mon texte, mon texte paragraphe, et je pourrais être en utilisant 19 pixels sur un bouton. C'est ainsi que je divise réellement la taille. Il y a différentes méthodes, les gens sont différents. Peut-être que votre entreprise pourrait utiliser la taille 123456 ou la taille extra petite, petite, moyenne, grande, méga, quelque chose comme ça. C'est à vous de décider comment nommer votre échelle de type. Vous pouvez également les nommer ou les classer en fonction de leur objectif. Par exemple, nous avons des titres d'histoire, des en-têtes, des en-têtes de section de page de copie corporelle, des métadonnées, du texte du bouton Légende dont nous avons discuté de la façon dont je les nomme réellement. Il s'agit de catégories différentes. C'est ainsi que vous allez nommer le système de typographie. Nous allons faire tout cela dans notre dernière section où nous allons réellement concevoir notre premier système de conception. Restez à l'écoute, restez avec moi et nous verrons beaucoup de choses dans les prochaines leçons. D'ici là, prenez soin de vous. Au revoir, je vous rencontrerai dans la prochaine leçon. Allons-y. 11. Déterminer le système d'espacement: La prochaine étape du système de conception consiste à créer un système d'espacement. Vous pouvez voir qu'il s'agit en fait d'espacement vertical et horizontal, tous deux dans la plupart des sites Web ou dans la plupart des conceptions où nous ne concevons pas de système de conception pour et une très, très grande application. Il se peut que nous ayons besoin d'un espacement vertical. façon dont vous allez commencer votre espacement en premier c'est que vous devez sélectionner votre numéro de base, tout comme votre typographie. Vous devez sélectionner votre numéro de base comme une grille de quatre pixels ou huit pixels pour les pixels est un peu plus flexible. Il peut avoir des tailles comme 12 pixels si vous souhaitez avoir un espace entre de très petits éléments sur votre, peut-être que vous concevez un tableau rempli d'informations sur les données. Vous aurez peut-être besoin de quatre pixels. Et si vous créez un site Web, je pense que huit pixels sont plus que suffisants. Ok, donc la prochaine, c'est une fois que vous avez sélectionné votre base. De plus, vous devez sélectionner votre balance, vous devez faire croître votre balance, par exemple, nous passerons à 16 ou peut-être huit, ou peut-être jusqu'à la taille que vous allez. Nous aurons sept ou huit étapes différentes. C'est juste que c'est comme construire une échelle. Vous spécifiez donc une étape, puis vous passez à la hauteur. Et comme nous aurons huit escaliers. Le suivant est moins ou plus contrasté avec l'espacement. C'est le même design de danse ou d' antenne si vous voulez un design très redessiné, moderne où nous avons beaucoup d'espace vide, alors nous allons avoir plus d'espace entre notre système d'espacement. Par exemple. D'abord, peut-être que notre premier départ serait de 16 pixels, puis le 32, puis peut-être 64. Plus que cela, nous aurons marches d'espacement plus grandes. Maintenant, passons à la façon dont nous allons les nommer. Il y a deux façons. Tout d'abord, vous devez les nommer avec leur cravate. Par exemple, s'il s'agit d'un espacement vertical, l'espacement horizontal quel qu'il soit. Et vous pouvez également le faire, ou vous pouvez mélanger tout l'espacement en un seul système, une lettre. Et vous pouvez dire que nous avons l'espace 01234, jusqu'à dix ou 15, ce que vous voulez utiliser, mais je pense que jusqu'à dix suffiraient. La deuxième partie est que, par exemple, si vous concevez des appareils mobiles selon votre conception, les espaces vont changer ou passer à des espaces plus petits lorsque vous passerez à une application mobile ou à une taille mobile. Par exemple, si vous avez un site Web et que vous concevez une version réactive ou plus petite sur la façon dont il serait affiché sur un téléphone mobile. Les tailles vont changer. Vous pouvez également spécifier que l'espace 0 correspond à 16 pixels sur le bureau. L'espace 0 est de huit pixels sur un mobile. Vous pouvez donc générer ce système en deux branches différentes. Il va donc récupérer, cela signifierait la même chose que lorsque nous avons utilisé l'espace 0, il passerait à lui sur un appareil mobile. C'est ainsi que vous pouvez obtenir une harmonie dans votre conception. Et vous pouvez disposer d'un système d'espacement qui va monter et augmenter l' ensemble de vos applications mobiles, vos iPad et de vos vues de bureau. S'il existe une application ou un site Web qui étend d'un ordinateur de bureau à une tablette en passant par un mobile, vous pouvez disposer d'un système espacement dans lequel l'ensemble du système d'espacement aura trois branches pour le bureau, la tablette et mobile. C'est ainsi que vous allez avoir votre système d'espacement et c'est ainsi que vous allez le nommer espace 01234. Normalement, ce que je fais normalement, c'est que je n'ai pas beaucoup d'espaces séparés. Ce que je fais en fait, c'est que ce serait plus facile si le système est plus petit. Donc, si vous avez un système très volumineux, vous êtes comme deux ou trois équipes de développement et de développeurs, ou peut-être quatre ou cinq concepteurs différents, cela ne fonctionnera pas. Ce que je fais en fait, c'est dans mon travail indépendant, je nomme ou je marque l'espace qu'il contient. Tout d'abord, l'espacement des catégories. Le second est vertical, comment l' article avec une poussée verticale ou horizontale. Ensuite, j'écris l'espace. Vous pouvez utiliser peut-être un espace vertical. Et c'est tout. Mais j'essaie normalement de mentionner qu'il s'agit de 20 pixels, 32 phases, 40 pixels, 64 pixels, 44 pixels, c'est à vous de choisir. Il y en a donc, ce sont deux méthodes. Je suggère donc que l'espace 01234 est une approche un peu meilleure car il peut développer fois vos conceptions de bureau et vos conceptions d'applications mobiles. Il va donc se développer ou s'appliquer aux deux et réduira la confusion. Tout est question de système d'espacement. J'espère que vous avez appris quelque chose de nouveau. Passons à la nouvelle leçon et voyons d'autres choses dans les systèmes de conception. 12. Système de couleurs et comment le nommer correctement: Dans cette vidéo, nous allons étudier un autre système de particules de conception, qui est la couleur, le système de couleur. Vous devez définir votre système de couleurs, comment vos couleurs fonctionneront sur différents arrière-plans, différents thèmes, arrière-plan plus sombre, arrière-plans plus clairs. Commençons par voir ce que nous avons dans nos systèmes de couleurs. La première étape consiste donc toujours à expérimenter des couleurs que vous ne pouvez pas avoir raison. Vous devez d'abord tester vos couleurs sur différents arrière-plans. Par exemple, si vous avez un arrière-plan plus sombre ou un arrière-plan plus clair, vous devez tester les couleurs dont les couleurs sont plus accessibles et plus accessibles. On peut dire obscurité ou légèreté. Je vais vous montrer les plugins Figma qui le font automatiquement. Donc nous n'avons pas besoin de le faire, vous n'avez pas besoin de vous inquiéter à ce sujet. La deuxième étape consiste à avoir au moins quatre couleurs, essentiellement deux couleurs. L'une sera votre couleur principale ou accentuée, où nous allons agir, et les couleurs secondaires pour les arrière-plans et autres choses. Et puis nous aurons du succès ou des couleurs d'avertissement. En fait, nous n'avons besoin deux couleurs qui sont essentiellement pour les arrière-plans et votre couleur d'accent. Ou peut-être pourriez-vous en introduire un troisième. Les couleurs d'avertissement de succès seront vert, bleu ou peut-être rouge ou une variante de ces couleurs. Ensuite, nous aurons une autre catégorie qui est BG, couleurs, c' est-à-dire trois couleurs différentes pour les arrière-plans, nous avons des arrière-plans sombres, nous avons un fond clair. Nous pourrions donc avoir des couleurs neutres, qui peuvent être un ton de gris, de bleu grisâtre ou peut-être de jaune verdâtre, ou peut-être une couleur jaunâtre crémeuse un peu terne. peut donc s'agir vos couleurs neutres qui peuvent également être utiles lorsque vous essayez de créer une équipe différente à l'intérieur de votre conception. Je vais vous montrer mon design comment j'ai créé toutes ces couleurs . Maintenant, je nomme ces couleurs. La première chose à faire est que vous devez regrouper vos couleurs dans différentes catégories. Par exemple, les couleurs de l'action seront différentes. Vos liens, les élections sont en fait plus proches les uns des autres. Il s'agit d'un groupe distinct. Ensuite, nous avons des couleurs de texte. Vous devez savoir que nous avons du texte en sourdine, nous avons des titres, des sous-titres, que nous avons un titre. Tous ces éléments auront donc des couleurs différentes. De même, il se peut que nous ayons du texte à saisir, du texte à l'intérieur de notre entrée, là où nous en avons , nous devrons taper du texte. Il y aurait donc beaucoup de couleurs différentes de textes. Ensuite, nous aurons des couleurs discrètes. Nous avons déjà discuté l'accent sur l'importance lorsque nous avons un texte en gras. Peut-être voudrions-nous modifier la couleur du texte en gras. Ensuite, nous aurons des antécédents. Les arrière-plans seront différents. milieux d'action, l'accent, la désoulignement. Les liens sont également très proches des actions. Peut-être des listes, des listes, des éléments, des puces. Ils sont également, je pense, dans la catégorie d'accent. textes textuels auront, je pense, trois ou quatre catégories maximum. La première est le texte désactivé, votre texte normal, vos textes de paragraphes, vous êtes des en-têtes et peut-être des textes suggestifs ou sous-titrants qui se sur trois ou quatre types de textes différents, couleurs. Ensuite, nous allons également définir des règles de couleur. Par exemple, sur le noir primaire, quelle sera la couleur primaire sur un fond plus sombre ? Sur le secondaire noir, quelle sera la couleur secondaire sur le fond sombre ? Nous allons avoir toutes ces règles différentes. Je suis sur l'accent noir, ce qui va être nos étiquettes sont des textes supplémentaires sur le survol noir sur les bordures du pont. S'il y a quelque chose qui va changer sur un noir, peut-être la couleur de la bordure, la couleur survol ou peut-être la couleur d'accent. Nous allons définir ces rôles. Permettez-moi de vous montrer le système de couleurs de mon système fermé préféré, Google Material Design. Ils ont un système de couleurs très, très , vous pouvez dire, solide . Et vous pouvez voir ici que j'ai un jeu de couleurs simple et à droite, vous pouvez voir chaque source 1234, différentes zones. Ensuite, nous avons primaire, fff, qui est de couleur blanche. Sur Secondary est notre couleur noir foncé. Ensuite, nous avons sur fond, puis nous avons sur la surface, la surface en fait jetée par erreur, nous avons une couleur blanche. Vous pouvez donc voir si nous allons à ce cinq ici, c'est aussi cinq, c'est également cinq. Si nous les corrélons, vous pouvez voir que cette erreur rouge est en fait d'une couleur blanche au-dessus. Si une erreur signifie que sur un adulte, sur fond PNL, nous allons utiliser la couleur blanche. De même, sur fond, nous allons utiliser du noir foncé. Contexte. En fait, laissez-moi vous montrer ici. C'est notre contexte. L'arrière-plan est blanc, la surface est également blanche, l'erreur est rouge. De même, nous avons variantes primaires, primaires, secondaires et secondaires. Donc deux couleurs de primaire à secondaire. Et vous pouvez voir ici cette couleur violette est réellement utilisée. La couleur primaire est utilisée. Les analyses, les analyses ici. Et cette couleur secondaire verte est en fait notre excellente couleur là où elle a été utilisée pour l'action. C'est la méthodologie, vous pouvez dire. Vous pouvez obtenir des idées, vous pouvez les utiliser dans votre propre système de conception. Tout est question de système de couleurs dans les systèmes de conception. Passons à la prochaine leçon et je vous retrouverai dans une autre leçon d'ici là, prenez soin de vous, buh-bye. 13. Système et mise en page: Maintenant, la partie suivante de votre système de conception est en fait votre disposition dégradée. La grille est différente et la disposition est différente. Grid est en fait la façon dont l'ensemble de votre système va utiliser la grille. Différentes colonnes, différentes largeurs d' espacement entre les colonnes qui sont des fraises. Et votre disposition est en fait la différence entre vos molécules ou différentes. Vous pouvez voir que les domaines de votre design que vous concevez vont s'assembler. Ce sont deux choses différentes. Vous avez peut-être le même système de grille, mais vous pouvez avoir une disposition totalement différente. Vous pouvez générer trois ou quatre mises en page différentes. Je vais vous montrer un exemple qui vous permettra de saisir plus facilement l'idée. première chose est que vous devez sélectionner un framework bootstrap ou n'importe quel framework personnalisé que vos codeurs ou développeurs utilisent, essayez de communiquer avec eux. Commencez à partir de là. Ensuite, nous allons décider du nombre de colonnes sur une plus grande taille de bureau. Il serait 12 ans. Les tailles moyennes peuvent utiliser 12 ou huit, et les appareils plus petits peuvent utiliser deux ou quatre colonnes. Vous devez donc définir votre grille, ce 1284 ou peut-être deux, puis quelle surface devrait être votre conception, accord, donc cela dépend aussi de vos notes. Donc, si vos grilles ont beaucoup d' espace entre vos deux colonnes, elles auront plus d'espace. Il aura l'air plus spécial et moderne. Et s'ils ont un écart qui est beaucoup moins semblable à celui-ci, il aura l'air un peu plus dense. C'est ainsi que vous allez utiliser la grille pour créer votre zone de conception ou modifier le thème de votre zone de conception par rapport à dense. Maintenant, la mise en page aidera à ce que la conception va être cohérente. Comment cela, vous pouvez dire, se révéler en présence d'un utilisateur. Je vais vous montrer quelques dessins ici. Ici, vous pouvez voir que nous avons un filaire très simple. Et cela montre que nous avons une section supérieure que nous avons ici. Donc, si nous définissons cela, il s'agit en fait de notre première section. Ensuite, nous avons une section où nous avons deux blocs d'information plus importants. Ensuite, nous avons notre prochaine section. Nous avons notre barre d'onglets. Encore une fois, nous avons quelques enregistrements pour différents enregistrements. Ensuite, nous avons cette mise en page. Vous pouvez donc voir que cela peut être organisé de différentes manières. Mais une fois que vous aurez précisé que c'est ainsi que nous allons exposer notre conception, ce sera ainsi. Vous allez définir votre disposition sur un mobile. Et par exemple, celui-ci, il s' agit en fait d'un tableau de bord. Et vous pouvez voir Dashboard des régions à moitié spécifiques pour des choses spécifiques. Par exemple, votre diagramme circulaire sera à droite et le second, dans la deuxième ligne. Sur la gauche, vous pouvez voir que nous avons une présentation visuelle plus large de différents pays et de choses de ce genre. En haut, en haut à droite, nous avons une section où nous avons deux erreurs différentes, des messages ou quelque chose du genre. C'est ainsi que vous allez définir la mise en page qui sera un cheveu. Vous allez montrer cette chose, cette chose, cette chose et cette chose. Par exemple, nous avons des sites Web d'actualités, des actualités temporelles, et ils ont des mises en page très spécifiques pour chacune de leurs différentes pages ou catégories différentes. C'est ainsi que vous allez utiliser différentes mises en page. Vous allez spécifier différentes mises en page que vous allez suivre, créer votre conception ou créer, ou vous allez lier différents éléments de conception sont des zones entre eux. Il s'agit donc de la disposition de la grille dans votre système de conception. J'espère que vous avez compris l'idée derrière cela. Je ne veux pas aller vous montrer des centaines d'exemples différents. Nous allons le faire dans la prochaine leçon, dans la section suivante. Je pense que c'est tout. Je pense que vous avez compris l'idée et nous allons maintenant passer à la prochaine leçon. D'ici là, prenez soin de vous. Au revoir. 14. Le thème dans votre système de conception: Parlons maintenant de l'association dans votre système de conception. Quelle quantité d'équipe devrait être autorisée. Vous allez vous donner aux développeurs qu'ils peuvent changer de type avec des tuiles ou qu'ils peuvent totalement changer la police de caractères. Par exemple, si vous avez utilisé Roboto et que vous souhaitez utiliser Open Sans, permettrez-vous cela ? Voilà donc la question de savoir si vous allez simplement avoir un thème noir ou foncé à blanc où nous avons thèmes clairs et sombres et que vous voulez simplement qu'ils changent les couleurs. Par exemple, d'un arrière-plan plus sombre à un arrière-plan plus clair, un thème clair ou un thème sombre. Ou peut-être voulez-vous utiliser un thème totalement différent, c' est-à-dire le thème de l'automne ou l'équipe de printemps. C'est à vous de décider. Différents modèles ou projets différents. Ils ont des exigences différentes. Donc, dans cette vidéo, nous allons discuter de la quantité de thème devrait être autorisée et des différentes choses que vous devriez prendre en charge lorsque vous allez leur donner beaucoup de design. indépendance. La première chose, c'est que l' obscurité contre la lumière. Ce n'est en fait que le changement de courant. C'est donc à ce niveau que vont se situer la plupart des dessins. Je pense que 70 à 80 % vont être ici. Nous avons juste besoin de deux thèmes différents. Tout le reste sera identique. L'espacement sera la même hauteur de ligne sera la même. Le texte, le style ou la face de Fort ou la police de caractères seront en fait identiques. Maintenant, la suivante est, par exemple, si vous avez un système où il va être utilisé sous Windows, macOS, Android, iOS, sur différents systèmes, il existe des spécifications de certains éléments ou système. paramètres que vous ne pouvez pas modifier. Vous devez adopter cela. Donc, pour le faire ou pour créer tout ce thème, vous devrez peut-être modifier un peu votre design original. Vous devez garder cela à l'esprit. Parfois, la personnalisation de votre conception peut ne pas fonctionner sous Windows Vous devez donc modifier cela. Le niveau suivant est désormais la structure ou le style de contenu. Que vous vouliez simplement modifier le style de vos couleurs ou de votre diaphyse ou que vous souhaitiez modifier la structure ? Par exemple, le titre est au-dessus, ou peut-être vous, dans le dessin suivant, il se trouve au bas de l'image. C'est un très grand changement. Assurez-vous que vous devez être très précis. Je pense que vous ne devriez pas trop changer. Peut-être que les utilisateurs ou les utilisateurs connaissent généralement les modèles de conception similaires. N'essayez donc pas de basculer beaucoup entre la structure et le contenu. Le contenu peut être modifié. Par exemple, si nous avons peut-être un e-mail ou si nous avons un modèle Instagram. Alors peut-être qu'ils vont suivre les mêmes jetons, jetons de conception ou même structure de conception, mais le style sera totalement différent. C'est-à-dire que cela peut arriver. Voici un exemple à gauche, vous pouvez voir que nous avons deux couleurs de couleurs différentes où nous avons deux thèmes différents, clair et sombre, où la police de caractères change réellement. Il est construit avec des directives de conception des matériaux, mais vous pouvez voir qu'ils n'utilisent pas la conception de matériaux. Diaphyse spécifique, par exemple Roboto ou quelque chose comme ça. Ils utilisent leur propre style. C'est une chose à droite. Vous pouvez voir que nous avons encore, la même chose qui se passe ici, mais des formes standardisées, des équipes sombres et claires. Voyons maintenant quelques autres variations ici. Vous pouvez voir ici que nous avons des variations de couleurs, espacement musculaire par rapport à la technologie et la coloration. L'espacement va en fait changer. Donc, si vous essayez de modifier votre police de caractères, par exemple, vous essayez d' utiliser une police sans empattement. Vous utilisiez une police sans empattement et vous avez commencé à basculer entre une police de caractères serif. La hauteur des lignes va changer. typhus est une hauteur de ligne totalement différente, leurs tailles de lettres sont totalement différentes. Vous devez donc veiller à ce que l'ensemble de votre système d'espacement soit ajusté. Une fois que vous avez changé votre police de caractères, l'ensemble du système d'espacement, hauteur de votre ligne, ils doivent être ajustés. C'est ce que vous devez prendre en compte dans votre thématique. Parce que si vous donnez vos développeurs ou à votre équipe de conception beaucoup d'indépendance à vos développeurs ou à votre équipe de conception, ils peuvent utiliser et changer tout ce qui va être un gâchis et vous devez vous en inquiéter. Il s'agit de thèmes et de ce qui devrait être apprivoisé dans votre système de conception. Je vous rencontrerai dans la leçon et dans la prochaine section, nous allons commencer à concevoir un système de conception de base. Et nous l'utiliserons pour créer une application ou quelque chose de similaire. Jusque-là, prends soin de toi, au revoir. 15. Principes de conception et énoncé des objectifs: Avant de commencer notre système de conception, nous devons énoncer notre objectif. Pour cela, nous avons créé ce document de principes de conception et d'énoncé de but. Et j'ai créé une autre page, page séparée, et c'est très simple. Je vais passer à travers eux. Et vous pouvez voir ici que nous avons le logo de base en noir et blanc. Ensuite, nous avons nos principes de conception. Pratique plutôt que théorique. Montrez plutôt que de dire. Cela signifie que nous devrions être plus pratiques et que nous devons tout montrer dans notre conception plutôt que de raconter beaucoup d'histoires. La présentation signifie que les vidéos font réellement partie de ce système de conception qui a appris dans l'apprentissage fait partie des vidéos. Montrez-leur plutôt que de leur dire tout. Partout accessible signifie que sur tous les appareils, iOS et Android, il sera accessible. Vous devez créer le design qu'il soit adopté sur les deux. Mettez l'accent sur l'expérience d'apprentissage. Vous devez vous concentrer sur l'apprentissage. Cela signifie donc que les lecteurs vidéo que tout contrôle seront plus accessibles, plus faciles à utiliser, plus résistifs et des choses comme ça. Ensuite, nous avons ces énoncés de but. Vous pouvez donc voir que nous avons de l' or, pourquoi profiter aux utilisateurs ? Nous avons vu tout cela, mais je l'ai créé pour cette application en particulier. L'objectif est de gagner du temps et de créer rapidement la conception, ajouter de nouvelles fonctionnalités d'écrans qui ont conduit notre application. Si nous ne générons pas de design rapidement, pourquoi ? Chaque nouvelle fonctionnalité sera livrée au moins deux semaines. Nous allions donc faire face à des retards pour résoudre des problèmes similaires répétitifs. Ainsi, l'équipe produit peut se concentrer sur montrer vraiment aux utilisateurs qui seront les utilisateurs de ce but. Ce système de conception sera utilisé en interne au sein de notre équipe. C'est-à-dire que nous en avons déjà discuté dans le cadre de notre conférence sur l' énoncé de but. C'est ce que vous devriez créer pour la première fois, et ce sera votre mission. Ce sera votre tâche deux. C'est tout. Avant de passer à votre système de conception, essayez de créer des principes de conception qui seront déterminants pour l'ensemble de votre équipe et de votre conception. Ensuite, nous aurons un énoncé d' objectif expliquant pourquoi nous construisons ce système de conception. Alors, restez avec moi. Nous allons construire un système de conception. vous rencontrerai dans une autre leçon. D'ici là, prenez soin de vous, au revoir. 16. Mise en page et variantes auto Figma 01: Si vous souhaitez construire votre système de conception dans Figma, il y a deux concepts que vous devez vraiment maîtriser, un d'eux est la mise en page automatique et le second est la variante. Dans cette vidéo, je vais partager avec vous quelques-unes des techniques que vous pouvez utiliser pour la mise en page automatique et la variance, utilisant la variance pour créer vos composants dans Figma. Commençons par voir ce que nous pouvons en faire. Si vous regardez cet écran, vous pouvez voir que nous avons cette navigation et si nous essayons de le presser, il est facilement extensible voir que tout reste ici. De même, nous avons ces deux boutons. Il s'agit en fait de composants et de variance, mais avant cela, ils étaient en fait la mise en page automatique. Ils sont créés en utilisant la mise en page automatique. De même, vous pouvez voir ici, voici une entrée avec étiquette. Et vous pouvez voir que cela est également créé avec la mise en page automatique. Donc, si j'essaie de le changer, par exemple, mon nom ici, vous pouvez voir qu'il est en expansion. D'accord ? Si vous ne voulez pas y aller et que vous voulez vous développer, vous devez utiliser cet arrangement de mise en page automatique interne. Et nous allons définir ce texte pour remplir un conteneur. Vous pouvez voir maintenant qu'il n' est pas en expansion. avons donc réparé. Bon, voici donc une entrée de texte dans l' action ou le bouton ici. Encore une chose, c'est l' arrangement ici. Vous pouvez voir que c' est en mise en page automatique et si cette étiquette est en bas, donc si j'essaie de la déplacer en haut, vous pouvez voir qu'elle sera en bas. C'est en fait inversé dans Figma. La partie inférieure sera en haut et celle du haut sera à la fin de cet arrangement. Je vais le déplacer ici. Commençons par voir comment nous pouvons construire tous ces éléments. Nous allons donc d'abord construire cette saisie de texte avec une étiquette. Pour ça. Nous allons utiliser juste un texte. Alors, déplacons-le un peu sur le côté. Essayons d'agrandir le cadre un peu plus. Déplacez-le vers le haut. Zoom avant. Ici, nous avons la toile et je vais appuyer sur T pour le texte. Et nous allons utiliser votre nom. Utilisons ici un peu de couleur grisâtre. Nous allons ajouter la mise en page automatique à celle-ci, Shift a. Vous pouvez voir que notre mise en page automatique a été ajoutée. Appelons ça du texte. Nous allons le dupliquer en appuyant sur votre touche Alt ou Option enfoncée et en la faisant glisser comme ceci. Je vais donc le faire glisser vers comme, disons 60 pixels de distance. Je vais le nommer maintenant action. Ou peut-être que vous pouvez utiliser le téléchargement. Par exemple, si vous créez un bouton de téléchargement, je vais utiliser différentes couleurs de texte car nous allons avoir un lien. Et nous allons les coller tous les deux. Une fois encore. ne s'agit pas vraiment de texte. Appelons-le ça. Sélectionnez-les tous les deux et, encore une fois, appuyez sur Maj. Maintenant, vous pouvez voir que nous avons cette bordure autour d'eux et une autre image, appelons-le entrer. Si je développe, développez cette entrée et vous pouvez voir que nous avons de l'action et du texte. Vous pouvez donc voir que l'action se trouve en haut, ce qui se trouve en fait à droite, et le texte se trouve à gauche, en bas à droite. Maintenant, si nous cliquons sur Input, vous pouvez voir ici à droite que nous avons une séparation de 60 pixels. Il s'agit donc en fait de l'espacement entre les éléments à l'intérieur et la mise en page automatique. L'entrée contient en fait deux éléments. Et cette disposition automatique, vous pouvez le voir dans la direction horizontale. Donc, deux éléments horizontalement, ils sont espacés de 60 pixels. Il suffit d'obtenir le concept. Et si vous souhaitez ajouter un remplissage autour d'eux, par exemple, toute cette section, nous voulons ajouter un remplissage autour de cette zone de saisie. On peut utiliser quelque chose ici comme dix pixels. Vous pouvez voir maintenant qu'il a ajouté 101010 de tous les côtés. Prenons huit ici. Je vais vous montrer pourquoi je l'ai utilisé à la fin. Et c'est en fait l' arrangement. En ce moment. Cela n'a pas d'importance car nous n'avons que deux éléments et ils sont déjà correctement alignés. Utilisez-les au milieu. Ensuite, nous allons le faire, vous pouvez voir que j'ai sélectionné cette entrée plutôt que l'intérieur. Dans les objets. L'ensemble de cette entrée est donc sélectionnée. Maintenant, je vais le remplir. Et le blanc, c'est génial. Ajoutons une rondeur de huit pixels ici. Vous pouvez voir que notre article de base est prêt, l'entrée est prête. Mais le problème, c'est qu'une fois que je commence à taper, il s'étend en fait. Correction du fait que nous allons utiliser le clic sur le texte plutôt que le contenu chaud. Nous allons utiliser un conteneur rempli. Je pense que ça va arranger ça. Une autre façon de résoudre ce problème est peu glissée. Sélectionnez cette entrée. Vous pouvez voir que nous avons beaucoup d'espace entre les options. Si vous essayez d'utiliser l'espace entre les deux, cela va corriger cette option. Ce sera toujours ce téléchargement est toujours du bon côté va tout espacer en utilisant cet espacement ici, ce rembourrage. C'est le cas parce que nous avons deux articles. L'un sera à droite et l' autre sur la gauche. Je pense que c'est le cas. Très bien. Voyons maintenant. Si j'essaie de changer. Sélectionnons l'entrée et essayons de l'agrandir. Vous pouvez donc voir maintenant que le téléchargement se déplace avec la droite. Si j'essaie de l'agrandir, il va bouger comme ça. Nous pouvons également ajouter une étiquette ici. Nous allons donc sélectionner du texte. Créons une étiquette. Encore une fois, nous allons mettre une mise en page automatique sur l' étiquette pour décaler un et nous allons la traiter un peu et l'ajouter à l'entrée. Maintenant, cette étiquette a été ajoutée et c'est également une trame, alors appelons-la étiquette. Vous pouvez voir qu'il a un rembourrage de dix ici. Nous allons l'utiliser. Et nous allons l'aligner sur l'étiquette ici. Le texte à l'intérieur de notre entrée. Encore une fois, nous allons sélectionner tous ces conseils. Nous allons utiliser Maj a pour créer le cadre. Cette image sera entrée plus étiquette. C'est ainsi que j'ai créé cela. Maintenant, vous pouvez voir si vous regardez celui-ci, la direction de la mise en page automatique est verticale car nous n'avons pas deux éléments à l'intérieur. Laissez-moi vous montrer. L'un est en entrée et l'autre est étiqueté. Et vous pouvez voir que l'étiquette est en bas, maintenant elle est en haut. Nous l'avons ici. Utilisons 0 car nous voulons que l'étiquette soit très proche. Cette étiquette a en fait un remplissage de huit pixels, fait huit pixels à l'écart de la zone de texte en entrée inférieure. C'est ainsi que vous créez et utilisez cette technique de mise en page automatique. 17. Mise à page automatique et variantes de Figma 02: Et la prochaine chose serait que si vous l'avez créé, nous allons créer, créer un composant. Créons donc un composant, une option de contrôle ou de commande K ou Control Alt K. Cliquons dessus et vous pouvez voir maintenant que nous avons ceci. Nous allons ajouter une brillante. Donc, la propriété doit être étatique. Gardons les choses simples. Voici notre état par défaut, et celui-ci sera, appelons-le l'état actif. Ici, nous pourrons changer le texte pour qu'il soit plus noir et changer celui-ci par nom. Rendez-le un peu plus léger. Juste pour faire la différence entre ces deux états. Si vous votez, vous pouvez également ajouter un coup ici. Faisons en sorte que ça soit comme ça. Bon, nous avons ici une autre variante, c'est une variante active. Et ajoutons une autre variante. Cliquez ici et ajoutez une autre variante et une nouvelle variante. Et cela restera en fait, trois seraient désactivés. Faisons donc de cette couleur blanche une couleur verdâtre. Utilisez ce gris. Je pense que cette façon de procéder fonctionnerait. Ce chargement serait désormais de couleur grisâtre. Peut-être comme ça. L'étiquette serait un péché. Vous pouvez maintenant voir que nous avons créé trois variantes de cette option, entrée et étiquette. Vous pouvez faire de même avec n'importe quel composant, n'importe quel bouton dont vous disposez. Par exemple, créons un bouton ici. Nous utiliserons à nouveau la mise en page automatique. Commençons par créer un texte. Décalons simplement un pour ajouter une mise en page automatique. Je vais utiliser un rembourrage de, hum, c'est un rembourrage de 12. En haut à droite, 16161612 en bas. Comme ça. Utilisez-le au milieu. Tout sera pareil. Contenu Huc. Oui. Nous allons ajouter une couleur de remplissage d'un autre guerrier. Changeons la couleur par quelque chose comme ça. La couleur du texte sera blanche. Ici, nous avons le bouton de base avec notre mise en page automatique. Ajoutons huit pixels ici pour la rondeur. Pour moi, je pense qu'à droite et à gauche, je veux plus d'espace. J'ajouterais 2020 ici. Vous pouvez voir qu'il s'agit maintenant du simple bouton avec mise en page automatique. Vous pouvez créer une variance. Maintenant, si nous voulons ajouter, appelons ce bouton. Si vous souhaitez ajouter une icône ici, c'est une autre histoire. Nous allons donc utiliser la barre oblique de contrôle ou de commande. J'ai installé ce plug-in des icônes lucides, et je vais utiliser un peu de micron. Utilisons cette icône ici. C'est ici que l' icône est ici. Mettons-le à l'intérieur du cadre. Faites-le glisser ici. Voici le surcharge. Essayons de faire glisser cela à l'intérieur du bouton. Maintenant, vous pouvez voir qu'une fois que je l'ai fait glisser, il se trouve à la fin du bouton parce que c'est en fait ce que vous appelez ça, le bas et le haut. Donc, quelle que soit la partie supérieure, elle se trouve au bout du bouton. Parce que notre disposition est en réalité horizontale. C'est notre manette de jeu. Essayons d'utiliser une couleur blanche ici. Voici donc un bouton d'inscription avec une icône. Maintenant, si vous souhaitez augmenter l'espace entre ces deux éléments, cliquez sur le bouton, et il s'agit de l'espace entre ces deux éléments. Donc, si j'essaie de l'augmenter, utilisons 40 ici. Je pense que 36 serait suffisant. Maintenant, vous pouvez voir que c' est superbe. Quel est le rembourrage à droite ? Utilisons 1818. Ici. Cela semble mieux maintenant. Bon, nous avons donc ce bouton. Créons maintenant un composant à partir de celui-ci. Et nous allons sélectionner notre composant. Maintenant. Il a été transformé en composant dans la mise en page automatique. Créons une variante. Voici maintenant la deuxième variante. Et pour la propriété, nous allons à nouveau utiliser l'état en ce moment. Rendre les choses simples. Il s'agit de la distance entre les deux variantes. Donc, si vous voulez le diminuer, vous pouvez le diminuer. Mais je pense que 24 serait génial. 20 le sera. Vers la deuxième vidéo. Changeons les couleurs de la deuxième variance. Faisons en sorte qu'il soit un peu plus lumineux lorsque vous allez le planer dessus. Et c'est tout, je pense qu'en ce moment, je vais juste changer la couleur en ce moment. Ici, nous avons la valeur par défaut. Il s'agit du deuxième état de variante qui sera survolé ou actif. Appelons ça l'état actif. Il s'agit donc de la valeur par défaut, c'est actif. Prenons une affaire capitale ici. Voici un autre bouton rayonnant avec variance utilisent la mise en page automatique. C'est, vous pouvez dire l' essence même de votre système de conception. Si vous comprenez ces deux concepts, vous pouvez tout faire. Vous pouvez voir qu'il s'agit d'un bouton avec une icône. Si vous souhaitez déplacer l'icône au début, déplacez-la ici. Allons le déplacer ici. Maintenant, c'est au début ou à gauche. Fais-le pour le ramener. Maintenant, si vous voulez changer la distance entre l'icône, faisons, par exemple, si vous le vouliez comme ça, et je le veux comme ça, 30. Vous pouvez voir maintenant qu'il est rétréci dans cette direction. 1818. Voici une vidéo simple sur la mise en page automatique, et c'est la puissance de Figma. Ce sont les deux choses que vous allez utiliser le plus pour créer différentes variantes et tout. Si j'ai essayé de changer le texte ici, modifiez le texte maintenant, vous pouvez voir qu'il se développe automatiquement ici. Si vous voulez un fixe, je pense que le V est que vous devez utiliser fixe. Je pense. Je pense que vous devez faire le décor au début. Voyons si je peux avoir un bouton de taille fixe. Bon, donc c'est tout à propos de ça. Étreindre le contenu et les éléments de largeur fixe. La plupart du temps, nous allons utiliser le contenu du contenu. C'est tout. Voici donc ma vidéo simple sur la variance sigma et la mise en page automatique. J'espère que vous avez compris et appris quelque chose de nouveau. Nous utiliserons cette technique lors de nos prochaines leçons lorsque nous allons construire notre mise en page, notre topographie et tout. D'ici là, prenez soin de vous. Adieu. Nous nous retrouverons dans une autre leçon. 18. Mise à disposition automatique: C'est un concept très basique que vous devez comprendre, qui est ce qu'est contenu chaud et le conteneur plein et la largeur fixe. C'est la différence entre le redimensionnement d'une mise en page automatique, ce qui est très déroutant pour moi. Il m'a fallu beaucoup de temps pour comprendre cela. Je vais partager avec vous deux façons. La première est que vous souhaitez que l' ensemble de la mise en page se développe automatiquement. Deuxièmement, vous voulez le corriger avec peut-être du texte d'entrée ou quelque chose comme ça en utilisant la mise en page automatique. Nous allons utiliser cet exemple. Vous pouvez voir ici comment le contenu est réellement votre cadre parent, votre mise en page automatique ou votre cadre parent qui va se développer en fonction de son enfant. Donc, si les enfants vont prendre de l'expansion, ils vont s'agrandir avec lui. Le contenant rempli est en fait destiné à être utilisé pour l'enfant. L'objet enfant remplit donc le conteneur. Quel que soit l'espace qui reste, il le remplira. Ce sont des concepts un peu difficiles. Comment le contenu va-t-il également fonctionner sur le parent ? Les objets enfants qui vont vers le parent vont se développer avec un objet enfant. C'est un peu difficile. Donc, juste un conseil simple. Si vous voulez un bouton à expansion automatique avec le texte ou étiquettes ou vous pouvez dire des icônes. Vous devez utiliser du contenu chaud sur tout. Par exemple, ici, vous pouvez voir c'est en fait notre entrée dans une entrée et je l' ai configuré pour embrasser le contenu. Il va donc se développer en étreignant son contenu si j'essayais de modifier son contenu. Essayons donc de modifier ce texte ici pour que vous puissiez voir qu'il se développe. C'est le parent qui prend de l'expansion. Chaque fois que j'essaie de modifier son texte enfant, l'objet enfant change taille et le parent se développe. Si nous passons au texte et aux enfants enfants intérieurs, vous pouvez voir qu'ils utilisent également contenu de Hulk et que le lien utilise également du contenu de câlin. C'est très, très important. Vous devez utiliser du contenu chaud si vous créez un bouton ou un texte de saisie dans lequel vous devez le développer avec le texte. Vous devez utiliser le contenu des câlins. Maintenant, dans le cas ici, ce texte ici, qui est en fait notre zone étiquetée. Je ne vais pas utiliser de contenu chaud, je vais utiliser une largeur fixe. Largeur fixe. Essayez de changer cela. Maintenant. Vous pouvez voir maintenant que je suis passé à une largeur fixe. Ce texte va donc affecter et toute mon étiquette ou toute cette entrée va rester. La même chose. L'action va être sur la droite. Un autre moyen est donc de me laisser vous montrer une autre façon. Vous pouvez voir si vous cliquez sur cette entrée ici, c'est en fait, il a deux éléments et disposition automatique est réglée sur un espacement de 40 pixels, huit pixels, c'est le rembourrage et la direction est horizontal. Si j'essaie d'utiliser plutôt que de mettre en sac, si j'essayais d'utiliser l'espace entre les deux, cela aura cet effet, c' est-à-dire si j'essaie de l' agrandir comme ça. Vous pouvez donc voir qu'il bouge avec celui-ci comme celui-ci. Et maintenant, si j'essaie de le changer, ce sera encore la même chose. Maintenant, un autre paramètre est que je vais utiliser plutôt que d'utiliser une largeur fixe, je vais utiliser le conteneur de remplissage. Maintenant, vous pouvez voir qu'il a pris cet espace ici. Entre ceci et ceci, nous avons un espacement automatique. Essayons donc de l'agrandir. Vous pouvez donc voir maintenant, maintenant vous pouvez voir cet effet de remplissage, conteneur rempli a pris effet, il remplit réellement le conteneur chaque fois que je l'ai agrandi. C'est donc notre conteneur. Et si j'essaie de l' agrandir ou de le presser, cela va changer la taille du champ de texte. Vous pouvez le voir maintenant, et essayons de le rendre un peu plus grand. Vous pouvez donc maintenant voir que c' est un conteneur complet. En fait, il remplit le conteneur jusqu'ici. Je ne sais pas quelle est cette distance entre eux ? Il est encore 40 ans. La distance à nouveau 40, que nous avons initialement définie ou séchée maintenant elle est réglée sur OK, donc elle est réglée sur 40. Il garde cette distance. Essayons donc d' utiliser l'espace entre ici et d'essayer de l'agrandir. Et C. Maintenant, que se passe-t-il ? Maintenant, vous pouvez voir qu'il remplit le récipient. Et il remplit tout l' espace parce que nous l'avons réglé pour qu'il soit automatique. L'espace entre les deux. L'espace entre ces deux éléments permet de régler automatiquement l'espace entre ces deux éléments. Et vous pouvez voir qu'il est en train de l'espacer comme ça et de remplir tout le récipient. Donc normalement, je n'utiliserais pas l'espace entre les deux, mais j'utiliserais une chauve-souris. Maintenant, il est en train de gâcher toute ma section ici. Essayons donc de le presser, de l'emballer. Le problème, c'est celui-ci. Pressons ça comme ça. Pour le texte, nous allons utiliser une largeur fixe. Cela va avoir du contenu et il s'agit d'une largeur fixe. C'est ainsi que vous allez utiliser le conteneur de remplissage et le contenu chaud et largeur fixe à l'aide de votre disposition automatique. Si vous avez des questions, demandez-moi. Je serai toujours là pour répondre à ces questions. C'est le concept le plus déroutant, que vous devez utiliser sur l'enfant ou le parent. Assurez-vous donc que si vous disposez d'un bouton d'extension automatique, tout sera réglé pour embrasser le contenu et le parent sera réglé sur l'espacement entre eux. Par exemple, cet espacement de mise en page, je vais le définir sur 40, 30 ou 20, quel que soit l'espacement que je veux entre les éléments et c' est le rembourrage. C'est donc tout. J'espère que vous avez compris ce concept de conteneur rempli de contenu, mise en page automatique, d'espacement, de redimensionnement. Dites-leur que nous la rencontrerons dans la leçon. Prends soin de toi. Adieu. 19. Barre de navigation réactif dans Figma à l'aide de la mise en page automatique: Bienvenue dans un autre tutoriel Figma où nous allons créer une barre de navigation réactive à l'aide Figma et nous utiliserons la mise en page automatique. Commençons. Je vais vous montrer comment utiliser la mise en page automatique pour créer une barre de navigation réactive dans Figma. Commençons maintenant et créons cette barre de navigation réactive. Appuyez sur T pour créer un texte. Et nous allons taper chez nous. Reproduisons cela en maintenant la touche Alt enfoncée. Et nous allons utiliser la commande D pour en avoir une autre copie. Et nous allons le nommer, appelons ce seul contact. Et sélectionnons tous ces éléments et nous allons répartir l' espacement horizontal entre eux juste pour nous assurer que l'espacement est exact. En ce moment, il est 19 ans, il faut l'augmenter. Utilisons 46467. Entre eux. Nous allons maintenant les sélectionner tous et ajouter la mise en page automatique. Nous avons d' abord créé trois calques de texte, des calques texte simples, et nous avons créé un cadre autour d'eux. Ici, nous avons le cadre juste pour contrôler ces objets. l'heure actuelle, la direction du cadre est dans la direction horizontale. Donc, si nous essayons d'ajouter, vous pouvez voir si nous ouvrons ce cadre et essayons d'ajouter une nouvelle commande D. Vous pouvez donc voir qu'elle va s' ajouter dans la direction horizontale, donc c'est la bonne direction. Ok, donc nous avons ici, appelons ça des liens. Masquons cette barre de navigation maintenant, le bouton du bas. Bon, donc nous avons celui-là. Et l'étape suivante est que nous allons créer nos boutons. Encore une fois, nous allons devenir prestigieux. Ce sera notre bouton. Appelons ça login. Et nous allons ajouter une mise en page automatique à ce quart de travail, une mise en page automatique ajoutée. Nous allons donc ajouter une couleur de remplissage de ce bouton à ce bouton. Utilisons ce vert ou peut-être ce bleu. Et la couleur du texte sera blanche. Nous avons donc le bouton prêt, et ajoutons un peu de rembourrage ici de huit. Et à partir de là, nous allons utiliser différents rembourrages de tous les côtés. Pour un bouton, nous allons utiliser huit en haut, 16 ici, 16 à droite et huit en bas. Ce sera notre modèle. Appelons-le ça. Appelons ça TTN. Gardez-le Gideon. Et nous allons le répliquer en maintenant la touche Alt ou Option enfoncée. Et nous allons les séparer 16 pixels. Vous pouvez donc voir appuyer sur touche Alt ou Option enfoncée pour voir l'espacement. Et nous allons appeler ça s'inscrire. Maintenant, vous pouvez voir qu'il se développe seul car nous avons configuré le redimensionnement pour étreindre le contenu. Ainsi, chaque fois que le contenu va étendre le conteneur global, il va étreindre le contenu en conservant l'espace que nous avons spécifié. Vous pouvez voir si nous cliquons sur le bouton, nous avons dix espacement. Dan est donc l'espacement entre deux objets. Il s'agit des marges ou des rembourrages que nous avons appliqués. Il va toujours les garder. Cliquons sur celui-ci et nous allons utiliser une autre couleur, peut-être orange pour vous inscrire. Prenons l'orange. Nous avons maintenant deux boutons. Et c'est aussi, nous avons en fait trois mises en page automatique. L'une est celle des liens vers nos boutons, un bouton, un deuxième bouton. Nous allons tous les sélectionner. Encore une fois, nous allons appuyer sur Maj a. Et vous pouvez voir que nous avons ce cadre de mise en page automatique, ce sera donc notre NANDA. Et avant cela, je pense que nous devons avoir un autre cadre pour les boutons. C'est en fait z. Alignons d'abord ces boutons, décalons a pour avoir une disposition automatique pour ces boutons et nous allons les appeler, mais parce que nous devons organiser la disposition des deux boutons aussi. Si nous voulons contrôler l'espacement entre deux boutons, nous pouvons le faire ici. Prenons 12 ici en ce moment. Et maintenant, nous avons des boutons, les deux boutons dans un autre cadre de calque. Maintenant, ce que nous allons faire, c'est que nous allons sélectionner tous ces éléments. Vous pouvez voir à gauche, c'est très important. Nous avons des boutons. Encore une fois, à l'intérieur des boutons, nous avons deux boutons différents disposition automatique. Ensuite, dans les liens, nous avons trois couches de texte. Maintenant, nous allons tous les sélectionner. Maj a. Et vous pouvez voir que nous avons cette barre de navigation, presque la barre de navigation terminée. Vous pouvez maintenant voir que notre texte progresse. Ainsi, chaque fois que nous créons quelque chose comme ça, il arrive parfois que notre texte remonte. Vous pouvez voir qu'il s'agit de l' espacement entre les éléments. Donc, si j'essaie de le réduire, vous pouvez voir qu'il va se rapprocher du texte que nous avons ici. Pour régler ça. Vous pouvez voir que j'ai sélectionné cette barre de navigation. C'est très important. Et je vais aller au milieu comme ça. Il s'agit des options d'alignement. Donc, si je l'utilise, vous pouvez voir que le texte est aligné en haut. En bas. Et vous pouvez le voir en bas, et nous allons le sélectionner. Il sera à gauche et au milieu. Nous allons maintenant ajouter une couleur de remplissage au snack-bar, qui va être blanc. Utilisons du blanc. Et à partir de là, nous allons utiliser un rayon de huit pixels. Et ici, nous allons utiliser du rembourrage en haut. Prenons 16. En bas. Prenons 16. Ajoutons 24 à droite et 24 à gauche. Maintenant, vous pouvez voir que notre barre de navigation est prête. Nous avons appliqué tous les rembourrages autour de lui en utilisant ce panneau ici. Maintenant, si vous pouvez voir si nous avons essayé de l'étendre, il ne s'étend pas, le contenu ne s'étend pas, il n'est pas réactif. Parce que vous pouvez voir ici que cet espacement est défini sur personnalisé. Donc, pour l'instant , nous devons régler cela. Pour ce faire, nous devons aller ici. Et nous allons passer à, revenons partout où nos paramètres d'origine et notons. Vous pouvez voir que j'ai sélectionné barre de navigation et nous allons passer à l'espace entre ce qu' il fait, vous pouvez voir maintenant cet espace entre les éléments est en fait réglé sur automatique, donc il est en ajustant automatiquement l'espace chaque fois que j' essaie de faire glisser ou de réduire la barre de navigation. C'est l' astuce derrière cette réactivité. Vous pouvez donc voir maintenant si j'essaie de faire glisser quelque chose comme ça, vous pouvez voir maintenant qu'il est entièrement réactif. C'est donc la dernière étape. Vous pouvez maintenant voir qu'une barre de navigation réactive est presque terminée. Maintenant, si nous voulons ajouter quelque chose ici, par exemple, je souhaite ajouter des notifications. Appelons ça des notifications ici. Ou peut-être quelques messages. Si je veux ou faire glisser quelque chose ici en haut, par exemple, j'ai un petit point rouge pour les notifications. Par exemple, celui-ci. Et si j'essaie de le faire glisser et de le placer ici, vous pouvez voir que cela me montre qu'il va être déposé dans cette mise en page automatique. Il adopte donc automatiquement la disposition automatique. Si j'essaie de le laisser tomber comme ça, il sera ici. Si vous ne le souhaitez pas ou si vous voulez échapper à ce comportement, vous devez maintenir votre barre d'espace et simplement la faire glisser et la déposer comme ceci. Et ça va se passer comme ça ici. Essayons de le faire un peu. Nous avons ici les messages. Vous pouvez le déplacer comme ça. C'est ainsi que vous créez une barre de navigation réactive dans Figma. J'espère que cette vidéo vous a plu et veillez à regarder la prochaine vidéo. Donc, d'ici là, nous nous retrouverons dans une autre vidéo avec un autre truc Figma et Tutorial, prenez soin de vous et adieu. 20. Fenêtre modale de boîte réactive dans Figma: Bienvenue dans une autre vidéo sur Figma. Et aujourd'hui, nous allons créer une fenêtre modale réactive. Ou vous pouvez dire une mise en page automatique complexe en utilisant Figma. Commençons. Je vais d' abord vous montrer ce que nous allons construire et je vais vous montrer des techniques, comment réaliser fenêtre réactive ou un protecteur d' interface utilisateur de carte que vous pouvez construire à l'aide de Figma. Commençons. Vous pouvez donc voir à l'écran que nous avons la page automatique de la fenêtre modale réactive. Et c'est la fenêtre modale que nous avons construite. Donc, si nous essayons de le presser de droite, vous pouvez voir qu'il est entièrement réactif. Les boutons et l'icône des vêtements restent en haut et en bas et leurs positions fixes et leur texte sont en fait pressés avec la boîte. C'est très facile à créer. Je dois vous montrer quels sont les calques qui s'y trouvent. Nous avons donc des boutons aux boutons qui se trouvent à l'intérieur des cadres automatiques, puis ils sont combinés dans un autre cadre automatique. Nous allons créer cela. Commençons donc. abord, nous allons créer notre bouton. Appuyez sur T. Je vais avoir cette suppression, ajouter une mise en page automatique à ce quart de travail. Nous avons ajouté la mise en page automatique. Ajoutons la couleur de remplissage ici. Et cette fois-ci, nous allons utiliser cette couleur rouge pour le texte. Nous allons utiliser la couleur blanche. Ici, nous avons notre bouton de base et vous pouvez voir qu'il s'agit du rembourrage autour l'article et il s'agit d'un espacement. Pour le prochain article. Essayons d'utiliser un rembourrage de 81620 à droite. Prenons 28 ici. Ce sera mon bouton. Ajoutons des coins arrondis, huit pixels par ici. Nous allons en utiliser quatre. Ici, nous avons notre bouton de descente. Je vais utiliser 1010 en haut et en bas. Nous avons donc une bonne taille mais un bouton. Nous avons notre bouton. Appelons ça btn. Nous allons le répliquer en appuyant ou en maintenant la touche Alt ou Option et en la répliquant. Et je vais le placer, disons 16 pixels de distance. Et cette fois, je vais changer de couleur à cette couleur. Et cela va être annulé. En ce moment, vous pouvez voir que nous l'avons configuré pour étreindre le contenu. C'est pourquoi il se développe réellement en modifiant son contenu. Il s' adaptera donc toujours au contenu et s'étendra et se contractera. Lorsque nous avons ce réglage, qui est câlin, étreignez le contenu. Ok, donc nous avons les deux boutons. Enveloppons-les, à l'intérieur et à d'autres mises en page automatique. Donc, Shift, j'ai sélectionné ces deux équipes. C'est vraiment important. Il s'agit de boutons. Jusqu'à présent, nous avons créé des boutons de mise en page automatique dans le cadre d' un autre bouton, qui est le cadre de mise en page automatique. Et nous les avons combinés dans les deux. Vous pouvez donc voir ici que nous avons la direction de mise en page automatique horizontale. Donc, si nous avons ajouté un peu et que ce sera sur la droite. C'est l'espace entre eux. Donc, si vous voulez contrôler l'espace 12 pixels ou dix pixels entre eux, que vous puissiez le faire ici, nous avons nos boutons prêts. D'accord ? Nous avons maintenant besoin d'un texte et d'une icône. Ici, nous avons notre bouton. Prenons un titre. Rubrique. Par ici. J'ai essayé d'utiliser le gras. Utilisons 24. Je vais reproduire ça. Une fois encore. C'est, essayons d'utiliser un meilleur graphe donc d, donc je vais utiliser un cadre comme celui-ci, comme celui-ci. Et essayons de voir si c'est le cas, c'est une boîte. Je vais utiliser les arrières de contrôle jusqu'à la barre oblique Lauren. Plus. Essayons d'ajouter quelques textes ici. Verbes anglais, graphique. Nous allons ajouter deux paragraphes ici. C'est notre paragraphe. Utilisons 1616. Nous allons utiliser régulièrement. Nous allons utiliser un paragraphe. Je pense que je devrais supprimer le second. Je vais ignorer tous ces paramètres. C'est juste, utilisons quelque chose comme ça. Peut-être quelque chose comme ça. D'accord. Nous avons notre paragraphe de texte, qui est celui-ci. Celle-ci, et je vais faire semblant. Et maintenant, nous allons ajouter une icône ici. Ajoutons une icône, des icônes, une icône en croix. Nous allons ajouter une autre icône ici pour le bouton de fermeture. Utilisons des flux. Donc, cette fois-ci, utilisons-le. C'est notre bouton. Essayons d'utiliser cette couleur, peut-être celle-ci. Pour fermer cette fenêtre. Nous avons ce cercle ici. Maintenant, nous allons tous les sélectionner. Et décaler la poitrine et ajouter une mise en page automatique. Vous pouvez voir maintenant que la mise en page automatique a été ajoutée. Appelons ça la commande. Il faut ajouter une couleur de remplissage qui va être blanche. Nous avons besoin d'un rembourrage ici. Donc 16 en haut, disons 24 à gauche, 2416 en bas. Vous pouvez voir que nous avons la disposition de base de notre fenêtre modale. Nous allons utiliser des coins arrondis. Utilisons un peu d'ombre autour de lui. pourcentage d'ombre va être deux. Celui-ci, nous avons ajouté une ombre très claire autour de lui. Maintenant, vous pouvez voir que nous devons utiliser quelque chose qui va être cette mise en page. J'ai sélectionné ce modèle, modèle et nous allons utiliser la bonne mise en page. Donc, pour amener ces boutons et tout ce qui se trouve à droite, vous pouvez voir ces boutons, ce texte, ces boutons du bas et ce coin. L'un d'eux a été déplacé vers la droite. C'est ainsi que vous allez y parvenir. La première étape est la suivante. Et ensuite, si nous essayons de presser cela, vous pouvez voir que le texte ne répond pas parce qu'il sort de la boîte. Pour ce faire, nous devons cliquer sur le texte et plutôt que de fixer une largeur, nous allons utiliser le conteneur de remplissage. De même pour celui-ci, ce conteneur sera rempli. Vous pouvez voir maintenant qu'il a déjà rempli le conteneur, ne nous reste plus qu'à l'utiliser. Et vous pouvez y voir notre boîte réactive et notre taxe est en fait en train de serrer avec elle. Vous pouvez voir que la distance entre ces deux personnes est réellement contrôlée à partir d'ici, nous en avons dix. Donc, si j'essayais de réduire, non pas les boutons, mais la fenêtre du modèle. Donc nous en avons 23, nous allons utiliser 16. Et ça va se passer comme ça. C'est le, si vous voulez contrôler plus de choses, vous pouvez leur donner une autre disposition. J'ai donc sélectionné ces deux textes et je vais leur donner plus de mise en page automatique. Et plutôt que du contenu chaud, nous devons à nouveau utiliser le conteneur complet. Et ici, nous pouvons contrôler l'espacement entre le texte uniquement. Vous pouvez donc voir si, par exemple, je veux que ce soit comme ça. Maintenant, si j'essaie de le sélectionner et de le presser, oups, que se passe-t-il ? Le cadre est en fait le cadre. Je pense que le texte a été déplacé. Une fois encore. Nous devons faire le conteneur complet. Et tu peux encore affronter. C'est un autre moyen. Donc, en ce moment, mon texte est en fait à l'intérieur. Ces deux textes se trouvent dans une autre mise en page automatique. Vous pouvez voir ici du texte dans une autre disposition d'artère. Vous pouvez faire de même sans cette mise en page automatique, mais j'adore contrôler l'espacement entre mes différents éléments. C'est ainsi que vous pouvez le faire. Cela résume notre fenêtre modale, où nous créons une fenêtre modale réactive, qui va être pressée et élargie et les textes que nous allons enrouler avec toutes les bordures sont l'espacement ou le rembourrage autour. J'espère que vous avez aimé ou apprécié cette vidéo de mise en page automatique. Assurez-vous de regarder mes autres cours, lunettes, cours vidéo et vidéos YouTube. Je vous rencontrerai dans une autre vidéo d'ici là, prenez soin de vous. 21. Système de typographie - Échelles et styles 01: La première étape de votre système de conception sera la typographie. Nous allons donc sélectionner la typographie, puis son échelle et différentes catégories. Titre, titre un titre, sous-titre, légende, toutes ces catégories différentes. Nous allons définir cela dans notre système de conception. Commençons donc et c'est là que vous commencerez. Créons donc un nouveau cadre. Et nous allons appeler ce cadre Bob Murphy. Maintenant, nous allons sélectionner n'importe quel Typhée. Vous devez expérimenter à ce sujet. Il y a une autre classe, ma classe, qui concerne les directions de conception, la sélection de polices de caractères. Nous n'allons pas examiner comment vous allez sélectionner cette police de caractères. En ce moment, je vais sélectionner n'importe quelle police de caractères, appelons-le portail. Texte. Base, la taille de la police de base va être de 18. Essayez de zoomer pour que vous puissiez voir correctement. Nous avons donc ici des textes Roberto, et maintenant je vais utiliser un plugin en appuyant sur la barre oblique Contrôle ou Commande avant. Et c'est ce qu'on appelle des échelles. Voyons laquelle est l' échelle est égale à l'échelle de type. Ce type est échelonné. Nous l'avons ici. Et vous pouvez voir que cela me montre la valeur d' échelle qui est 1,25 et la hauteur de la ligne est de 1,2. Je vais le régler à 1.4. Six échelles vers l'avant, ou de petite à plus grande, plus grandes tailles, de tailles trop petites. Bon, je pense que j'en ai besoin , c'est bon. Je vais cliquer sur Générer. Et ici, nous avons notre échelle en ce moment. Vous pouvez voir qu'il a créé une très belle échelle. Supprimons cela. Et je vais supprimer celui-ci et je vais également utiliser cette biographie de cadre. Vous pouvez voir que cela me montre que c'est notre valeur de base est 18, l'échelle est de 1,25. Et voici nos différentes tailles. Normalement, nous allons les nommer correctement parce que ce n'est pas ce dont nous avons besoin. Il s'agira donc de notre titre, de notre titre ou de notre titre, quelque chose comme ça. Appelons-le un. Appelons-le simplement, appelons-le H1. Si nous avons plus de styles, par exemple, barre oblique de bureau, c'est à vous de décider. Donc, si vous avez deux ou trois échelles différentes pour les applications de bureau et mobiles, différentes échelles, c'est une autre histoire. En ce moment. Vous pouvez voir, oui, les garder. Et je vais le faire, ce que je vais faire c'est de les nommer en premier. Appelons-le ça. En ce moment. Ce que j'essaie de faire, c'est que j' essaie de les nommer correctement. Appelons ça sous-titre. Appelons ça un sous-titre. Sous-titre. Appelons ça un sous-titre petit. C'est ce qu'on appelle ça la 4D. Je vais vous montrer pourquoi je nomme cette légende. Appelons ça au-dessus de la ligne. Celui-ci va être notre légende. 12 pixels sont notre texte de légende et c'est notre ligne. Je vais donc changer de style. Toutes les lacunes. Des lacunes. Celui-là, tous les casquettes comme ça. Et je vais aussi augmenter espacement de ses caractères à 10%. Utilisons 5% ou 1% Ok, pour que vous puissiez voir que c'est un texte en ligne que je vais partager avec vous pourquoi je fais cela. Voici les directives relatives à l'interface humaine d'Apple, et vous pouvez voir qu'elles ont ces différents styles. Grand titre, titre 1, titre 23, semi-gras, légende du corps, sous-titre, sous-titre, légende de note de bas de page 1 et légende également. C'est donc en fait leur échelle. Il s'agit de différentes catégories qui vont être implémentées dans le système de conception Apple. Si nous examinons Material Design System, vous pouvez voir que nous avons Headline One, 234566 titres. Ensuite, nous avons deux sous-titres à la taille du corps. L'un est le corps de 116 pixels. espacement est également mentionné 0,5. Nous avons ici 14 pixels. Le bouton est un peu plus gros. Les pixels protéiques, le poids moyen, le moyen et la légende sont ici. Et puis, nous avons un sous-jacent. surexposition, c'est que je vais vous montrer en fait. Ok, donc vous pouvez voir que c'est à quel point il utilise surligne est en fait la ligne en haut de n'importe quel titre. Nous avons peut-être choisi une catégorie, quelque chose comme ça. Titre et corps. Il s'agit du corps du texte. C'est ainsi que vous allez appliquer votre système de conception ou vos échelles de type à votre système de conception. Revenons maintenant à Figma. Et maintenant, nous allons créer des styles de type ici. Je vais le faire, je maintiens Control and Shift. Commande et Maj et cliquez uniquement sur ces en-têtes ou taxes ici. Non, je les ai tous sélectionnés. Je vais exécuter un autre plugin, contrôle ou un autre style de barre oblique. C'est un très joli plugin qui s'appelle styles de type. Vous pouvez également utiliser une famille de polices, taille de police, tout ce que vous voulez utiliser. Par exemple, je vais utiliser une famille de polices dans le nom. Utilisons la taille de police. Et nous allons utiliser. Je pense que ce serait génial. Je suis donc en train de renommer, de les nommer. Faisons des styles de type et vous pouvez voir que ses problèmes ont créé neuf textiles de type. Si je sélectionne ici, vous pouvez le voir, il a créé Roboto. Et à l'intérieur de Roboto, j'ai tous ces textiles. Laissez-moi voir ce qui s'est passé ici. Donc, en fait, le nom que nous avons suggéré, nous avons suggéré que le nom du type est. Cliquez ici. Vous pouvez voir si je les supprime en appuyant sur Supprimer, je peux les recréer. Essayons de les recréer. Je maintiens ma touche Commande et Maj enfoncée ou les touches Ctrl et Maj. Encore une fois, je vais exécuter les mêmes styles de plug-in. Vous pouvez maintenant cliquer sur Texte personnalisé. Appelons-les des styles de type. Par ici. Je vais utiliser la taille de la famille de polices. Et cliquez sur Make type size. Maintenant, vous pouvez le voir encore neuf fois en 10e année. Et si nous cliquons ici maintenant, vous pouvez voir que nous avons un style de type et en ce sens que nous avons Roboto. Et ce sont des tailles de types différents. Et vous pouvez voir 140 c'est en fait la hauteur de ligne. 22. Système de typographie - Échelles et styles 02: Ce sera la première étape de la création de votre taille de type. Une fois que nous avons mis à niveau la taille de notre type, la prochaine chose est que nous allons également créer d' autres éléments qui peuvent vous montrer ce qui se passe. Ce sont donc des cadres. Ensuite, essayez de le rendre un peu plus grand. Et pourquoi cette mise en page automatique sur ce cadre, je dois supprimer la mise en page automatique. Disposition. Ok, donc c'est un cadre normal. Maintenant, permettez-moi d'ajouter quelque chose ici, ce qui va être notre usage. Nous devons donc montrer à nos développeurs ou à d'autres concepteurs que c'est ainsi que vous allez utiliser cela. Disons un paragraphe d'en-tête. Ici, nous avons celui-là. Et si nous passons aux actifs ici, nous devons utiliser ces styles. Essayons de l'utiliser avec un paragraphe. Encore une fois, nous allons reproduire cela et nous allons avoir une distance de 1828. Utilisons 24. Plutôt que d'utiliser 44, nous allons utiliser 18, ce qui est notre paragraphe. Changez la couleur de ce paragraphe en gris un peu plus foncé comme celui-ci. Utilisons un autre lorem. Plus. Nous allons utiliser un paragraphe anglais ou deux paragraphes. Nous l'avons ici. Appliquez quel textile, qui est 18 ans, changez la couleur. Maintenant, vous pouvez le voir, nous leur montrons qu'il s'agit l'exemple d'utilisation d'un titre avec un paragraphe. Il aura donc également l' espacement entre eux. Vous devez également montrer à l'espacement que cela va être un espacement. Il s'agira des couleurs de l'en-tête et des couleurs de paragraphe que nous allons créer dans la prochaine leçon. heure actuelle, cela nous préoccupe davantage. Par conséquent, ici, vous pouvez également créer un lien texte ici si vous le souhaitez. Qu'en est-il d'un paragraphe ici avec un surlignement ? Créons donc ce flux de surligne ou ces textes ici. Appelons cela surligne catégorie, catégorie produit. Maintenant, nous allons sélectionner au-dessus de la ligne à partir d'ici. Bon, donc il y avait 14 ans, en fait. Nous l'avons. Nous allons également montrer l' espacement entre eux, qui sera de huit. Oups. En ce moment, il est neuf. Ce que je fais en fait, c'est que je maintiens ma touche Alt ou Option clique sur l'un des éléments et que je passe également à Microsoft vers un autre. Il montre qu'il est espacé de huit pixels. C'est ainsi que vous allez leur montrer. De plus, vous pouvez utiliser une certaine couleur ici, par exemple, essayons d' utiliser ce violet. Violet. Essayons de l'utiliser. C'est ainsi que vous allez montrer à vos développeurs et concepteurs que c'est tout ce que vous allez utiliser mon texte avec sous-jacents et des en-têtes, et c'est ainsi que seront les paragraphes. Vous pouvez voir la hauteur de la ligne. Donc, si vous voulez modifier la hauteur de la ligne ou quelque chose, vous devez cliquer sur n'importe quelle zone vide et vous devez aller plus loin dans ce textile et essayer de modifier les paramètres ici. Par exemple, nous avons ici 8 % et je veux en avoir 10 %. Vous pouvez maintenant voir qu'il a 10 % d'espacement. Ici, dans ce style, c'est ainsi que vous allez les nommer. Vous pouvez également les nommer. Par exemple, si j'ai ceci, je peux simplement cliquer ici. Et plutôt que d'en avoir 14, je peux aussi utiliser cela est en fait sous-jacent. C'est une légende. Assurez-vous donc de les nommer correctement. C'est notre corps. C'est ce qu'on appelle ça un sous-titre. Oui. Il s'agit d'un sous-titre. Nommez-les correctement. C'est un gros titre. C'est la première position. Appelons ça la tête d' un chacun à h3. Vous pouvez donc voir maintenant que les noms sont plus significatifs et plus faciles à mémoriser. C'est ainsi que va être votre fichier texte. Je vais partager avec vous mon projet. Permettez-moi de vous montrer ce que j'ai fait dans ce textile ici. Ici, j'ai l'échelle de type. Vous pouvez voir ici que j'ai l'échelle de type 123. Je ne montre pas les tailles ici parce qu'elles sont à l'intérieur de ce texte. J'ai différents textes pour ordinateur de bureau mobile, carte, trois ou quatre liens différents de traitements de texte gras. Et vous pouvez voir ici que nous avons des styles de couleurs. Si vous regardez ici, vous pouvez voir que je montre mon traitement fiscal dans les deux milieux, sombres et plus légers. Laissez-moi vous montrer. Nous avons donc ici les composantes des textes. Vous pouvez donc voir ici les textes avec l' en-tête, puis nous avons le corps du texte, puis nous avons un bouton. Je montre en fait que c'est ainsi que vous allez traiter vos textes. De même, vous pouvez voir si vous voyez ici qu'il s' agit d'un élément de liste avec un paragraphe. Il montre également les distances qui les séparent. C'est encore une fois une grosse rubrique. Vous pouvez donc voir si je clique dessus, vous pouvez voir que c'est la rubrique 75. C'est ainsi que je les nomme réellement. C'est donc comme ça que je les nomme en-tête barre oblique de texte . Et il s'affiche pour différentes rubriques. Encore une fois, l'en-tête oblique mobile de texte barre oblique. Pourquoi je vous montre cela, parce que vous devez savoir qu'il existe nombreuses façons de les nommer correctement. Je peux donc simplement vous guider comment commencer à construire votre système de conception. Le repos dépend de la façon dont vous sélectionnez réellement la phase TI. caractères différente pour l'en-tête, police différente pour le corps du texte. Vous pouvez voir que je suis plutôt que d'utiliser body, j'utilise un paragraphe. Vous pouvez voir qu'il s'agit du paragraphe 14182430 du bureau. C'était donc pour un projet de conception Web. Je n'ai donc pas utilisé de légendes ou de petites étiquettes sont des notes de bas de page ou quelque chose comme ça. J'utilise donc ces quatre tailles. Assurez-vous que chaque fois que vous construisez votre système de conception, vous affichez également l'utilisation du type. Vous pouvez voir ici dans le coin l'utilisation du type. Il est très important de savoir comment vos développeurs vont savoir comment utiliser ce composant ou comment espacer les choses, comment utiliser ces paragraphes. Vous pouvez également, par exemple, tout ce paragraphe entier avec votre en-tête, vous pouvez créer un composant. Et vous pouvez voir ici que c'est un composant. Donc, quand je le veux, je peux essayer de faire sortir mon composant. Nous avons donc ici le texte des composants. Nous avons ici des textes de composants. Je peux donc simplement le faire glisser et le déposer n'importe où. Et il va créer un texte de composant ici. Ce sont, vous pouvez dire les clés de la création d' un système de conception. Vous créez des échelles de types, sélectionnez votre police de caractères de base. Vous créez des échelles de types, puis vous créez des types de styles. Ensuite, vous créez des composants à l'aide de ces styles de type, à l'aide de votre en-tête et votre paragraphe, et vous les avez partagés avec vos développeurs. Et ils vont simplement le faire glisser et le déposer. Et tous vos autres designers et ils vont l'utiliser dans votre système de conception. Tout cela concerne les échelles de texte et de type, appuyez sur Styles de texte. Je vous verrai bientôt dans la prochaine leçon où nous allons discuter des couleurs. 23. Échelles et styles de couleurs dans le système de conception 01: Bienvenue dans une autre vidéo sur le système de conception. Aujourd'hui, nous allons gérer nos couleurs. Nous allons générer des couleurs, des échelles. Ensuite, nous allons donner à des fins tardives deux couleurs différentes que cette couleur est à cet effet. Cette couleur est à cet effet car si nous voulons créer des échelles, nous aurons peut-être 4050 couleurs. Mais nous n'allons pas tous les utiliser. Nous allons peut-être utiliser des courbes sélectives de dix ou 12 courbes. Nous devons préciser que cette couleur est destinée à cet objectif spécifique. Commençons donc et voyons ce que nous pouvons faire. Maintenant, vous pouvez voir que j'ai ici, allons zoomer dessus. Ce sera ma palette de couleurs de départ. Et j'ai utilisé un outil Web de serveur Web, appelé celui-ci, Coolers dot CEO. Et j'utilise Generate et créé le jeu de couleurs à partir d'ici. La première couleur, qui était violette que j'ai choisie moi-même et les autres supportent en fait des couleurs que vous pouvez générer ici. Il suffit, par exemple, si vous voulez verrouiller celui-ci, par exemple, supposons que celui-ci soit ma couleur principale. Si j'appuie sur la barre d'espace, vous pouvez voir qu'elle va générer des couleurs différentes liées à celle-ci. Peut-être que je veux utiliser le violet avec un certain Sian, ce qui est une très bonne combinaison. Également vert. Je vais les verrouiller, je vais faire tourner les autres. Prenons un 12 noir. Et nous allons utiliser celui-ci. C'est ainsi que je crée un jeu de couleurs et je l'exporte en SVG pour commencer à construire mon design. Nous avons donc ici des couleurs très nettes. Nous avons ici 12345 couleurs, cinq couleurs, et l'une sera nos noirs, une sera notre couleur principale, autre sera notre couleur secondaire. Commençons donc par celui-ci. Nous l'avons ici. Dissocions cela et supprimons ces éléments. Celui-ci va être ma couleur principale. Celui-ci va être ma couleur secondaire. Vous l'avez vu dans les boutons. Laissez-moi vous montrer. Si je vais ici, vous pouvez voir que c'est notre couleur principale, c'est le violet et c'est l'action secondaire explorée. Il s'agit d'une deuxième action, secondaire. Et nous l'utilisons. Vous pouvez voir que c'est notre couleur tertiaire lorsque nous avons un champ actif, vous pouvez voir que nous avons une couleur espagnole espagnole très bleutée, bleu verdâtre bleutée, bleu verdâtre. Revenons donc au guide de style. C'est donc notre véritable déclenchement ou laissez-nous dire. Nous pouvons également appeler cela une couleur active. Ce sera notre noir. Gardons ça ici comme ça. C'est notre couleur supplémentaire. Nous allons l'utiliser quelque part dans un endroit où nous n'allons pas l'utiliser. À part cela, il se peut que nous ayons besoin d'une couleur rouge. Pour les ajouteurs. Peut-être. Essayons de reproduire celle-ci car notre statut, couleurs d' état sont en fait appelées couleurs sémantiques. Les voitures sémantiques vont montrer les stériques de différents objets, différents éléments. Essayons donc de passer à ce bleuâtre. rouge. La saturation, c'est trop. Allons-y plus près. La saturation est trop importante, donc je vais réduire la saturation. Voici donc une saturation au milieu. Essayons deux, rendez-le moins saturé et essayons d' augmenter ou de diminuer sa luminosité. Teinte. Je voulais encore être un peu plus rouge. Celui-ci semble bien. Essayons. 99 teintes. La luminosité serait de 7490. Ce sera ma couleur pour mon statut. Nous allons donc agrandir ce plan de travail. J'ai des couleurs. Essayons de l'étendre à deux. Maintenant, nous allons également réduire la taille de celle-ci. Nous allons tous les sélectionner. Sélectionnez-les tous. Faisons un 100 par 100, comme ça. Nous allons arranger ça comme ça. Nous voulons d'abord le but de la couleur. Appelons-le donc. Il s'agit du texte du suiveur de couleurs. Ce sera donc nos textes en noir. Donnons un nom ici. Couleurs du texte. ne sont peut-être que des couleurs noires. C'est trop petit. Je vais l'utiliser ici, 18 ans ou ici. Et je vais utiliser Roboto. Vous pouvez peut-être aussi apporter ça ici. C'est une boîte d'information. Je vais le reproduire ou frapper. Ce serait plus facile pour moi. Vous savez, utilisez tout. Allons-les vers le bas. Faisons en sorte que ça soit comme ça. Nous avons ici nos échelles de couleurs, vous devez donc les renommer. Je vais sauter ça. Nous avons notre palette de couleurs. Nous devons maintenant créer des compétences. Pour cela, nous allons utiliser un contrôle ou une commande de plugin, une barre oblique, des échelles de couleurs, un générateur d'échelle de couleurs. Je vais donc utiliser il y a beaucoup de plugins. J'ai une vidéo complète sur la façon de les créer. moment, j'ai sélectionné cette version verte. Donc, si je clique sur, je vais sélectionner, sélectionnons une étape dense et cliquez simplement sur Créer. Je vais créer tout ce jeu de couleurs. Vous pouvez voir ici, c'est ce que nous avons ici. De même, nous allons répéter les mêmes étapes pour toutes ces étapes. Je vais sauter ça car cela rendra la vidéo très longue. Vous pouvez maintenant voir que nous avons généré notre jeu de couleurs. Vous pouvez voir que ce sont nos échelles de couleurs. Ceux-ci sont vraiment superbes. Si vous voulez avoir une couleur neutre, vous pouvez avoir quelque chose ici avec le noir, peut-être une couleur vert clair ou peut-être un peu de lumière couleur bleuâtre terne qui dépend de vous. En ce moment, je vais utiliser ces noirs pour mon noir et blanc pour mes couleurs DAX. Et ce sera notre couleur principale d'action principale. Il s'agit en fait de notre couleur d'action secondaire. Et nous n'allons pas tous les utiliser. Nous allons donc sélectionner les couleurs qui vont être utilisées ici. Donc, peut-être que si vous le souhaitez, vous pouvez étendre cela ou utiliser quelque chose, l'espace ici, essayons deux. Nous allons vérifier notre application maintenant. C'est donc notre couleur primaire, qui est 775 CFF 77, qui est, je pense que celle-ci, c'est en fait notre couleur principale. C'est la couleur de notre bouton d'action. Donc, peut-être que nous pouvons faire beaucoup de choses, comme peut-être que nous pourrions ajouter un coup autour de ça comme cinq. Ce sera notre couleur d'action principale. Ensuite, notre couleur secondaire était 79 billets FEC 47979 47979. Essayons de l'apporter ici. Nous voulons donc voir si cela va être craint. Il correspond en fait. Je pense que c'est très proche de celui-ci. Cette couleur ici deux, fc 98. Zoomons avant. Je pense que c'est plus proche de celui-ci. Celui-ci va être notre couleur. Ajoutons un coup de cinq ici. C'est donc notre couleur. Vous pouvez mettre en évidence les couleurs où vous pensez que ce sera notre couleur principale dans le même but, les couleurs primaires et secondaires, puis nous avons plus que le noir. Essayons donc quelle est la couleur de fond 1 sixième, 1 sixième, 1 sixième. Je pense donc que c'est plus proche de celui-ci. Je pense peut-être que c'est plus proche de celui-ci. Essayons donc de voir si la couleur d' arrière-plan est une e. Essayons de l'ouvrir. C'est dans le bleu, 209 à 516. La teinte est 209. Essayons donc de voir 209. Quelle est la teinte de ce 1188 ? C'est 250. Peut-être que ce dont nous avons besoin pour corriger cela, nous allons utiliser cette couleur, peut-être cette couleur, ou peut-être que nous pourrons utiliser cette couleur, celle-ci. Essayons de créer plus d'échelle de couleurs pour cette teinte plus foncée. Ou peut-être que nous allons utiliser le rouge. Reproduisez ça ici. Déplacons le curseur ici. Je vais utiliser cette couleur pour l'arrière-plan. Déplacez-les. Ce sera donc notre couleur d'arrière-plan. Mettons-le en surbrillance avec un trait de couleur blanche. Utilisons le rouge ici parce que nous ne pouvons pas le voir comme ça. Peut-être que si vous le souhaitez, vous pouvez les nommer correctement. Essayons donc de déplacer ça maintenant. Essayons de le retirer. Vous pouvez voir que vous êtes ici, c'est encore un 100, c'est encore un 100. Nous voulons l'appeler. Appelons ça le dixième. Nous devons les nommer correctement. Nous allons donc tous les sélectionner. Je vais vous montrer comment les renommer. Donc Control ou Command R. Nous allons donc les renommer, faire une barre oblique primaire à utiliser, appelons cela violet. Ensuite, nous allons utiliser un numéro comme celui-ci. Vous pouvez utiliser quelque chose comme ça. Vous pouvez également essayer utiliser un modèle numérique comme ajouter un 0 à la fin, comme ceci, puis 20, et nous allons appuyer sur le renommer. C'est ainsi que vous allez les renommer. Couleurs primaires slash violet, violet, violet, violet. C'est ainsi que ça va se passer. Essayons de les dissocier et de les sélectionner tous. C'est ainsi que vous allez les renommer, et c'est ainsi que vous allez créer des styles de couleurs à partir d'eux. Donc je vais aussi utiliser, vous pouvez faire une autre chose. Essayons donc de vous montrer notre nom actuel. Avant cela, nous allons utiliser des couleurs obliques de couleurs primaires. Ce sera donc plus, mieux. Ensuite, rhénium les comme cette couleur barre couleurs primaires slash la couleur que vous avez. De même, nous allons les dissocier et les sélectionner tous. Et encore une fois, nous allons les renommer en Fellows. barre oblique, barre oblique de couleur secondaire. Qualité supérieure, vert vif. vert. Ensuite, nous allons utiliser un numéro. numéro sera à la fin, nous ajouterons 03, supprimerons ce n, renommez. C'est ainsi que nous allons les renommer , puis nous allons tous les sélectionner. Nous allons lancer un autre plugin appelé Bad Schuyler, je pense. Essayons de le faire fonctionner. Oups. Nous devons penser qu' il existait une option permettant de créer plusieurs styles. Celui-ci a été généré. Ok, donc celui-ci est le plugin Tyler génère des styles. Cliquez dessus. Et il va générer tous les styles, 21 styles. Et vous pouvez voir ici, si nous allons ici, supprimons tous ces éléments. Vous pouvez voir que je vais supprimer les précédents. Le bleu principal va également être supprimé. Supprimons tous les textiles ici. Style de couleur, et vous pouvez voir ici nous avons des couleurs et à l'intérieur, nous avons la couleur primaire. Ensuite, nous avons notre couleur secondaire comme celle-ci. Vous pouvez voir que nous pouvons appliquer tous ces éléments comme ça. C'est ainsi que vous allez créer vos couleurs primaires, secondaires et toutes ces couleurs. Je vais donc faire de même pour les autres. Nous allons donc sauter ça. 24. Échelles et styles de couleurs dans le système de conception 02: Maintenant, vous pouvez voir que nous avons créé toutes les couleurs, tous les styles et tout. Et vous pouvez voir ici que nos couleurs sont joliment faites. Les couleurs primaires vont être ces couleurs. Couleurs secondaires ou cette échelle. Ensuite, nous avons des Noirs. C'est nos Noirs et Blancs. Ensuite, nous avons une couleur sémantique. Ce sont des bleus sémantiques, rouges et verts. Ce seront nos spécialistes du statut des couleurs sémantiques. C'est tout ce que vous avez à créer, tout votre jeu de couleurs, votre style de couleurs, tout ici. Et l'étape suivante est que vous devez montrer le but. Vous devez sélectionner différentes couleurs qui seront destinées à ces couleurs. Essayons donc de l' élargir comme ça. Essayons d'abord de les sélectionner et de mettre à l'échelle le tableau d'art. Appelons ça à gauche. Et normalement, il n'est pas nécessaire de développer cela. Là encore, celui-ci est également en train de se mettre à l'échelle. Appelons ça à gauche en haut. Tout cela aussi de gauche et de haut, nous les contraignons pour qu' ils ne s'adaptent pas à notre expansion de cette boîte. ce que nous avons créé. Essayons donc de donner le but à nos couleurs. Cette couleur était en fait, cette couleur était pour l'arrière-plan. Et je pense que cette couleur suivait notre action principale. Cette couleur était notre bouton secondaire. Nous allons écrire tout ça. Nous allons le sélectionner. Copiez-le ici. Comme ça. couronne. Et nous allons utiliser un diagramme à l'échelle un peu plus petite, ce 24. Oups, nous devons utiliser 24 types de taille. Cela va être notre couleur d'arrière-plan. Comme ça. C'est ainsi que vous montrez le but. Ensuite, nous allons montrer que ce sera notre action principale. On ne peut pas voir quelle est la distance qui les sépare. Il s'agira de notre deuxième réaction. Nous avons défini le but. Vous pouvez également l'aligner ici comme ceci. De même, pour les noirs, nous devons voir où nous avons utilisé, par exemple, celui-ci est utilisé pour les arrière-plans, pour les champs de texte. Et celui-ci était pour le contexte, nous l' avons déjà fait. C'est ce que nous allons chercher. Cela va être notre contexte. Je pense que c'était quelque chose de plus proche. Essayons d'attraper ça ici. C et collez-le ici pour voir quelle couleur correspond réellement. Il est très proche de celui-ci. C'est la couleur. Nous devons donc reproduire. Cela nous contrôle l' art d'appuyer sur Alt. Reproduisons-le. Et nous allons utiliser la même chose ici. Nous allons appeler cela la couleur d'arrière-plan. Et voyons si nous en avons d'autres. C'est aussi, je pense que la même couleur. C'est la même chose qui a été utilisée ici. Même couleur. Celui-ci est différent. 353344, et c'est dans cette teinte violette. Nous allons définir tous ces éléments. C'est notre contexte de contribution. Et c'était également quatre. C'est en fait le premier, appelons ça dabs background. Il s'agit également de l'arrière-plan des onglets. C'est ainsi que nous allons générer différents jetons. C'est donc le but et le jeton. Nous devons utiliser ces couleurs. Donc, si nous renversons l'équipe , nous allons inverser ces jetons. Assurez-vous que c'est le cas, vous avez spécifié qu'il s'agit la règle de lecture de cette couleur. Vous avez eu l'idée. Et c'est ce que nous avons fait. Quelques couleurs sémantiques. Voyons donc, je pense que c' était celui-là ou celui-ci. Utilisons celui-ci. Oops, ne sont pas optionnels ici. Il s'agit de notre contribution active ou active. Cela montre en fait qu'il s'agit d'une entrée active. Maintenant, nous devons le faire, nous en avons eu un autre. Reproduisons-le ici et essayons de changer la couleur. Je pense que nous avons utilisé quelque chose comme ça ou ici, laissez-moi vous montrer. Nous avons donc ici un autre pilier pointillé de couleur verdâtre. Je pense que c'était celui-là. Je vais prendre cette couleur. Supprimons celui-ci. Comme ça. C'est notre pourcentage ou notre barre de progression. Nous pouvons également appeler cela des progrès. Contexte. Ce n'est plus la couleur que nous avons manquée. Ici. Nous avons une analyse, qui est vert bleuâtre, en quelque sorte. Je ne sais pas quelle couleur est celle-ci. Essayons d'apporter cette couleur. Je pense que nous l' avons utilisé à quelques endroits. Celle-ci, je pense que c'est la couleur. C'est une autre couleur que nous avons utilisée ici. Alors, prenons-le. Cette couleur est en fait en progression. Appelons ça progrès, couleur foncée, progrès. Cela va être notre barre de progression pour les erreurs. Je pense que nous allons essayer de voir si une couleur s'applique ici. Essayons d'utiliser la frontière ici. Frappez et essayez de sélectionner la couleur à partir d'ici. Voyons lequel va correspondre. Celui-ci a l'air bien, lisez 50. Nous allons donc utiliser ça. Oups. Revenons à notre guide de style. lecture 50 est celle-ci. Celui-ci a fière allure sur une adder. Nous allons utiliser ce mortier. Nous devons utiliser le marché des intrants, d'accord ? C'est ainsi que nous faisons juste correspondre les distances. C'est ainsi que nous allons définir tous les objectifs. Je pense donc que notre palette de couleurs est prête. Une chose que nous avons manquée est en fait la couleur de notre texte. C'est donc la couleur de notre texte, qui est Créer un compte. C'est en fait cette couleur violacée. C'est donc en fait cette couleur. C'est la couleur de notre texte. Alors, déplacons-le ici. Vous pouvez également créer une section distincte ou ici pour les couleurs des textes. Prenons ça. Déplacez ça un peu plus bas. Comme ça. Allons le déplacer ici. Appelons ça du texte. Il s'agit de la couleur du texte de notre paragraphe. Il s'agit d'une rubrique, d'une rubrique. Je vais aller, parce que nous savons que c'est du texte. Nous avons une couleur, couleur de texte ici. Et essayons de trouver que nous avons mis en sourdine la couleur du texte ici, ce qui est un peu terne de couleur grisâtre ici. De plus, ce texte d'entrée est de la même couleur. Essayons donc de le rapprocher et de voir de quelle couleur il va correspondre. Je pense que ça va correspondre quelque part ici. Je pense que cette couleur, ou peut-être celle-ci, va mieux fonctionner. Essayons donc de créer un rectangle comme celui-ci et d'appliquer cette couleur ici. Je pense que c'est plus proche de celui-ci, cette couleur que nous allons utiliser pour le texte en sourdine. Prenons cette couleur. Nous allons l'utiliser ici pour un texte en sourdine. Texte, en sourdine. Ok, donc ici nous avons deux couleurs de textes. L'un d'eux est le cap ou notre couleur principale. Voyons si nous avons utilisé une autre couleur. C'est donc la même chose. Nous avons une autre couleur qui est mise au point, qui est un peu plus sombre, où nous avons juste une petite section d'informations. Essayons donc de l'utiliser ici. Il s'agit de textes en sourdine, qui était BW 50. Essayons 60, BW 64. Les autres textes du texte d'information, petits en texte intégral. Vous pouvez maintenant voir que toutes les sections sont préparées. Nous avons différentes couleurs primaires et secondaires. Ensuite, nous avons nos couleurs de textes ou nos couleurs de textes. Vous pouvez les aligner correctement. Ou Triumph, cette conférence est déjà très longue. Nous avons donc ici des onglets d' arrière-plan d'entrée, couleur. Ensuite, nous avons nos couleurs d'état, différentes couleurs sémantiques. Comme vous pouvez le voir, nous utilisons presque 1234567891011 couleurs ici. Je pense. Dental 15 couleurs va construire l'ensemble de votre système de conception qui sera utilisé. D'autres couleurs ne sont qu'à soutenir. Peut-être avons-nous besoin d'une nouvelle couleur quelque part, donc nous devrons peut-être l'utiliser. est donc tout ce qui concerne la façon dont vous allez utiliser vos couleurs et tout et créer l'ensemble de votre système de couleurs dans votre système de conception. Je vais donc m'assurer que vous apprendrez, je vais vous partager ce lien de fichier pour que vous puissiez voir ce que j'ai fait. Nous nous retrouverons dans une autre leçon d'ici là, prenez soin de vous. Adieu. 25. Système de composants et icônes des boutons 01: Avant de commencer à utiliser des composants plus gros et à créer des composants un peu plus gros, nous allons commencer par des composants plus petits. Nous allons créer différents boutons, différents puces, différents petits textes de texte Informations, des choses comme ça. Nous allons explorer la section de ces boutons et nous allons créer des boutons avec une mise en page automatique et variance différente. Commençons. Maintenant, vous pouvez voir ce que nous avons ici sur ce bouton, nous créons simplement un compte. Il y a un autre style qui est le bouton fantôme. Il s'agit de deux styles, le même bouton. Ensuite, nous avons ce problème. Il s'agit d'un bouton connu en vedette déroulé. C'est un bouton un peu différent. Ensuite, nous avons ce bouton Explorer, verts qui représentent quatre cours différents plus petits. Ensuite, nous avons cette navigation supérieure. La navigation aura un état actif et un état normal. Il s'agit d'un autre. Je pense que ce sont tous aussi celui-là. Celui-ci est également un bouton déroulant. Nous allons créer cela. Et ensuite, nous avons ceci. Il s'agit également d'une barre de progression, d'une barre. Il ne va pas être que nous n' utiliserons pas la mise en page automatique pour celle-ci car elle comporte trois éléments. Mais nous allons créer un composant à partir de celui-ci afin de pouvoir facilement le mettre à jour et le renommer et modifier sa texture. Je pense que c'est tout. Donc, nous allons d'abord utiliser les boutons. Nous avons donc maintenant notre système de pages pour concevoir. C'est un autre cadre et j'ai appelé le bouton. abord, nous allons voir que ce bouton est en fait de 327 x 48 pixels. Essayons de reproduire cela dans notre système de conception. Vous pouvez également commander C ou copier, copier la commande V ou Control V pour créer une copie de celle-ci. Et maintenant, nous allons sélectionner ces boutons et appuyer sur D et tout ce que nous allons utiliser. Assurez-vous d'avoir sélectionné cette topographie BD et textuel ici. instant, il est sélectionné et c'est ce que nous allons utiliser. Appuyez sur Maj et Maj a pour ajouter une mise en page automatique à celle-ci. Et la première chose que nous allons faire, c'est que nous allons ajouter un peu de rembourrage ici aussi. Ajoutons 16 et les 16 premiers en bas. Je vais ajouter 58 ou 57,5. Appelons ça comme ça. 57,5 ici. On va peut-être appeler ça 5757. C'est notre structure principale et je vais vous dire pourquoi j'ai déjà ajouté 5757. Permettez-moi de vous dire quel sera le problème en fait, ajoutons un pilier gratuit. Nous allons donc utiliser une couleur de remplissage, qui est celle-ci, violet 50. violet 50 est donc la couleur qui est très proche de notre couleur réelle. Nous allons ajouter huit pixels de rondeur et l'ouvrir. Et nous allons utiliser le lissage des coins. Il s'agit de notre disposition actuelle d'un bouton. Mais pour l'instant, il n'est pas égal à la taille 327. Nous devons le réparer car nous allons utiliser la même taille pour tous les boutons. Nous allons maintenant sélectionner ce calque de texte à l'intérieur de ce cadre, et nous devons le fixer en largeur. Nous allons l'agrandir. Parce que, par exemple, si j'ajoute du texte, il ne devrait pas se développer. Je vais utiliser 200 et nous allons utiliser la largeur de la hauteur de 212. Et maintenant, si je le rapproche, vous pouvez voir que c'est 27 est 326, donc c'est à un pixel de distance. Donc je pense que cela va faire pour le texte ici, j'utilise cette couleur blanche, donc je l'ai ajouté à mes couleurs. Styles. Sélectionnez, sélectionnez ici. Maintenant, nous avons répliqué ceci, donc nous allons supprimer cela. Et c'est notre bouton. Appelons ça btn notch. Nous avons agrandi 3D, et maintenant nous allons créer un composant à partir de ce composant Control Alt K ou Command Option K. Nous avons donc été compressés. Vous pouvez donc voir que nous avons ce bouton grand. Nous avons créé notre bouton avec succès. Et si j'essaie de modifier son contenu comme la connexion, cela fonctionne. Il ne change pas son Smith. C'est ce dont nous avons besoin. Maintenant, en continuant, nous allons créer une certaine variance, au moins trois variances. Donc avant cela, nous allons cliquer sur tout ce composant et essayer de définir la propriété. Par exemple, nous allons définir la propriété du style de bouton. Ce bouton par défaut sera normal. Et celui-ci sera notre style de coût. Maintenant, nous allons changer notre style que nous allons cliquer sur cette côte et supprimer cette couleur de remplissage et un trait, qui va être cette couleur ou plus clair que 50. Nous allons donc utiliser ces 40 ici. C'est ainsi que vont réellement se passer ces deux boutons. Cette couleur arrive ici. Vous voyez, je pense que nous avons sélectionné les couleurs de notre palette de couleurs, que nous avons créé des styles de couleurs. C'est ainsi que nous avons créé le second. Et maintenant, nous allons ajouter une autre variante. Cliquez ici, ajoutons une autre variante. Et cela s' appellerait « handicapé ». Donc, en ce moment, nous allons juste changer sa couleur de celle-ci à celle-ci peut-être. Oui. Et pour la couleur blanche, nous allons utiliser un peu de couleur grisâtre ici. Cela va donc être désactivé. Donc pour ces 3 troisième boutons style, nous allons avoir désactivé ou ici, cette déclaration. Nous avons trois styles de boutons en fait, c'est notre lot PDN et désactivé, fantôme et normal. s'agit donc de trois boutons, ou vous pouvez également l'appeler échoué et normal échoué ou autre. C'est à vous de décider. Je vais dire que c'est normal maintenant. Il s'agit d'un ensemble de boutons que nous avons créé. Nous allons maintenant créer d'autres boutons. Par exemple, nous avons celui-là. Celui-là, celui-là. Permettez-moi de vous montrer que celui-ci est également créé à l'aide d'un cadre. Nous ne devons pas nous inquiéter de la façon de le créer. Laissez-moi vous montrer les paramètres ici. Donc, aide en haut, en bas, à droite et à gauche dix. Nous allons donc le recréer si vous voulez le copier. Et nous allons créer un autre ensemble de boutons ici. Oups. Nous allons le recréer. Est-ce que c'est ? Copions ça. Copiez ce cadre. Je vais le coller ici. Ici, nous avons ce cadre. Ici, nous avons ce cadre. heure actuelle, nous allons appeler ça un point de tableau de bord. Assurez-vous de les nommer correctement. C'est vraiment, vraiment important. Nous ne voulons pas qu'il soit de largeur fixe. Il va donc flotter avec le texte. Si j'essaie de le changer, c' est du dextro ici, par exemple. Les entreprises et l'éducation communautaire devraient se développer. Nous n'avons pas à nous soucier la largeur fixe ici. Cela va se passer comme ça. Nous allons créer un composant ici comme celui-ci. Et c'est notre meilleur article de navigation. Et nous allons créer deux vidéos pour celle-ci. Pourquoi ? Parce que quelqu'un doit cliquer dessus. L'un d'eux va être, sélectionnons la propriété. Ici. Il va être dirigé et l'on va avoir 40 ans va être essentiellement actif. Vous pouvez appeler ça faux, appelons-le faux. Celui-ci va être notre état réel ou actif. Celui-ci est en fait une scène active, alors essayons de changer sa couleur par rapport à celle-ci. Cela va être utilisé pointu en noir et blanc et suivre la couleur du texte. Je vais utiliser l'inverse. Je vais donc utiliser celui-ci. VW neuf noir et blanc. C'est ainsi que doivent ressembler ces deux-là. L'un est actif et l'autre est inactif, ou vous pouvez également l'appeler faux et vrai. Je pense donc que l'activité ou l'inactivité a plus de sens. Je ne veux pas confondre mes développeurs. Cet état va donc être actif. Celui-ci va être inactif. Celle-ci, c'est plus logique. Nous l'avons créé avec succès. Et maintenant, nous le pouvons, nous allons en créer plus ou ici. Ici, nous avons ce bouton S'inscrire. Nous allons le copier et le coller ici car nous devons reproduire ses paramètres. C'est donc 48152. Il s'agit en fait de 50 somme. Nous allons utiliser 50 en ce moment. Cela va également être corrigé. Je pense que nous allons utiliser Inroll Now. C'est ce que les sommets de texte vont être corrigés 152. Encore une fois, nous allons utiliser la même technique que celle que nous avons utilisée ici, à largeur fixe. Nous allons utiliser Inroll. Maintenant. Maj a. La mise en page automatique a été ajoutée huit pixels ou coins lissant que nous allons ajouter, ajoutons la couleur de remplissage, qui sera la même, que nous utilisons celle-ci ou 50. C'est notre principale couleur primaire. Celui-là, nous allons utiliser du blanc. Maintenant. Nous allons ajouter un peu de rembourrage ici. haut en bas va donc être 1515. L'utilisation 4040 était ici. J'aimerais savoir combien de tailles. 38. Bon, donc nous allons d'abord sélectionner ce texte ici. Plutôt que d'utiliser ceci, ici, nous allons utiliser une largeur fixe, largeur fixe, et je vais essayer de l'agrandir comme ça. Peut-être que nous pourrions changer un peu le texte, peut-être le changer par autre chose. Je vais donc avoir un peu de rembourrage autour. Appelons ça 100. Je pense que celui-ci va marcher. Maintenant, nous allons ajouter, changer le rembourrage ici. Utilisons 3030. Je pense que 2424. moment, nous sommes à 148 ans et celui-ci est 152, donc nous avons besoin de deux autres de part et d'autre. 4626. Nous avons répliqué ce bouton à l'aide de la mise en page automatique. De plus, nous pouvons le changer pour quelque chose d'autre, peut-être tout à l'heure. Ok, donc celui-là arrive aussi dans cette section ou cette zone. C'est génial. C'est génial. Supprimons l'autre. Ici, nous avons notre et btn et régner. Encore une fois, nous allons reproduire la même chose. Nous allons avoir un autre état qui sera acheté. Si vous avez déjà acheté les objectifs, ils apparaîtront au tour de poitrine un moins z. Nous allons donc le convertir en composant. Et maintenant, nous allons ajouter une variante. Cliquons donc sur la variante et maintenant sera l'état du bouton. C'est le stick par défaut, un est par défaut, un va l'être, appelons-le acheté. Celui-là va être, gardons ça comme ça. Par défaut dans les achats. Acheté va avoir un achat différent ou ici, la couleur serait différente aussi. Essayons donc d'utiliser un peu de couleur à partir d'ici. Essayons le vert, quelque chose de vert ici comme ça. Peut-être quelque chose comme ça. Nous devons le tester dans ce contexte. En fait. Je vais choisir celui-ci, vert 70. Je pense que ça aurait fière allure. De plus, cette couleur de texte ne doit pas être blanche. Je vais utiliser la démo verte ici, ou peut-être le vert abondamment. Comme ça. Il s' agira de deux étapes. Nous allons le tester. On pourrait le changer par crawl. Si nous essayons de voir que la couleur de fond n' est pas en boucle, n'est-ce pas ? Nous avons trois jeux de boutons. Vous pouvez voir que celui-ci est réellement désactivé, mais celui-ci est en fait différent. Il montre qu'il a déjà été acheté. Nous avons donc laissé Vous le mettre ici et des jetons ici. Une puce de plus que nous avons, je pense où était celle-ci ? Ce n'est qu'une puce d' information. Il va se développer ou faire de l'expérience. Nous n'avons pas à nous soucier de sa taille. Donc celui-là, celui-là, j'aurai besoin de celui-ci, celui-ci, celui-ci est en fait celui-ci déroulant. Je pense donc que nous l' avons déjà fait en utilisant cette mise en page automatique. Je vais donc montrer, partager avec vous ma technique, comment je l'ai utilisé avec l'icône. Vous pouvez voir cette icône. Donc, avant de passer à celui-ci, vous devez créer un document où se trouvent toutes les icônes. Nous ajouterons des icônes à partir de là. Permettez-moi donc de partager rapidement avec vous comment vous allez le faire. Verrouillons ce calque d'arrière-plan ne doit pas être déplacé accidentellement. Cette icône sera en fait un composant avant de l' ajouter ici. Vous devez donc créer un composant. Appelons les icônes. Ce que nous avons utilisé, c'est en fait que nous avons utilisé des phosphores, des icônes. Vous pouvez également écrire ici que vous avez utilisé des icônes de phosphore. Nous avons utilisé une barre d' icônes arrière et tout cela. Vous devez donc ajouter ces icônes ici. Cliquez sur ce bouton. Par exemple, nous pourrions en avoir besoin dans la vidéo. flèches. Une flèche a été utilisée, celle que j'ai utilisée. Je n'arrête donc pas de les ajouter. La flèche vers le bas est en fait. Je suis donc allé le chercher, celui-là, j'ai utilisé celui-ci. Vous pouvez voir que vous pouvez ajouter toutes ces icônes dont vous avez besoin. Nous allons donc utiliser le jeu. Il se peut que nous ayons besoin d'affichage, d'affichage ou d'affichage. Continuez donc à ajouter toutes les icônes dont vous pourriez avoir besoin ici. Parce que je pense que j' ai utilisé celui-ci. Nous avons ajouté toutes les icônes, donc je vais vous montrer ce que nous devons réellement faire. Donc, cet arrière-plan devrait être, Nous sommes toutes ces icônes, elles ont été ajoutées ailleurs en dehors de cela. Je vais tous les ramener. En sélectionnant tous ces éléments et en les faisant glisser dans des icônes. Ici. Nous avons toutes les icônes, donc utilisons la couleur de remplissage pour être celle-ci. Oups, pas comme ça. Vous pouvez donc utiliser la couleur de remplissage si vous le souhaitez. Essayez de les arranger. Je vais le garder comme ça. Et sélectionnez tous ces éléments. Répartissez l'espacement horizontal. Je vais les garder comme ça. Une chose est donc que vous devez garder la taille de 24 millions. Vous pouvez donc voir qu'il y a eu 3232. Il se peut que vous ayez besoin de 3232 pixels ou de 2424 pixels. Celui-ci est en fait utilisé, a été utilisé comme 24. Je vais donc réduire sa taille à 24. C'est ce que nous utilisons. Voyons donc si le vecteur autour de lui est 24. Ok, donc celui-ci a 24 ans. Voyons ce que les autres auraient ici. Je vais donc utiliser la couleur pour être celle-ci. Et pour l'arrière-plan vectoriel, je vais supprimer cette couleur car cet arrière-plan vectoriel est uniquement destiné à la limite de cette icône. Vous devez faire de même pour toutes ces icônes. Et la prochaine étape consisterait à créer un composant. Appelons ça des icônes obliques. Je comprends. Gardez-le comme ça parce que nous avons déjà cette icône ici, tout ce travail reporté, créez des icônes comme celle-ci. Alors, permettez-moi de voir si nous avons cette flèche arrière. Il est également 24 ans. Permettez-moi voir si celui-ci, celui-ci a également 24 ans. Donc, toutes nos icônes qui téléchargent les paramètres. Ils sont tous 24 pixels. Vous devez aussi utiliser ces icônes pour, ce sont aussi, je ne suis pas sûr, très dur, mais je dois les chercher. De toute façon. Dans votre système de conception, dans vos icônes, ils sont tous 24, alors redimensionnez-les à 24. Sélectionnez-les tous. 24. Ils sont tous connus, corrigés. Nous devons changer la couleur ensuite. Je vais sauter ça. 26. Système de composants et icônes des boutons 02: Nous avons toutes nos icônes, donc vous pouvez également, ce que vous pouvez également faire celui-ci a déjà été créé en composant. Sélectionnez-les tous. Cliquez ici pour créer plusieurs composants. Cela va être des composants. Gardez-les comme ça. De plus, je pense que nous avons besoin d'une taupe, qui était le cadre. Je pense aux paramètres. Je pense que celui-ci, peut-être celui-là, je ne m'en souviens pas, mais utilisons-le ici. Je vais m'en servir. Nous allons utiliser 24 ici. Comme ça. Faites la même chose. Sélectionnez-les tous, modifiez la couleur et créez un composant comme celui-ci. Créez toutes ces icônes comme celle-ci avant de les ajouter à vos boutons. Nous avons cette icône ici. C'est arrivé. Plutôt que d'ajouter reporté ici, ce que nous essayons de faire, c'est que nous allons utiliser commande ou le contrôle D pour créer une instance, et nous allons faire glisser cette instance dans notre composant. Vous pouvez voir que je l'ai traîné et déposé ici comme ça. Vous pouvez voir que c'est en fait celui que j'ai créé. C'est celui qui a précédé. C'est ce que j'utilise. Il est donc très facile de créer un outil de texte de type ici appelé un an à 221. Décalez a pour créer cela. Et vous savez, l'exercice, nous allons avoir un peu plus d'espace. Et ce serait au milieu parce que nous devrions peut-être changer cette année-là ou quelque chose, peut-être changer de texte. avons donc ici. Laissez-moi doubler. Maintenant, nous allons le faire, ce que nous allons faire, c'est ajouter un remplissage. Oups, nous avons déjà fini ici. Pour ce cadre, nous devons ajouter un remplissage. En fait, le remplissage sera cette couleur violette que nous utilisons. Oups, pas celui-là. Celui-ci pour utiliser nos modèles. Et ce haut et ce bas seraient, nous allons utiliser huit ici. C'est génial. Je pense. Essayons d'ajouter cela à cela comme ça. Il suffit de glisser-déposer et vous devez modifier l'espacement. J'ai réparé le bouton, donc le réglage était ici. Donc ce mouvement, en fait, c'était comme ça. Il faut donc être au milieu comme ça pour créer ce type de bouton. Parce que nous avons deux éléments, nous devons donc mettre en page automatiquement, les réparer. Donc, la publication est que je réduit la distance entre eux afin que vous puissiez l'augmenter si vous le souhaitez. Je le garde à quatre pixels. Pour le haut et le bas, 66810. Sur la droite, le rembourrage est dû au fait que nous avons cette icône ici. Il ne devrait pas paraître très grand à droite. Comme ça. Il a l'air bien. Vous pouvez en utiliser sept ou six si vous le souhaitez. Six a également fière allure. Donc 10666, comme ça. Et ici, nous avons notre bouton pour que vous puissiez voir l'oreille est en bas, portée vers le bas, donc elle sera à droite. Assurez-vous de cliquer sur ce cadre. Nous allons donc le renommer en menu déroulant. Et il s'agit du paramètre de mise en page automatique de cette liste déroulante. Cliquez donc sur cette liste déroulante et nous avons pour celle-ci, et pour ce mélange, nous utilisons en fait l' arrangement ici. Donc, cela va réellement corriger le mouvement de ce texte vers le haut et vers le bas. Vous pouvez donc voir que c'est un problème. Assurez-vous qu'il se trouve au centre ou à gauche. C'est à vous de choisir. Je pense que centré est génial pour moi. C'est ainsi que je vais créer ce projet de loi. Maintenant, je vais supprimer cela et créer un composant à partir de celui-ci. Donc, la création d'un composant. Et si vous souhaitez créer une action déroulante ou peut-être une sélection ou quelque chose, c'est à vous de choisir. Comme séché maintenant, je vais le garder comme ça. n'y a donc pas d'état pour celui-ci. Ce sera mon menu déroulant. Je pense que je le garderais ici. Maintenant, nous allons créer ceci, cela est déjà créé. Rien de prêt difficile. C'est en fait l'automne prochain en pleine force dans la puce complète, les cœurs de puce et quatre, c'est à vous de choisir. Il s'agit en fait d'utiliser les couleurs de, essayons d'utiliser les couleurs d'ici. Ce gris a fière allure, et nous aurons la couleur du trait pour être cet écran. Je pense que ça a l'air génial. J'ai déjà fière allure. Celui-là. Assurez-vous de choisir les couleurs ici. Par exemple, si nous avons cette dispersion dans une oreille, j'ai essayé d'utiliser les couleurs de vos styles de couleurs ici. Donc, si vous essayez de changer quelque chose, cela va déjà le refléter dans l'ensemble de votre système de conception. De même, vous pouvez voir pourquoi j'ai ajouté cette dispersion ici. Donc, si vous voulez le changer par autre chose, par exemple, vous voulez le changer en travail, vous pouvez le faire simplement sélectionnant un encens ici, en rembobinant. Donc, toutes vos icônes sont maintenant. Toutes vos icônes sont ici car vous les avez créées dans un composant pour que vous puissiez les supprimer ici. C'est donc la beauté de ce système de design. Ici, nous avons une puce complète des objectifs. Et je pense que c'est encore une fois, j'ai utilisé la mise en page automatique ici. Je pense que je devrais le garder au milieu car si j'essaie d'ajouter une icône ici, elle va être perturbée. C'est alors la distance entre le rembourrage, mais nous en avons besoin. Je vais donc en créer un composant. Et il est en expansion automatique, donc nous n'avons pas à nous inquiéter. Option Alt de contrôle ou de commande K. Ici, nous avons un composant de puce ici. Nous avons créé différents boutons et puces. Voyons si nous en avons besoin de plus. Nous pouvons peut-être créer ce progrès, mais nous devons le faire. Ce n'est pas très difficile et utilisons-le et essayons de le reproduire dans notre système de conception. Ce n'est pas un bouton, mais je pense que c'est une barre de progression. Appelons donc ça des boutons, plus des puces et des barres de progression. Juste pour s'assurer que nous avions tout utilisé ici. Ici, nous l'avons. Vous pouvez voir que c'est en fait au milieu et au centre. Si j'essaie de le modifier, nous ne devrions pas l'élargir. Cela devrait être la même chose, donc ça restera comme ça. Celui-ci doit être déplacé facilement. Comme ça. Le réglage serait le même. J'utilise le même paramètre pour celui-ci. Et je pense que c'est le cas. Permettez-moi de voir si nous avons une barre de progression différente ici. Celui-ci utilise des paramètres différents. Je veux donc utiliser 11 ici, rendre semblable à celui-ci. Nous utiliserons donc la même barre de progression. Le vert est donc 199. Allons en faire 200. Juste pour être sûr. C'est un peu plus gros . Il s'agit de 213. Essayons donc d'utiliser 200 et de voir s'il convient. Oui. Je vais donc utiliser 200 ici encore une fois. Faisons un peu plus de deux cent deux cent dix. Celui-ci aussi 210. Celui-ci aussi la barre de progression 210. Donc la taille MIG de chacun d'entre eux est similaire. Cela va se produire au milieu. Créons la même chose avec notre système de conception. Il sera de 210 pixels. Je pense donc que nous ne serons pas plus complexes. Essayons donc de les rhénium. Remplissez BG pour obtenir l'arrière-plan, la qualité verte dans BD et sélectionnez cette touche Option pour créer un composant. Vous pouvez voir que nous avons créé ce composant ici et que nous pouvons facilement y accéder dans les ressources. Vous pouvez donc voir que nous avons, vous pouvez voir ici dans les actifs, si vous passez aux actifs, nous avons cette puce pour vous connecter. Petit bouton. Je pense que nous avons manqué un bouton ici, qui était celui-ci. Nous avons raté celui-ci. À explorer. Ensuite, copiez-le et faites-le glisser ici. Et nous allons reproduire ce bouton dans notre propre système de conception. Et vous connaissez déjà l'exercice comment nous avons créé cette inscription sans connexion ici. Je vais donc sauter ça rapidement. Et nous allons créer deux états pour cela. L'un à, l'un est acheté et l'autre est Explorer. Nous avons réussi à répliquer ce bouton. En ce moment, ce que j'essaie de faire, c'est que j'essaie d'avoir un peu plus d'espace dans le texte pour que nous puissions le changer par autre chose, et la taille serait de 102. Nous allons donc réduire de 16 pixels. Maintenant. Essayons 16. En 16 ans. Très proche. 1515 ferait l'affaire. Ici, nous avons le bouton et nous allons l'appeler plus petit. Ici, nous l'avons et créons un composant à partir de celui-ci. Nous allons créer un composant. Créons une variante. La deuxième variante serait, mais je pense que nous allons utiliser la même équipe pour cela. Que se passe-t-il ? Ici ? Nous allons utiliser la propriété. Nous avions déjà un statut. Steve. Allons nous éteindre. Nous allons donc utiliser l'état du bouton. Oups, oups, oups, que s'est-il passé ? État. Et cet état par défaut va être acheté. Il a été acheté. Nous devons donc résoudre ce problème en entrant ici et en essayant de reproduire cela. J'ai essayé de l'avoir comme ça. Maintenant, nous avons 213 et voyons si nous avons la même taille, 10210411 ici. avons ici, mais le SIG et exploration de deux états sont séchés. Maintenant, nous devons changer la couleur d'arrière-plan par autre chose, qui va être un érudit. Je pense que nous avons utilisé le vert 70, oui, le vert 17, le point vert avant le texte. Du vert au vert. Ce point vert D, celui-ci. Si nous avons acheté le cours, il en sera ainsi ainsi. Donc, deux boutons, rouges. Nous avons réalisé et complété cette tâche consistant créer toutes ces barres de progression, ces puces et ces boutons. Et je pense que je vais voir si nous avons manqué quelque chose. Non, on n'a rien manqué, rien manqué. Vous pouvez donc voir que nous avons ici une icône qui est cochée. Vous allez également le copier votre icône ou vos icônes ici. Celui-ci est en fait 32 sur 32, et nous allons créer un composant comme celui-ci. Gardez-le avec vos icônes ou vos icônes. Et nous allons mentionner les tailles ici plus tard. Je vais vous montrer quelques astuces pour garder vos icônes. N'essayez pas de le faire. Cela va gâcher la taille de vos icônes. Ici, nous avons toutes les icônes. Et ce que vous pouvez faire, c'est que vous pouvez également essayer de les copier ici. Comme ça. Copiez ceci car celui-ci n'est pas présent dans le système de conception. Cliquez ici. Et il s'agit en fait d'essayer de zoomer comme ce composant. Téléchargement simple. Essayons de voir si cette liberté est horizontale. Essayez de les copier à partir d'ici parce que je pense que ça a été correct, donc EQ sur les icônes, celle-ci est différente, celle-ci est différente. Donc, la misère, pas les mangeoires, mais nous allons appeler ça Paramètres. Et celui-là, c'est des paramètres. C'est plus logique. Vous pouvez voir que nous avons toutes différentes icônes en 24 pixels. Celui-ci commence à le faire, si vous en avez 30 pour les garder dans une règle distincte. Et je pense que c'est tout. Nous avons également besoin de ces trois icônes. allons les copier d'ici à ici, nous l'avons comme simple étudiant et circulaire. Nous allons donc copier tous ces trois. Ensuite, essayez d'accéder à ce système de conception. Cliquez sur ces icônes, contrôlez V. Et nous avons nos icônes ici. moment, nous utilisons cette couleur, c'est pourquoi nous avons cette couleur. Nous allons utiliser cette couleur, ces icônes, BW. Donc, pour tout ça, je vais utiliser VW. Ici, nous l'avons. Bw. Bw peut suivre ces icônes. Ils sont en fait 32 sur 32, donc cela devrait être maintenu dans cette ligne. Il s'agit de 32 pixels par 32 pixels. Ici, nous l'avons. Comment les symboles utiliser un engrenage circulaire. Gardons-les comme ça. Nous devons créer plusieurs composants comme celui-ci. Et ici, nous avons notre ensemble d' icônes 32 x 32 pixels et 24 x 24. Ce que je vais faire de l' électron, c'est que je vais ajouter quelque chose comme ceci ou ici, qui est notre barre d'information. Celui-ci, celui-ci va être ajouté à nos icônes 3224, et ce serait tout. Je vais y arriver et je vais vous montrer dans la prochaine leçon. Cette leçon est très longue. Passons donc à la prochaine leçon et étudions quelque chose de plus sur création de composants plus complexes. Ils s'en occuperont alors, au revoir. 27. Les composants plus grands 01: Avant de faire de vous un composant plus gros, nous devons utiliser un autre cadre pour avoir nos illustrations là-dessus. Faisons cela rapidement. Nous avons donc le système conçu ici. Reproduisons ces icônes comme celle-ci. Renommez-le pour déplacer ceci, déplacez-les tous. Et ce seront nos illustrations. Avoir de grandes illustrations plus petites. Nous allons donc utiliser la tête juste pour que cela soit un peu simple. J'essaie donc de copier ce qui se passe. Qu'est-ce que l'illustration ? Celui-ci, il a été verrouillé. Je vais donc sortir de la commande C, du contrôle C. Il suffit de le coller ici comme ça. Il s'agit d'une illustration. Ce que vous avez à faire, c'est simplement créer un composant sur le sujet que je vais avoir un plus grand faire de même pour les autres. Il s'agit d'une plus petite. Nous avons utilisé l' illustration des progrès. Je vais le garder comme ça. Il y a peu d'autres choses que nous avons utilisées. Par exemple, ces petits points rouges et bleus. Je ne les ai pas utilisés comme illustration d'arrière-plan ou quelque chose comme ça. Ce que j'ai fait, c'est que je les ai utilisés dans tout ce composant. Nous allons donc les ajouter à ce composant plutôt que de les garder séparés. Maintenant, je pense que nous sommes prêts à continuer de créer certaines des illustrations que nous avons alignées. Nous allons maintenant créer de plus gros composants. Suivant. Utilise celui-ci. Ensuite, appelez-les composants. Je vais les enlever. Appelons-les composants. Ce seront nos éléments de liste, quelque chose comme ça. Et voyons, par exemple, c'est un cheval caractéristique et celui-ci est le cours normal. Nous en avons encore un, qui est celui-ci. Nous avons donc trois variantes pour ces dernières. Essayons de créer cela d'abord, d'abord. Nous les avons ici. Vous pouvez voir que nous avons cette image en vedette. Vous pouvez soit le conserver comme ça, car nous y avons déjà ajouté un dégradé linéaire. C'est le titre de notre cours. C'est du tout ça. Ils ont été sélectionnés pour celui-ci. Et le bouton que nous allons utiliser d'autres composants que nous avons créés. Allons à Assets et à la vidéo de conférence de cinq heures. Nous allons le laisser tomber comme ça. Quel tour ici. C'est ici pour Chip. Dans nos couches, nous allons l'ajouter. C'était à l'intérieur de ce cours vedette. Il s'agit de la forme d'entrée. Je pense. Celle-ci présentait un cours. Nous devons l'ouvrir et ajouter cette puce de piscine à l'intérieur. C'est en fait cette nation mec. Je vais donc le renommer en une durée. C'est notre demande future. Nous allons le garder comme ce bouton que nous devons remplacer. Nous allons donc utiliser notre bouton S'inscrire ici, le même. Et celui-ci, nous devons le remplacer. Mettons-le d'abord en haut. Règle Btn, et supprimons cela. Nous allons maintenant avoir celle-ci, qui sera notre plus grande composante. Nous l'avons presque prêt. Voyons si nous avons des alignements. alignements sont parfaits. Et vous pouvez voir que nous avons plusieurs instances d' autres boutons différents et d'autres composants plus petits pour en créer un plus grand. Nous allons maintenant créer notre composant à partir de ses publications en vedette. De même, nous allons faire de même avec ces plus petits. Maintenant, pourquoi je n'utilise pas mise en page automatique parce que nous devons avoir des espaces différents. Par exemple, huit pixels ici et 16 pixels ici. Ce n'est pas possible car il aura le même rembourrage. Cela va être énorme. Nous avons essayé de le créer avec ça. Encore une fois, ce titre de cours. Nous allons faire de même. Ce sera notre image, notre image de cours appelée image de cours de qualité. Comme cela, la durée et les étudiants, cela va être le même, celui-ci. Je vais répéter la même chose ou ici, donc nous allons l'ignorer. Nous avons la nation mec. Essayons de le reproduire. Il doit être enlevé. Celle-ci, celle-ci est étudiante. Je vais donc reproduire ce lundi ici. Et maintenant, je vais supprimer celui-ci c'est les histoires d'élèves 450. Ensuite. Le problème, c'est qu'il faut le garder à gauche. Nous pouvons le gérer. Ici, nous n'avons pas exploré, mais nous devons ensuite obtenir le bouton de l'explorateur à partir d'ici et l'ajouter ici comme ceci. Cela va pouvoir explorer le bouton, faire défiler les oreilles. Explorez les petits. Donc les artilleurs, la durée des étudiants. Image du cours Btn. Nous l'avons fait. Essayons de voir si nous avons un titre de cours parfait. Tout est un composant à l'intérieur d'un composant et de styles. Nous allons créer un composant de cette façon. Il va s'agir de notre cours. Il s'agit de notre plus grande composante. Pour cette composante de cours, devenez un, plus petit. Ok, donc pour celui-là, nous devons créer ces deux-là aussi. Allons les attraper et les amener ici. Commande V, contrôlez V pour le coller ici. Ce paragraphe a déjà été sélectionné plus le texte en sourdine. Nous devons donc le remplacer parce que nous avons fait une barre de progression dans notre propre système de conception. Allons à Assets. Et où est notre barre de progression ? Je vais donc l' apporter ici comme ça et passer aux couches. C'est en fait mon cours vedette. Il ne devrait pas être présenté, mais c'est la liste. Forces. La force. Je peux le faire. Je vais donc faire glisser et déposer cette progression ici. Celui-là, ça va acheter mon image en vedette. Ce sont en fait des gribouillis et si vous le souhaitez, vous pouvez créer un composant partir de celui-ci et le conserver ailleurs. Créons un composant sur les gribouillis supérieurs. Et je vais au Commandement D, je le dupliquerai. Control X ou Command X. Nous allons les coller dans nos illustrations. Nous l'avons ici. Ce seront mes gribouillis comme ça. Je vais le garder quelque part ici. Dans mes illustrations. Maintenant, si je voulais changer la couleur de cet arrière-plan, nous devons le faire ici et cela se reflétera dans tous ces éléments. C'est notre image vedette. Ok, alors appelons ça Image, Image. image comme celle-ci. Nous l'avons ici. C'est complet. Nous allons créer un composant à partir de celui-ci. Nous avons donc ces composants prêts à les ajouter à nos systèmes de conception sont trois composants que nous avons créés. Et permettez-moi de voir si nous avons créé d'autres composants pour le texte. Moi, zoom arrière. Nous avons ici un autre élément, qui concerne le texte. Alors, prenons ça. Je pense qu'il devrait être ici pour notre système de conception et devrait être présent dans les composants les plus grands comme celui-ci. Ce qu'il fait, il a réellement créé. Allons sur D et utilisons ce composant principal. Composante principale et amenez-la ici. Composant de posture. Nous avons besoin d'un maître. Nous l'avons fait, nous essayons de les aligner. s'agit pas de composants de cours, il s'agit donc de composants taxés. Nous allons les garder au fond. Comme ça. J'ai créé quelques composants ici. La meilleure chose, c'est que vous pouvez les changer pour ce que vous voulez. Par exemple, comme celui-ci ici, je peux avoir une puce et, par exemple, cette illustration de progression, je peux les utiliser tous les deux pour que vous puissiez la faire glisser et la déposer comme ceci. Vous pouvez également voir que nous avons ce joueur ici. Que se passe-t-il ? Je n'ai pas Claus VG. Je les ai correctement nommés. Que se passe-t-il ? Pourquoi avons-nous cela derrière ça ? Nous devons donc le supprimer. Control V G, Il s' agit d'une image vidéo. Il s'agit de progrès de l'examen. Nous pouvons créer un composant à partir de celui-ci. C'est donc un logo. Celui-là. Voulez-vous sous-titrer ? Si la progression est une barre de progression, lisez votre légende ne devrait pas être ici. Nous avons ce LAN G, le contrôle G et la vidéo. Vous pouvez créer un composant du lecteur vidéo. Et vous pouvez me demander de vous montrer. Nous allons créer un lecteur vidéo ici. Ce dont nous avons besoin ici, c'est que je vous dise, qui s'est passé, c' est arrivé. Mes icônes. Ok, donc ce n'est pas la partie de laissez-moi les amener à ça. Où est-ce que tu as trouvé celui-là ? Maintenant ? l'autre partie, assurez-vous d'essayer de masquer et choisir la commande C ou le contrôle C. Et nous revenons à notre système de conception. Ici, nous allons avoir ce lecteur vidéo. Ce que nous devons faire, c'est que nous devons ajouter nos icônes ou gravement sur mes icônes. Il s'agit d'une fausse icône. Ils doivent l'ajouter ici. Icône de téléchargement, il s'agit de téléchargement. C'est pour les réglages. Celui-ci a été utilisé. Maintenant. Essayez simplement de le chevaucher. C'est une icône. Oui. tour. Personne ne va jamais aller dans les couches. Ceux-ci sur mes icônes. Et je dois supprimer ces symboles. Simple. Gardez-le comme ça. Nous ne voulons pas créer de composant à partir d'eux. C'est bon, donc c' est un lecteur vidéo. Essayons donc de créer un composant. C'est pourquoi j'ai utilisé ici. Permettez-moi de vous montrer, par exemple, si je veux utiliser le bleu ici, je peux utiliser le jeu ici. Si je veux utiliser le rembobinage ici, je peux utiliser le rappel William. C'est donc la magie de créer cela. À l'aide de ces icônes de composants. Je veux vous apprendre ce que sont les, vous pouvez voir l' essence de tout cela, ce que vous devriez appeler, toute cette idée d'utiliser votre système de conception. Pourquoi faut-il créer un système de conception ? Parce que vous voulez qu'il soit facile de le modifier ou de le modifier. Et vous devriez avoir plus d'options pour créer et contrôler des choses. Par exemple, vous pouvez voir ici, c'est ma navigation inférieure et je veux créer quelque chose pour celui-ci. Ce que j'essaie de faire, c'est que je vais créer différents états pour ces 13 États. L'un est actif à domicile, ma classe active et mon compte actif. Essayons donc de le faire. Pour cela, je vais utiliser une couleur à partir ici pour la rendre normale. Pas comme ça. J'utilise le noir et blanc 60 en ce moment, je soutiens que je peux utiliser 52. Je pense que 60 ans, c'est bien. Noir et blanc 60. Et avant de passer à autre chose, nous devons apporter nos icônes ici. Nous avons donc ici nos atouts. Ici, sur nos icônes, où se trouvent les symboles de ma maison ? C'est donc l'icône de mon symbole de maison. Et puis nous avons plutôt que des icônes, celle-ci. Et celui-là. Je vais les chevaucher juste pour gagner du temps à les positionner encore et encore. Comme ça. Ici, nous l' avons comme ça. Et supprimez le reste des arrière-plans. Nous l'avons fait. Mettons-les à l'intérieur. Ces oups, que s'est-il passé ? Je l'ai laissée gribouiller. Ok, donc je ne vais pas croire ceux que nous avons un texto et que nous avons ceci. Essayons d'utiliser la même couleur pour le texte, pour les icônes. 60. Aussi pour ces vecteurs, je vais utiliser 6060 noir et blanc. Cela va être mon état normal, où rien ne va se passer. Sélectionnez tous ces 60 en noir et blanc. Sélectionnez cette option. Nous allons le faire, ce que nous allons faire c'est que nous allons cacher ça comme ça. Cela va être en bas NAB, état normal. Cela va être normal. Et nous avons trois icônes. Pourquoi avons-nous utilisé cela ? Parce que si je voulais changer une icône à tout moment, je peux utiliser le glisser-déposer ici et je peux la gifler en icône de 2032 pixels. C'est une chose. Bon, nous pouvons maintenant créer un composant à partir de celui-ci. C'est notre composante. Nous avons besoin d'une certaine variance. Je vais donc cliquer sur la variance. C'est ainsi que nous allons utiliser cela. Dans. Cette première vidéo ne sera pas par défaut, mais elle sera active et active. Et le second sera, troisième sera une vidéo, il sera actif. Nous en avons, cliquons sur celui-ci pour décrire la propriété. Et c'est le bar de navigation. Il suffit d'appeler ça le statut. Je pense que cela serait créé plutôt que de l' appeler comme ça. OK. abord, nous allons cliquer dessus et changeons le vecteur pour ne pas. Nous n'allons pas capturer cette instance. Que se passe-t-il ? Gardez-le comme ça. Et nous allons changer la couleur en noir et blanc. Et la maison sera en noir et blanc. Celui-ci sera actif et nul pour le second état. Cela va être actif, mais il va être déplacé ici. Comme ça. Noir et blanc. Vous avez compris comment j'essaie d'atteindre mon objectif. Et le compte serait, encore une fois, tous les autres que je vais utiliser et regarder 60. Voyons si nous avons un plan américain et un large 60, noir et blanc 60. Donc, si j'essaie de changer la couleur, je peux le faire en un seul clic. 606060 Dan. Ici, nous devons utiliser cette jambe. Ici. Nous avons les trois États prêts à être éloignés. Et nous pouvons simplement le faire glisser et le déposer et sélectionner l'état que nous voulons. Et ça va se passer comme ça. Bien. Nous avons créé notre barre de navigation, qui est le bouton de navigation du bas. Nous essayons maintenant de créer une mise en page plus complexe. Allez-y. Whoops. Nous avons laissé quelque chose ici. Vous pouvez créer ce composant avec différents avatars multiples, avatars multiples, mais je pense que je vais l' ignorer maintenant. Vous pouvez également créer une puce ici, c'est-à-dire celle-ci, qui concerne les progrès d'un étudiant. Vous pouvez créer cela et vous pouvez également le créer. Nous allons donc créer 12, ces deux-là, et nous allons les faire glisser et les déposer dans notre conception. Il s'agit d'un autre. Celui-là. Commençons par ce système de conception. Et je vais le faire. Ici. Nous l'avons chez Avid Dot Frame. C'est quelqu'un d'acheter 72 et moins de 72. En raison du rectangle. Vous pouvez également, vous pouvez voir que nous avons cet effet, c' est-à-dire pour tout le contenu de ce voyage. Laissez-moi voir si l' ombre portée, d'accord, donc nous avons une porte d' ascenseur à ombre portée ici. De toute façon. C'est le contenu et c'est l'arrière-plan. Appelons-le donc. C'est le contenu. C'est à vous de décider si vous voulez créer un composant à partir de celui-ci ou non, c'est à vous de décider car je pense qu'il s'agira principalement de cette largeur fixe. Normalement. C'est à vous de décider si vous souhaitez créer un composant, c'est à vous de décider. En ce moment, nous allons créer, commençons à créer un composant, mais nous devons faire glisser une illustration ici. Nous avons ici l'illustration. Faites-le glisser ici. Voyons si nous avons la même chose. Le livre est un peu au-dessus de cela. Le livre violet est en haut ici. Comme ça. C'est presque ce dossier d'ici. Maintenant, je vais en créer un composant parce que j'ai besoin de cela. Gardons ça comme ça. Dissociez-le. Maintenant, je vais les regrouper et nous allons créer un composant à partir de celui-ci. Vous pouvez utiliser la mise en page automatique, mais cela rendra les choses complexes. Si vous en avez deux, je vais sélectionner tout cela et créer un composant sera mes informations utilisateur, notre utilisateur, appelons ça la progression de l'utilisateur . Oups, que s'est-il passé ? Nous devons ajouter l'effet ici, qui est celui-ci. Parfait. C'est mon composant principal. Nous pouvons le faire glisser et le déposer à tout moment. 28. Les composants plus grands 02: Permettez-moi de voir si nous pouvons créer d'autres composants. Alors que le dernier, nous pouvons également créer celui-ci. Il s'agit en fait de notre navigation supérieure, et la distance entre eux est en fait de 16 pixels. Si nous pouvons également avoir des états différents pour celui-ci. Essayons de l'apporter à partir des actifs. C'est notre puce. Il y avait déjà ces états, je pense. Voyons s'il y a un facteur inactif et inactif. Ce que nous allons faire, c'est que nous allons reproduire comme ça. 16 pixels correspondent à la distance entre eux. Avant cela, nous allons utiliser et créer une mise en page automatique pour celle-ci. Et c'est tout à fait notre direction . La distance serait de 1616. Essayons de reproduire cela. J'appuie sur la commande D ou le contrôle D pour dupliquer cela. Pour créer celui-ci, nous allons utiliser, disons utilisateur. Ensuite, nous allons, encore une fois, pas comme ça, je dois choisir cela. Et ici, nous avons l'interface utilisateur de navigation complète. D'accord, vous pouvez donc cliquer et vous pouvez changer d'inactif en actif, SAP pour vous. Avant d'entrer dans autre chose. Nous allons en fait utiliser le rectangle ici. Essayons de voir si nous pouvons ajouter un remplissage ici. Ce qui ne va pas être ainsi. Mais en fait, nous avons besoin de ce genre. Le problème, c'est que les pensionnaires viennent ici. Laissez-moi voir si je peux le faire à partir de là. Nous l'avons ici. Il s'agit d'un rectangle. Il s'agit du remplissage linéaire dégradé, le groupe de masques. Laissez-moi voir si je peux reproduire cela ici. Même chose qu'évidente. C'est là le problème. Tous. J'ai ajouté une autre couleur ici. C'est donc le problème ou cela se produit, c'est ce qui se produit. J'ajoute maintenant, je le renverse. Celui-ci ne sera pas un 100%, mais 80%. Nous allons le garder à 100 %. Nous devons changer la couleur pour que vous puissiez voir si j'essaie de changer la couleur. Donc, peut-être juste ici. Cela ne devrait pas être comme ça. Celui-ci devrait être à 100 % comme ça. Nous créons en fait un gradient linéaire qui est de 200 % parce qu'il va totalement le cacher. Ainsi, vingt-cinq pour cent seront créés. Et puis celui-ci va être 100 %. Vous pouvez voir que c'est notre groupe Masters. C'est notre mosquée. Et nous allons créer un composant. Appelons-le ça. C' est notre composante. Si vous voulez changer le masque, vous pouvez le rendre plein comme ça. C'est ainsi que nous allons créer davantage de navigation. Et si vous le souhaitez, je pense que nous n'avons pas besoin deux ou trois étapes différentes pour celle-ci car nous pouvons activer et désactiver n'importe quoi. Permettez-moi de vous montrer comment vous pouvez les utiliser ici. Nous avons donc une distance de 41 pixels ici. Supprimons celui-ci. Et nous allons utiliser les ressources que nous avons créées. Alors que mon So ici, nous avons les composants. Ouvrez ceci. Ici, nous avons le bas du cou. Je vais le faire glisser et le déposer ici. Il serait de 4000 pixels. 47, je pense que c'était 47. Voyons quel est le son 50 48. C'est de la couleur sept. Comme ça. Il semble que 30 ans d'ici. La hauteur était de 48. Celui-ci a 48 ans. Ça n'a pas d'importance. Pas de problème. Celui-ci était orbital de 3 secondes. Celui-ci est 305. Je vais le déplacer au milieu. Trente cinq. Trente cinq. Oui. Choisissons 44 ou une tête nulle. Ok, donc il y a d'autres problèmes, donc je vais l'utiliser. Essayons d'utiliser 4444. Le fond commence à commencer. C'est génial. C'est mon bouton de navigation. Si je veux changer le statut classe active à domicile, je peux aussi le faire. Une autre chose est que vous pouvez également utiliser la section prototype. Vous pouvez également créer un prototype. Nous avons toute cette navigation qui va passer à une autre. Vous pouvez donc faire passer cette modification sur dapp, sur onclick. Onclick. Il ne devrait pas être à la place, mais s'animer intelligemment et faire la même chose plus loin. Comme ça. Et aussi de cette discipline, de retour. À partir de là, il va revenir en arrière comme ça. Vous pouvez créer quelque chose comme ça et il aurait fière allure quand il s'animera. Je m'amuse bien. Je pense que j'ai un tutoriel de prototypage sur ma chaîne YouTube qui montre celui-ci. Comment animer cela. Je vous ai montré dans ce décor à la place. C'est ainsi que nous allons remplacer notre navigation inférieure. Supprimons ça demain et voyons Martin V. De même, nous avons ceci ici. Encore une fois, nous allons supprimer cela. Oups, que se passe-t-il ? Bon, je dois donc choisir le cadre. Ici. Vous pouvez voir que nous devons faire l'autre. Il s'agira de la conception du prochain trimestre. La navigation de fond va être mes cours. La classe de statut de celle-ci est active. Nous voilà, appelons ça mes cours. Cliquez sur ce actif serait des lunettes. C'est chez nous. Essayons d'aller au prototype et je vais vous montrer ce que je veux dire réellement. Essayons deux. Essayons de faire ça. Vous pouvez voir si vous cliquez ici, vous pouvez voir comment ils se déplacent réellement. Les ténèbres bougent et tout se déplace. Donc vous pouvez voir cette animation vraiment, vraiment cool de, donc en fait je n'ai pas relié celle-ci à celle-ci. Vous pouvez le faire dans votre système de conception et vous pouvez vous arrêter ici. Vous pouvez également sélectionner un article. Je pense que nous pouvons revenir en arrière comme ça. Celui-ci va ici. Celui-ci va ici. Celui-ci retourne en cours en fait. Quoi qu'il en soit, c'est comme ça que vous feriez un clin d'oeil pour avoir cet effet animé de votre ici. Essayons donc d'ajouter à partir de mes actifs. Je vais ajouter ça ici. Comme ça. De mes couches. Je vais enlever ou cacher ça maintenant. Vous pouvez donc voir que c'est comme ça que je vais faire là-dessus. Une autre chose est que vous pouvez également les supprimer et continuer à ajouter vos composants à partir d'ici. Allons à Design. Essayons de les avoir. 50, donc je garde en fait 6044. Ici. Nous avons plus de composants comme ceux-ci, ce qui vous permet de créer différentes catégories. Par exemple, j'ai cette vidéo. C'est-à-dire que ce sont des textes alimentaires, ce sont des navigations. Je vais les intégrer dans différentes sections. Par exemple, ce sont mes que vous pouvez également ajouter, vous pouvez voir que vous pouvez ajouter une description de tous ces composants si vous le souhaitez. Par exemple, il s'agit en fait d'une liste de lecture. J'appellerais ça une liste de lecture ici. Vous pouvez également ajouter un lien de documentation si vous souhaitez le lier à une page de documentation où vous montrerez comment l'utiliser ou comment le savoir ? Plus de détails sur ce composant ? C'est ainsi que je l'ai fait, j'essaie de les gérer en groupes. Nous avons terminé la moyenne de tous nos composants. Je vous ai montré comment créer différentes variantes, différents composants, différents composants plus gros pour utiliser ces petits composants. Comment allez-vous utiliser ces icônes ? Comment implémenter ces icônes, comment les remplacer dans votre système de conception si vous le souhaitez. Comment construire vos illustrations et vos icônes et tout, tout le système. Vous pouvez également créer différents liens dans vos icônes, par exemple, vous pouvez également leur dire qu'ils sont faux. Écriture d'icônes. Ceux-ci étaient pour les icônes phosphoreux, c'est faux pour les icônes. Ce sont des icônes phosphoreux. Vous pouvez également créer des liens, créer des liens. Par exemple, si c'est le cas, vous pouvez voir que nous avons cette topographie et que nous utilisons ces deux polices de caractères. Et je vais créer un lien pour eux. Pour ce faire, vous pouvez voir si vous sélectionnez un index, vous aurez créé un lien haut de la touche Commande de contrôle. Ce que j'essaie de faire, c'est que je vais bouger ça comme ça. Et je ne serais pas en train de télécharger une charge de liaison. Cliquez sur ce lien et vous pouvez voir que je peux coller l'URL ici. Je vais donc aller sur google.com et je vais coller le lien de cette bouteille ou de cette formule. Je vais utiliser ce lien. Copier. Je vais le coller ici. C'est ainsi que vous pouvez baser les liens dans vos cheveux. Essayons ça. Changez la couleur de celui-ci par autre chose pour qu'elle ressemble à un lien. Donc je vais l'utiliser, essayons d'utiliser celui-ci. Celui-là est superbe. Si vous souhaitez ajouter des liens vers différentes parties, il est différent. Différentes pages Web ou différentes choses que vous, vos concepteurs ou développeurs devez télécharger. Vous pouvez cliquer dessus et il passera, par exemple, à des icônes de phosphore. Vous pouvez créer un lien pour les icônes de phosphore. Pour aller sur cette page. Les développeurs peuvent télécharger toutes les spécifications, tout. Par exemple, ces illustrations où nous enregistrons ces illustrations, vous pouvez avoir le lien vers ces illustrations. C'est tout. C'est donc, je pense qu' un autre conseil que je voudrais vous donner : vous pouvez ajouter différents liens à l'ensemble de votre système de conception. Une autre chose que les gens essayé de faire, c'est qu'ils essaient de créer différentes pages et d'avoir vos boutons et tout séparément. 29. Système de réseau et de mise en page: Une autre chose que nous avons oubliée, c'est en fait la grille. Vous pouvez définir votre système de grille dans votre document ici. Pour ce faire, nous allons créer un nouveau cadre. Pour cadre. Essayons de créer un iPhone, que nous avons utilisé, je pense que l'iPhone autorise Pro Max. Et nous avons utilisé une grille. Voyons si nous avons créé un style de grille. Laissez-moi voir si nous avons cette grille. Nous avons maintenant la grille. Nous allons créer un style de grille, appelons-le « food column ». Pour utiliser cela, nous allons passer ici et sélectionner ceci et c'est notre grille. Vous pouvez définir un mode comme la distance à gauche et à droite de votre grille, ainsi que les couleurs. Par exemple. Je veux avoir des couleurs ou des propriétés différentes. Par exemple, essayons de changer la couleur de l'arrière-plan par quelque chose comme celui-ci. Pour afficher la grille. Grilles. De plus, si vous souhaitez avoir la mise en page, par exemple, nous avons une disposition de tous ces éléments comme celui-ci, disposés comme celui-ci. Par exemple, vous pouvez également créer une mise en page. Nous avons un élément important ici, puis deux éléments comme ça. Vous pouvez également créer cette disposition, le tabouret grille. Donc, pour l'instant, ça ne nous inquiète pas, qui ? Nous allons simplement développer nos applications mobiles. Nous avons des grilles pour mobile. Si vous le voulez. Système de conception où nous avons Web T2, puis nous allons avoir un système de grille pour la conception web pour me permettre de le faire. Créez un autre cadre. Et cette fois, je vais utiliser un ordinateur de bureau 1440. Ce sera mon bureau. Créons une mise en page en grille. Et nous allons utiliser une disposition de grille de colonnes, 12 colonnes. Ligne centrale. devrait avoir 72 ans, appelons-le 72. Cutter n'aurait pas 30 ans. Voici comment afficher une grille de bureau. Vous pouvez également l'enregistrer ici. Cela sera plus facile que pratique pour grille de bureau de vos développeurs. Et ça ferait le tour. Je pense que tout est question des grilles. Je pense que j'ai quitté ça. Vous devez créer un système de grille à l'endroit où vous allez afficher toutes les différentes grilles. Mieux vaut si vous avez créé ces styles de grille qui peuvent être facilement appliqués lorsque vous tentez de créer une nouvelle page sur une nouvelle mise en page. Je pense que nous avons terminé tout ce que les chercheurs de grille, la topographie, puces de boutons, les barres de progression, icônes, les illustrations et les composants. Je pense que ça va finir et certains scores. Si vous avez des questions ou s'il me reste quelque chose, si vous avez des questions, vous pouvez toujours me poser la question. Vous pouvez créer et rendre cela aussi complexe que possible. Mais j'ai essayé de le simplifier et j'ai essayé vous apprendre l'essence du système de conception, ce dont vous avez réellement besoin et pourquoi vous devez réellement construire un système de conception qui va vous faciliter la vie. Et tous les trucs et astuces que j'ai donnés dans ce cours qui vont beaucoup vous aider lorsque vous utilisez Figma. Je vous rencontrerai dans une autre vidéo et un autre cours. Assurez-vous de télécharger les ressources de ce cours jusque-là, prenez soin d'adieu, et nous nous rencontrerons une autre fois. 30. Créer des composants de combo de type: La dernière leçon, nous avons créé notre section typographie de notre système de conception. Nous allons maintenant voir certains des éléments vous pourriez avoir besoin dans votre système de typographie. Il s'agit d'autres. Vous pouvez donc voir ici que nous avons notre système de conception où nous avons un titre. Ensuite, nous avons une section que j' ai décrite ici avec les tailles à gauche. Et chacun d'entre eux est en fait un style de type. Vous pouvez voir, vous pouvez facilement deviner ce que nous avons maintenant, je les ai tous appliqués à mon application de formation en conception. Laissez-moi vous montrer. Nous l'avons ici. Donc, si vous cliquez ici, il s'agit d'un titre de section typographique. Et si vous cliquez ici, il s' agit d'un paragraphe topographique et d'un texte muet. Si nous cliquons ici, il s'agit un petit manuel et d'une navigation en bas. Nous avons appliqué tout ce qu' il devrait être. J'appuie sur Commande ou Contrôle pour cliquer sur Slack. Vous pouvez voir les champs de texte et les étiquettes. De même, si vous cliquez ici, s'agit d'un paragraphe muter à l'intérieur du texte. Il s'agit donc du FiltText. Appliquez ce style ici. Encore une fois à l'intérieur de ces boutons. Il s'agit donc en fait de boutons ou de commandes. Dans tous ces contrôles que nous avons ou boutons, nous avons appliqué le texte du bouton si vous cliquez ici et le texte du bouton, si vous cliquez et btn texte, sont tous des textes de boutons. De même, pour ce texte, il ne s' agit que d'une information, de la plus petite information. Il est donc en texte intégral. Nous allons vérifier les distances. Une fois encore. Si vous allez ici, s'agit d'un paragraphe plus en sourdine. Donc, chaque titre ci-dessous est en fait un paragraphe. Donc, si vous cliquez ici, s'agit également de Paragraphe plus muet. De même, nous avons celui-là. Il s'agit d'un petit texte. Si vous allez ici en bas, s'agit d'un petit texte et d'une navigation en bas. Vous pouvez donc voir comment appliquer l'ensemble de votre typographie à votre système de conception. Maintenant, si vous voulez leur montrer la combinaison de différentes polices de caractères. Par exemple. Vous pouvez voir ici que nous combinons deux d'entre eux. C'est une différence entre eux. Vous pouvez copier à partir d'ici. Vous pouvez accéder au guide de style et vous pouvez le voir dans cette section ici. les ai tellement rapides. C'est la distance qui les sépare. Il s'agit d'un texte dont nous avons besoin pour obtenir les deux calques séparément. Que s'est-il passé ici ? Voyons où il se trouve. Bon, donc nous l'avons ici. Nous allons prendre ces deux commandements C. Et voyons si nous pouvons appeler les gens. Plus il y a ici. Oui, Maintenant qu'ils ont eu des frais généraux en fait, il a copié le texte uniquement. Essayez d'utiliser une couleur d'arrière-plan ici, à savoir Docker. Arrière-plan sombre. Celui-là, je pense que nous l' avons utilisé. J'ai essayé de tout montrer sur fond sombre. C'est plus facile pour eux. Nous l'avons ici. Déplacez-le vers le bas. Copiez également ces deux-là. Nous allons appuyer sur Alt et faire glisser ici comme ça. Et nous allons les appeler de type. À partir de la gauche 88. Vous pouvez partager vos combinaisons de polices de caractères ici. Il dira également aux félicitations que la distance entre un texte et un autre. Vous pouvez voir ici que nous avons une distance de dix. De même, si nous avons plus comme celui-ci, cette section où nous avons des titres de cours, et copions ceci. Et nous allons revenir au guide de style. Et utilisons-le ici. Comme ça. Ensuite, étendez un peu plus cet arrière-plan. Nous l'avons ici. Parlons de ce contexte. Je pense que nous utilisons celui-ci. C'est ainsi que vos développeurs vont savoir que les distances entre ces polices veulent créer un composant. Vous pouvez le faire aussi. Par exemple, si je voulais créer un composant ici, je peux simplement aller ici. Il va s'agir d'une composante. Vous pourrez donc le modifier plus tard. Vous pouvez donc créer un composant et l'appeler, par exemple section, liste de vidéos de section, quelque chose comme ça. De même, vous pouvez les sélectionner et créer un composant. Appelons ça des informations utilisateur. Vous pouvez voir comment vous allez créer certains des composants qui aideront vos développeurs à les saisir rapidement et à les utiliser dans leur conception. S'il y a une touche de raccourci, si vous souhaitez les saisir, appuyez simplement sur Maj. barre oblique. Il y a eu un décalage I. Vous devez appuyer sur Maj I. Vous pouvez voir ici que nous avons la typographie. Nous devons voir la liste des vidéos de section. Si je clique ici, il va l'attraper. Ou ici, vous pouvez voir que c'est ce que nous avons ici. De même, il s'agit de notre section. De même, si je veux utiliser ce décalage je peux rechercher n'importe quel composant. Par exemple, ce sont peu nombreux que nous avons créés. Et vous pouvez également créer, utiliser ces informations, par exemple, userinfo. Et ça va payer quelque chose comme ça. Si vous souhaitez créer plus de composants, comme peut-être ce composant d' objectifs en vedette et tous ces éléments. Nous allons les créer dans les prochaines étapes, non, nous sommes plus préoccupés par la typographie. Passons donc à notre guide de style. Et je pense qu'ici, nous allons quitter ce combat maintenant. Nous avons deux composants ici, c' est-à-dire que nous allons utiliser sur nos développeurs ou concepteurs qui vont utiliser dans leur typographie. section. Déplacons-nous ce groupe. Nous en avons deux ou une hanche. Appelons ce contexte. Sachez simplement si vous voulez l' étendre ici comme ça. C'est à vous de choisir. Comme ça. Vous pouvez maintenant voir que nous avons des composants d'utilisation dans lesquels nous montrons l'utilisateur les distances entre les paragraphes ou les titres ou quelque chose du genre. De plus, nous montrons toute l'échelle de conception où nous avons toutes les polices de caractères et leurs styles différents. Et leur but est de savoir quel but est lié à ce type de style. C'est tout ce que vous avez à appliquer, nous les avons déjà appliqués. Passons à la prochaine leçon de la section suivante et nous allons examiner les combinaisons de couleurs et générer d'autres jeux de couleurs. Passons à la prochaine leçon. 31. Utiliser le système d'icônes dans les champs d'entrée 01: Dans la dernière leçon, nous avons créé le système d'icônes et de boutons. Les données ne sont que peu de choses que nous allons utiliser actuellement, ce qui est notre contribution. Nous allons créer des vidéos et des champs de saisie des heures. Commençons et expliquons pourquoi nous avons déjà créé les icônes. Je vais vous montrer maintenant pour que vous puissiez voir ici, si vous regardez ce bouton, donc je les ai étiquetés avec des états. Voici donc nos boutons. Ensuite, nous avons des barres de progression dans les pompes où nous devons déduire les puces et la barre de progression, puis nous avons cette barre de progression. Donc, celui-ci est en fait à Port. Utilisez la liste déroulante. Ici, nous allons utiliser ce menu déroulant. Et maintenant, nous allons recréer nos champs de saisie, qui sont celui-ci. Nous en avons. Nous allons donc les copier tous les deux. Nous verrons si nous pouvons les reproduire à l'aide de notre système de conception. Donc, nous en avons un et celui-ci est un, celui-ci est actif, donc la largeur est de trois grandeurs 7. La première chose est que nous pouvons utiliser la même largeur, qui est de 346. Nous sommes ici. Essayons de reproduire cela. abord, nous allons utiliser et créer ce bouton en appuyant sur D. et je vais l'utiliser. C'est mon avis. Peut-être pourrions-nous utiliser l' e-mail shift a pour créer une mise en page automatique autour de celui-ci. Et la hauteur est de 48. Nous allons donc utiliser 88 ici. La hauteur est de 34 en ce moment, je pense que nous dirigerions la 1212. Ok, une chose est que nous allons avoir double-cliqué sur ce texte. Nous allons l' aligner sur la gauche. Ce sera toujours sur la gauche. Comme vous le savez, nous allons les avoir à hauteur fixe. Je vais donc cliquer sur celui du milieu. Je vais faire ça au moins aussi longtemps. C'est assez long. Je pense que c'est suffisant pour le texte. Important, je peux avoir des courriels ou quoi que ce soit en retour. C'est tout. Peut-être un peu plus longtemps que ça. Je vais utiliser 260 mots. Ajoutons une couleur de remplissage à ce cadre. Couleur de remplissage. Et ça va être quelque chose comme ça, peu plus sombre que celui-ci. Donc celui-ci, BW E9, c'est la couleur de nos designs qui vont correspondre à cette couleur. Bon, je pense que de gauche à droite, nous en avons 16. Je vais donc en garder 16 ici, comme ça. Et à partir d'ici aussi, je vais garder 16 ans, au milieu. Nous allons le garder au milieu car une fois que nous aurons ajouté cette icône, cela va tout gâcher. C'est tout. Essayons donc de voir 42. Celui-ci a 48 ans, il faut donc un peu plus de rembourrage en haut et en bas. 46. Prenons 15 ici et voyons si ça a fière allure. Allons oui. Quinze, Quinze, Quinze, 161648. Maintenant, nous allons rendre ça blanc. Cela va être 330. Donc, pas comme ça. Nous allons donc utiliser le clic sur ce cadre et essayer de voir. Maintenant, essayez d'ajouter cette icône ici. Nous allons donc passer à nos icônes. Nous allons aller dans Assets à partir d'ici et aller aux icônes. Je vais ajouter ça et déposer ça ici comme ça. Oups, vous pouvez voir qu'il a déjà été égal à la taille, presque égale à la taille. Revenez maintenant aux calques et nous allons vérifier vos affaires. Par exemple, en haut, en bas. Nous allons réduire parce que ce 32 a en fait beaucoup d'ajout de largeur à celui-ci. Allez dans cette image 1, c' est-à-dire appelons-la entrée. Nous aurons en haut et en bas seront de 12 à, voyons quelle est la hauteur 50. Celui-ci a 48 ans. C'est encore beaucoup. Essayons 88 ici, c'est en fait ajouter. C'est 48. Parfait. Et nous l'avons oublié. Ajout du rayon d'angle comme ça. Voyons quelle est la largeur de 327, c'est 334. Cette icône semble un peu trop loin de ce bord, donc je vais réduire la taille de ce côté. Donc, le rembourrage serait, essayons de réduire. C'est. C'est génial. Ou ici. C'est 330 et c'est 327. Essayons de réduire cette taille. Deux cent cinquante six. Cinquante-sept. Et maintenant, nous allons regarder la taille 327320 secondes. C'est donc parfait. Maintenant, vous pouvez voir que je peux ajouter une adresse e-mail ici, M.com. Je pense que ce sera facile pour l'ensemble de l'e-mail. Cela va être un état non rempli en fait. Essayons donc d'utiliser quelque chose qui est correct pour avoir ça. Et nous devons faire autre chose. Système de conception et ces icônes, je vais le reproduire. Ce sera mon icône vide. Non, pas comme ça. Je vais créer une boîte de 32 par 32. Et celui-là va en fait avoir une couleur de remplissage. Essayons d'utiliser une opacité de 0 %. Pour celui-là. Je vais l'appeler vide. Ou appelons-le non. Non. Je vais en créer un composant. Nous allons nous rapprocher de celui-ci. 32. Utiliser le système d'icône dans les champs d'entrée 02: C'est notre nouvelle icône. Je vais vous montrer pourquoi j'ai créé cela. Nous avons ici cet état raté. Nous avons créé le terrain. Vous aviez donc forcé Il manque encore une chose, cette adresse e-mail, qui est l'étiquette, qui est des étiquettes de données exemptes d'impôt. Essayons donc de l'ajouter ici. Je suis allé au port D. Ce sera l' étiquette, l'étiquette, l'étiquette, l' étiquette avec une étiquette, des étiquettes de texte. Il s'agit de l'étiquette et la couleur est en fait quelque chose de plus proche. Oui. Nous allons maintenant le faire glisser dans cette mise en page automatique. Vous pouvez voir qu'il a été ajouté ici, donc nous voulons qu'il soit au sommet. Bon, donc maintenant, nous avons un problème. Avant d'ajouter celui-ci à cela. Nous allons utiliser une autre mise en page automatique. Celui-ci fait six pixels. Gardons ça six. À part ici. Nous allons les sélectionner tous les deux. Maj. D'accord ? Ici, nous avons un autre cadre et je veux que ce soit le cas, ce sera mon apport. Plus étiqueté. Vous pouvez voir que la mise en page automatique est verticale, ce qui permet de garder cette jambe que l'espacement entre les éléments est de six, que nous avons défini en ce moment. Et sur la gauche, nous allons ajouter un peu de rembourrage de six. Il ajoute du rembourrage sur les deux. C'est ici. Il s'agit en fait d'ajouter tout à cet ensemble. Essayons de créer une mise en page automatique pour celle-ci. Cet e-mail supprime le rembourrage en haut et en bas. Cela devient très complexe. En bas 0 et cela va être 16. Je pense que ça va correspondre à ça. Alors 15, je vais le garder comme ça. Ce que j'ai fait, c'est que j'ai également examiné la mise en page automatique pour celle-ci. Donc, normalement, je n'aime pas créer ces nombreuses mises en page automatiques et ce genre de choses. Nous allons donc revenir en arrière et garder les choses plus simples. Supprimons donc la mise en page automatique. Retirons le cadre. Dissociez comme ça. Donc, ce que j'essaie de faire, c'est que je vais aussi dissocier cela. Pour que ça reste simple. Nous allons juste les regrouper. Commande G, et il s'agit de l'entrée, activation, de l'entrée et de l'étiquette. Vous pouvez faire beaucoup avec la mise en page automatique, mais je n'aime pas trop de mise en page automatique complexe qui se mêlent comme ça. Ce n'est pas une bonne façon de commencer votre conception. Je vais donc aligner cela sur mesure à partir d'ici. Il s'agit en fait de six pixels à l'écart d'ici. Voici comment se déroulera mon champ e-mail. Six pixels. Oui. Ce que j'essaie de faire, c'est maintenant que j'essaie de créer un composant simple, c'est ça. Restez comme ça ici. Donc, en fait, nous allons avoir besoin d'une certaine variance ici. Et gardons les choses simples en ce moment. Nous allons utiliser une étiquette ici. Appelons-le ça. Cela va être normal. Appelons-le encore une fois l'étiquette. Ici. Appelons que ça va être, faisons-le vide. Nous ne pouvons pas le rendre vide. Appelons donc ça du texte d'entrée. Nous allons maintenant remplacer cette icône par notre icône, qui était une nouvelle icône. Le symbole est que ce texte est, nous voulons qu'il soit quelque chose comme ça. Nous ne voulons pas être très surlignés car il ne s'agit que d'un texte de remplissage avant que quiconque entre. C'est notre état normal. Appelons donc ça l'état. C'est notre état normal. État d'entrée. C'est en fait notre état. Et nous avons besoin d'un autre état actif. Nous pouvons donc les déplacer comme ça. Je ne vais pas leur ajouter la mise en page automatique. Et créons-en un de plus. Ce qui va être là où nous aurons cette frontière. Et le fond est, je pense que c'est plus léger. Je n'en suis pas sûr. Je vais ajouter un coup. Et le trait serait en fait sur ces couleurs. Ce n'est pas une couleur. Je pense que c'est très proche. Je vais utiliser une autre couleur, qui est celle-ci. bleu 50 est en fait notre couleur pour cet état. Et l'icône serait telle que nous essayons de la remplir. Nous allons donc utiliser dans le champ de saisie de l' icône en ce moment. Ceci, c'est réellement actif. C'est ainsi que j'ai essayé d'utiliser création de composants pour mes champs de saisie. Si vous avez plus de champs de saisie, vous pouvez créer beaucoup d'autres éléments. Ce sont des textes normaux. C'est aussi possible, si vous voulez masquer ce texte, vous pouvez simplement le faire 0% et il se cachera ainsi si vous voulez avoir une entrée comme celle-ci. Nous avons créé notre liste déroulante de texte de saisie. Laissez-moi voir si nous avons besoin de quoi que ce soit d'autre. Bon, donc nous avons ici les avatars. Si vous souhaitez créer une trame d'avatar, je pense que vous avez également besoin d'une icône 32 bits 32 pixels. Accédez à cette icône. Et c'est en fait là que nous l'avons. Nous allons utiliser une ellipse. Nous allons créer une ellipse maintenant enfoncée sur Maj et la largeur et la hauteur doivent être 32. Ce sera notre ici, nous en avons un vide. Nous en avons un autre ici. Gardez le vide ici. Nous allons utiliser, ce qui est le même pour ces derniers. Cela va être notre résultat. Pour le remplissage. Nous allons en fait utiliser une image. Pour le remplissage. Nous allons utiliser une image et la garder comme ça. Je vais utiliser l'avatar et nous devons en créer un composant. Résolvez. Nous avons presque créé tous nos composants plus petits, et nous allons maintenant nous tourner vers les plus grands comme celui-ci. Navigation en bas, cette navigation supérieure pour ceux-ci, en les suivant ici, ceux-ci et aussi ceux-ci. Je pense que nous les avons déjà créés. Nous allons donc créer ces composants maintenant. Par exemple, ce lecteur vidéo, nous pouvons avoir tout un composant de ce lecteur vidéo et nous n'utiliserons pas trop la complexité de l' ajout d'un trop grand nombre de mises en page automatique et de choses comme ça. Nous allons les utiliser, les combiner et créer notre système. Nous allons le faire dans la prochaine leçon. Nous allons passer à la prochaine leçon et créer des composants plus complexes. Nous pouvons facilement les ajouter à nos conceptions. Nous allons également faire copier les illustrations dans un autre cadre appelé illustrations, afin que nous puissions les faire glisser et les déposer ici. Je vous rencontrerai dans la prochaine leçon ici là, prenez soin de vous. Adieu. 33. Créer un système d'espacement 01: Dans la vidéo d'aujourd'hui, nous allons discuter un aspect très important que j'ai oublié lors de l'enregistrement de ce cours, le système d'espacement. Dans votre système de conception, l'espacement sera principalement vertical. Ou parfois, nous pouvons voir un espace rapide autour de votre mise en page ou de votre page. Et il existe différentes catégories d'espacement. Nous allons donc voir quels sont les espacements dont nous avons besoin, le système d'espacement dont nous avons besoin dans notre système de conception. Commençons. Maintenant, vous pouvez voir que j'ai créé un tableau d'art ici, le système d'espacement vertical. Et nous allons accéder à notre application d'apprentissage et nous allons voir certains des espacements. Par exemple, vous pouvez voir ici de ce logo vers le haut, nous avons 34 pixels. L'espacement est presque, je pense qu'il était de 36. Nous allons donc utiliser 36 ici. On peut peut-être en utiliser 32. Utilisons 32. Ici encore, nous allons utiliser 32 à nouveau. Par ici. Il était égal de tous les côtés. De même, ces deux-là ont un espacement de 24. Vous pouvez voir que ce sont les quelques systèmes d'espacement différents, accord, donc à gauche et à droite, notre système de grille a en fait une marge de 24 pixels à gauche et à droite. Donc, vous pouvez voir que si vous regardez ici, nous en avons 24 au sommet. 24. Comme ça. De même, nous avons 24 à droite. Faisons 24 heures. C'est donc en fait notre espace d'emballage. Nous utilisons en fait vingt quatre, vingt quatre, vingt quatre. Nous utilisons donc au moins 24 espaces autour de notre conception. Allons donc au fond et voyons quel est l'espace qui nous reste ici. Nous allons avoir quelque chose comme ça. Il s'agit donc de notre navigation en bas et il y a un espacement de autour. Essayons de le rendre un peu plus grand. Je pense que c'est le plus 32. Ici, nous l'avons. Essayons de zoomer et de voir. Est-ce en bas ? Oui. L'espacement est donc de 0,77, donc oui, il est 32 en bas. Maintenant, l'espacement est presque identique. Nos plus petits espaces. Un bloc est 24, l' autre est 32. Voici donc les deux tailles. Nous allons donc écrire ici, comme nous l'avons fait pour notre topographie ici. Je vais copier ça. Je vais le coller ici. Le premier est 24, nous en avons, le second est 32. Ce sont les deux espaces. Oups. Revenons en arrière et voyons si nous utilisons plus d'espace entre ces deux-là. Je pense que ça doit être le cas. L'un est 36. Voyons ce que c'est 20, c'est 211. L'espacement est en fait de 20 pixels. Vous pouvez donc voir ici 3621 pas supplémentaires que nous allons utiliser, soit moins de 24, soit 20. Nous avons identifié trois espacements entre notre conception. Nous avons ici 40 sections entre les sections, des sections plus grandes. De même, le problème ici est que nous devons voir l'espacement. Il s'agit essentiellement d'un bloc. Nous avons 16 espacement entre ce cap et ce bloc. Essayons donc de voir ici, il devrait être 24 par le haut. De même, ces 224,5, c'est en fait à 101. Cela devrait également être 01, comme celui-ci, 2424. D'accord. Nous allons utiliser un spécimen de 16 ici. Et à partir de là, il est 28 ans. Je pense que ça devrait être quelque chose comme 32. Essayons de voir. Nous avons encore un espacement, soit 16. Donc, ajoutons 16 ou ici nous en avons 16. Nous avons donc identifié quatre étapes. 16202432, je pense que nous en avons eu, d'accord, donc nous en avons quatre. Essayons de voir si c'est 3232 que nous avons déjà identifié. Oui. L'une était de 40, ce qui se trouvait entre ces deux sections. Il s'agit donc de 40. Nous avons pour l'espacement. Essayons maintenant de voir si nous avons quelque chose comme 20202024. Ok, c'est bien. 12. Vous pouvez voir des objets très adjacents. Ils ont 12 espacements. Essayons 12 ici. Nous avons maintenant 123456 espacement, systèmes d'espacement vertical. Et essayons de voir si nous en avons 36. Il s'agit donc de 24. C'est 40 ans. Oui, je pense que notre conception est basée sur ces quatre ou cinq espacement. 1216202430 à 40. Permettez-moi de voir si nous avons besoin d' espacement entre les deux. Nous avons un espacement de 16 entre deux articles. Ainsi, l' espacement horizontal a également le même pas. Et voyons si nous avons quelque chose quel est l'espacement entre ces deux-là. J'ai donc utilisé deux ou trois fois ce 27. Je pense que cela devrait être en nombre égal. 27 n'est pas une bonne chose. Il est en fait basé sur cela. Bon, essayons de voir ce huit. Le plus petit, n'est-ce pas ? Ici, il y a huit entre les deux. Vous pouvez voir qu'il s'agit de textes à trois lignes, donc nous en utilisons huit ici. Ajoutons-le pour ajouter plus de flexibilité. Donc, si nous disposons du plus petit espace entre nos articles, ce serait 881216202430 à 40. Et je pense que cela compléterait notre système de conception. 36 ne devrait pas avoir 36 ans, mais il devrait être 32. Nous avons ici, essayons de les adapter à un seul. Nous pouvons également utiliser 40 ici, mais je pense que j'en utiliserais 32 ici. Et la distance entre les deux est tendance. Et celui-ci va aussi avoir 20 ans. En fait, essayons de voir la distance entre 168 couches. C'est donc bien. Essayons de voir que ce système devrait être 16. Et essayons d'en voir dix. Ce n'est pas bon. Nous devons l'avoir ici. Et essayons de voir la distance entre ces deux-là. C'est bien. Et cela doit être en fait 16. Ici. Ça a l'air génial. Vous pouvez voir que je modifie mon design pour m'adapter, donc il devrait être huit. Encore une fois, il a 16 ans. Maintenant, c'est parfait. C'est tout ce que je pense que ce sont les systèmes d'espacement que nous voulons utiliser dans nos conceptions. Commençons à les construire. Donc, ce que j'essaie de faire c'est que nous allons construire des blocs d'espaces. Allons chercher notre rectangle. Ici, nous l'avons. Il doit être de 40 hauteurs. Essayons d'utiliser le 45e. Normalement, ce que j'ai essayé de faire, c'est pour le rythme vertical, je vais utiliser la largeur de celui-ci, donc elle mesure 375 pixels de large. Ce que j'essaie de faire, c'est que je vais utiliser 375 ici. Je vais donc écrire en appuyant sur T 40 Bx, comme ça. Je vais l' aligner au milieu. Combinez-les. Vous pouvez les colorer si vous le souhaitez. Par exemple, je pourrais vouloir que ce soit quelque chose comme ça. Pour cette couleur, je vais utiliser quelque chose. Ce sera mon espacement. Cela va être, je vais créer un composant. Créons un composant. Et nous allons appeler ça de l'espace. Ce sera ma dernière échelle, 1234567, Space sept. Ou vous pouvez également l'appeler section, espace, espace que section tiret. Appelons-les par des noms significatifs. Cela va être une section spatiale ou appelons-le Space sept. Il devrait donc être le plus grand serait plus facile de se souvenir de sept, nous en avons sept ici. Nous allons encore répéter la même chose. Et pour cela, nous allons le dissocier D cette instance. Donc c'est encore, je vais résoudre, je fais la même chose encore et encore. Nous allons donc sauter ce 32. Je vais donc réduire la taille de la hauteur, 32. Comme ça. Alignons le texte au milieu. Whoops, j'aime vraiment ça. Allons-le vers le haut. Maintenant, je vais recréer celui-ci, et nous allons l' appeler espace six. Ce sera mon espace six. De même, nous allons faire tous les autres. 34. Créer un système d'espacement 02: Vous pouvez maintenant voir que nous avons créé notre système d'espacement. Et je vais vous montrer comment créer un nouvel écran en supprimant ces systèmes d'espacement. Maintenant, vous pouvez également les nommer, par exemple, vous pouvez les nommer comme si cela allait être notre marge. Je sais que ce sera ma marge. Il s' agira de l'espace Section. Je sais donc que ce sera mon espace de section. Et de même, tout cela va être le plus petit entre quelque chose comme ça ou tout simplement l'appeler espace un. Ce sera le plus petit. Ce sera ma marge. Il s'agira de ma section, espacement des sections ou de la marge du quart suivant. Juste pour conserver la même technique de dénomination. Donc maintenant, si vous venez ici, par exemple, je construis un nouvel écran ou je construis un nouveau design ici. Nous allons donc copier celle-ci. Et laissez-moi vous montrer. Si je n'ai rien ici. Et je voulais démarrer mon écran pour que je le fasse rapidement, c'est changer, changer. Une fois que j'ai appuyé sur Maj I, vous pouvez voir que j'ai des choses différentes ici. Je peux déposer des boutons. Je peux laisser tomber l'illustration. Nous avons ici le système d'espacement. Commençons donc par cette marge d'espace ou l'espace six. Ici, nous l'avons pour que je puisse le laisser tomber comme ça. Et maintenant, si j' essaie de taper quelque chose ici, Sally notera. Je sais donc que je dois garder cette marge ici avant de commencer quelque chose. Ce sera mon espace. De même, si je veux ajouter un nouveau texte ou ajouter quelque chose en dessous, appelons-le sous-titre. Je sais que j'ai besoin de huit pixels d'espace entre eux. Je peux donc appuyer rapidement sur Maj I, et je peux ajouter mon espacement. Et vous pouvez également montrer à vos développeurs ce système d'espacement. Vous pouvez créer un document et leur montrer qu'il s'agit du système d'espacement ou de l'espacement qui va être utilisé. Par exemple, mettons moi, je déplace, et ce sera mon espace système d' espacement T2 est en fait utilisé entre les boutons. Les développeurs vont donc savoir que l'espace deux est de 12 pixels et que c'est l'espace entre deux boutons adjacents. Je vais préparer un document pour montrer tout mon système d'espacement. Je pense que l'espace a été utilisé. Ici, nous avons utilisé le plus grand espace, je pense que l'espace Section. Ajoutons le dernier. L'espace sept ici. Vous devez donc préparer quelque chose comme ceci ou ceci. Vous pouvez donc voir ici que nous avons l'espacement de 3624 en fait décalage I. Oups, pas la typographie. Je veux aller au système d' espacement et je vais ajouter de l'espace trois, je pense que 16 aliments spatiaux. Vous pouvez voir que vous pouvez les nommer. C'est difficile pour moi de le dessiner ici. Vous pouvez également les nommer par leur taille, temporelle, je vais utiliser 2020 ou ici. Et 43, je vais en mettre 16. C'est plus facile à comprendre et plus numérique que vous pouvez voir ici, quand je clique ici, c'est la section marginale de la section Sexual 40. De même, je peux ajouter 32, dont nous avons besoin de 24 façons, donc nous allons utiliser. Vous pouvez également effectuer une recherche ici. Nous allons donc accorder ce qui se passe. Espace. Ici, nous avons de l'espace et nous manquons 24. Je ne l'ai peut-être pas nommé correctement. C'est pourquoi elle ne venait pas. Encore une fois, je vais rechercher Shift I pour effectuer une recherche dans mes composants. Et je vais taper 24 va vite y aller. Et je vais préparer un document pour mes développeurs. De même, vous pouvez voir que nous avons des espacements. Nous ne pouvons pas comprendre l'espacement. Il est 32. Nous allons donc ajouter 32 ici. C'est ainsi que vous allez montrer votre écran à vos développeurs. Il s'agit donc de 43, mais je pense qu'il devrait être 40. Essayons donc d'ajouter pour l'écran, je pense que nous allons le garder un peu plus haut. Essayons donc d'ajouter Shift I, et ajoutons 40 par ici, au moins 40 pixels lorsqu'il y a boutons pour que les utilisateurs puissent facilement les appuyer. C'est un problème d'accessibilité. avons donc ici. On peut peut-être ajouter des ombres ou quelque chose comme ça. C'est ainsi que se passe tout notre écran. Vous pouvez également le déplacer un peu vers le bas de cet écran, exemple 123. Ensuite, nous pourrons le faire. Ici, nous avons une mise en page parfaite de l'écran. C'est ainsi que vous allez utiliser votre système d'espacement, systèmes dans vos systèmes de conception. Vous pouvez également spécifier si votre système de conception dispose de tables et de nombreuses données Vous pouvez également spécifier un espacement horizontal. Vous avez peut-être besoin de quatre pixels. Donc, pour l'espacement horizontal, vous allez créer des blocs plus petits. Blocs plus petits pour afficher l'espacement horizontal. Plutôt que de les créer. Par exemple, permettez-moi de vous montrer, créons un bloc de huit pixels. Et je vais vous montrer que c'est Dy Dot. Et je vais taper ici huit pixels. Cela aura une hauteur séparée, gardons la hauteur 40 et nous allons l'utiliser. Ce serait, supprimons le pixel parce que c'est très difficile. Oups, nous l'avons fait. Mettons-le ici. Ce n'est pas forcément que vous ayez toujours besoin de mettre du texte ici. Vous pouvez les renommer. Par exemple, je vais appeler cela un espace horizontal. Gardons le bord petit espace. Ce sera à la piscine spatiale, qui aura huit ans. Gardons ça entre parenthèses. Taille. C'est ainsi que nous allons créer. Créons un composant. Que se passe-t-il ? Commande Alt ou Option K. Il s'agit de votre espace publicitaire. Et ce sera un espacement unique et nous pouvons également créer pour 1216 horizontalement, l'espacement ne serait pas pour regarder bien, il serait à très petite échelle. Mais vous pouvez créer cela et montrer à vos développeurs que c'est ainsi que nous allons utiliser cet espace. Vous pouvez donc voir que c'est dans l'espace. Vous pouvez également utiliser l'espace ici comme ceci et le nom. Il est donc facile, facile de comprendre qu'il s' agit d'un espace vertical. Quelque chose comme ça. dénomination doit être très compacte et significative afin que vos développeurs puissent facilement comprendre ou tout nouveau concepteur s'ils viennent ou rejoignent votre équipe de conception d'équipe, ils peuvent facilement comprendre que c'est ainsi que va fonctionner votre système d'espacement. Tout est question de système d'espacement. C'est ainsi que vous allez passer à Control Command Shift quatre pour masquer ma mise en page. Et c'est ainsi que vous allez montrer celle-ci à votre développeur. Et vous pouvez également placer tous ces éléments dans un groupe et appeler cela l'espacement. Et vous pouvez le cacher et le montrer comme ça. Permettez-moi de zoomer sur cet écran. Vous pouvez simplement le cacher et le montrer comme ça. Il est plus facile de gérer cela comme ça. Les gars, il s'agit de votre système d'espacement dans votre système de conception. J'ai vu beaucoup de concepteurs qu'ils n'utilisent pas cela et ils ne savent pas comment utiliser tout cet espace à l'échelle des systèmes. C'est ainsi que vous allez les nommer correctement. C'est ainsi que vous allez créer des composants à partir de ceux-ci et les déposer rapidement dans vos conceptions tout en créant votre système de conception. D'ici là, nous allons apprendre beaucoup, puis prendre soin de vous. Au revoir. 35. Liens et documentation dans Figma - Relier les pages et des cadres: Nous avons maintenant terminé notre système de conception. Parlons de quelques-uns des conseils que je vais vous donner, que vous pouvez utiliser dans Figma. Et l'un d'eux est que vous pouvez voir à l'écran, à l'écran, vous pouvez voir que j'en ai utilisé. Par ici. Vous pouvez voir qu'il s'agit d'un document de principe de conception, et j'utilise une petite icône ici, appelée emojis. Vous pouvez donc utiliser des emojis ici. Ce que vous avez à faire, c'est d' aller dans plus de G, de copier et de coller. avons donc ici. Obtenez Emoji.com. Essayons donc d'en utiliser un à partir d'ici. Essayons d'utiliser, essayons d'utiliser n'importe lequel d'entre eux. Par exemple, comme celui-ci, ça va être tel ou c'est pourquoi je ne suis pas en mesure de le sélectionner. Laissez-moi voir. Oui. D'accord. Je vais donc choisir ça. Ce n'est pas le cas en fait, il est parfois difficile de les sélectionner. Je vais le sélectionner, sélectionner celui-ci, commander C ou contrôler C. Et je retourne à Figma. Vous pouvez voir, par exemple, cette déclaration de finalité. Je peux arriver à la fin et je peux juste le coller ici comme ça. Vous pouvez voir qu'il me montre maintenant des emojis ici. De même, vous pouvez le faire, c'est que vous pouvez le coller ici au début si vous voulez vous souvenir de cette façon. C'est à ça que ça va ressembler. Vous pouvez copier un emoji. Et par exemple, j'ai celui-là. J'aime bien celui-ci, donc je ne sais pas pourquoi je ne suis pas capable copier dans ce navigateur. Essayons un autre. Ici. C'est plus facile pour moi. Bon, donc encore une fois, la même chose se produit. Essayons de le rendre plus petit. Et ici, nous l'avons, par exemple, comme celui-ci. Je vais sélectionner cette commande C. Et revenons à cela. Et je vais utiliser des principes de conception comme celui-là. Et ici aussi, je vais supprimer ça. C'est une astuce très simple pour les utiliser. C'est donc une bonne astuce pour utiliser des icônes dans votre design. De même, par exemple, vous pouvez voir que j'ai utilisé ici. Ce que j'ai fait, c'est que je l'ai fait copier, juste une copie d'ici. Vous pouvez utiliser n'importe quelle image si vous le souhaitez. Et j'ai vu des gens, ils essaient d'utiliser des icônes et d'autres choses. Par exemple, ils ont vu des gens utiliser ces coches, des coches par exemple. Et nous allons utiliser ce chèque. Et je vais revenir à mon système de conception. Donc, nous l'avons ici, par exemple, vous pouvez voir que c'est la même chose que j'ai faite avec cela. Vous pouvez voir autre que d'utiliser ça, je peux faire glisser et déposer ici comme ça. Vous pouvez donc voir non visible comme ça. Ce sont en fait des liens auxquels vous pouvez accéder et créer un lien vers une autre page ou à l'intérieur de Figma. L'astuce est par exemple que je veux accéder à ces systèmes de conception de page ou cliquer avec le bouton droit de la souris Copier lien vers la page et écrire n'importe quelle texture ici. Par exemple, accédez à Design System. Cliquez sur ce lien, collez votre URL, appuyez sur Entrée, et c' est tout ce dont vous avez besoin. Vous pouvez modifier la couleur de celle-ci, quelle que soit la couleur souhaitée. Et vous pouvez également utiliser un emoji. Je peux peut-être essayer quelque chose comme ce cœur ici. Je vais l'utiliser et coller, il suffit de le coller au début. Oups, alors évadez-vous. Ici, nous avons un très beau lien. Donc, si vous souhaitez passer à cette page, cliquez simplement sur, allez sur cette page. Il va aller là-bas. J'ai vu beaucoup de gens qu'ils essayaient avoir des catégories différentes, des grilles différentes et tout et qui sont liés ici. Ainsi, sur chaque page, ils ont le lien vers cette documentation ou ce système de conception et tout. Vous pouvez donc revenir aux principes de conception du système de conception à partir d'ici, vous pouvez également utiliser ces liens vers d'autres pages si vous le souhaitez. Il s'agit donc en fait d'une navigation. Vous pouvez également créer un cadre séparé ici, appeler la navigation lors de la navigation. Comme ce système de conception de navigation, quelque chose comme ça. Et vous pouvez également lier, par exemple, si je veux lier ce lien, donc je pense pouvoir également copier l'URL de celle-ci. À partir de là, je peux copier le lien Copier. Vous pouvez donc voir ici à l'intérieur de cette copie, Copier les puces de bouton de lien. Et si vous voulez ajouter ici, zoomons sur cette navigation pour que je puisse la répliquer. Et je peux l'appeler dans les puces de bouton, des éléments de forme. Je peux coller mon URL ici et elle reviendra là-bas. Si je clique sur aller au cadre, il va directement à ce cadre. Il existe donc de nombreuses façons d'utiliser ces liens à l'intérieur de votre Figma. Vous pouvez lier notre cadre, vous pouvez lier notre page entière et créer tout ce système de navigation design. instant, je ne vais pas cliquer sur ce lien. Je vais garder celui-ci ici. Comme ça. Essayez de minimiser la taille. Essayons de les sélectionner tous les deux. Déplacez-les à l'extérieur pour que je le garde ici comme ça. Juste plus près de mon premier écran. Et c'est tout. Voici quelques conseils pour maintenir votre système de conception. De plus, vous pouvez voir ici, je vais vous donner un dernier aperçu de la façon dont nous avons fait équipe. C'est la couleur. Il s'agit d'une couleur de fond que nous utilisons dans toute notre application. Ce que j'essaie de faire, c'est que j' essaie d'utiliser et de faire correspondre. Toute l'équipe utilise le même arrière-plan pour chaque élément ici. Vous pouvez donc voir des icônes, des boutons, tout utilise les mêmes couleurs. Laissez-moi zoomer. Et je vais vous montrer ici le lien pour télécharger la police de caractères Barlow. Voici nos couleurs. Ce sont les trois couleurs utilisées par nos couleurs de textes. Et aussi leur but est que cette couleur soit pour celle-ci. Donc, en fait, nous essayons d'utiliser, je pense que 12345678910 ou 12 couleurs maximum dans tout ce design. J'espère que vous avez beaucoup appris et apprécierez tout ce voyage avec moi. Des hauts et des bas peuvent survenir pendant tout ce voyage de janvier. Et j'adorerais m' embarquer et d'autres sont généralement attendus assez tôt. Donc, en ce moment, nous allons nous voir uns les autres et nous allons dire adieu. Parce que ce sera la dernière leçon. Je veux que vous créiez quelque chose de similaire à celui-ci, un système de conception simple de votre application. Vous pouvez utiliser la version claire et la version sombre. C'est à vous de décider. C'est tout. J'espère que vous avez apprécié ce cours et que vous restez à l'écoute de moi, consultez mes autres cours jusque-là, prenez soin de vous. Au revoir. 36. Attribuer le système de couleurs: Le moment est venu de votre première affectation. Votre premier devoir doit maintenant être de créer un système de couleurs pour votre système de conception. Avant cela, vous devez créer au moins quatre ou cinq écrans, au moins quatre écrans de votre application mobile ou de votre site Web ou tout ce que vous développez. Un ou deux écrans, au moins deux pages de votre site Web et au moins quatre écrans de votre application mobile. Alors donnez-moi, montrez-moi un jeu de couleurs. Créez un système de couleurs comme celui-ci et montrez-moi vos couleurs primaires et secondaires, vos couleurs pour les couleurs de vos textes, les couleurs, vos gris et vos noirs ou toute autre couleur ou états supplémentaires ou les invoquants que vous allez utiliser. Et montrez-moi tout ce que vous avez défini, donnez-leur un but et montrez-moi ce que vous avez quad. J'ai donc hâte de vous montrer, de voir votre écran. Vous pouvez créer une capture d'écran. Vous pouvez cliquer dessus, par exemple, il s'agit de couleurs. Vous pouvez créer un clic ici, exporter. Vous pouvez l'exporter, exporter des couleurs sur votre bureau et télécharger et me montrer ce système de couleurs, tout votre système de couleurs. J'attends un système fermé. Je vous rencontrerai et je vous répondrai chaque fois que je le peux pour votre mission. Commençons. 37. Système de typographie - Échelles et styles: C'est maintenant le moment de votre deuxième affectation. s'agirait de votre système technique ou de votre échelle de type et de vos différents styles de type que vous allez créer pour votre système de conception. J'ai donc hâte de voir vos devoirs. Vous devez créer une échelle de typographie et un système de conception de typographie comme je l'ai fait. Je vais vous montrer. C'est ainsi que vous devez me présenter. Vous devez me montrer que c'est votre système de typographie ou vos polices de caractères, différentes échelles et leur attribuer le but, ce que ce style ferait comme ça. C'est mon titre, s'agit de mon titre ou de mon sous-titre de section quel que soit le titre de cours affecté à ces échelles de types. Et vous devez me montrer que vous pouvez également partager votre document, par exemple en cliquant sur Acheter ici. Vous pouvez copier le lien et simplement m'envoyer le lien plutôt que de me montrer le tout. Vous pouvez me montrer le lien que je termine. Vous pouvez continuer à mettre à jour ce lien. Je vais le voir. Envoyez-moi simplement un message que nous avons. J'ai mis à jour et j'ai ajouté mon système d'icônes ou mon système de grille ou quoi que ce soit dans mon système de conception. Et je vais jeter un coup d'œil là-dessus. Assurez-vous de le créer, de me montrer et de partager le lien avec moi. Et vous devez également créer des combos de type combo, comme vous pouvez le voir que j'ai créé ici userinfo, et voici ma section, lecture vidéo. C'est donc à vous de choisir. Vous devez montrer la combinaison, comment seront les composants, quelles seront les distances entre les différents. Nous les avons déjà abordés dans nos systèmes complexes ici. Composants du cours. Ne vous inquiétez pas, il suffit de créer une échelle de typographie. C'est tout ce que vous pouvez trouver le lien de ce fichier que je vais partager avec vous dans les ressources. Je vais également partager le fichier Figma, le fichier Figma pour tout cet exercice. Assurez-vous de le télécharger et de l'importer. Et vous pouvez le faire en cliquant ici. Je suis retourné à la page d'accueil, cliquez sur le fichier d'importation et vous pouvez ouvrir ce fichier. Revenons à notre système de conception. Il s'agit de votre deuxième mission, système d'échelle de typographie, et montrez-le moi. Prenez soin de vous, au revoir. 38. Affectation des boutons et des atomes: Maintenant, votre troisième mission consiste à créer les atomes de votre système de conception, qui sont en fait vos petits composants comme des boutons, une petite puce en quatre puces, quelque chose comme ça. Navigations. C'est le document que je vous ai acheté. Puces de boutons, barres de progression, éléments de formulaire. Créez donc un document comme celui-ci et montrez-moi dans différents états. Vous pouvez créer différentes variantes et afficher ce document ou partager le lien avec moi. Vous pouvez cliquer ici sur le partage et partager le lien, copier le lien et me montrer le lien de ce document. Assurez-vous de bien le nommer. Vous pouvez également écrire votre nom ici. Par exemple, mon nom, Dash UX, designer. Je peux créer et utiliser le plus gros ici. Ou je peux choisir ce calque et je peux utiliser 48, quelque chose comme ça, et utiliser du noir. De cette façon, je vais savoir que c' est votre dossier ou qu'il vous appartient. Parfois, j'ouvre beaucoup de systèmes de conception sont de nombreux devoirs à vérifier et j'ai oublié quoi, qui en fait, qui est l' étudiant ou qui l'a conçu. Assurez-vous de mettre votre nom ici. Ok, donc voici ce dont j'ai besoin. Vous pouvez créer cela et me le montrer. J'attends avec impatience vos missions. Commençons maintenant. 39. illutrations et système de grille d'icônes: Maintenant, votre prochaine mission est que vous devez créer vos icônes et votre système d'illustration et me le montrer. Le système d'icônes va également avoir vos logos. Vous pouvez voir ce que lui et moi avons deux logos. Vous pouvez ainsi créer un logo, logo petit et vous assurer qu'il s' agit de composants afin que vous puissiez facilement les ajouter pendant que vous concevez. De même, vous devez les redimensionner. Vous devez les dimensionner correctement pour pouvoir les insérer facilement dans votre système de conception. Ce sont deux choses dont j'ai besoin de vous. De plus, si vous parvenez à créer ce bureau de système de grille , tablette mobile, ce serait un avantage. J'en ai donc besoin de trois, icônes, d'illustrations et d'un système de grille. Ce sont les trois que vous allez créer ensuite. Et dans la prochaine mission, nous vous verrons, j'attends vos missions. Commencez tout simplement maintenant. 40. Projet de cours - Système de conception avec Figma: Il est maintenant temps de créer des composants plus volumineux. Vous devez donc créer une section de composants ici, un tableau d'art et me montrer quels sont les composants les plus importants de votre système de conception et comment vous allez les implémenter. Assurez-vous qu'ils sont plus faciles à naviguer et qu'ils ont une variance et tout s' ils ont des surétats ou des états actifs tentent de créer une variance. C'est ce dont j'ai besoin de vous, de vos composants de sélecteur. Ce sera donc le dernier, je pense. Pendant ce temps, si vous pouvez créer un système d'espacement, c'est les deux dernières choses que je pense que le système d'espacement reste. C'est le cœur du système d'espacement de votre système de conception, des grilles, de la typographie et des couleurs. Ce sont ces quatre choses, vous pouvez dire la base ou les piliers de votre système de conception. Tout le reste va se baser sur eux. Par exemple, les boutons vont importer les couleurs et le texte ainsi que l' espacement de votre système d'espacement vertical. De même, vos icônes vont utiliser un système d'espacement comme nous avons 3224 pixels comme sur vos composants plus gros, ils vont tout utiliser. C'est tout ce qui va être votre dernière mission. Vous pouvez partager l' ensemble du système de conception et essayer de créer différentes pages. Je vois donc que vous avez eu l'idée de séparer votre système de conception. Vous pouvez également créer un lien. Par exemple, ici, vous pouvez voir que j'ai un lien ici. Je peux donc revenir au système de conception en cliquant ici, à la page, et je peux aussi revenir en arrière à partir d'ici. C'est tout ce qui va être votre dernière mission. Montrez-moi votre système de conception complet et je serai plus qu' heureux de commander et de répondre et de voir ce que vous avez accompli. C'est tout ce que je pense que nous avons couvert beaucoup de choses dans cette classe. J'espère que vous avez apprécié et appris quelque chose de nouveau pour moi. Assurez-vous de m'envoyer des commandes et de répondre. serais ravi de voir vos commentaires sur ce cours. Nous nous retrouverons dans un autre cours d'ici là, prenez soin de vous. 41. Prochaines étapes: Merci de rester avec moi pendant toute cette classe de systèmes de conception utilisant Figma, nous avons beaucoup appris sur les systèmes de conception. J'espère que vous allez consulter mes autres cours qui concernent le jeu de couleurs, la typographie, la conception de mise en page et beaucoup d'autres choses qui vont vous faire ou vous transformer en interface utilisateur professionnelle. concepteur d'expérience , del, alors je vous rencontrerai dans mes autres cours. Prenez soin de vous, au revoir.