Principes de base de la typographie de l'UI à

1. 00 Les bases de la typographie d'introduction: Bienvenue dans ce cours complet sur les principes fondamentaux de la typographie de l'interface utilisateur La typographie est un élément clé du design, elle donne vie à votre travail et guide votre public. Au cours de ce cours d'une heure, j'aimerais vous donner un aperçu des aspects plus techniques de la configuration et de l' utilisation de la typographie sur le Web Nous allons commencer par les notions de base, telles que l'emplacement des polices de caractères, nombre dont vous avez besoin pour une bonne configuration d'interface utilisateur et les raisons pour lesquelles les superfamilles sont si fantastiques Je vais vous montrer comment créer une hiérarchie solide en configurant une échelle de types différentes manières. Nous apprendrons à nommer textiles de manière efficace et à montrer que nous n'interférons pas avec la configuration du code et l'optimisation des moteurs de recherche. Et je vais vous montrer pourquoi il est si important d'utiliser des unités RM plutôt que des pixels dès que votre design prend vie dans le code. Nous en apprendrons davantage sur le poids de police et les polices variables, et j'expliquerai comment fonctionne la hauteur de ligne en CSS et ce que cela signifie pour votre configuration de typographie Nous explorerons également l'importance du contraste des couleurs et la manière de le vérifier et de le documenter. Et surtout, nous verrons de plus près comment gérer la typographie sur différentes tailles d'écran. Cela inclut l'examen des configurations avec des points de rupture ainsi qu' approche plus moderne pour une typographie fluide à l'aide de la pince CSS Bien que l'accent soit mis sur l'aspect théorique, en comblant le fossé entre le design et le code, nous examinerons également la mise en œuvre pratique à l'aide d' outils tels que Figma De la configuration de base du texte à deux autres techniques avancées, deux autres techniques avancées telles que l'utilisation de styles, de variables et de modes. Que vous soyez un designer débutant ou expérimenté, cette offre est conçue pour vous aider à affiner vos compétences en typographie et votre configuration technique Il s'agit d'un cours de MonAro A. de MonAro A. 2. Présentation générale: Il n'y a probablement pas de meilleur sujet dans le design que la typographie Ne vous laissez pas intimider. Il ne s'agit pas d'obtenir un doctorat. Il s'agit de comprendre quelques règles de base pour garantir que votre typographie soit belle Et je vais te montrer. L'important est de comprendre qu'au lieu de lire chaque mot en ligne, gens ont tendance à scanner le texte. Alors, de quoi parle ce texte ? Ouais, ça a suffi. Et de quoi parle ce texte ? C'est exactement pareil, mais comme vous pouvez le constater, l'apparence est très différente car sa hiérarchie fonctionne. Nous avons de nombreux éléments tels que la taille, le poids, la couleur, la position et l'espacement pour créer cette hiérarchie, et nous allons tous les examiner plus en détail Il est également très important pour moi de vous montrer un peu comment cela fonctionne dans le code afin mieux traduire et communiquer notre configuration entre la conception et le développement. Au cours de ce cours, nous allons parler polices de caractères et des différences réelles Serif, et les soi-disant superfamilles. Nous allons discuter de l' endroit où trouver les caractères typographiques à utiliser et du nombre dont nous avons besoin pour une bonne conception informatique. Nous allons mettre en place une échelle de caractères ensemble, et je vais vous montrer différentes manières de le faire. Je vais vous expliquer pourquoi nous utilisons RM pour le code et les pixels lors de la définition des tailles pour la programmation. Je vais vous dire un mot sur la dénomination et sur les raisons pour lesquelles il est si important de bien faire les choses. Nous allons parler du poids, de la hauteur et de la longueur de la ligne, ainsi que des espaces blancs. Et nous allons discuter du contraste, un sujet très important en matière d'accessibilité. Et c'est très important, nous allons nous pencher sur la typographie réactive pour garantir que votre texte soit beau sur toutes les tailles d'écran. Nous examinerons ici configuration traditionnelle avec des points d'arrêt, ainsi qu'une approche plus moderne utilisant pinces CSS et discuterons des cas où il est judicieux d'utiliser quoi ? Bien que ce cours se concentre sur les aspects théoriques, nous examinerons également la mise en œuvre pratique à l' aide d' outils tels que Figma, de la configuration de texte de base à des techniques plus avancées telles que l'utilisation de styles, variables et de modes, ainsi que manière de s'aligner sur les paramètres de conception réactive Et bien sûr, de nombreux trucs et astuces, ainsi que quelques exemples concrets en cours de route. 3. 02 typographieandfont en audio: Typographie et police de caractères. Qu'est-ce qu'une police de caractères ? Il s'agit d'un ensemble de caractères graphiques, notamment des lettres, des chiffres et des signes de ponctuation. Dans cette présentation, j' utilise une police de caractères appelée Poppins Une phase de saisie inclut des variantes telles que extra bold, bold, normal, condensé, etc. Une police, en revanche, est un style et une taille spécifiques d'une phase de texte. Ainsi, alors que la phase saisie fait référence à la conception des caractères, police fait référence à un style et à une taille particuliers de ce design. Par exemple, Poppins en gras 16 points, c'est une police. Même si le terme correct est police de caractères, nombreuses personnes utilisent le terme «   affectueux » pour désigner les deux C'est une confusion courante, mais ce n'est pas grave tant que vous comprenez la différence dans votre travail quotidien 4. 03 Serif, sans serif et superfamilles: Serif, San Serif et les superfamilles. Il existe de nombreuses catégories de polices de caractères, mais celles que vous devez vraiment connaître et San Serif, car elles sont fondamentales pour comprendre rôle de la typographie dans la lisibilité et l'esthétique du design Identifier la différence entre eux est assez simple. sérapons comportent un trait supplémentaire ou élément décoratif à la fin de la lettre, ce qui peut améliorer la lisibilité des documents imprimés en orientant le regard le long Les exemples classiques incluent Times New Roman et Garamond. Comprendre quand et pourquoi utiliser chaque type peut avoir un impact significatif sur l'efficacité de votre conception. Que vous recherchiez un look traditionnel avec serapons ou une touche plus contemporaine avec un San Comprenons-le un peu mieux. polices de caractères San SRF caractérisées par leur apparence épurée et moderne constituent un choix populaire pour les affichages numériques et le contenu en ligne Helvetica et Inter en sont des exemples notables. Ces polices transmettent efficacement des informations rapides par taille, ce qui les rend idéales pour les espaces restreints, tels que les étiquettes sous icônes ou les interfaces numériques en général. Ils offrent une bonne lisibilité sur différentes tailles et résolutions d'écran Les visages de type SP, avec leurs éléments décoratifs sur le bout des lettres, offrent un look plus traditionnel et sophistiqué. Ce style classique est idéal pour créer une atmosphère de confiance et d'autorité, y compris dans le contenu numérique. Ils peuvent également contribuer à ajouter une touche d' élégance et de formalité aux sites Web et aux applications, particulier dans des contextes tels que les magazines en ligne, les plateformes universitaires et les services professionnels Bien que les sérapons soient souvent associés à l'impression, ils peuvent également être utilisés dans le design numérique Leurs seraps détaillés peuvent aider à guider l'œil le long des lignes du texte, ce qui les rend adaptés à des lectures plus longues sur écrans à haute résolution où la lisibilité est améliorée Vous pouvez également intégrer les polices era et San sera dans votre design, alternant entre le corps du texte du titre, ou peut-être choisir un Serafond pour une Cependant, l'obtention d'un design harmonieux nécessite des ajustements minutieux Les tailles de police, par exemple, peuvent s'afficher différemment entre les deux styles. Ce qui fonctionne pour l'un peut ne pas convenir à l'autre. Si vous envisagez de mélanger les polices Seraph ou San sera, je vous recommande d'utiliser ce que l' on appelle une superfamille Comme le suggère le terme, une superfamille est un ensemble de caractères conçus pour se compléter harmonieusement, même si l'un est un séraphin et l' autre un serp Ces superfamilles incluent souvent des variantes supplémentaires, telles que des versions arrondies, condensées ou à claquettes Grâce à l'ADN commun, tel que la même base, la même taille, les mêmes proportions et le même espacement, vous pouvez facilement les mélanger sans perdre l' harmonie générale de votre design 5. 04 Où trouver les polices: Où trouver fs. Il existe trois endroits où vous pouvez obtenir vos polices de caractères Si vous travaillez pour une grande entreprise, ils peuvent avoir leur propre police de caractères personnalisée qu'ils mettront à votre disposition Par exemple, AB and B utilise des céréales, une très belle police de caractères Maintenant, il est important de savoir que même si la police est installée sur votre ordinateur, vous ne serez autorisé à l'utiliser qu'auprès de cette société en particulier La deuxième option consiste à acheter une licence. Il existe de nombreuses pages telles que MyFons ou Fun Shop où vous pouvez parcourir et trouver des polices de caractères incroyables. Laisse-moi te montrer. Ici, nous sommes dans mes polices, et vous pouvez parcourir les polices, par catégorie, par meilleures ventes, etc. Je vais juste choisir une catégorie et dire que nous recherchons une police Sansa Ensuite, nous avons d'autres filtres ici sur la gauche, donc très pratiques. Nous pouvons voir différentes polices ici et nous en avons un très bon aperçu. Allons-y pour celui-ci. J'aime beaucoup ces exemples qu'ils nous donnent afin que vous puissiez avoir une bonne idée de la façon dont vous pouvez concevoir avec. Maintenant, ici, vous pouvez obtenir informations sur les différentes épaisseurs de police, et vous pouvez également voir si vous voulez un pack familial ou des styles individuels. est généralement judicieux d' opter pour le pack familial, et vous obtenez les spécifications techniques et, très important, les licences. C'est quelque chose que vous devriez vraiment examiner avec votre client pour vous assurer que ce que vous achetez, vous avez le droit de l'utiliser et que vous êtes conscient du coût. Vous pouvez ensuite simplement cliquer sur « by » une fois que vous l'avez décidé, puis vous pouvez choisir police que vous comptez utiliser. Ensuite, par exemple, nous voulons utiliser une version de bureau pour concevoir, et nous voulons l'intégrer dans un site Web, puis vous pouvez voir ici que cela est calculé par vues Vous devrez l'installer sur votre machine pour accéder à un logiciel de conception d'interface utilisateur tel que IGMA La troisième option sera d'utiliser une police gratuite. Certains sont déjà préinstallés sur votre ordinateur, comme Aerial. Elles peuvent être utilisées comme police de remplacement, mais vous remarquerez peut-être qu'elle n'est pas suffisante pour la conception de votre interface utilisateur Google Fonts est l'endroit idéal pour les polices de caractères gratuites. Il est très populaire, propose d'excellents choix et est très facile à utiliser. Sachez simplement que chaque fois que vous obtenez quelque chose de gratuit en ligne, cela s' accompagne généralement d'un échange de données. C'est également le cas ici. C'est très mineur, absolument rien de tragique, mais vous devez tout de même en informer votre client si vous souhaitez utiliser une police Google. Il en va de même pour Google Maps, d'ailleurs. Voyons comment fonctionne Google Font. Le plus important étant qu' il y en a beaucoup, si vous cliquez sur les filtres, vous pouvez utiliser les différentes polices. Disons simplement que nous voulons juste le Sanserf ou si vous recherchez un support linguistique spécifique, c'est vraiment pratique Maintenant, cliquons sur le premier ici. En fait, je prends Open Sans. J'aime bien celui-ci. Ensuite, vous pouvez obtenir un aperçu. Vous pouvez également saisir le texte que vous souhaitez. Si nous cliquons sur GFont, nous obtenons plus d'informations. Si vous voulez en savoir plus, cliquez sur Design, et cela sera pertinent pour vous. Nous obtenons également toutes les informations dont le développement aurait besoin. Ils obtiennent probablement le code d'intégration, puis voici toutes les informations techniques Ils ont juste besoin de savoir lequel vous souhaitez utiliser. Au fait, si vous travaillez chez Figma, vous n'avez rien à faire Vous n'avez même pas besoin de télécharger la police car tout est déjà préinstallé dans Figma tant que vous utilisez Google Fonts 6. 05 Combien de polices (de caractères): Combien de caractères typographiques devez-vous utiliser ? Alors, combien de faces typographiques devriez-vous ou pourriez-vous avoir dans votre design ? Il est généralement recommandé de ne pas en avoir plus de deux. Il se peut que vous ayez une police d'affichage très dominante qui fait partie de l'image de marque et qui n'utilise que vos principaux titres, comme écriture manuscrite ou quelque chose de très spécial, qui n'est pas vraiment lisible et serait trop difficile pour un texte de petite taille Pour tous les autres textes, vous ajouterez ensuite une autre police de caractères très lisible et simple à utiliser À moins que vous ne soyez vraiment à l' aise avec la typographie ou que vous n'ayez une certaine stratégie de marque à suivre, je vous recommande de vous éloigner de ces polices d'affichage sophistiquées Vous n'en avez pas vraiment besoin pour un design solide. Cependant, si vous souhaitez utiliser des visages de type mixte, comme Saraf San Saraf arrondis, etc., je vous recommande d'envisager d'utiliser une superfamille car ils fonctionnent très bien ensemble Ce serait donc une autre raison pour laquelle vous pourriez avoir deux faces typographiques. Cependant, à moins d' utiliser une police d'affichage ou de mélanger des catégories telles que Serif et San Serif, vous vous retrouverez probablement avec deux polices ou de mélanger des catégories telles que Serif et San Serif, vous vous retrouverez probablement avec très similaires, et il est préférable de n'en utiliser Personnellement, je recommande de commencer et de s'en tenir à une seule police de caractères dans la mesure du possible. Pour être honnête, j'en utilise rarement plus, et vous pouvez toujours ajouter cette variation en utilisant une taille, un poids et une couleur différents pour créer votre hiérarchie. Et c'est généralement plus que suffisant. En résumé, à moins que votre marque ne demande un affichage visible, ou que vous ne vouliez mélanger des styles tels que Serif et San Serif, pour lesquels je vous recommande de vous intéresser aux superfamilles, optez pour une seule police de caractères ou que vous ne vouliez mélanger des styles tels que Serif et San Serif, pour lesquels je vous recommande de vous intéresser aux superfamilles, optez pour 7. 06 L'échelle de types: La création d'une échelle de caractères implique d'organiser les tailles de texte de manière cohérente, ce qui est essentiel pour créer une hiérarchie. Cela revient à attribuer à chaque texte son propre niveau d'importance, le rendre plus facile à comprendre et visuellement attrayant. Lorsque nous configurons une échelle de caractères, nous commençons généralement par définir une taille de police de base, qui correspond généralement à la taille du corps du texte, car c'est la plus fréquemment utilisée. Une option populaire est 16 pixels, ce qui équivaut également à un RM, la taille par défaut utilisée par les navigateurs. Vous pouvez bien sûr modifier la taille si vous le souhaitez, mais il est souvent préférable de vous en tenir à cette taille de base de 16 pixels ou d'une RAM. Vous pouvez, bien sûr, aller plus loin. Cela facilite la lecture. Personnellement, j'aime m'y tenir car il correspond parfaitement à mon système général de multiples de quatre et huit, que j'utilise dans tous mes designs pour l' alignement et l'espacement Ainsi, une fois que nous avons défini notre corps de texte, nous pouvons configurer notre échelle en fonction de celui-ci. Il n'y a pas un seul moyen de le configurer. Mais au minimum, j' ajouterais quelques gros titres. Des liens vers des boutons et peut-être une légende. Et vous pouvez bien entendu l'adapter davantage à vos besoins. Par exemple, vous pouvez avoir plusieurs versions pour le corps de votre texte. Cela peut varier en taille. Ou, dans mon exemple, j'utilise des styles accentués et certains styles réguliers. En outre, vous devrez peut-être ajouter une mise en italique aux citations ou diviser les titres en catégories standard et en catégories standard L'affichage des titres permettrait d' attirer l'attention tandis que les titres normaux se fondraient plus facilement dans le flux du texte Cela dépend donc en grande partie des besoins de votre conception. Mais même si vous pouvez augmenter votre échelle de caractères autant que vous le souhaitez, je vous recommande toujours de la garder aussi simple et condensée que possible. Dans une feuille d'étoiles, nous fournissons également des informations générales. Par exemple, la famille de polices que nous allons utiliser, dans mon cas, Poppins, nous voulons donner quelques informations sur la taille et noter que même si dans de nombreux logiciels d'interface utilisateur, nous utilisons toujours des pixels pour la définir En CSS, nous utilisons de la RAM. Personnellement, je préfère donc fournir les deux mesures pour plus de clarté. Un RM correspond à 16 pixels, il est donc assez facile de le calculer à partir des valeurs de vos pixels. De plus, nous voulons communiquer le poids. Encore une fois, j'aime donner le nom que j'utilise dans mon logiciel d'interface utilisateur ainsi que le numéro CSS. Nous ajoutons également des informations sur la hauteur et l'espacement des lignes J'étais un peu paresseux ici, et dans mon exemple, j'ai juste ajouté un peu d'espacement pour mon bouton Enfin, nous incluons également un aperçu de notre texte. Habituellement, lors de l'établissement de notre échelle de caractères, nous commençons par la plus petite taille d'écran. Si nécessaire, nous pouvons ajouter des points d'arrêt et spécifier comment notre fonds s'adapte à différentes tailles. Il existe différentes approches à cet égard. Certains modèles plus modernes n' ont même plus besoin de points d'arrêt, mais j'en parlerai dans une vidéo séparée Donc, cet aperçu de la façon dont notre typographie fonctionne sur notre produit dans différentes tailles est vraiment ce que nous recherchions présent, vous pouvez commencer votre conception en créant une échelle de caractères, mais vous pouvez également commencer à concevoir librement, puis une fois que vous serez votre conception va dans la bonne direction, vous pouvez l' organiser un peu dans une échelle de caractères. Et tu peux absolument le faire. Donc, la façon dont je m'y prends, c'est que je configure mon design de manière très Et puis, une fois que j'ai l'impression de vouloir organiser les choses de manière plus organisée, je choisis les différents domaines. Je prends donc au hasard différents titres et corps de texte, et je les aligne. Je peux également voir lesquels sont similaires, donc je les combine en une seule taille, et je peux maintenant créer une hiérarchie. Une fois que j'ai établi la hiérarchie et que j'ai défini les styles dont j'ai besoin, je leur donne un nom, je leur donne un ordre, et je peux à partir de là, le prendre et le transformer en l'échelle de caractères dont j'ai besoin. Vous pouvez l'aborder de la manière qui vous convient le mieux. 8. 07 Différents systèmes de mise à l'échelle: Différentes méthodes de mise à l'échelle. Vous pouvez choisir une taille pour votre échelle de typographie de manière totalement aléatoire si vous le souhaitez, honnêtement, cela fonctionnerait très bien Mais dans votre conception, il est généralement préférable d' avoir un certain système et une certaine cohérence. Je vais vous montrer deux approches populaires, une échelle fixe utilisant le système de mise à l'échelle à huit points et une échelle modulaire utilisant un ratio. J'aime garder les choses simples dans mon design en utilisant un multiple de quatre ou huit pour toutes mes tailles, y compris la typographie Je m'en tiens généralement à des multiples de huit, comme 16, 24 et 32 pour mes tailles de police. Je ne suis pas trop stricte à ce sujet, donc si je dois mélanger les choses pour ce qui est de l'apparence et de la sensation que je recherche, je fais juste un plus grand saut, restant constante. Cela permet également de régler assez facilement la ligne I sur un multiple de quatre, ce qui crée un joli rythme vertical dans le design. Il n'est pas nécessaire que ce soit quatre et huit, mais vous remarquerez que ces chiffres fonctionnent à merveille. Une autre approche consiste à effectuer une mise à l'échelle avec un ratio. Cela permet de très bien maintenir la relation proportionnelle. Vous commencez toujours par votre taille de base, puis vous multipliez à la hausse en utilisant le ratio que vous avez choisi en augmentant de façon exponentielle Vous pouvez jouer avec différents ratios pour ajuster la croissance. Les ratios populaires sont établis par rapport au troisième, au parfait, au cinquième, à l'objectif et au ratio, mais il y en a beaucoup d'autres parmi lesquels choisir. Il existe d'excellents outils en ligne qui peuvent vous aider à le configurer, vous n'avez donc pas besoin de le régler à la main. Laisse-moi te montrer. Il existe de nombreuses options différentes, et je vais utiliser type scale com pour mon exemple. Sur le site Web, laissez le corps du texte intact, mais juste en dessous, dans la liste déroulante, vous pouvez choisir différents ratios et jouer avec eux Vous pouvez également choisir une police différente condition qu'il s'agisse d'une police Google, jouer avec le poids, etc. Sur le côté droit, vous pouvez voir une démonstration de ce à quoi ressemblerait la page. Vous pouvez également le transformer en vue mobile. C'est vraiment bien parce que vous avez une bonne idée si la hiérarchie est ce que vous recherchez. Vous pouvez choisir entre RM et pixels, et vous pouvez simplement sélectionner ces informations et les traduire dans votre design ainsi que dans votre code. Si vous optez pour la version pro, vous obtiendrez également les extraits de code Ce n'est pas comme si une approche était meilleure que l'autre. Vous pouvez même mélanger cela et utiliser le meilleur des deux mondes. Trouvez une échelle qui vous convient, puis ajustez les nombres au multiple de huit le plus proche. Le monde vous appartient. L'important est donc d' avoir une hiérarchie claire. N'oubliez pas qu'un système est là pour vous aider à ne pas vous restreindre. 9. 08 Pourquoi rem et pas px: Qu'est-ce que la RAM et pourquoi est-ce important ? RAM est une unité CSS qui mesure la taille de la police par rapport à l'élément racine de la page Web. Généralement, la balise HTML. La taille de police racine est essentiellement la taille de police par défaut d'une page Web. Ce paramètre est normalement réglé sur 16 pixels. C'est comme le point de départ de toutes les autres tailles de police de la page. Donc, tout le reste est calculé à partir de cette taille. Nous pouvons bien sûr modifier ces tailles pour notre design, mais même si nous ne définissons rien, le navigateur est déjà livré avec sa hiérarchie intégrée Il est facile de convertir entre RAM et pixels puisqu'un RM équivaut à 16 pixels. 1,5 RM serait donc de 25 pixels et ainsi de suite. Cependant, les utilisateurs peuvent ajuster la taille. Dans Chrome, par exemple, les utilisateurs peuvent accéder au menu des paramètres, choisir l'apparence et personnaliser la taille de la police. C'est essentiel pour les personnes ayant des difficultés de lecture. Nous ne pouvons pas savoir s'ils utilisent cette préférence ou Zoom, mais il est essentiel de respecter ces préférences au cas où elles seraient définies. Imaginez que vous définissez toutes les tailles de police en pixels. Par souci de simplicité, disons que H, un titre fait 48 pixels et le texte de votre paragraphe, P, 16 pixels. Maintenant, en utilisant des pixels comme taille de police, cela agit comme une valeur fixe et remplacera les paramètres du navigateur C'est comme s'ils se déconnectaient de la taille de police racine. Par exemple, si un utilisateur a ajusté la taille de police racine 16-24 dans notre exemple, la police affichée restera toujours à 16 Cela crée un obstacle à l'utilisabilité car le contenu ne s'adapte pas aux préférences de l'utilisateur. Mais si nous utilisons plutôt RM, c'est une autre histoire. Prenons le titre. Dans mon paramètre par défaut, que la plupart des gens utiliseront, trois fois 60, soit 48, trois fois plus de RAM, et nous obtenons le même résultat qu'avec les pixels auparavant. Cependant, l'utilisateur qui a changé un RM en 24 pixels voit désormais le titre affiché dans une taille plus grande de 72 Ce qui est génial, c'est que cela permettra de maintenir notre hiérarchie intacte car les différentes tailles sont toujours liées les unes aux autres, comme avant. Vous pouvez également rencontrer des unités ou des unités EM. La différence entre les unités RAM et EM est que RM calcule la taille par rapport à la taille du fond racine, tandis que les unités calculent la taille par rapport à la taille de fond de l'élément parent le plus proche Par exemple, si la taille de police racine est 16, un RM est égal à 16, quel que soit l'endroit où il est utilisé. Les unités peuvent se cumuler lorsqu'elles sont imbriquées dans plusieurs éléments de tailles de fond différentes et héritent du parent Cependant, l'EM, tout comme la RAM, respecte les préréglages de l'utilisateur, permettant des conceptions flexibles et réactives basées sur les paramètres préférés de l'utilisateur Les deux unités ont leurs propres forces et faiblesses, selon la façon dont elles sont utilisées. front et des développeurs qualifiés gèrent leur combinaison de manière efficace, ce qui n'est généralement pas du tout un problème pour les concepteurs. Bien que les concepteurs n'aient généralement même pas besoin de prendre en compte la RAM, certains, comme moi, aiment l'inclure dans notre échelle de types pour reconnaître que les développeurs utilisent différentes unités. Et c'est vraiment bien pour éviter les malentendus, mais le designer m'a donné des valeurs intransigeantes. Ainsi, nous indiquons clairement que nous utilisons pixels dans la conception de l'interface utilisateur, car c'est ainsi que cela est configuré, mais nous voulons tout de même respecter les préréglages utilisateur. OK. 10. 09 Poids des polices et polices variables: Poids de la police. Entre autres, le poids est également un élément important de votre police pour créer une hiérarchie. Dans la plupart des logiciels de conception d'interface utilisateur, vous trouverez un mot pour désigner le poids. Donc quelque chose comme le gras normal ou le moyen. En CSS, cela est représenté par un nombre. 400, par exemple, est généralement normal ou normal et 700 est en gras. Vous pouvez utiliser ces poids à votre guise. Mais le plus souvent, les titres sont affichés en caractères un peu plus gras pour se faire remarquer, et le texte de votre texte ressemble à quelque chose normal avec parfois quelques surlignages en gras. La seule chose à laquelle vous devriez vraiment penser est de ne pas trop utiliser le texte de votre copie pour vous assurer qu'il reste lisible. C'est donc une bonne idée de rester dans des conditions normales ou régulières pour celles-ci. Et d'ailleurs, toutes les polices de caractères ne sont pas strictement configurées entre 100 et 900 Vous pourriez également obtenir quelque chose comme ça. Cela dépend vraiment de la police de caractères. Et une autre chose importante, c'est que le fait d'avoir tous ces poids différents ne signifie pas que vous devez tous les utiliser . Laisse-moi te montrer pourquoi. Je suis donc dans Google Fonts, et je peux maintenant choisir n' importe quelle police que j'aime. Emmenons juste celui-ci ici. Si je clique dessus, je peux voir les différents poids associés à cette police spécifique, et je peux cliquer sur la police G. Voyons maintenant ce que cela signifie réellement. Jetons un coup d'œil au code intégré que nous obtiendrions. Donc, ici, vous pouvez le voir actuellement. Cela inclut tous les différents poids. Et ce que je peux faire maintenant, c'est cliquer sur Modifier les styles. Je peux maintenant tous les désactiver, et vous verrez que par défaut, il va simplement laisser le normal activé, et je peux maintenant simplement choisir ceux que j' utilise réellement dans mon design. Et bien sûr, je pourrais toujours ajouter d'autres si j' en avais besoin plus tard. Maintenant, si vous avez un design dans lequel vous souhaitez utiliser un grand nombre de poids différents, et que c'est le cœur de votre design, c'est également très bien et tout à fait possible. Ce que je recommande, c'est regarder, par exemple, polices Google dans les filtres et d'opter pour ce que l' on appelle une police variable. La police variable est donc un type de police qui permet d'ajuster le poids, la largeur et d'autres attributs via un seul fichier de police. Donc, comme pour toute phase de type, ce n'est pas toujours pareil pour toutes. Par exemple, cliquons ici sur Open Sans et nous pouvons voir que cela comporte trois axes. Si on y jette un coup d'œil, on dirait qu'avant, nous avions nos différents poids. Mais maintenant, cliquons sur la police G et examinons le code intégré que nous obtenons. Si nous cliquons ici, alors vous pouvez voir, nous avons le poids, nous avons la largeur, et nous avons ici Italic Ce sont donc les trois axes que nous pouvons modifier. Ce qui est intéressé, c'est le poids. Donc, si nous cliquons sur une valeur, nous avons exactement comme avant, nous cliquons sur 300 400 ou ainsi de suite, et cela est représenté ici. Mais ce que nous pouvons également faire, c'est avoir l'axe complet. Maintenant, vous pouvez voir que c' est comme si tout était intégré, et nous ne chargeons pas tous ces styles différents, et cela se trouve juste à l'intérieur de cette police Et notez qu'il est indiqué entre 300 800 lorsqu'on parle de nos haches de poids. Cela signifie que vous n' avez pas à le définir sur 300 400 et aucune valeur donnée. Vous pouvez choisir librement sur ces axes et vous pouvez choisir quelque chose comme 415, et vous pouvez vraiment l'affiner. Gardez à l'esprit que tous les navigateurs ne s'afficheront pas exactement de la même manière. Les avantages de cette solution sont réduction de la taille du fichier par rapport à l' utilisation de plusieurs polices statiques, la flexibilité et la possibilité d'affiner la conception, et les performances des pages Web sont améliorées car vous réduisez les temps de chargement. 11. 10 Démystifier la hauteur de ligne: Comprendre la hauteur de la ligne Lorsque vous passez de la conception graphique à la conception Web, vous rencontrerez le concept crucial de hauteur de ligne Il s'agit d'une clé de propriété CSS permettant déterminer la hauteur totale d'une ligne de texte. Vous pouvez le considérer comme une boîte. C'est ce qu'on appelle une zone de ligne qui envoie un texte plus ou moins verticalement. La hauteur de ligne est composée de la taille de la police elle-même, ainsi que de l'espace supplémentaire ajouté au-dessus et en dessous. Cet espace est appelé leader. Et la moitié en haut et en bas s'appelle, vous l'avez peut-être deviné, la moitié en tête Cet espace est très important pour garantir que le texte est à la fois visuellement attrayant et facile à lire, tout en contribuant à une anesthésie globale en matière d'accessibilité Regardons un exemple pour mieux comprendre. La taille de police de mon exemple est de 24 pixels et je veux une hauteur de ligne de 1,5. Cela signifie donc que nous calculons 24 fois 1,5, ce qui équivaut à 36. La hauteur de la case contenant notre texte est donc de 36. La hauteur de ligne peut être exprimée en valeurs sans unité, comme un multiplicateur, comme nous l'avons utilisé dans l'exemple, une valeur en pourcentage ou une valeur Lorsque vous utilisez le logiciel de votre œil, peut que vous utilisiez toujours des valeurs en pixels, se peut que vous utilisiez toujours des valeurs en pixels, que vous preniez l'habitude de considérer la hauteur de ligne comme un multiplicateur et non comme une valeur fixe Le pourcentage fonctionne très bien, mais le plus souvent, vous verrez probablement des notations sans unité en CSS La hauteur de ligne que vous allez sélectionner dépend largement de la phase de saisie, taille de la police et de son application. Cependant, vous découvrirez probablement que le point idéal se situe dans une fourchette de 1,25 à 1,75, vous offre une flexibilité suffisante pour vos conceptions Si tout cela est très nouveau pour vous, commencez simplement par une note de 1,5 pour vos créations. C'est vraiment un lit sûr pour vous aider à démarrer. Au fur et à mesure que votre confiance augmentera, vous commencerez sûrement à trouver des hauteurs de ligne, en l'augmentant pour les textes plus petits afin d'améliorer la lisibilité et en la réduisant pour les titres afin d'obtenir un équilibre parfait N'oubliez pas que la hauteur de ligne idéale dépend fortement de la police de caractères que vous avez choisie Il s'agit donc d'expérimenter et de trouver celle qui fonctionne Dans les designs ne comportant qu' une seule ligne de texte, vous pourriez être tenté de définir la hauteur de votre ligne deux et une Cependant, sauf dans de rares cas, je déconseille cette approche. La navigation n'étant pas statique, un changement de fenêtre peut déplacer le texte sur une deuxième ligne Les pages peuvent être traduites et coup, le texte est beaucoup plus long, et le contenu change également au fil du temps. Je recommande donc de toujours respecter la hauteur de ligne définie pour le style que vous utilisez. La hauteur de ligne est une décision de conception importante, alors assurez-vous de l' intégrer à votre échelle de typographie et à votre éclairage latéral Remarque : vous vous attendez probablement à ce que la hauteur de ligne 1 ou 100 % corresponde à la hauteur visuelle exacte de la police. Quelque chose comme ça et la moitié en lâchant le haut et le bas. Cela peut être le cas pour certains, et ce sont les visuels que j' utilise pour mes explications Cependant, si vous plongez dans les détails, vous constaterez vous constaterez En résumé, une conception de police dans un cadre spécifique, connu sous le nom de carré n, qui sert en quelque sorte de canevas au concepteur de polices Les paramètres de police, y compris aspects tels que la hauteur d'un ascendant, c'est-à-dire les parties hautes comme un m, et la longueur des décentres comme un G, peuvent varier considérablement au sein du carré, en fonction du design de la police. À une hauteur de ligne de 100 %, le texte peut toucher ou non les bords de la boîte. La hauteur de la ligne est ajoutée à l'ensemble du carré, non à la hauteur visuelle perçue, ce qui peut donner lieu à un espacement visuel apparemment irrégulier, même si le point de départ est techniquement équilibré Ce n'est généralement pas un problème majeur, mais cela peut affecter l'alignement du texte, en particulier dans les éléments de l'interface utilisateur tels que les boutons légèrement décalés. Un ajustement manuel est souvent la solution, et des mises à jour CSS telles que le découpage des zones de texte sont prévues, mais pas encore implémentées, même si vous les trouvez peut-être déjà dans certains outils d'interface utilisateur. Il est donc bon de comprendre ce détail, mais il n'y a rien de crucial à souligner. Dans la plupart des cas, vous remarquerez que le simple fait de travailler avec le masque de ligne donné fonctionne parfaitement. Lorsque vous utilisez différentes polices ensemble, choix de polices appartenant à la même superfamille peut contribuer à maintenir la cohérence des statistiques 12. 11 Un mot sur l'appellation: Lorsque vous examinez les échelles de types, vous pouvez souvent rencontrer cette convention de dénomination H un, H deux, H trois, etc. Désormais, ces noms sont dérivés de balises de dénomination HTML. Et je tiens à vous encourager à éviter ce type de dénomination dans configuration de votre interface utilisateur et à opter pour une approche plus sémantique Laissez-moi vous expliquer pourquoi. Lors de la création correcte d'un site Web, il est essentiel d'utiliser le titre et d'autres balises HGML Ces balises constituent le cadre qui organise le contenu, quel que soit leur style avec le CSS Par exemple, un H bien visible dans une section réservée aux héros peut avoir une taille et un style complètement différents de ceux du titre principal, qui est également un H sur une page de conditions générales. Cela est non seulement important pour l'optimisation des moteurs de recherche, mais les balises de titre correctes sont également cruciales pour les utilisateurs qui utilisent des lecteurs d'écran pour comprendre la structure du contenu Il est important de séparer texte HTML des conceptions visuelles telles que les styles. Bien qu'ils fonctionnent ensemble, chacun a son propre objectif en créant une expérience utilisateur efficace. D'ailleurs, dans le design Web, nous utilisons du texte HTML avec du CSS pour le style, mais tout ne fonctionne pas de cette façon. Dans le développement d'applications IOS, par exemple, il n'y a pas de CSS ni d'optimisation pour les moteurs de recherche à craindre. Au lieu de cela, nous utilisons ce que l' on appelle le type dynamique, qui correspond simplement à la taille du texte en fonction des préférences de l'utilisateur. Les développeurs peuvent commencer par les préréglages de la documentation et les personnaliser si nécessaire. Contrairement au texte HTML avec un type dynamique, vous pouvez également créer votre échelle de texte à partir de cela, mais assurez-vous toujours d'en discuter d'abord avec le développeur. Il est donc très utile de comprendre d'où ces différentes conventions de dénomination viennent ces différentes conventions de dénomination et à quoi elles sont destinées. Si nous revenons à notre projet d'application Web, une approche sémantique sera probablement votre meilleur choix Il n'y a pas une seule bonne façon de procéder, mais tant que c'est descriptif et qu'il permet de modifier les valeurs, cela fonctionnera très bien. Une méthode courante pour détacher la hiérarchie des textes, exemple en utilisant des chiffres de 1 à 6 consiste à adapter l'approche de la taille des t-shirts Nous utilisons donc S, M L, etc., qui peuvent également être étendus. Certaines personnes préfèrent une approche plus descriptive comme minuscule, régulière ou énorme. Je dois admettre que cette approche comporte également ses propres défis, car il n'y a pas d'espace entre ces tailles. Il est donc difficile de modifier les choses par la suite. Vous pourriez être tenté d'utiliser les titres 10, 20, 30, comme nous le faisons pour les couleurs, ce qui nous permet de choisir entre les deux une taille de 25 Mais cela peut facilement être confondu avec les pixels dans ce cas, donc personnellement, je ne recommanderais pas de l'utiliser. Pour ajouter de la structure, vous pouvez créer des niveaux en utilisant des termes tels que le corps, titres, les titres et les titres d'affichage. C'est donc très bien si vous avez un très gros système. Vous pouvez également avoir plusieurs options telles que des épaisseurs différentes pour une police. Encore une fois, il est important de rester descriptif afin que les valeurs puissent être facilement modifiées. Au lieu de le nommer en gras normal, 700 ou 500, optez pour quelque chose comme souligné ou fort. La dénomination est difficile et la dénomination est importante. Je recommande donc généralement de discuter de la dénomination le plus tôt possible avec le développement afin d'éviter tout malentendu et d'utiliser les possibilités d'alignement 13. !!! VEUILLEZ REGARDER ! ! ! Nouvelle interface utilisateur de Figma en version bêta: Heads Figma a mis à jour son interface utilisateur, et vous verrez peut-être un nouveau design au lieu de l'ancien Cette mise à jour est actuellement en version bêta fermée, donc tout le monde n'y a pas encore accès. Je mettrai à jour les arts et refléterai la nouvelle interface une fois qu'elle sera accessible à tous. Les modifications sont principalement visuelles. Toutes les fonctionnalités et tous les outils sont toujours là, juste à des endroits légèrement différents ou avec un nouveau L. Par exemple, la barre d'outils supérieure a été déplacée vers le bas. Le panneau latéral gauche, en revanche, est resté pratiquement inchangé. Vous pouvez désormais modifier le nom de votre fichier ici. Vous pouvez toujours voir toutes vos pages, couches et ressources. Sur le côté droit, vous remarquerez quelques changements lorsque vous cliquez sur un design, mais toutes les fonctionnalités sont toujours disponibles. Si vous êtes débutant et que vous trouvez la nouvelle interface confuse, vous pouvez cliquer sur le point d' interrogation en bas à droite et revenir temporairement à l'ancienne interface utilisateur. Cela n'a aucune influence sur votre design. Ainsi, vous pouvez suivre les vidéos du cours en utilisant l' ancienne interface utilisateur beaucoup plus facilement jusqu'à ce que vous soyez prêt à passer à la nouvelle. La FIMA déploie progressivement cette mise à jour. Si vous n'y avez pas encore accès, vous pouvez également en faire la demande auprès de la FIMA, mais il n'y a aucune garantie, certains d'entre vous devront peut-être être un peu patients L'administrateur de votre équipe devra peut-être également activer la mise à jour pour vous, alors assurez-vous de vérifier cela également. Figma met fréquemment à jour le logiciel, alors attendez-vous à des changements et soyez prêt à vous adapter Les fonctionnalités peuvent se déplacer comme ce bouton de bibliothèque a été utilisé à tous les endroits possibles ces dernières années. Mais ne vous inquiétez pas, rien ne se perdra jamais et vous vous habituerez à utiliser FIMA de manière beaucoup plus flexible Il met vraiment l' accent sur la convivialité. Il ne s'agit donc pas d'apprendre quelque chose par cœur, mais de comprendre le logiciel dans son ensemble. 14. 12 Typographie dans Figma: Voyons comment gérer le texte dans Figma. Jetons un coup d'œil au menu texte de Figma. Si vous sélectionnez un texte dans Figma, vous pouvez voir les paramètres du texte sur le côté droit du panneau des propriétés vous pouvez voir les paramètres du texte sur le côté droit du panneau des Ici, nous pouvons choisir un type de phase. Nous pouvons choisir le poids. Nous pouvons modifier la taille. Et nous pouvons également choisir une hauteur de ligne. Ce paramètre est généralement défini en pixels. Vous pouvez utiliser cette case pour calculer. Donc, si je veux 1,5, je calculerais 16 fois 1,5. Mais ce que j'aime faire, c'est définir cela en pourcentage. Ainsi, si je devais changer la taille, je garderais la même hauteur de ligne. Petit conseil, Figma supporte également les polices variables. Maintenant, la police que j'utilise, Poppins , n'est pas une police variable Donc, si j'utilise cette liste déroulante pour le poids, je n'obtiens que les préréglages Cependant, si je devais le changer en une police variable, disons open sans. Et j'utilise le même menu déroulant. Ensuite, par exemple, pour mes poids, je peux trouver des axes de police variables ici, et je peux maintenant définir le poids à l'aide des axes. Vous pouvez également modifier l'espacement des lettres et l' espacement des paragraphes Ce serait la distance entre nos paragraphes si nous avions des textes comme celui-ci. Vous pouvez définir ici la façon dont vous souhaitez que votre texte soit placé dans la boîte. Je recommande de toujours opter pour la hauteur automatique. Cela signifie que votre zone de texte respectera automatiquement votre hauteur ou la hauteur de votre ligne, et par conséquent, elle créera une zone autour d'elle. Vous pouvez aligner le texte et vous pouvez également choisir direction dans laquelle vous souhaitez qu'il s'agrandisse. Par exemple, si je le mets sur une ligne vers le haut, et que maintenant j'ai plus de texte ajouté, il s'ajoutera au texte comme celui-ci. tout ce que vous recherchez, il vous suffit de cliquer sur les trois petits points. Vous trouverez ici des paramètres supplémentaires tels que la décoration du texte, les majuscules , les découpes verticales, les styles de liste, l'espacement des paragraphes Nous l'avons déjà dans le menu principal ici. Si vous voulez avoir les petits points lorsque le texte est coupé, vous les trouverez ici. Dans ce cas, vous remarquerez que votre boîte revient à une taille fixe Maintenant, une fois que nous avons configuré ce titre et le texte à notre goût, nous voulons l'enregistrer sous forme style pour le réutiliser dans notre conception Voyons donc comment cela fonctionne. Voici donc un exemple très simplifié d'échelle de types. Vous pouvez voir que je souhaite configurer une police d'affichage, un titre, un corps, une légende et un bouton. Et je souhaite l'utiliser sur mon design en général, ainsi que sur un composant. Mon instance ici devrait donc hériter de ce style. La mise en place d'un style est donc assez simple. Il suffit de sélectionner le texte. Ensuite, dans le panneau des propriétés sur votre droite, vous pouvez voir l'icône des styles. Cliquez dessus, cliquez sur plus, et je peux maintenant le nommer. Je vais appeler celui-ci display one. Et je vais faire de même pour tous les autres. Je vais accélérer un peu ce processus pour vous. Et bien entendu, votre échelle de caractères peut sembler complètement différente. Il ne s'agit en fait que d'un exemple simplifié. Si je veux avoir un aperçu de mes styles, je peux cliquer sur la zone grise du canevas, puis sur le côté droit, je peux tous les voir. Ici, je pourrais également les modifier. Donc, si je voulais changer quoi que ce soit concernant le nom ou l'un des attributs, je peux le faire ici. Nous voulons maintenant appliquer nos styles à notre design. Important si vous travaillez avec des composants, appliquez toujours le style au composant, et non à l'instance. Comme vous pouvez le voir ici, j' applique le style de légende à légende, puis je sélectionne ici mon titre le menu déroulant, je peux maintenant choisir le style que j'ai créé pour le titre. Si nous cliquons sur l'instance, vous pouvez voir qu' elle a été automatiquement héritée. Pour un texte en vrac comme celui-ci, nous pouvons l'appliquer directement dans notre design. Et par exemple, disons qu'il avait une autre taille, donc disons qu' il était beaucoup plus petit. Ensuite, dès que nous appliquerons notre style, celui-ci prendra évidemment la bonne taille et corrigera toutes les hauteurs de ligne et tout ce qui est enregistré dans le style. Si vous souhaitez modifier ou détacher un style, simplement le curseur sur le style et vous verrez apparaître un petit symbole détaché Si vous cliquez dessus, il est détaché et vous pouvez choisir n'importe quel autre style. Vous pouvez utiliser des styles comme celui-ci. Cela serait en fait suffisant. Mais depuis avril 2024, nous pouvons également ajouter des variables si nous le souhaitons. Nous avons donc toujours nos styles, mais à l'intérieur de nos styles, ces petits éléments de base, ils peuvent être variables ou non. Nous avons donc quelque chose comme une police de caractères, un poids, taille, une hauteur de ligne, un espacement, etc. Et nous pouvons les laisser comme ça et travailler avec eux. C'est absolument bon. Mais dès que vous commencerez à passer à un système plus évolutif, vous souhaiterez peut-être ajouter des variables. 15. 13 Variables Figma pour la typographie: Dans Figma, nous pouvons également définir des variables, et elles fonctionnent de la même manière que les variables CSS Commençons par comprendre ce qu'est une variable CSS. Nous avons donc ici un exemple en CSS, et vous pouvez voir que la couleur du lien est définie comme une variable. Ensuite, nous avons une classe appelée lien principal, dans laquelle nous ajoutons des informations supplémentaires telles que la taille de police , la famille de formulaires, etc. Et vous pouvez voir que nous réutilisons ici notre variable CSS dans le cadre de cette classe Nous pourrions également configurer l'ensemble du style avec des blocs de construction ou des variables si nous le voulions. L'avantage est que si je veux modifier quelque chose, disons la taille par défaut du texte, il me suffira de le modifier dans la variable, et partout dans mon design où j'utilise cette variable, celle-ci sera automatiquement mise à jour. Jetons un coup d'œil à Figma. Dans ma configuration, j'ai donc une échelle de caractères très simplifiée, et vous pouvez voir que tout cela est déjà transformé en styles. Si nous cliquons sur l'arrière-plan des caméras, vous pouvez voir un aperçu des styles Ces styles sont utilisés dans tous nos composants ainsi que dans tout texte libre de notre design. Maintenant, cela fonctionne très bien tout seul, vous pouvez donc absolument l'utiliser comme ça. Mais dès que vous souhaitez l'adapter un peu plus et travailler dans un système de conception, vous pouvez ajouter des variables. J'ai donc créé une collection, j'ai cliqué sur la zone de vos caméras, puis sur les variables locales. Et ici, j'ai plusieurs collections, dont l'une s'appelle Brand Typography Je peux le nommer comme bon vous semble. Insider a déjà créé certaines variables. Vous pouvez voir que j'ai créé des variables de taille de texte. Il s'agit d'une variable de taille, j'en ai 16, 24 , 32 et 40, et j'ai créé des variables pour mon poids. Ici, j'utilise une chaîne. J'ai une chaîne , puis je tape simplement le mot du poids que je veux ici. Mon cas est normal ou gras. Je vais également ajouter une famille de polices. Je clique sur le bouton plus et je sélectionne à nouveau une chaîne pour une famille de polices. Je vais l'appeler famille de polices, et j'utilise Poppins, je vais simplement taper Maintenant, si je veux ces jolies petites catégories, souvenez-vous que nous pouvons simplement les regrouper, cliquer avec le bouton droit de la souris, puis créer un nouveau groupe avec sélection, et je vais appeler cette famille de polices. Donc, si je clique sur toutes les variables, vous pouvez voir les sept variables que j' ai actuellement dans la collection, et je peux, bien sûr, toutes les ajouter ou si je dois en supprimer une. Permettez-moi de déplacer la famille de polices ici. Vous pouvez l'organiser à votre guise. Si vous survolez une variable, vous pouvez cliquer sur Modifier la variable Vous pouvez désormais ajouter des informations supplémentaires et définir la portée Cela signifie qu'il n' apparaîtra que dans ce champ spécifique. Maintenant, je l'enregistre juste après la publication des variables pour les sites de texte. Nous n'en avons pas encore le champ d'application, mais il devrait être publié et vous devriez le trouver dans ce menu existe un appelé contenu textuel. C'est autre chose. Cela signifierait qu'il faudrait prendre la valeur réelle. Remplacez votre texte par 16. Ce n'est pas ce que nous voulons. Soyons donc patients et attendons la mise à jour du cadrage. Un petit conseil : maintenez la touche Shift enfoncée et la touche Commande, et vous pourrez définir plusieurs variables à la fois. OK, super. Alors, comment allons-nous intégrer ces variables dans notre style ? Ce que nous devons faire, c'est revenir à notre style, puis passer à l'édition. Et puis ici, vous pouvez choisir n'importe quelle variable. Ainsi, par exemple, si je choisis ma phase de saisie, je peux maintenant passer ici, et je peux voir ma famille de polices appelée Poppins Et maintenant, cela devient une variable. Et je peux faire exactement la même chose pour tous les autres. Par exemple, ici, je passe sur Appliquer une variable, et maintenant je vais trouver ma typographie, puis jetons un coup d'œil ici Nous voulons être audacieux, alors je vais choisir celui-ci, et nous allons faire de même avec notre taille. Choisissons la bonne taille pour celui-ci. Maintenant, en hauteur, je laisse le code en dur 150 % ici parce que j'aime avoir cela en pourcentages ou quelque chose comme 1,5, ce que nous verrions en CSS Mais Figma ne prend actuellement pas en charge cela dans les variables. Il ne prend en charge que les valeurs en pixels car je l'enregistre juste au moment où il est sorti. Donc, bien sûr, si vous regardez cette vidéo un peu plus tard, vous pouvez également ajouter de la hauteur de ligne et vérifier si pourcentage ou l'unité moins valeurs, comme 1,5, fonctionne déjà. Vous pouvez utiliser des pixels. Personnellement, je n'en suis pas un grand fan. Mais en général, vous pouvez configurer des variables pour les différents champs dès que vous voyez le signe variable. Maintenant, vous pouvez l'ajouter à vos styles existants. Mais qu'en est-il si vous ne faites que créer des styles ? Cela fonctionnerait tout de même. Sortons du texte et détachons-le, et maintenant ce n'est pas encore un style. Vous pouvez donc voir que je peux déjà travailler avec mes variables sur n'importe quel texte Je peux donc configurer tout cela , puis l'enregistrer en tant que style ultérieurement. Vous êtes donc très flexible dans votre flux de travail. Et bien sûr, si je clique sur les variables locales et que je change quoi que ce soit à propos de l'une de ces variables, cela se reflétera dans l' ensemble de mon design. Donc, dans cet exemple, cela semble vraiment mineur car il s'agit d'un exemple très simplifié. Mais dans un système plus vaste, cela sera d'une grande aide. Imaginez que vous modifiez la famille de polices, vous devrez passer en revue tous vos textiles et designs. Ainsi, vous n'avez qu' à le modifier ici, et cela se reflétera dans tous vos styles. De plus, si vous modifiez une taille, supposons que vous ayez une taille de base de 16 et que vous deviez l'augmenter. Ensuite, vous aurez utilisé cette taille de police S sur différents textiles, peut-être une version allégée, une version plus audacieuse, etc. Cela sera très pratique dès que vous aurez commencé à travailler dans un système plus vaste. 16. 14 L'espace blanc est votre superpuissance: L'espace blanc, ton super pouvoir secret. Vous avez peut-être parfaitement configuré le poids de votre balance à caractères et la hauteur de ligne, mais il manque encore quelque chose. Et ce quelque chose est généralement un espace blanc. En ajoutant des espaces blancs, vous permettez à votre design de respirer et d'être correctement perçu. Il n'existe aucune règle fixe quant à la manière de modifier ou à quel endroit. Mais nous allons examiner quelques principes généraux que vous pouvez utiliser. J'aime donc utiliser mon système de mise à l'échelle à huit points pour garder les choses cohérentes. Tout est donc un multiple de huit. Par exemple, entre mon titre et le texte de ma copie, j'en ai 16 Ensuite, pour les petites distances, j'en utilise huit, et je peux même descendre à quatre. Je vais l'utiliser dans des éléments plus petits, comme un bouton. Et encore une fois, ce système est là pour m'aider à ne pas me restreindre. Donc, bien sûr, je peux avoir un contour d'un pixel ou similaire. C'est vraiment une règle générale pour créer un rythme. Vous pouvez également faire la différence entre le microespacement et le microespacement Ainsi, entre l'espacement au sein de vos composants, par exemple, et l' espacement autour d'eux Encore une fois, pour cet espace blanc plus grand, comme entre les sections, j'utilise un multiple de huit. Plus vous concevez, plus vous aurez idée de l'endroit où vous devez ajouter des espaces blancs. L'espace blanc n' est donc certainement pas de l'espace perdu. Cela vous aide dans votre mise en page. C'est vraiment une arme secrète. Rappelez-vous également que plus les choses sont proches les unes des autres, plus elles sont perçues comme une seule entité. Donc, utilise vraiment les espaces blancs dans votre mise en page. Cela fait toute la différence. Une bonne idée est aussi de toujours regarder comment les autres s'y prennent. Voici donc un exemple du système de conception UBA Vous pouvez voir qu'ils utilisent des incréments de quatre, puis qu'ils ont des blocs d'espacement généraux, et qu'ils les utilisent dans tous les domaines, comme la configuration des grilles, la taille des icônes, ainsi que toutes les distances Dans les systèmes de conception, vous verrez que espacement est généralement configuré sous forme de jetons Voici un exemple tiré du système de conception des fils, et vous pouvez voir qu'ils ont leur propre jeton général. Taille quatre huit et ainsi de suite, ce qui correspond à nouveau à un multiple de quatre et huit. Ensuite, nous pouvons voir ici qu'ils introduisent ensuite ces jetons dans une configuration plus sémantique Ils entrent donc beaucoup plus en détail. Ainsi, par exemple, entre les puces, ils utilisent ces tailles de base, mais les définissent ensuite beaucoup plus clairement. 17. 15 Longueur de ligne optimale: En longueur. Sur les grands écrans, vous ne voulez pas que le texte s'écoule sur toute la largeur car il sera tout simplement trop long et difficile à lire. On dit que la longueur de ligne idéale est de 50 à 70 caractères. Notez que nous parlons ici de caractères et non de taille physique. Cela peut donc être très différent pour différents types de faces. Vous ne devez jamais avoir plus de 90 caractères par ligne, car cela devient alors vraiment impossible à lire. Maintenant, vous n'avez pas besoin de compter les caractères, mais vous pouvez voir que si vous vous en tenez à cette règle, elle sera déjà beaucoup plus agréable et beaucoup plus facile à lire Assurez-vous également de laisser votre typographie se dérouler comme elle a été conçue et telle qu'elle est censée être N'utilisez pas ce que l'on appelle une justification. Ce que fait justify, c' est que cela oblige votre typographie à rentrer dans une boîte. Maintenant, cela peut parfois sembler génial si vous concevez avec. Mais n'oubliez pas que votre design n' est pas le résultat final. Le navigateur n'est pas statique. Et une fois que l'écran se déplace et se redimensionne, vous allez avoir de très vilains écarts. Alors ne fais pas ça. Ça va être vraiment difficile à lire. Laissez toujours la typographie faire ce pour quoi elle a été conçue et fluide naturellement 18. 16 Couleur et opposition dans la typographie: Couleur et contraste de la typographie. Le contraste est un aspect clé abordé par les directives d'accessibilité du contenu Web, ou WCAG en abrégé Ils fournissent des règles claires sur les niveaux de contraste requis. Et il est important de noter qu' s'agit pas simplement d'une recommandation. C'est une obligation légale. Les WCAG mesurent le contraste en termes de différence de luminosité, qui varie de la lumière, donc de 1 à 1, qui sera blanche sur blanc et de 21 à 1, qui sera en noir et blanc, indiquant ainsi un contraste élevé Et cela fonctionne selon un système de notation. Une conformité double A est donc le contraste minimum dont vous avez besoin. Pour la typographie, ce ratio est fixé à 4,5 pour un pour les grandes polices et à trois pour un pour les plus petites, les grandes étant définies de manière assez vague, à partir d' environ 18 pixels ou fonds plus petits en gras selon le type Comme cela n'est pas clair, j'essaierais toujours d'obtenir au moins 4,5 pour un pour tous les fonds utilisés. Idéalement, vous devriez même opter pour un triple A. Par conséquent, vous viserez un score de sept contre un pour les fonds standard et de 4,5 pour un pour les polices de grande taille. Regardons donc un exemple. Ici, j'ai un fond gris clair, et j'utilise une typographie rouge Le résultat du rapport de contraste dans ce cas est de deux pour un, ce qui est inférieur au seuil recommandé de 4,5 pour un. Par contre, si j'utilise cette typographie gris foncé sur le même fond, j'obtiens un rapport de contraste de 12 pour un Cela signifie donc que je réponds même aux normes du triple A. Il est également important de prendre en compte le poids et la taille des polices, car polices plus petites et plus claires nécessitent un contraste plus élevé que les polices plus grandes et plus audacieuses Pour vous assurer d'obtenir le bon contraste, je vous conseille de toujours utiliser un correcteur de contraste Vous pouvez soit rechercher un module correcteur de contraste dans votre logiciel d'interface utilisateur, soit utiliser un outil en ligne tel que Web Aim Ces correcteurs de contraste fonctionnent donc à peu près de la même manière qu'ils utilisent un plug-in ou un outil externe En gros, vous prenez votre couleur de premier plan et votre couleur d'arrière-plan ou l'inverse, puis vous les ajoutez et vous allez obtenir un ratio Maintenant, c'est le ratio que vous allez noter et comparer au ratio requis. En général, les contrôleurs de contraste vous indiquent déjà si le résultat est réussi ou non. Par exemple, si je modifie maintenant ma couleur, je peux voir comment elle commence à passer. Il peut s'agir du texte ou de la couleur d'arrière-plan. Je recommande généralement d'avoir une vue d'ensemble de toutes vos couleurs et de séparer les couleurs du texte des couleurs générales de la marque, même si vous pouvez utiliser les mêmes valeurs. Ainsi, vous pouvez comparer la couleur de votre texte à n'importe quelle autre couleur et établir des règles claires concernant les couleurs qui peuvent et ne peuvent pas être combinées. Outre le texte standard, assurez-vous également de prendre en compte les couleurs du système, telles que les alertes et les confirmations Il est également judicieux de définir une couleur d' interaction claire. Ce serait votre couleur de surlignage pour les boutons, les liens, donc tout ce qui est cliquable 19. 17 Typographie réactive avec points d'arrêt: Création d'une typographie réactive avec des points d'arrêt. Quels sont donc les points d'arrêt ? Ce sont des points spécifiques ou plutôt des seuils ou des changements se produisent. De cette façon, les sites Web peuvent ajuster leur mise en page et leur style pour s'adapter à différentes tailles d'écran. Pour créer des points d'arrêt en CSS, nous utilisons ce que l' on appelle une requête multimédia La règle de requête multimédia permet d'appliquer certains styles à une page Web uniquement si des conditions spécifiques sont remplies. Dans ce cas, la condition est une largeur minimale de 768 pixels. Tout ce qui se trouve entre crochets ne sera appliqué que lorsque la taille de la fenêtre d'affichage est supérieure ou égale à 768 Jetons un coup d' œil à cela en CSS. Vous pouvez donc voir ici que j'ai un titre et quelques copies de texte ainsi que deux images Dans notre code HTML, il s'agit d'un H, le titre, le texte de copie sont P, puis nous avons nos images avec la balise image Maintenant, dans le CSS, vous pouvez voir que j'ai défini le texte pour qu' il ait la taille d'un RM, puis un peu plus grand pour le titre, et que j'ai configuré les images pour occuper tout l'espace disponible Voici donc mes styles de base. Maintenant que je fais défiler la page vers le bas, vous pouvez voir que j'ai ajouté une requête immédiate. Quand j'atteindrai 400, agrandissons-le ici. Vous pouvez voir la taille, donc vous pouvez voir que lorsque j'atteins 400, cela change de mise en page. Ce qui se passe ici, c'est que tout ce qui se trouve entre crochets devient actif. J'ai une nouvelle couleur de fond, le H est plus grand et les images modifient l'occupation de l'espace. Si je vais encore plus loin, vous pouvez voir apparaître la deuxième requête multimédia. Vous pouvez donc le voir ici. Encore une fois, j'ai ajouté une couleur de fond pour qu'elle soit visible, et je change également la couleur H pour qu'elle soit encore plus grande. Les points d'arrêt sont donc généralement la technique de prédilection lorsqu'il s'agit d'ajuster la typographie aux différentes tailles d'écran En théorie, nous pourrions définir des points d'arrêt pour chaque texte individuellement. Cependant, dans la plupart des cas, vous aurez probablement un ensemble prédéfini de points d' arrêt pour votre échelle de typographie Cela signifie que lorsque le viewpoart atteint une certaine taille, la disposition du texte s'ajuste en conséquence Ces points d'arrêt peuvent être fournis par un framework tel que bootstrap, ou vous pouvez les choisir plus librement, en particulier lorsque vous adoptez une approche de mise en page CSS moderne Ils sont peut-être déjà en place pour d'autres aspects de votre conception, tels que la modification de la mise en page générale. Donc, la plupart du temps, il est logique d'utiliser les mêmes points d'arrêt Assurez-vous de consulter la documentation ou le guide de style pour les valeurs numériques spécifiques si vous débutez dans une nouvelle équipe. Et si vous êtes chargé de la configuration à partir de zéro, assurez-vous d' abord de parler à votre équipe de développement pour savoir ce dont elle a besoin et ce qu'elle recommande. Ainsi, une fois que nous connaissons nos points de rupture individuels, l'étape suivante consiste à étendre notre échelle pour couvrir toutes les tailles. Il existe différentes approches pour gérer ce problème. Explorons la première approche, qui consisterait à effectuer des ajustements individuels. Généralement, nous commençons par configurer notre échelle de caractères à partir de la plus petite taille. Lorsque nous atteignons un point d'arrêt, nous pouvons vérifier si des modifications sont nécessaires. Souvent, un corps de texte d'une taille de 16 convient à toutes les tailles, mais les principaux titres peuvent nécessiter un ajustement Bien entendu, vous pouvez également ajuster l' ensemble de votre échelle à chaque point de rupture, selon vos préférences Notre deuxième option consiste à nous développer à l'aide de notre système modulaire, utilisant donc des ratios. Nous pouvons maintenir la cohérence de nos valeurs de RAM, mais nous ajustons simplement équivalent d' un RAM à chaque point d'arrêt Par exemple, sur notre petit écran, une RAM peut être égale à 16 pixels, puis 18 pixels pour notre écran moyen et 20 pixels pour notre grand écran. Ensuite, nous conservons simplement notre système général, car nous multiplions la taille de base par un ratio choisi Toutes les autres tailles s'ajustent donc automatiquement. Ainsi, alors que 1,5 RAM fait généralement 24 pixels sur mon écran moyen, 1,5 RAM devient 27, soit 18 fois 1,5. Et pour les grands, nous calculons 20 fois 1,5, soit 30 pixels. Il est important de le configurer sans pixels fixes dans le code pour garantir la prise en charge des préréglages utilisateur Ne t'inquiète pas Il existe différentes manières d'y parvenir. Rien de trop compliqué. Mais il convient de le mentionner, car dans le domaine du design, nous aurons affaire à un nouvel ensemble de valeurs de pixels indépendantes les unes des autres. Pendant le code, cela restera sous forme d'unités relatives. La configuration de points d'arrêt pour la typographie est généralement une bonne solution dans un système de conception structuré C'est facile à adapter, organiser et il est très facile de communiquer entre les équipes. 20. 18 Typographie fluide avec pince CSS (): Topographie fluide avec CLAMP. Pour comprendre la topographie fluide dans CLAMP, nous devons d'abord nous renseigner sur les unités de fenêtre d'affichage Il y en a quelques-unes, mais celle qui nous intéresse est la largeur de la fenêtre écrite VW I Magister la largeur de la fenêtre d'affichage, un VW étant égal à 1 % de la largeur de la fenêtre d'affichage Regardons un exemple. Supposons que notre fenêtre d'affichage ait une largeur de 1 000 pixels et que la taille de notre texte soit définie sur deux largeurs de fenêtre Il s'agit donc de 2 % de 1 000, soit 20 pixels. Maintenant, à mesure que la largeur d'une fenêtre change, supposons que nous redimensionnions le navigateur à une largeur de 500 pixels, alors nos deux largeurs de fenêtre d' affichage se traduiraient désormais par une taille de texte de dix Ainsi, nous pouvons créer une typographie fluide. Cependant, nous avons le problème qu'à un moment donné, le texte sera trop petit pour lu ou trop grand pour notre conception. C'est là que le CSS CLM est utile. Ce n'est pas la seule façon de gérer cela, mais je l'aime bien car elle utilise du CSS natif. Avec CLAMP, nous pouvons définir une valeur minimale et une valeur maximale pour notre texte, ainsi qu'un taux de croissance entre ces deux seuils. Ainsi, dans mon exemple, le texte est d'au moins 1,5 RM, soit 32 pixels, et pas plus de trois RM , soit 48 pixels. Entre les deux, il s'adapte à un taux de mise à l'échelle de 5 % de la largeur de la fenêtre d' affichage actuelle De cette façon, notre texte s'adapte de manière dynamique aux différentes tailles de points d' Notez que cela est indépendant des points d'arrêt. Il s'activerait simplement dès que 5 % de la largeur de la fenêtre d'affichage est supérieure à la taille minimale Maintenant, la pince peut sembler être la solution à tous vos espoirs et à tous vos rêves, et c'est fantastique. Cependant, il s'agit vraiment d'un domaine dans lequel concepteurs et les développeurs doivent s'asseoir ensemble et travailler dans le navigateur pour obtenir les bons détails. Cela ne se produira pas dans votre fichier de conception. Il comporte également certaines considérations d'accessibilité, ainsi que la mise en œuvre de solutions de rechange techniques Donc, d'une manière générale, si vous travaillez sur un projet créatif ponctuel avec beaucoup de personnalisation et d' attention aux détails, cela peut avoir beaucoup de sens. Cependant, si vous travaillez sur un système de conception, c'est peut-être un peu exagéré et vous voudrez peut-être vous en tenir aux points de rupture standard Et d'ailleurs, vous pouvez toujours utiliser une pince, par exemple, pour créer une section de héros éclatante dans un système plus rigide Outre la largeur de la fenêtre d'affichage, je tiens également à souligner un nouveau développement, les requêtes de conteneurs Sans trop approfondir les requêtes de conteneur, il convient de noter que si requêtes multimédia se concentrent sur la fenêtre d'affichage, les requêtes de conteneur nous permettent de cibler la taille du conteneur parent et de nous adapter Les requêtes de conteneur ont également leurs propres unités, similaires aux unités de fenêtre d'affichage, mais elles sont plutôt liées au conteneur parent Nous pouvons donc toujours utiliser clamp, mais au lieu d'utiliser la largeur de la fenêtre pour la mise à l'échelle, nous utilisons désormais la largeur de la requête du conteneur Cela signifie que la taille de notre technologie s'ajuste en fonction de l'espace disponible, ce qui est très intéressant. S'il n'y a pas de conteneur, il revient simplement à la largeur de la fenêtre d'affichage, d'ailleurs Cependant, la mise en œuvre de cette solution nécessite un développeur frontal compétent, attentif aux détails, bien sûr, un peu plus de temps et de budget supplémentaires. Il ne faut donc pas opter pour des systèmes de conception simples et évolutifs. Mais il est toujours utile pour les concepteurs de le savoir, et cela pourrait devenir très pertinent à l'avenir. 21. 19 Typographie réactive dans Figma avec des styles: Gérer la typographie réactive dans Figma. Il existe actuellement deux manières de procéder. Nous pouvons soit définir un style pour chaque point d'arrêt, soit automatiser cela utilisant des styles, des variables et des modes Pour suivre, rendez-vous figma.com Farsh Moon Learning, où vous trouverez les deux échelles de types différentes avec les différentes configurations que je vais Examinons d'abord l'approche traditionnelle qui consiste à configurer des styles individuels par point d'arrêt Donc, je m' y prends pour commencer par configurer tous mes styles par défaut. Vous pouvez donc voir ici que j'ai les noms de mes différents styles, puis j'ai créé du texte, et j'ai transformé ce texte en style. Donc, si nous examinons la configuration globale de nos styles, vous pouvez voir que j'ai un dossier pour chaque style, donc titre X L, et puis vous pouvez voir à l'intérieur que j'ai un style pour base Ce serait donc celui-ci ici. Ensuite, un pour M, celui-ci serait celui-ci ici, et L. Vous pouvez également le créer dans l'autre sens et avoir un dossier par taille d'écran , puis dans les différents styles. Cela dépend de vous. Donc, si nous y regardons, nous avons également trois styles pour L. Vous pouvez donc voir que c'est notre titre L. Ensuite, dans le titre M, nous conservons la même taille, de la taille par défaut à la taille M puis nous ne changeons qu' à L. Vous pouvez donc voir que je n'ai créé que celui où le changement Sinon, nous utiliserions notre base. C'est donc aussi la raison pour laquelle j'appelle cette base et non la taille S ou quelque chose comme ça. Vous ne pouvez créer le style que lorsque vous en avez besoin, ou vous pouvez également configurer des styles par défaut ici. Supposons donc que dans notre corps par défaut, nous puissions également créer les tailles de base M et L, et même s'ils sont identiques, les régler sur la même valeur. Cela a parfois du sens, car au fur et à mesure que vous construisez, si vous décidez ultérieurement de modifier la taille du texte, tout est déjà configuré. Ça vaut vraiment le coup d'y jeter un coup d'œil. Et cela fonctionnerait essentiellement de la même manière pour notre configuration avec le ratio. Et ici, vous pouvez voir que j'ai vraiment besoin d'un style pour chaque point d'arrêt Donc, si nous examinons cette configuration, il s'agit des mêmes dossiers, et vous pouvez voir que pour chaque style, j'ai besoin de trois styles dans Figma pour chaque point d'arrêt Tu n'as pas besoin de régler tout ça toi-même. Accédez simplement à typescie.com , puis passez de RM à pixels Et dans ce cas, vous modifieriez la taille du corps. Cela vous donnerait les valeurs de 18, puis dans mon exemple de 20, puis vous pouvez simplement copier les valeurs des pixels ici. Ensuite, si vous voulez les utiliser, vous avez juste un écran par point d'arrêt, et vous pouvez voir que ce que j'ai fait ici est différent de l'utilisation des valeurs min et max Vous pouvez donc voir que cela les verrouillera lors du redimensionnement aux valeurs min et max Vous avez besoin d'un cadre de mise en page automatique pour que cela fonctionne. Ensuite, j'applique le style au point d'arrêt correct. Donc, vous pouvez voir que j'ai appliqué ma base de titre. Donc mon X L, mais le style de base, et puis ici j'ai le même le X L, mais la taille M, et puis sur le dernier écran, le L. Nous utilisons également le X L mais une diversion pour l'écran L. se peut donc que vous ayez plus de points de rupture et que cela devienne assez encombré J'ai donc généralement ce type de configuration quelque part caché dans une autre page, comme une page de terrain de jeu, où je peux essayer différentes tailles, puis je montre simplement la taille de mon mobile et de mon bureau pour la configuration globale du design Une chose que je tiens à souligner à propos de cette approche, c'est que si vous avez des composants, avec lesquels, espérons-le, vous aurez entièrement configuré votre conception, vous devrez probablement configurer un composant par point d'arrêt Vous pouvez donc voir ici que j'ai ma base, puis ici j'ai ma taille M puis ici ma taille L. Maintenant, nous pourrions également la remplacer afin que vous puissiez entrer dans le composant et la remplacer Mais cela devient vraiment compliqué et c'est une source d'erreur potentielle C'est vraiment un inconvénient de cette configuration. 22. 20 Automatiser la typographie Figma avec les variables et les modes: Ajout de variables et de modes aux styles pour automatiser le changement de taille du texte selon les différentes tailles d'écran. Je veux donc vous montrer une autre façon de gérer cela, à savoir automatiser la taille avec des styles, des variables et des modes Nous commençons donc par la même configuration de base. Nous configurons nos tailles par défaut et nous créons des styles pour celles-ci. Donc, ici, vous pouvez voir que cela est également configuré comme notre titre X L. Vous pouvez donc voir ici que j'ai les mêmes styles, mais je n'en ai qu'un seul Je n'ai donc pas non plus créé de sous-dossiers. Et si vous y jetez un œil, elles ont toutes le même style, mais elles ont des tailles différentes. Donc, si nous ouvrons nos variables locales, j'ai une collection de typographies, et examinons d'abord les variables par défaut Il s'agit de toutes les valeurs par défaut. Vous pouvez voir 16, 16, 16, etc. Nos gros titres sont alors plus gros. Je peux également ajouter ma famille de polices, je peux également ajouter du poids, de l'espacement. Je me concentre juste sur la taille du texte pour le moment. J'ai ensuite créé deux autres modes, l'un pour la taille M et l'autre pour la taille L. Vous pouvez créer des modes en cliquant sur le bouton plus, mais vous devez avoir un plan pro ou supérieur à figma pour le faire Ensuite, je change les valeurs ici. Encore une fois, configuré en pixels, je peux définir de nouvelles valeurs pour mon mode M et mon mode taille L. Maintenant, ce que j'ai fait dans mon aperçu c'est que ce sont tous de petits cadres, puis vous trouvez ici, dès que vous avez un élément doté d'un mode, Figma vous donne le petit changement de mode. Vous pouvez voir que le petit changement de mode. Vous pouvez j'ai changé celui-ci ici, et maintenant je reçois les tailles pour, et ici, je reçois les tailles pour L. Et il échange automatiquement cette taille de texte par indiqué dans les modes. Si je reviens à la valeur par défaut, vous pouvez voir que je reçois à nouveau les petites tailles. Donc, dans mon design, je n'ai fait que configurer ma base, et vous pouvez voir ici que tout utilise toujours le même style. Mais j'ai changé le mode du cadre parent, vous pouvez donc le voir ici à partir de la taille M. Si je revenais à par défaut, tout repasserait à la taille la plus petite. Et de cette façon, j'ai également besoin d' un seul composant car il utilise simplement le style général. Mais comme ce composant est défini sur automatique, tout ce que vous placez sur le cadre parent doit conserver son réglage automatique, et il héritera donc du style défini par le cadre parent Ici, vous pouvez voir que même si cela a une taille, si nous passons en mode sourd, nous pouvons voir que la taille du texte est de 30, et si nous revenons en arrière et comparons cela, nous pouvons voir que 30 est la taille du titre notre écran L. C'est donc vraiment une excellente façon de gérer cela Cependant, vous devez être conscient que vous avez besoin que tout le monde un plan professionnel ou supérieur pour y faire face. Cela nécessite également de bonnes connaissances en matière de figma et est également un peu plus compliqué une fois que votre système de conception grandit Vous devez donc intégrer différentes bibliothèques et modifier un grand nombre de choses différentes 23. 21 exemples de vie réelle: Il existe de nombreuses méthodes et approches différentes que vous pouvez utiliser pour configurer et documenter la manière de traiter des éléments tels que les composants d'espacement et la typographie C'est toujours une bonne idée de chercher l'inspiration. Cependant, gardez à l'esprit que cela dépend vraiment du type de projet que vous visez, de votre équipe et de votre budget. Il s'agit donc vraiment de trouver des idées et de choisir ce qui convient le mieux à votre projet spécifique. Deux de mes systèmes de design préférés pour inspirer sont le système de design Uber appelé base. Cela offre vraiment un guide complet sur leur philosophie et leur mise en œuvre. Vous pouvez donc vraiment cliquer et voir comment ils font les choses. Un autre point que j' aime beaucoup est le design à points. Il n'est pas aussi détaillé que le système de conception UBA. Il s'agit d'une idée plus générale de la façon dont ils gèrent leur design, mais il y a encore de très bons exemples à examiner. Cependant, je recommande généralement deux endroits où vous pouvez trouver beaucoup d'inspiration. La première est la vitrine à hauteur nulle. Si vous ne connaissez pas la hauteur zéro, il s'agit d'une excellente plate-forme logicielle qui facilite le processus de documentation entre les équipes de conception et de développement. Vous trouverez ici un bon aperçu des différentes entreprises qui construisent un système de conception ouvert avec une hauteur nulle Vous pouvez simplement cliquer dessus pour obtenir des idées et comparer. Un autre endroit que j' aime beaucoup est le livre de contes. Cela met davantage l'accent sur les développeurs, mais vous trouverez également une section de présentation ici, afin que vous puissiez également parcourir ces exemples Il peut également être judicieux de les parcourir avec votre équipe de développement pour examiner différentes idées. Tout comme avec une hauteur nulle, vous pouvez les parcourir et vous pouvez également trouver différentes zones telles que la typographie, l'espacement, les composants, etc. Mais vous pouvez les comprendre d' un point de vue davantage axé sur les développeurs. D'accord. 24. Merci: Bien fait pour finir ce cours. N' hésitez pas à nous contacter à Moon Learning dot io, nous sommes toujours intéressés à entendre vos commentaires. Vous feriez aussi une grande faveur si vous pouviez juste prendre une minute et laisser un commentaire juste ici. Si vous avez apprécié ce cours et assurez-vous également que vous avez un coup d'oeil à nos cours supplémentaires. Au point Moody Learning. Nous couvrons tous les sujets, depuis les fondements mêmes de la conception de l'interface utilisateur UX jusqu'à Figma et même quelques bases du code. Assurez-vous de visiter notre site Web à Moody Learning dot IO, où vous pouvez également vous inscrire à notre newsletter.