Figma : de débutant à pro class en créant une application

1. 0000 Figma Intro: Aujourd'hui, je vais vous apprendre tout ce que vous devez savoir sur Figma. Nous partirons de zéro, en créant un compte et en découvrant la structure de Figma. Tout au long du cours, nous travaillerons sur un véritable projet visant à créer une application de suivi de l'humeur du premier coup à la fin de la conception. Lors de la configuration d'un wireframe et de Figma, vous allez apprendre toutes les bases, telles que la configuration de cadres, ajout de formes, de texte et de couleurs. Nous donnerons ensuite vie au wireframe et configurerons notre conception de l'interface utilisateur. Au cours du cours, je vous expliquerai toutes les fonctionnalités incroyablement puissantes de Figma , telles que l'utilisation des styles Figma pour la couleur et la topographie. Comment ajouter et utiliser des grilles Et nous allons en apprendre davantage sur l'importance d' utiliser des composants et sur les variations qui sont indispensables pour tout concepteur d'interface utilisateur UX. Je vais vous montrer comment utiliser les contraintes pour tester votre design sur différentes tailles d'écran. Nous allons découvrir la puissante section communautaire Figma. Une fois que nous aurons terminé, nous veillerons à ce que notre design brille dans n'importe quelle présentation. Pour terminer le cours, je vais vous montrer comment créer une bibliothèque d'équipe et partager vos fichiers avec d'autres designers et développeurs. En moins de 2 h de votre temps, vous découvrirez tout ce dont vous avez besoin sur Figma pour réaliser n'importe quel projet. Commençons. Ce cours est fait pour vous. Si vous êtes totalement débutant ou si vous passez d'un autre logiciel de conception. Il s'agit d'un cours proposé par Moody Learning point io. 2. NOUVELLE VERSION DISPONIBLE !: Merci beaucoup d' avoir suivi ce cours. Je tiens simplement à vous informer que je viens de publier une nouvelle version de ce cours. Donc, si vous accédez à mon profil, allez sur Christine Valor ou vous pouvez également simplement rechercher Moon Learning Et puis ici vous pouvez voir tous mes cours. Et si vous allez tout en bas, vous verrez généralement les nouveaux cours que je viens de publier. Et si vous cliquez dessus, vous pouvez commencer immédiatement avec matériel le plus récent et les dernières mises à jour du nouveau cours. J'ai pris en compte tous vos excellents commentaires et commentaires adorables que j'ai reçus au cours des deux dernières années avec l'ancien cours. Je l'ai donc légèrement modifié et il s'agit maintenant de conférences plus courtes. Quelque chose que vous avez vraiment apprécié dans les autres cours en direct. Cela signifie que vous pouvez aborder les différents sujets plus rapidement. Et il est livré avec un fichier d'exercices, afin que vous puissiez travailler à mes côtés sur tout ce que vous voyez à l'écran. J'ai approfondi des sujets tels que le prototypage. Et bien entendu, nous aborderons toutes les dernières versions dans le nouveau cours, comme les variables Figma 3. 0101 Qu'est-ce que Figma ? Qui fait-il le codage ?: Qu'est-ce que Figma ? En résumé, Figma est un logiciel de conception d'interface utilisateur, également appelé logiciel de conception d'interface utilisateur. Dans Figma, vous pouvez créer des filaires interactifs, configurer des conceptions d'interfaces utilisateur très avancées et créer des prototypes impressionnants. qui est génial, c'est que Figma fonctionne aussi bien sur Mac que sur PC. Vous pouvez l'utiliser dans un navigateur ou via une application. Figma vous offre tous les outils nécessaires pour configurer une conception pour le Web ou l'application. Des éléments tels que le travail des composants, configuration de styles et l'utilisation contraintes pour une conception réactive. C'est vraiment la somme de ses caractéristiques incroyables qui rendent Figma si spéciale et donc le leader de l'industrie. Il est basé sur le cloud, ce qui en fait le choix idéal pour collaborer avec d'autres concepteurs ou partager votre conception avec des développeurs. Maintenant, la plupart du temps j'entends la question, alors accrochez-vous, si j'ai conçu un site Web dans Figma, comment se fait-il de Figma en ligne ? Comment devient-il un véritable site Web ? Est-ce que Figma fait ça ? Désolé, mais non. Figma vous offre tous les outils nécessaires pour configurer un site Web de manière à ce que les développeurs puissent le faire vivre avec du code. Figma vous offre d'excellents outils, par exemple, l'outil Inspecter où vous pouvez voir des extraits CSS. Mais ce n'est pas vraiment suffisant pour construire un site Web complet à partir de Figma. Vous avez vraiment besoin d'un développeur compétent. Vous pouvez également utiliser un outil comme Webflow pour créer un site Web très simple, et utiliser Figma comme base pour configurer votre conception et la planifier. Pensez-y comme autrefois, en concevant un livret, vous utilisiez quelque chose comme InDesign ou un autre logiciel. Ce logiciel a-t-il imprimé votre livret ? Bien sûr, ce n'est pas le cas. C'est exactement la même chose ici. 4. Projet de cours 0102 - Ce que nous allons construire: Bienvenue dans vos premiers pas à Figma. J'aimerais vous présenter le projet sur lequel nous travaillerons pendant ce cours, car nous apprendrons tout sur des exemples réels. Vous n'avez absolument pas besoin de connaissances préalables car nous commencerons à zéro et nous créerons un compte Figma gratuit. Au cours de la première moitié du cours, nous reconstruirons une image filaire dessinée à la main, partout où je vous présenterai toutes les bases de Figma. Au cours de la deuxième partie, nous transformons notre image filaire en conception d'interface utilisateur. Nous couvrirons tous les aspects et fonctionnalités que Figma a à offrir. Dans la dernière partie, je vais vous apprendre à partager fichiers avec des concepteurs et des programmeurs. Permettez-moi de vous donner un aperçu du point de départ de notre projet. Voici le Wireframe dessiné à la main sur lequel nous allons travailler. Nous allons créer une application de suivi de l'humeur. Passons à travers cela rapidement. Nos écrans contiennent un en-tête qui, dans certains cas, comme notre écran d'accueil, offre également une vue d'ensemble hebdomadaire. Nous avons également une barre d'onglets en bas de l'écran, qui sert de navigation, nous permet d'accéder à différentes zones de notre application. Notre maison est réglée aujourd'hui et contient différents boutons d'ambiance, par lesquels je peux choisir et cliquer sur un. Celui que je choisirai sera ensuite ajouté comme ambiance pour cette date particulière. Je peux également constater que dans mon aperçu des dates ici, les humeurs passées sont montrées. J'ai probablement besoin d'un code de couleur ou de motif pour les identifier dans mon design. Il y a également une page d'aperçu complète du calendrier à laquelle je peux accéder ou j'avais une barre d' onglets ou un en-tête. Le troisième point de navigation est un blog qui contient une série d'articles. Si je clique sur un, j'accède à la page détaillée de l'article. Super, installons-le dans Figma et je vous promets vous apprendrez tous les éléments essentiels que vous devez connaître pour aborder tous les projets à l'avenir. J'ai préparé un fichier Figma avec tous les documents de travail que vous pouvez télécharger. Une fois que nous aurons installé Figma, je vous en dirai plus sur la façon d'obtenir ces documents et comment télécharger des fichiers Figma. 5. 0103 Obtenir Figma - Processus d'inscription: Obtenir Figma est très facile. Il vous suffit d'aller figma.com, puis d'appuyer sur le bouton «  S'inscrire », d' entrer votre e-mail, de choisir un mot de passe et de cliquer sur « Créer un compte ». On vous demandera des informations de base, comme le nom que vous souhaitez utiliser, la zone dans laquelle vous travaillez et si vous souhaitez rejoindre la liste de diffusion. Cliquez sur « Créer un compte » et vérifiez votre e-mail. C'est tout, c'est fini. Dès que vous aurez vérifié votre e-mail, vous serez dirigé vers cet écran de bienvenue. Si vous le souhaitez, vous pouvez créer une équipe maintenant, je vais juste appeler cette lune. vous demandera alors si vous souhaitez inviter d'autres personnes, je vais ignorer cela pour l'instant. Ensuite, vous serez invité à choisir un plan. Je ne vais pas parler prix car cela change de temps à autre, alors veuillez consulter le site Web de Figma pour plus d'informations. Pour commencer, il suffit d'utiliser la version gratuite pour l'instant, vous pouvez toujours mettre à jour plus tard. Figma va ensuite vous demander si vous souhaitez créer un fichier de conception ou un tableau blanc avec FigJam. Si vous n'êtes pas sûr, il suffit de sauter cette étape, vous pouvez créer l'une ou l'autre d' entre elles à tout moment plus tard. La différence entre les deux est que le tableau blanc que vous utiliseriez pour la planification, la discussion et le brainstorming. Si vous êtes prêt à configurer une image filaire ou une conception, choisissez un fichier de conception. Je vais sauter ça pour l'instant et commencer tout seul. 6. 0104 Structure de travail Figma: Jetons un coup d'œil à l'espace de travail Figma. J'utilise maintenant une application de bureau, mais ce sera à peu près la même si vous êtes dans le navigateur. Au milieu de l'écran, vous voyez tous les derniers fichiers. Si vous l'avez conçu comme moi , Figma s' installe dans des fichiers et des modèles de base pour que vous puissiez jouer. Sur le côté gauche, vous voyez vos équipes. Nous avons créé une équipe appelée Moon lorsque nous nous sommes inscrits. Permettez-moi de vous donner un aperçu de la hiérarchie des fichiers Figma. Tout d'abord, nous avons des équipes. Ils peuvent être destinés à votre propre travail ou à la collaboration. Au sein de Teams, nous avons ensuite des projets que vous pouvez utiliser pour regrouper des fichiers dans différents projets au sein d'une équipe. Sur le forfait gratuit, vous obtenez actuellement un projet gratuit. Dans un projet, vous pouvez désormais disposer de plusieurs fichiers, soit des fichiers FigJam, soit des fichiers de conception. Ces fichiers sont là où vous effectueriez le travail réel. Vous pouvez les structurer davantage en pages. Revenons à la vraie chose. Nous avons ici notre équipe. Si vous souhaitez le supprimer, modifier ou le renommer, vous pouvez le faire en cliquant sur le bouton droit de la souris. Ensuite, nous avons notre dossier de projet. Vous pouvez également créer d'autres projets en fonction du plan sur lequel vous vous trouvez. Dans mon projet, je peux maintenant ajouter des fichiers. Je peux soit ajouter des fichiers FigJam, qui sont plus pour le brainstorming, soit ajouter des fichiers de conception réels, ce que je vais faire maintenant. Cela ouvre un onglet. Je peux nommer le fichier en double-cliquant sur le nom. Je pourrais maintenant structurer davantage ce fichier en ajoutant des pages. Actuellement, j'ai une page. Je pourrais en ajouter d'autres en cliquant sur le bouton Plus, et bien sûr, je peux les nommer en double-cliquant. Si vous souhaitez revenir à la maison ou à votre espace de travail global, cliquez sur l'icône de la petite maison en haut à gauche. Vous pouvez maintenant voir le nouveau fichier que nous avons créé sein de notre équipe et de nos projets. Je pouvais maintenant créer autant de fichiers que nécessaire ici. Notez comment appuyer sur l'état ouvert pour que je puisse sauter d'avant en arrière. Au-dessus de vos équipes, vous voyez également des fichiers récents sur lesquels vous venez de travailler, ainsi que des brouillons. Si vous voulez simplement jouer ou toute la hiérarchie des fichiers semble un peu écrasante pour commencer, créez simplement votre premier fichier de conception ici dans les brouillons. Vous pouvez ensuite glisser-déposer des fichiers entre Teams et brouillons. Dans le menu de gauche, vous pouvez également accéder aux sections de la communauté où vous pouvez explorer des milliers de modèles, widgets et de plugins de la communauté Figma. Nous examinerons cela au cours de notre projet plus en détail. Vous pouvez également inviter d'autres personnes à tout moment et leur accorder des droits d' affichage ou de modification. Vous pouvez également voir qui fait votre équipe et le plan auquel vous vous trouvez actuellement, ainsi que les fichiers disponibles fournis avec ce plan. Si vous souhaitez effectuer une mise à niveau, vous pouvez également le faire ici. 7. 0105 Figma dans l'application Browser vs Figma: Vous pouvez travailler avec Figma de deux manières. Vous pouvez soit travailler directement dans le navigateur, ce que vous voyez ici, soit télécharger l'application. Pour télécharger l'application, rendez-vous sur figma.com/downloads. Vous pouvez ensuite choisir entre Mac et Windows. Il est vraiment important de savoir que même si vous travaillez dans l'application de bureau, Figma reste basé sur le Cloud. Cela signifie que tous vos fichiers seront stockés dans le Cloud et non localement sur votre ordinateur. Par conséquent, vous avez toujours besoin d'un accès Internet pour travailler sur vos fichiers Figma. Vous pouvez exporter et stocker un fichier Figma localement. Mais c'est quelque chose que vous ne devriez vraiment faire qu'en cas d'urgence. Comme si vous aviez besoin de terminer un projet et que vous sachiez que vous n'aurez pas accès à Internet. Cela peut entraver la collaboration avec votre équipe. Par conséquent, il est toujours préférable de tout laisser sur le Cloud tel qu'il était prévu. Outre l'application de bureau, vous pourriez être intéressé par Figma Mirror pour prévisualiser vos conceptions sur votre mobile ou votre tablette. Si vous ne parvenez pas à utiliser l'application de bureau et que nous utiliserons uniquement la version du navigateur, je vous recommande fortement de télécharger le programme d'installation de polices. Vous aurez ainsi accès à toutes vos polices locales. Cela ne sera toutefois pas nécessaire lors de l'utilisation de l'application. 8. 0106 Mise en place des premiers cadres: Commençons par notre fichier de conception Figma. Cette zone grise que vous voyez ici s'appelle la toile. Pensez-y comme la surface d'une table sur laquelle vous travaillez. En plus de cela, vous ajouterez vos dessins comme des feuilles de papier. Dans Figma, ces feuilles sont appelées cadres. Vous pouvez ajouter des images, textes et des formes à vos cadres pour configurer votre conception. Pour créer un cadre, vous pouvez choisir un outil de cadre dans la barre d'outils ou simplement appuyer sur F pour ouvrir le menu Cadre sur le côté droit. Dans Figma, toutes les tailles d'écran courantes sont déjà configurées pour vous sous forme de cadres. Je vais choisir un iPhone X à partir de mes designs mobiles. Si vous ne cherchiez pas un cadre de taille d'écran spécifique, vous pouvez également dessiner votre cadre à la main. Une fois l'outil de cadre activé, deux choses se sont produites. Figma a ajouté le cadre à votre Canvas et vous pouvez également le voir dans le panneau des calques latéraux gauche. La barre latérale de gauche est essentiellement un miroir de chaque élément que vous aurez sur votre canevas. Comme nous ajouterons de plus en plus d'éléments, vous pourrez également les voir tous représentés ici. Vous pouvez renommer vos filaires soit directement ici dans le panneau des calques latéraux de gauche, soit en double-cliquant sur le petit nom au-dessus de votre cadre sur le canevas. Renommez-le en filaires/maison. Notez que j'utilise une barre oblique. Il s'agit de la convention de dénomination dans Figma et crée essentiellement une catégorie pour les trames. Cela est très utile lors de l'exportation et de l' organisation de vos cadres ultérieurement. Contrairement aux tableaux d'art traditionnels, vous pouvez imbriquer des cadres les uns dans les autres dans Figma. Cela vous permet de créer des mises en page plus complexes. 9. 0107 de raccourcis utiles Pan, Zoom et plus encore: Je veux vous montrer quelques commandes utiles qui accéléreront votre flux de travail même si vous êtes au tout début de Figma. Figma a beaucoup de raccourcis et d'aides géniaux. Vous les trouverez tous si vous accédez des raccourcis via le menu de gauche. Tout ce que vous avez déjà utilisé est marqué en bleu et ceux que vous n'avez pas encore utilisés sont gris. Pour l'instant, je vais juste vous montrer les plus indispensables à la navigation. Pour effectuer un panoramique, maintenez simplement la barre d'espace enfoncée et déplacez-vous avec votre souris. Pour effectuer un zoom avant et arrière, appuyez sur « Plus » et « Moins ». Il est très important d' afficher votre travail à 100 % d'appuyer sur « Commande 0 ». Vous pouvez basculer entre une vue d'ensemble de toutes vos images et la sélection spécifique en basculant avec Maj 1 ou Maj 2. Pour afficher et masquer l'interface utilisateur, appuyez simplement sur « Command full stop » et évidemment le jeu de commandes tout-puissant pour annuler tout ce que vous venez de faire. Vous apprendrez à connaître plus de raccourcis au fur et à mesure que nous avançons. N'oubliez pas que vous pouvez tous les rechercher dans le menu contextuel, qui comporte bien sûr également un raccourci, Maj, Control et point d'interrogation. Cela sera également utile si vous utilisez un PC car je travaille sur un Mac, et vous ne verrez que les raccourcis Mac avec la sortie clavier automatique à l'écran, qui peuvent parfois différer légèrement. 10. 0108 Ajouter des formes à un cadre: Commençons par transformer notre cadre en une véritable image filaire en ajoutant du contenu. Dans un cadre filaire, nous nous en tenons à des formes simples telles que des rectangles et des cercles. Nous les retrouvons tous dans le menu des formes en haut. Il suffit de cliquer sur l'icône et de sélectionner celle que vous recherchez. Notez comment, à côté de la forme, vous pouvez voir le raccourci. Je pourrais simplement appuyer sur R pour le rectangle ou O pour un cercle. Maintenez la touche Maj pendant le dessin et votre forme sera uniformément dimensionnée. Lorsque la forme est sélectionnée, vous pouvez voir les dimensions dans la bulle située en dessous. Vous verrez les mêmes dimensions dans le panneau Propriétés du côté droit. Ici, dans le panneau Propriétés, vous pouvez également ajuster la taille à la main. Il suffit de saisir le numéro que vous recherchez. Vous pouvez également utiliser cette case pour effectuer des calculs. Le clip à côté des mesures verrouille ou ouvre les cotes. Vous pouvez choisir si vous souhaitez mettre à l'échelle toute la forme ou un seul côté, essayez. Vous pouvez également faire pivoter la forme en ajoutant un angle ou simplement en sélectionnant la forme. Rapprochez-vous de votre curseur vers le bord jusqu'à ce que le petit symbole de rotation apparaisse. Pour modifier le rayon d'angle de votre forme, sélectionnez la forme, puis approchez-vous vraiment jusqu'à ce que les points apparaissent. Tenez votre souris et faites glisser la souris vers l'intérieur. Ou utilisez le panneau Propriétés. Vous pouvez arrondir tous les coins en même temps ou sélectionner des coins spécifiques tôt. 11. 0109 Duplicating: Super. Maintenant que nous savons dessiner des formes, installons notre première disposition de base du filaire. Nous commencerons par notre écran d'accueil. J'appuie sur R pour mon raccourci pour sélectionner un outil rectangle, et nous allons dessiner l' en-tête et le pied de page. Dans un filaire, les tailles exactes ne sont pas aussi importantes que dans la conception finale, je vais donc les ajuster à la main à mon goût. Je vais maintenant dessiner les quatre cercles qui seront mes boutons d'humeur. J'ai cliqué sur O pour l'outil cercle et je dessine mon premier cercle. Comme je veux qu'ils aient tous la même taille, je copierai simplement le premier bouton. Il existe plusieurs façons de le faire. Vous pouvez appuyer sur Commande, ou Windows, il s'agit de Contrôle, et C pour copier, et Commande ou encore Control et V à coller. Vous pouvez également faire glisser une copie de la forme d'origine en maintenant la touche Option et Maj enfoncées Avec la souris, appuyez et faites glisser une copie. Je pourrais le faire pour tous les autres cercles ou simplement appuyer sur Commande, ou sur Windows, Control et D. Cela les dupliquera exactement à la même distance que le premier. 12. 0110 dessin dans Figma: Ajoutons les visages à nos boutons d'humeur. Je vais dessiner les yeux en ajoutant des cercles. Je parlerai plus tard de la couleur. Pour l'instant, pour rendre les yeux visibles, sélectionnez-les, puis accédez à Remplir le panneau Propriétés du côté droit, et à l'endroit où vous pouvez ajouter la valeur de couleur, écrivez simplement « gris ». C'est une petite astuce si vous avez besoin d'une couleur rapide. Pour dessiner un nez, j'ai besoin d'un trait, alors je choisis l' outil de ligne ou appuyez simplement sur L et maintenez la touche Maj enfoncée pour obtenir une ligne droite. Pour la bouche, je vais choisir l'outil Plume, vous pouvez également utiliser le raccourci P. Si vous définissez un premier et un deuxième point et maintenez la touche de la souris enfoncée, vous pouvez courber les lignes. En plus d'un outil Stylo, vous pouvez également utiliser un outil Crayon. Vous pouvez dessiner à main levée, ce qui demande un peu de pratique lorsque vous utilisez une souris. Mais si vous êtes habitué à un trackpad ou à un stylo, vous obtiendrez des résultats incroyables. Une fois que vous avez terminé le dessin, appuyez simplement sur Echap pour quitter le mode dessin. Si vous sélectionnez l'une des formes, vous pouvez désormais modifier leur apparence avec le panneau Propriétés du côté droit. Vous pouvez modifier la couleur, la taille du trait, et vous pouvez même choisir un autre type de contour et de coins arrondis. Une fois que j'aime mon visage, je vais simplement le dupliquer sur tous les autres boutons et ajuster l'ambiance. 13. 0111 Créer des groupes: Actuellement, toutes les couches sont placées unes à côté des autres au même niveau de hiérarchie. Vous pouvez regrouper les couches pour créer plus de structure et faciliter la gestion de votre conception. Il suffit de sélectionner les couches que vous souhaitez appartenir à un groupe. Vous pouvez le faire maintenant la touche Maj enfoncée et en cliquant dessus un par un, ou en maintenant Maj et le bouton de la souris enfoncés, puis en dessinant une zone de sélection. Appuyez ensuite sur Commande ou sous Windows, Control, G pour les regrouper. Vous pouvez également imbriquer des groupes au sein de groupes. Par exemple, si je transforme chacun de ces boutons en groupe, puis que je sélectionne tous les boutons, je peux les regrouper à nouveau. Maintenant, je vais avoir un groupe de boutons et j'ai quatre groupes de boutons simples. Je peux maintenant déplacer le groupe dans son ensemble, et je peux également dupliquer l'ensemble du groupe et le coller à un autre endroit. Vous pouvez toujours modifier des éléments à l'intérieur du groupe, soit en double-cliquant jusqu'à ce que vous atteigniez l'élément souhaité touche Commande ou Contrôle, puis cliquez pour sélectionner. Notez que tout ce que nous avons ajouté au cadre est représenté dans le panneau Calques. Les groupes sont affichés sous forme de petits rectangles pointillés. Lorsque vous cliquez dessus, vous pouvez voir le contenu à l'intérieur et vous pouvez également déplacer des éléments à l'intérieur et à l'extérieur des groupes. Double-cliquez pour renommer. Je nommerai mon groupe, Circle Group, et les groupes des cercles individuels à l'intérieur, Circle. 14. 0112 pour ajouter et publier du texte: Nous voulons maintenant ajouter du texte à notre filaire. Sélectionnez l'outil Texte ou appuyez simplement sur « T », puis cliquez sur votre « Filaire » pour commencer à taper ou dessiner une zone de texte. Sur le côté droit du panneau Propriétés, vous verrez désormais les propriétés du texte. gestion de la topographie est un sujet assez important dans la conception de l'interface utilisateur. Pour l'instant, je vais seulement vous donner un aperçu rapide du panneau des propriétés. Nous allons approfondir ce sujet une fois que nous nous sentirons à l' aise dans Figma. Dans la liste déroulante, vous pouvez choisir une police de caractères. Si vous travaillez avec une application de bureau Figma, vous verrez automatiquement toutes vos polices locales et toutes les polices Google. Je vous recommande vraiment d'utiliser l'application dans la mesure du possible. Si vous travaillez dans le navigateur, veillez à installer le programme d'installation de polices Figma, que vous trouverez sur figma.com/downloads. Vous pourrez ensuite voir toutes vos polices locales. Si vous souhaitez utiliser la police Google, assurez-vous de la télécharger et de l' installer sur votre ordinateur. Je travaille dans l'application, donc je vais utiliser l'une de mes polices Google préférées, Poppins. Dans le menu déroulant ci-dessous, je peux choisir le poids de la police. À côté, je trouve une taille de police, et je la réglerai sur 24 car c'est mon texte principal pour l'instant. La hauteur de ligne et l' espacement des lettres pour l'instant, je repartirai au réglage par défaut. C'est quelque chose que nous retoucherons plus tard dans la conception de notre interface utilisateur. Plus bas, je peux choisir d'aligner le texte vers la gauche, la droite ou le centre et je vais l'envoyer à mes textes pour l'instant. Nous pouvons également définir le comportement en largeur et en hauteur de nos manuels scolaires. Si vous choisissez la largeur automatique, cela signifie que la zone de texte correspond exactement à la taille du texte. Ensuite, nous avons la hauteur automatique, ce qui signifie que nous avons une largeur définie et que lorsque nous ajoutons du texte, il se triera en dessous en conséquence. Nous l'utiliserons beaucoup lorsqu'il s'agit de la conception de notre interface utilisateur car elle respecte la hauteur de notre ligne. Ce qui sera donc crucial. Nous avons également une taille fixe, ce qui est honnête, quelque chose que j'utilise rarement. Sous plus d'informations, vous pouvez ajuster des éléments tels que sous-jacents ou majuscules. Je vais régler mon texte, pour qu'il reste au milieu ici. J'ajouterai également les textes que j'ai ici dans mon en-tête. Ceci est souligné car il sera cliquable ultérieurement. 15. 0113 de l'alignement et des de Alignment de positionnement: Vous pouvez positionner des éléments à l'intérieur du cadre en les faisant simplement glisser. Vous verrez que Figma crée des guides pour vous aider à aligner n'importe quel élément sur le reste. Pour ajouter plus de détails à votre positionnement sélectionnez un objet ou un groupe d'objets et maintenez l'ancien enfoncé tout en survolant le bord de votre cadre ou de tout autre objet. distance exacte entre ces objets s'affiche. C'est super pratique et vraiment quelque chose dont vous aurez besoin tout le temps. Vous pouvez également déplacer les objets sélectionnés avec votre clavier, les flèches gauche, droite, haut et bas lorsque les distances sont actives. Si vous maintenez la touche Maj enfoncée , elle saute sur de plus grandes distances. C'est ce qu'on appelle le nudging. Par défaut, votre nudging est défini sur 10. J'ai fixé le mien à huit pas. Il suffit de rechercher le montant de nudge dans le menu de votre espace de travail, et vous pouvez l'ajuster. Vous pouvez également sélectionner plusieurs formes alignées à l'aide de l'outil Aligner dans le panneau des propriétés. Si vous sélectionnez un groupe d'objets similaires, Figma vous proposera de les ranger. Vous pouvez même définir l'espace entre les éléments à l'aide du menu ou à la main. 16. 0114 de modifier les coups de couleur et les remplissages: Toutes les formes possèdent une propriété de remplissage et de contour. Par défaut, nos calques sont remplis d'un gris clair et notre typographie est noire. Cela fonctionne très bien pour les filaires. Vous auriez pu adapter les couleurs. Sélectionnez une forme et, dans le panneau des propriétés du côté droit, cliquez sur « Remplissage de couleurs ». Vous pouvez désormais choisir une couleur à l'aide la roue chromatique ou utiliser l'œil pour choisir une couleur. C'est très pratique si vous souhaitez choisir une couleur dans une image, par exemple ou si vous avez déjà un code hexadécimal, vous pouvez simplement l'ajouter. RVB fonctionnerait également. En plus de la couleur unie, vous pouvez appliquer d'autres remplissages tels que des dégradés et remplir des formes avec des images. Vous pouvez révoquer un remplissage en cliquant sur le symbole du bouton moins situé à côté de celui-ci. Vous pouvez ajouter un trait en appliquant la même technique avec l'option Contour. La course peut également être ajustée en épaisseur. Si nous cliquons sur les trois points, vous pouvez obtenir plus d'options comme les traits pointillés. Les propriétés peuvent également être copiées et collées parmi les objets. Cliquez avec le bouton droit sur l'élément, sélectionnez le style « Copier les propriétés » et collez-le sur un autre. Ou utilisez la commande Alt C et Alt V Notez que cela ne copie le style et non la forme. 17. 0115 Créer des styles dans Figma: Les styles vous permettent d'enregistrer et de réappliquer des propriétés. De cette façon, les fichiers volumineux peuvent être mis à jour en un instant. Des styles peuvent être créés pour les couleurs, le texte, les grilles et les effets tels que les ombres. Pour notre filaire, nous utiliserons différentes nuances de gris que je veux transformer en style, ainsi qu'un titre et un texte standard. Commençons par configurer nos styles de couleurs. Pour créer les styles de couleurs, je dessine des formes et je les remplis avec les couleurs souhaitées. Choisissez la première couleur, cliquez sur le menu Styles dans panneau Propriétés du côté droit, puis cliquez sur l' icône Plus et nommez votre couleur. Faisons de même avec les autres couleurs. Notez comment j'utilise à nouveau la convention de dénomination des pigments avec une barre oblique. Cela créera automatiquement une catégorie filaire, puis mes différentes couleurs. Je peux maintenant appliquer ces couleurs au texte ou à la forme de mon dessin. Il suffit de choisir l'objet, puis, dans le menu Styles, appliquer votre style de couleur enregistré. Vous pouvez voir un aperçu de vos styles en cliquant sur le Canevas. Vous pouvez toujours modifier vos styles. Ils seront ensuite automatiquement mis à jour dans l'ensemble de votre conception. Faisons de même pour notre texte. J'ai choisi un texte, clique sur l'icône « Styles » dans propriétés de mon texte et je l'enregistre. Je peux maintenant l'appliquer à mon design. Notez à quel point il s'agit de styles, peu importe où vous les créez. Ils ne sont liés à aucun objet votre Canvas à partir duquel vous les avez créés. Ils vivent de manière indépendante dans la section style. Je vais créer un cadre séparé pour stocker un aperçu de mes styles. Pour l'instant, je vais le laisser à côté de mes filaires pendant que je suis encore en train d'ajuster. J'ai remarqué que j'ai fait une erreur. Il s'agit en fait d'un texte cliquable souligné. Je peux modifier le style dans le menu Styles de texte ou en cliquant sur mon canevas accéder à l'aperçu des styles. Je vais le renommer en cliquable. Je veux quand même comprendre les textes. Je vais copier un texte avec ce style, puis le détacher dans le menu Styles de texte. Je vais maintenant supprimer le soulignement et l'enregistrer à nouveau comme texte standard. Pendant mon processus de travail, je peux toujours ajouter ou modifier des styles. Il existe également d'autres styles tels que les grilles et les effets tels que les ombres ou les flous que vous pouvez enregistrer. 18. 0116 Le travail avec des composants et des principes rend en comp et des comp: Les composants sont des éléments d'interface utilisateur qui peuvent être réutilisés dans votre conception. Dans mon filaire, il y a des éléments qui ont la même disposition mais qui contiennent simplement un contenu différent. Comme les jours de mon calendrier ici et dans ma barre de touches, les icônes tapables. Faisons-les en composants. Nous allons commencer par les jours du calendrier. abord, dessinez un cadre sur toute la largeur de votre cadre de mise en page. N'oubliez pas que je peux utiliser mon panneau de propriétés pour calculer. Je diviserai cela par 7 pour obtenir un jour, et plus tard, ma semaine s' intégrera parfaitement à la largeur de l'écran. Je vais maintenant ajouter un texte pour le jour de la semaine et la date ci-dessous, ainsi qu'un cercle qui indiquera si une ambiance était déjà entrée dans le passé. Allons bien les aligner. Assurez-vous également d' attribuer la couleur et les textiles. Je vais ensuite nommer le cadre. Maintenant, au lieu de simplement copier la date, je vais en faire un composant réutilisable. Assurez-vous que le cadre est sélectionné. Dans le menu supérieur, cliquez sur « Créer un composant ». Si le composant a été créé avec succès, vous verrez le contour violet ainsi que le symbole losange. Dans le panneau Calques, vous verrez également le changement de couleur et de symbole. Ce composant d'origine que vous avez créé est appelé domaine ou composant principal. Toute copie de celle-ci est appelée instance. Notez la différence dans le menu Calques. Le composant principal a une forme de diamant rempli et l'instance a une forme de diamant vide. Vous trouverez un aperçu de tous les composants que vous avez créés dans le menu de la ressource à côté de vos couches. Vous pouvez soit faire glisser sur votre canevas pour créer une instance, copier directement le maître ou n'importe quelle instance pour créer une autre instance. Peu importe la façon dont vous utilisez, il y aura toujours un lien avec le maître d'origine uniquement. Vous ne pouvez avoir qu'un seul maître, mais de nombreuses instances. Si je modifie la disposition du composant maître, toutes les instances seront également mises à jour. Notez que je ne suis pas en mesure de modifier la position d'un élément dans l'instance. Je peux cependant modifier le contenu, sorte que je puisse modifier le nom des dates. Je n'aime pas l'alignement et je veux que le texte reste au milieu, donc je vais corriger cela dans un maître et toutes les instances suivront. Notez que je n'ai pas changé la couleur dans aucun des cas, donc si j'ai changé de maître, ils suivront tous. Je peux cependant adapter la couleur d'une instance. Il suivrait ensuite tous les changements de mise en page du maître, mais conserverait ce qu'on appelle l' override pour la couleur. C'est très bien. Comme dans notre exemple, je veux que la date actuelle se démarque un peu. Je veux supprimer les cercles d'aujourd'hui et de demain. Il existe des méthodes plus avancées pour le faire, mais pour l'instant, je vais les colorer, dans la couleur d'arrière-plan, ce qui fonctionne très bien pour une image filaire. Pour résumer, votre composant est fixe et vous ne pouvez pas remplacer votre instance, votre taille, votre position, vos rotations, vos contraintes, votre hiérarchie de couches ou tout dessin pointant dans les positions de Bézier. Vous pouvez remplacer dans vos instances, cependant, la couleur et les remplissages, les remplissages peuvent également être un remplissage d'image, texte dans le contenu et l'alignement, styles, de l'opacité, effets tels que des ombres ou des flous, et vous pouvez activer et désactiver la visibilité. Si vous souhaitez revenir aux paramètres principaux d'origine, vous pouvez le faire en utilisant le menu déroulant du menu de l'instance et en choisissant « Réinitialiser tous les remplacements ». Vous pouvez également détacher une instance d'un maître ici. Si vous supprimez accidentellement votre maître, vous pouvez également le restaurer avec n' importe quelle instance que vous avez déjà créée. 19. 0118 pages dans Figma: Pour modifier notre conception, y compris les instances, nous devons toujours revenir au composant principal. Nous pourrions le faire en sélectionnant une instance et, sous le menu de droite, cliquez sur « Aller au composant principal ». Nous retournions ensuite au composant principal, peu importe où nous l'avons placé. Cependant, il est beaucoup plus net si vous retirez tous vos composants principaux de la conception et que vous les stockez dans un endroit séparé. Il est également très important de garder un aperçu de la cohérence de votre conception. Maintenant, je pourrais garder mon maître sur la même page ou même dessiner un cadre que j'appelle composants et avoir une vue d'ensemble ici. Cependant, il est recommandé de garder votre design propre et bien rangé. Nous stockerons les composants principaux dans leur propre section. Pour cela, nous créons une page distincte que nous appelons Composants & Styles. Nous allons renommer cette page que nous travaillons sur Wireframes. Maintenant, sélectionnez le composant principal, cliquez avec le bouton droit de la souris et sélectionnez Déplacer vers les pages. Vous pouvez maintenant l'envoyer sur la page que vous venez de créer. J'enverrai également mon cadre avec les styles là-bas. Cela me donnera un excellent aperçu de tous les éléments que j'utilise. Je souhaite créer d' autres composants comme les icônes de la barre d'onglets. Je peux le faire soit dans la conception et les envoyer sur la page de mes composants, soit les créer directement sur la page des composants. Je vais dessiner un rectangle 24 sur 24 et arrondir les coins. J'ajouterai ensuite un texte ci-dessous. Il s'agit d'une étiquette, donc elle peut être assez petite. Je vais ajouter un autre style pour cela. J'ajouterai également ce style à mon aperçu. Faisons en sorte que je puisse saisir nos lignes et créer un groupe. Je vais renommer le groupe, m' assurer qu'il est sélectionné et le convertirai en composant. Je vais maintenant le copier, sauter sur mon filaire et le coller dans la barre d'onglets. Alignons les instances et renommons les étiquettes en page d'accueil, calendrier et blog. Maintenant, la couleur de mon icône est de la même couleur que l'arrière-plan. Je veux revenir dans mes composants et changer cela dans le maître. Super. Jetons un coup d'œil à notre menu des actifs pendant une seconde. Les composants sont triés automatiquement en fonction de la page et du cadre sur lequel vous les placez. Dans notre exemple, nous utilisons la barre oblique avant et cela a également créé une jolie sous-catégorie. Cela sera très pratique une fois que vous aurez de nombreux composants dans un design plus grand. 20. 0119 Créer un tableau de flux simple avec des plugins: Super, donc nous avons fini notre filaire domestique. Maintenant, je veux ajouter les autres filaires. Créons ces quatre où une ambiance sera choisie et apparaîtra pour ce jour-là. Je peux maintenant soit dessiner nouveaux cadres et copier tout ce dont j'ai besoin et dessiner le reste, soit comme ils sont très similaires, je vais simplement dupliquer l'intégralité de mon cadre. Je vais maintenant changer le texte et, d'ailleurs, ce texte pourrait également être sa propre composante. Je vais ensuite sélectionner toutes les phases qui ne seraient pas sélectionnées à l'écran. N'oubliez pas de maintenir la commande ou l'option enfoncée lorsque vous êtes passé à la sélection profonde au sein d'un groupe. Je veux maintenant changer la transparence. Je peux le faire dans le panneau des propriétés ou simplement appuyer sur n'importe quel numéro. Deux, par exemple, entraîneraient une capacité de 20 %. Je ferai de même pour le reste des écrans et, comme vous pouvez le constater, il est déjà rentable que nous passons un peu de temps à configurer notre écran d'accueil. Je vais également configurer des cadres pour mon calendrier, ainsi que l'emplacement de mon bloc ultérieurement. Bien sûr, assurez-vous de les nommer. Je veux maintenant indiquer le lien entre ces images. simple fait de dessiner une ligne ne fonctionnerait pas vraiment car les objets se trouvent sur ou en dehors des cadres. Je vais utiliser un plugin. Retournez à la page d'accueil en cliquant sur le bouton Maison en haut à gauche et accédez à la section Communauté. Je veux configurer un diagramme de flux, donc je tape dans le flux et je cherche des plugins. Il y en a beaucoup d' excellents, mais pour l'instant, je vais utiliser un connecteur de tirage. Cliquez sur Installer. Revenons maintenant en haut de notre fichier, qui est toujours ouvert. À partir du menu et notez que c'est le menu du navigateur, je choisis maintenant des plugins et activerai celui que je viens d'installer. Vous verrez apparaître une fenêtre qui vous indiquera ce qu'il faut faire et comment utiliser le plugin. Nous voulons connecter le bouton au nouvel écran. Je vais donc sélectionner un bouton sur lequel vous cliquez, maintenez la touche Maj enfoncée et sélectionnez la destination. Terminé. Les zones sont maintenant collées au cadre. Si vous déplacez le cadre, il se déplacera avec lui. Ce plugin particulier vous permet également de décider où vous souhaitez connecter ce module pour le dock sur les trames. Relions-les tous. Il existe de nombreux plugins différents pour les flux et les filaires prêts à l'emploi. N'hésitez pas à explorer et à découvrir ce qui vous convient le mieux. Chacune des erreurs crée une couche dans l'onglet Calques. Vous pouvez également tous les regrouper , puis les activer et les désactiver. 21. 0120 section de la communauté Figma: Configurons notre écran de calendrier. Maintenant, nous pouvons tout configurer à la main, ou nous pourrions utiliser un pré-construit que quelqu'un d'autre était assez gentil pour partager avec nous. Allons dans la section de la communauté Figma. Accédez à l'icône d'accueil et sélectionnez la communauté. La section communauté Figma est un espace où les créateurs peuvent partager leur travail Figma. Vous pouvez rechercher des plugins, des fichiers de conception, des filaires, systèmes filaires, des illustrations, des icônes, tout. Nous effectuerons une recherche dans le calendrier pour trouver nos filaires et vous verrez une variété de fichiers qui s'affichent. Celui-ci de Felipe Dolce est tout simplement parfait. Cliquez dessus et vous obtiendrez un aperçu. Une fois qu'il est chargé, vous pouvez voir les différentes pages du fichier. Nous allons le dupliquer. Après un court délai de chargement, vous verrez une copie identique du fichier dans votre compte Figma. Je peux maintenant accéder à tous les éléments. Sélectionnons Calendrier, appuyez sur la commande C pour copier et revenons en haut avec notre fichier de travail. Sélectionnez le bon cadre et collez le calendrier avec la commande V. Le contour violet m'indique qu'il s'agit d'une variante et que le composant principal se trouve toujours dans le fichier d'origine. Je veux le changer en fonction de mes besoins, alors je vais le détacher. Je peux maintenant apporter tous les changements que je veux. Je vais supprimer les fonds d'arrière-plan, les motifs et les autres éléments que je ne veux pas. Je vais adapter les textiles et couleurs à mes besoins et je peux les redimensionner. Je vais en faire une composante. Ce composant apparaîtra plus tard sur la page de mon composant, je vais donc remplir mon cadre avec des instances. Disposons les instances et modifions les noms du mois. Oui, je devrais adapter les dates pour chaque mois, mais pour l'instant, dans le filaire, je vais juste laisser ça comme ça. J'ajouterai d'autres humeurs et marquerai la journée par un cercle. Veillons également à ce que nous ayons des ambiances différentes au cours de la semaine en cours. Comme il s'agit essentiellement de la semaine qui apparaîtra en haut de l'écran d'accueil. Maintenant, je n'ai qu'à adapter l'en-tête et à ajouter les différents jours de la semaine. Maintenant que tout est à mon goût, je vais sélectionner le composant et envoyer sur la page de mon composant. Si je saute sur les composants, je peux l'arranger avec le reste. 22. Note : avant de commencer par la mise en page automatique: Une mise à jour de la mise en page automatique a été récemment Le menu semble légèrement différent maintenant, mais il contient les mêmes fonctionnalités, telles que l'interligne, le remplissage et la direction. Toutefois, l'option de redimensionnement qui se trouvait auparavant sous le menu Mise en page automatique est maintenant déplacée vers le haut dans le menu des cadres. ne s'agit que d'un changement de position. Il contient toujours les mêmes options et fonctionne exactement de la même manière. Vous pouvez toujours suivre les didacticiels sur le redimensionnement. Assurez-vous simplement d'activer les options de redimensionnement à partir de la nouvelle position ci-dessus. J'ai également ajouté une vidéo de mise à jour à la fin. Cause. Cela donne un aperçu de toutes les nouvelles fonctionnalités de mise en page automatique qui concernent toutefois davantage le menu avancé. Si vous n'êtes qu'un débutant à Figma, ne vous inquiétez pas trop pour le moment. Une fois que vous serez prêt à approfondir un peu plus la nouvelle mise en page automatique et la conception Web réactive avec Figma, jetez un œil au cours de plongée approfondie sur la conception réactive avec Figma qui couvre ces sujets sujets en profondeur. 23. 0121 Introduction à la mise en page automatique: La mise en page automatique est une propriété que vous pouvez ajouter aux cadres et aux composants. Il vous aide à créer des designs qui s'adaptent à ce contenu. La mise en page automatique est très puissante et peut être utilisée pour différents scénarios. Cependant, il faut beaucoup de pratique. Je vais vous montrer les bases aujourd'hui. L'exemple le plus simple et le plus approprié pour la mise en page automatique est un bouton. Tapez quelque chose, puis transformez-le en cadre. Vous pouvez le faire en utilisant le raccourci Commande Alt et G. Vous pouvez également dessiner un cadre et écrire un texte à l'intérieur. Cela fonctionnera exactement de la même façon. J'ajouterai une couleur de fond pour que nous puissions mieux la voir. Sélectionnez ensuite la mise en page automatique dans le panneau des propriétés du côté droit. Ajoutons un peu de rembourrage. cela, vous pouvez utiliser le menu de remplissage des mises en page automatiques. Vous pouvez soit ajouter une valeur pour tous les rembourrages, soit cliquer sur le petit carré et sélectionner une valeur pour le haut, gauche, la droite et le bas individuellement. Allons maintenant dans les coins. Au fur et à mesure que nous modifions le contenu du motif, tout va bien évoluer tout en respectant le rembourrage que nous avons défini. Vous pouvez en faire un composant et disposer des boutons parfaits dans tout votre design. Cela semble assez simple, la magie se produit ici, dans le panneau Propriétés du côté droit du menu de redimensionnement. Notez comment tout pour mettre en page automatiquement s'encadrer lui-même, ainsi que le contenu est configuré pour pirater le contenu. Si nous changions cela, et disons que notre conteneur extérieur est fixé à une largeur fixe et à l' intérieur sur le conteneur plein, alors nous aurions un comportement très différent. Notez également que la mise en page automatique peut fonctionner horizontalement ou verticalement. Ce qui semble être quelques choix s'ouvre réellement et de nombreuses possibilités de comportement. Cela peut devenir très accablant. Je vous recommande de commencer à utiliser mise en page automatique sur des éléments plus petits, tels que des boutons ou des cartes simples. Ensuite, petit à petit, travaillez dans votre chemin. Les contraintes et la mise en page automatique sont probablement les sujets les plus difficiles de Figma. 24. 0122 de l'aménagement automatique imbriqué - Créer une carte: La dernière partie de notre filaire que nous devons construire est l'écran bloqué. Il s'agit essentiellement d'un composant qui est une carte avec un titre de légende d'image, ainsi qu'un texte d'aperçu. Je vais commencer par dessiner un cadre comme conteneur de cartes. Je vais ajouter un peu de marge à gauche et à droite. Ensuite, j'ajouterai une forme rectangulaire, qui sera l' espace réservé pour l'image, ainsi qu'une légende, un titre. J'ajouterai du texte réservé qui sera mon aperçu. Assurons-nous qu'il soit assigné à nos styles et bien aligné. Je peux maintenant en faire un composant et le réutiliser. Mais mon titre dans le texte d' aperçu peut ne pas toujours avoir la même longueur. Ma boîte sera soit trop longue, soit trop courte. Il ne respectera pas les distances. Appliquons la mise en page automatique à notre carte. Si je transforme l'ensemble de la carte en mise en page automatique, mon texte va maintenant s'adapter, mais tout mon rembourrage est perdu. Si j'applique le rembourrage de mise en page automatique, il l'utiliserait sur tout le contenu, y compris mon image, ce que je ne veux pas. Toutefois, vous pouvez imbriquer la disposition automatique. Je vais d'abord sélectionner tout mon texte, le regrouper et m'assurer qu'il est groupé sinon il ne fonctionnera pas, puis je le transforme page automatique à l'intérieur de ma mise en page automatique. Je peux désormais adapter le rembourrage de mise en page automatique pour cette boîte séparée uniquement. Mais notez que mon texte ne s' étend pas sur toute la largeur. Si je tape quelque chose, il n'utilise pas la boîte entière, je ne veux pas ça. Ce que je dois faire, c'est ajuster mes paramètres de redimensionnement et je les configurerai pour remplir le conteneur dans ce cas. Il va maintenant utiliser tout l'espace disponible, tout respectant le rembourrage que j'ai défini. Si vous rencontrez des problèmes avec cela, assurez-vous de vérifier que votre hauteur est toujours définie sur son contenu. Vérifiez toujours que votre texte en tant que tel est défini sur la hauteur automatique dans les paramètres du texte. C'est généralement la cause d'une erreur si elle ne fonctionne pas. Ma carte fonctionne parfaitement si je modifie le contenu, mais je veux encore vous montrer un peu plus. Réglage de mon conteneur sur une largeur fixe et la hauteur pour embrasser le contenu. Maintenant, vous pouvez le redimensionner plus facilement. Si vous rencontrez des difficultés à faire en sorte que cela fonctionne. Assurez-vous de vérifier que les enfants l'intérieur de ce conteneur ont également le bon réglage. Nous n'en avons toujours pas fini avec la magie de mise en page automatique. Je vais transformer cela en composant, nous allons maintenant créer des instances que je vais distribuer dans mon cadre. Maintenant, je sélectionne mes instances, les regroupe et je les transforme en une autre mise en page automatique. Assurez-vous que tous les redimensionnements sont réglés comme vous le souhaitez, et je peux maintenant définir les distances entre eux, et je peux modifier tout le contenu, et tout s'adaptera parfaitement. 25. 0123 de la finition de notre cadre Wireframe: Maintenant, la seule chose que nous devons faire est d'ajouter la page d'article unique à notre filaire. À partir de tous mes codes que j'ai créés précédemment, je vais simplement sélectionner l'image, la légende, le titre et un aperçu du texte et la copier. Je sélectionne maintenant le cadre dans lequel je souhaite que l'article individuel soit affiché et nous allons le copier ici. Je vais l'arranger comme je le veux et je collerai mon texte ici. Je m'assurerai également d'ajuster l'en-tête en conséquence. Je vais revenir à ma page d'aperçu où je souhaite ajouter les filtres à l'en-tête. Au lieu de simplement agrandir l'en-tête, il est plus logique de créer une section séparée que je vais juste ancrer sur mon en-tête principal. Je vais créer un cadre dans lequel j'ajoute mes filtres, puis pour afficher le cadre actif, c' est-à-dire tous les articles, j'ajouterai simplement un trait pour mon filaire. Maintenant, l'avantage d' avoir cette séparation est que l'en-tête peut être un composant, puis j' ajoute simplement n'importe quel composant dessous que je veux étendre l'en-tête. Par exemple, mes jours de semaine que j' ai dans mon calendrier peuvent également être une pièce jointe. Je vais passer aux erreurs pour mon flux et m'assurer que mes articles sont également liés. Notez qu'il s'agit d'une version vraiment simplifiée d'un flux filaire ici, car nous nous concentrons vraiment sur l'apprentissage de Figma dans ce cours. Habituellement, vous ajouteriez beaucoup plus d'informations, comme l'interaction que ce sera, s'il s' agirait d'un clic, d'un balayage, ce qui s'est passé en cas d'erreur, quelles autres connexions pourraient se produire Là, que se passe-t-il si je remonte dans le temps et ainsi de suite ? Ça pourrait ressembler à ça. Assurez-vous également que notre page composant dans les styles comporte une section propre uniquement pour nos filaires et veillons à tout placer sur leur propre cadre. Si vous êtes alors dans le panneau des ressources, vous verrez comment il a été correctement trié pour vous. 26. 0124 Organiser notre fichier pour commencer la conception de l'interface utilisateur: Nous avons terminé nos filaires et nous commencerons à travailler sur la conception de l'interface utilisateur. Pour cela, je vais créer une nouvelle page que j' appellerai UI Design. Vous pouvez avoir une image filaire et une conception dans un seul fichier, mais pour les projets plus volumineux, vous pouvez également avoir deux fichiers distincts, c'est à vous de choisir. Si vous travaillez sur le forfait gratuit, sachez également que vous disposez d'une limite de fichiers que vous pouvez avoir, ainsi que de pages dans les fichiers. Vous pouvez également ajouter des icônes aux chapitres si vous le souhaitez. Sur un Mac, il suffit d'appuyer sur Commande de contrôle et sur la barre d'espace. Pour Windows, vous devez activer le clavier tactile, cliquer avec le bouton droit sur la barre des tâches Windows et cliquer sur le bouton Afficher le clavier tactile, puis sélectionner des émojis. J'ajouterai également une certaine structure à ma page d'aperçu Composants & Styles. Encore une fois, vous pourriez avoir tout cela dans des dossiers distincts, qui serait en fait une bonne pratique. Vous pouvez configurer cela à votre goût. J'ai généralement configuré une section pour la gestion des fichiers, donc j'ai des titres ici, des informations, comportements et des commentaires que je veux faire sur le fichier. J'aurai ensuite mes autres sections pour les filaires et plus tard ma conception d'interface utilisateur. J'aime aussi un système de feux pour montrer l'état de chaque élément. Toute information supplémentaire que j'aurai plus tard, comme des liens ou des membres de l'équipe, je pourrai également mettre plus tard dans le système. C'est ce à quoi ressemble mon organisation, mais n'hésitez pas à l' adapter à vos besoins. 27. 0125 de la taille des cadres: Une question courante lors de la configuration de dessins dans Figma est quelle taille de cadre dois-je utiliser ? y a généralement pas de taille de cadre erronée pour commencer votre conception dans Figma. Dans un monde parfait, vous devez de toute façon rendre votre design réactif et testé sur différentes tailles d'écran. Toutefois, vous devez utiliser la même taille principale pour tous les écrans que vous concevez, comme un point de départ initial et référence sur lesquels vous et le reste de l'équipe avez convenu. Plusieurs aspects peuvent vous amener à décider de la taille de l'écran. Premièrement, vous disposez de données valides, comme Google Analytics d'un site Web précédent, indiquant qu'il s'agit de la taille d'écran ou d'appareil la plus populaire parmi vos utilisateurs. Deuxièmement, vous commencez par la plus petite taille, car il est plus facile de monter à l'échelle que de réduire l'échelle. C'est une approche très populaire et cela a également beaucoup de sens car la plupart du temps, votre code sera également écrit de cette façon. C'est ce qu'on appelle la première approche mobile. Troisièmement, vous utilisez appareil ou la taille d'écran le plus populaire actuellement l'appareil ou la taille d'écran le plus populaire sur le marché. Par la présente, le marché pourrait être un marché mondial ou un marché cible, comme dans la démographie ou le pays. Vous pouvez rechercher ces numéros en ligne. Il existe une variété de pages qui vous fournissent ces statistiques. Quatrièmement, vous utilisez le dernier modèle sorti. Par exemple, si vous concevez une application iOS, vous devez utiliser la taille d'écran du dernier appareil Apple sur le marché. Figma les fournit généralement automatiquement dans le menu Cadres. Cela repose sur l'hypothèse que le marché va naturellement s'y développer, comme nous l'avons vu, par exemple, avec des écrans de téléphone de plus en plus grands au cours des dernières années. Bien sûr, vous continueriez à tester et à vous assurer que votre design fonctionne bien dans toutes les autres tailles. Cinq, cela peut être un peu étrange, mais parfois, surtout dans un petit projet indépendant, il peut être logique d'utiliser l'appareil que vous avez à portée de main et que vous utiliseriez pour la présentation et les tests Par exemple, le téléphone sur lequel vous utiliseriez pour afficher votre prototype. De toute évidence, il devrait s'agir d'une taille de marché standard et relativement à jour. Les cadres peuvent toujours être ajustés, mais il est agréable de commencer par le bon pied, il est donc préférable discuter avec votre équipe et vos développeurs pour vous assurer que vous êtes tous alignés. 28. 0126 de configurer des grilles dans Figma: Ajoutons une grille à notre cadre. Pour ajouter une grille, sélectionnez un cadre et cliquez sur l'icône Plus dans le propriétés du côté droit panneau des propriétés du côté droit sous Grille de mise en page. Votre grille aura toujours les mêmes distances que celles que vous avez définies dans votre nudging. Dans mon cas, il s'agit de huit, et par défaut, vous en avez peut-être 10 ici. La plupart du temps, nous n'aurons pas vraiment besoin d'une grille d' arrière-plan comme celle-ci, mais nous cherchons une grille de mise en page. Cliquez sur l'icône de grille et, dans la liste déroulante, choisissez Colonnes. Maintenant, nous pouvons définir notre grille. Avec count, vous pouvez ajuster le nombre de colonnes. La couleur et l'opacité ici ne sont pas pertinentes pour votre design, car nous l'activerons et l' éteindrons uniquement pour la mise en page. Ensuite, vous devez taper section. Le centre signifie que vous disposez d'un conteneur fixe contenant votre dessin composé de colonnes et de gouttières d'une largeur fixe. Lorsque vous redimensionnez, votre grille reste au milieu. L'autre paramètre dont vous aurez besoin est l'étirement. C'est celui que je recommande d'utiliser pour votre configuration mobile en général. La grille s'étendra jusqu'à la largeur de l'écran et les colonnes sont calculées automatiquement. Il peut encore ajouter un peu de gouttière et de marge extérieure. À gauche et à droite, ils peuvent être ignorés en toute sécurité pour l'instant. grilles sont un sujet important et complexe lorsqu'il s'agit traiter de la conception Web réactive. Cependant, pour la conception de notre application, nous allons simplement utiliser une grille comme conteneur principal et définir notre marge automatique. Vous pouvez toujours ajouter d'autres colonnes comme deux ou quatre pour diviser davantage votre écran si cela vous aide. Vous pouvez enregistrer la note en tant que style, tout comme les couleurs et la typographie. Dans les grilles de mise en page, cliquez sur l'icône de style, cliquez sur Plus et nommez votre grille. Vous pouvez désormais appliquer ce style à n'importe quel autre cadre. Si vous modifiez le style de votre grille, sera reflété dans chaque image sur laquelle elle est utilisée. Pour basculer la visibilité de votre grille, appuyez sur Control G. 29. 0127 de styles de couleurs et de conventions de Styles: Ajoutons les couleurs de notre conception d'interface utilisateur. En regardant mon cadre métallique, je veux que les boutons soient un système de feux de signalisation étendus. Je veux qu'ils soient rouges, oranges, bleus et verts. Je vais également ajouter un peu de gris foncé à mes textes et une couleur d' arrière-plan douce. Revenons dans notre section Composants et style et définissons certains styles de couleurs. Je vais d'abord définir les couleurs de mes humeurs. Je vais dessiner quatre cercles et les remplir de rouge, d' orange, de bleu et de vert. Vous pouvez choisir des couleurs soit en ajoutant un code hexadécimal, dans la vue d'ensemble des couleurs, soit en les sélectionnant à partir d'une image avec votre sélecteur de couleurs. Je vais ensuite définir mon nouveau choix de la même façon. J'aurai un gris foncé, presque noir et un plus clair, une base grisâtre clair, ce n'est que pour mon arrière-plan pour ajouter un peu plus dynamique et un blanc simple. Je vais maintenant les enregistrer en tant que styles et les nommer. Notez que je ne les nomme pas rouge, orange, bleu, etc., mais je les nommerai par leur fonction. Dans certains modèles, il peut s' agir d'une couleur de surbrillance. Dans ce cas, c'est l' ambiance à laquelle je fais référence, si triste, si belle et géniale. Pour mes couleurs d'arrière-plan et de texte, je vais les nommer neutres et ajouter une couleur, 800 700 200 et 0. Vous vous demandez peut-être pourquoi j'ai fait ça. En effet, si j'ai changé la couleur pendant le processus de conception, je n'ai pas besoin de renommer. Les chiffres sont là pour laisser suffisamment d'espace. Entre 200 et 700 par exemple, je pourrais ajouter beaucoup de nuances sans gâcher mon nom. Vous pouvez également utiliser 10,20 et 30. Essayez simplement d'éviter 1,2,3 car cela ne vous donne pas d'espace entre les deux. Si je clique sur l'arrière-plan du canevas, je peux maintenant voir tous mes nouveaux styles de couleurs. Cependant, je n'ai pas utilisé de convention de dénomination oblique avant pour créer une catégorie. Je peux toujours le faire ici. Si je sélectionne toutes les couleurs que je veux, regroupez-les, cela créera une section que je pourrai nommer. Je peux les regrouper plus loin dans ce groupe, et je peux également déplacer les couleurs entre les groupes. 30. 0128 Configurer un typescale: Pour notre conception, la topographie devra être un peu plus raffinée que celle du filaire. Il est vraiment important d'avoir une échelle de type définie pour créer une hiérarchie dans votre conception. Il existe différentes techniques pour aborder et y parvenir. Alors que je vais configurer une application iOS ici, je vais utiliser certains préréglages qu'Apple me fournit dans la conception de l'interface humaine. Sur iOS, nous pouvons utiliser ce qu'on appelle le type dynamique. Cela signifie que chacun de nos textiles correspondrait à un textile dynamique. Vous pouvez l'imaginer comme si votre style lié à cette balise. L'avantage est que, plus tard, l'utilisateur peut modifier la taille du texte par défaut et que tout s'adaptera automatiquement. Vous n'avez pas à vous soucier de cela dans votre conception. J'ai choisi quelques-uns des styles que je souhaite utiliser et copié toutes les informations de ma feuille de style Figma. Je vais maintenant ajouter un exemple de texte et le coiffer avec les paramètres donnés. Nous pourrions maintenant utiliser les polices système intégrées d'Apple. Vous pouvez les voir et les télécharger depuis le site Web du développeur Apple ou utiliser votre propre police personnalisée, c'est ce que je ferai. Une fois que j'aurai configuré tous les styles que je veux, je vais les nommer en fonction du nom de type dynamique que j'ai choisi, et nous les sauvegarderons en tant que Styles dans mon fichier Figma. Vous pouvez également configurer votre propre échelle de type si votre conception a besoin de plus de flexibilité. Dans tous les cas, n'oubliez pas de parler à vos développeurs s'il existe des exigences définies ou s'ils utilisent un système spécifique. Si vous concevez un site Web réactif, vous devez configurer une échelle de type réactive en fonction de vos points d'arrêt. Vous commencerez par une taille de base pour votre version mobile, puis, pour chaque point d'arrêt, si nécessaire, adapter la topographie. topographie réactive pour le Web est un sujet assez avancé et plus complexe et il existe un nouveau cours d'apprentissage distinct à ce sujet. Dans cet exercice, nous ne créons pas de site Web, mais d'une application. Allons avec nos tailles iOS. Au fait, j'ai évidemment préparé tout cela à l'avance. Dans un projet nouveau et en cours d'exécution, j'essaie généralement d'abord différentes tailles de police, wades, couleurs, etc., dans mon exemple de conception, et une fois que je l'aime, j'ai configuré tous les styles. Souvent, je les change encore un peu pendant le processus. Ne vous inquiétez pas, ça va prendre un peu, et ça va être désordonné au début. C'est tout à fait normal. Tout d'abord, la créativité, puis la structure. 31. 0129 images dans Figma: Lorsque vous utilisez des images dans Figma, il suffit généralement de les utiliser dans votre conception. Il n'est pas nécessaire de configurer une section de style propre pour les images. Cependant, j'aime configurer une feuille qui décrit le style général de l'image ainsi que les dimensions que j'utilise généralement. Il existe plusieurs façons d' ajouter une image à votre fichier. Vous pouvez importer une image via le menu ou utiliser le raccourci Maj Command ou Windows Control et K. Vous pouvez également importer plusieurs images. Sélectionnez les images et vous verrez les images attachées à votre curseur avec une petite bulle rouge indiquant la quantité de l'importation, ainsi qu'un aperçu de la première image à placer. Vous pouvez les déposer sur la toile. Vous pouvez cliquer et dessiner pour les ajouter dans une taille spécifique ou les déposer directement dans n'importe quelle forme donnée. Vous pouvez également simplement glisser-déposer des images dans votre conception ou les copier et les coller. Figma prend en charge les images statiques telles que les JPEG et les PNG, ainsi que les GIF animés. Vous ne verrez pas l'animation de votre GIF dans votre mode de création, mais elle sera affichée plus tard en mode présentation. Une fois que vous avez vos images dans Figma, vous pouvez les modifier à l'aide d'un outil de retouche photo. Il s'agit toutefois d' une modification plus rapide comme l'exposition et le contraste. Il ne s'agit pas d'un outil de retouche photo comme Photoshop. Vous pouvez également choisir le comportement de l'image à l'intérieur de la forme donnée. Par défaut, les photos remplissent n'importe quelle forme donnée. Cela signifie qu'il s'étendra sur toute la largeur. Le choix de l'ajustement vous permettra de voir l'image entière. Cela peut cependant entraîner des espaces vides. Avec le recadrage, vous pouvez couper la zone visible selon vos besoins et choisir la partie de l' image affichée. Tile va créer ce que vous l'avez deviné, une tuile. C'est plutôt pour les motifs. En passant, vous pouvez également enregistrer des images sous forme de style de remplissage ou de contour, comme vos couleurs. 32. 0130 mises à l'écart avec des contraintes: Nous voulons que notre design soit flexible et réactif pour s'adapter aux différentes tailles d'écran. C'est là que les contraintes entrent en jeu. Voyons comment ils fonctionnent. Je souhaite configurer la conception de l'interface utilisateur pour mon écran d'accueil et j'ai copié sur le filaire comme référence. Quand je le redimensionne, il ne se passe pas grand-chose. Configurons notre conception d'interface utilisateur et commençons par une barre d'état car nous voulons que cela soit aussi réaliste que possible. Je vais passer à la section de la communauté et rechercher la barre d'état iOS. Je vais en prendre un et le copier dans mon dossier. Maintenant, remarquez que lorsque je redimensionne cette barre, tout reste à sa place. Lorsque je clique sur l'heure, vous pouvez voir que de petits traits bleus sont attachés à gauche et en haut et dans le panneau Propriétés, nous pouvons voir les contraintes définies en haut et à gauche. Si nous cliquons sur les autres éléments de l'autre côté, nous pouvons voir qu'il en va de même à droite. Vous pouvez modifier ce paramètre en cliquant sur un diagramme ou via la liste déroulante. Si je prenais la batterie, que je la déplace au centre et que je la place au centre, elle resterait juste au milieu. Si je le mettais à l'échelle, il s'étirerait avec le cadre. Cependant, nous voulons que cela réponde à notre cadre parent, le cadre représentant notre écran. Ce n'est pas encore le cas. Ce que nous devons faire, c'est prendre le cadre de la barre d'état lui-même et le mettre à l'échelle. Si nous le positionnons maintenant dans le cadre et que nous redimensionnons le cadre, nous pouvons voir qu' il s'adapte parfaitement. Il y a un autre réglage appelé gauche et droit, qui est pratique. La différence entre la gauche et droite et l'échelle est la suivante. Si je mets un élément à l'échelle, il sera redimensionné en pourcentage des dimensions des cadres. Si je mets le même élément maintenant à gauche et à droite, il maintient la taille du calque en position par rapport aux deux côtés du cadre. C'est beaucoup plus pratique si vous souhaitez avoir une marge fixe ou lier un élément à une largeur de colonne de votre grille. Je vais dessiner un autre cadre pour l'en-tête, et je les copierai dans mes liens et je les remplacerai par mes nouveaux textes et styles de couleurs. Permettez-moi également de donner une légère teinte au fond. Je vais maintenant définir des contraintes pour l'enfant, ainsi que des éléments apparents. Je vais aussi ajouter un conteneur simple comme pied de page. Je veux m'en tenir au fond. Je vais utiliser un petit tour maintenant. À partir du panneau Propriétés sous les cadres, un peu caché, je peux choisir n'importe quelle autre taille de cadre pour que je saute sur le plus petit iPhone disponible en ce moment, qui est le SE et je redimensionnerai l'ensemble du cadre. De cette façon, je peux vérifier de manière réaliste n'importe quelle autre taille d'appareil. Je vais maintenant les transformer en composants et les enregistrer dans ma page de composants. Lorsque je les copie, je devrai peut-être réajuster le paramètre du conteneur parent tel qu'il est défini dans un nouveau cadre. Notez que pour que le panneau des contraintes s'affiche, vous devez disposer d'un cadre parent. La mise en page automatique doit également être placée dans un groupe parent pour fonctionner. 33. 0131 opérations booléennes dans Figma: Je vais maintenant créer des boutons d'ambiance de notre design. Je vais le faire à partir de zéro car je veux y faire face un peu différemment. Je commence par un cercle et, à partir de mes styles dans mon menu Remplissage, j'ai choisi une couleur pour triste. Maintenant, je veux plus de profondeur. Je vais dupliquer le cercle juste au-dessus du cercle, et j'appellerai cette ombre de calque. Je vais changer la couleur par une couleur sombre et changer l'opacité à 10. N'oubliez pas que vous pouvez simplement utiliser les chiffres de votre clavier. Je vais maintenant le dupliquer à nouveau et le déplacer un peu, donc j'ai un chevauchement. Maintenant, je vais sélectionner les deux calques d'ombre et dans le menu Haut, je vais sélectionner Soustraire la sélection. Ces opérations sont appelées opérations booléennes. Vous pouvez choisir entre une union pour unir des formes, soustraire des formes les unes des autres, croiser, ce qui ne vous laisserait que les parties superposées, et exclure, ce qui serait l'inverse de se croiser. Maintenant, je n'ai plus qu' à dessiner le visage. Je vais dessiner l' œil gauche avec deux cercles. Je vais les regrouper et appeler ça l'œil gauche. Je vais maintenant le dupliquer et créer un second œil, et je l'appellerai droit. Maintenant, je vais ajouter une bouche. Au lieu de le dessiner, je vais simplement ajouter un cercle, le remplir d'une couleur foncée pour mes styles, puis appuyer sur « Maj X », qui est le raccourci pour inverser les couleurs. Maintenant, je double-clique dessus, ce qui m'amène en mode édition, et je vais supprimer un des points d'ancrage pour créer ma bouche triste. Je peux maintenant arrondir les bords, ajuster le trait, et je vais le nommer bouche. Notre visage est prêt. Sélectionnez maintenant le visage entier, groupez-le et nommez-le. Je vais maintenant le dupliquer trois fois et renommer les copies. Je vais maintenant m'adapter à la couleur et faces des différents boutons. Mon jaune, je vais juste changer la bouche en un accident vasculaire cérébral et déplacer un peu les yeux autour. Le bleu, tordant la bouche, puis réarrangeant à nouveau le visage. Mon vert, je suis en fait, connecte les chemins pour que je puisse créer une bouche rieuse, puis m'ajuster. Une fois que j'ai terminé, je sélectionne tous les boutons et je les transforme en groupe. Maintenant, je vais simplement copier mon texte et l' ajuster avec mes nouvelles couleurs et styles. Je vais créer un autre groupe avec mon groupe de boutons et mon texte et l'appeler contenu. Maintenant, je n'ai plus qu'à ajouter mes contraintes et à m' assurer qu'il fonctionne bien sur d'autres tailles. 34. 0132 de composants et de variantes imbriquées: Je vais maintenant créer une barre d'onglets et vous présenter un grand concept appelé variance. Cette fois, je vais accéder directement à ma section Composants. J'ai déjà créé un cadre pour mon pied de page et je souhaite maintenant ajouter les icônes. J'ai copié sur une maison, un calendrier et un livre à partir d'un jeu d'icônes. Pour obtenir des icônes, vous pouvez soit les dessiner vous-même, comme nous venons de le faire avec nos boutons faciaux, soit utiliser des icônes prêtes à l'emploi. Si vous sautez dans la section Communauté Figma, vous en trouverez beaucoup. Essayez de chercher quelque chose comme l'icône Material Design, qui est des bibliothèques prêtes à l'emploi ou allez-y et achetez un bon jeu d'icônes, cela vaut vraiment la peine de votre argent. Personnellement, j'aime bien utiliser celui-ci. Notez que les icônes sont des vecteurs, ce qui signifie qu'elles peuvent être mises à l'échelle autant que vous le souhaitez sans perdre de qualité. Il est très important que vos icônes soient au format vectoriel et non en images. J'ai nommé mes icônes Icon/Maison/Inactive puis Icon/Calendrier/Inactive dans la même chose pour le blog. Je vais maintenant sélectionner ces icônes, faire une copie et ajuster la couleur à une version active. Je m' assurerai ensuite de changer l' inactif en actif dans le nom. Je vais maintenant tous les sélectionner et les transformer en composants. Assurez-vous que chaque icône est son propre composant. C'est vraiment important, sinon cela ne fonctionnera pas. Maintenant, sélectionnez-les tous et choisissez de les combiner en tant que variance dans le panneau Propriétés. Vous verrez maintenant une petite ligne violette autour eux indiquant qu'ils font partie d'un ensemble de composants. Si nous accédons au panneau Actifs, nous pouvons voir qu' une seule icône a été stockée. Sortons-le en tant qu'instance et placez-le dans notre barre d'onglets. Maintenant, dupliquons-le et positionnons-le comme nous le voulions. Dans la partie droite du panneau Propriétés, vous pouvez désormais voir des listes déroulantes pour votre variance, appelées Propriété 1 et Propriété 2. Avec la propriété 1, je peux modifier le type d'icône. Propriété 2, permettez-moi de choisir entre inactif et actif. Notez comment cela a été créé en raison de la convention de dénomination des barres obliques que nous avons utilisée. Le prénom crée le nom du groupe. Ensuite, nous devons à la propriété 1, où nous avons noté le type d'icône. Ensuite, le troisième est l'État, dans notre cas, actif et inactif. En utilisant la convention de dénomination barre oblique, vous pouvez créer autant de propriétés que nécessaire. Si je sélectionne le groupe de variantes, je peux avoir un aperçu des noms et distribution et je peux également modifier les noms ici. Vous pouvez également ajouter des variantes et des propriétés à un groupe existant à partir de cet emplacement. Vous pouvez également modifier tous ces éléments dans le panneau Calques. Mais regardez, le nom de votre calque s'est automatiquement adapté et a été modifié. Ne changez pas cela car c'est vraiment important pour que cela fonctionne. Il est cependant beaucoup plus fastidieux d'adapter votre variance ici que dans votre panneau de variance. Maintenant, je vais seulement ajouter mes contraintes à gauche, à droite et au centre dans ce cas, et je vais revenir dans mon design. génial, c'est maintenant que j'ai un conique de composants avec des composants imbriqués à l'intérieur qui sont de la variance. Je peux copier la même variante sur tous mes différents écrans. Cependant, je peux simplement passer aux boutons actifs pour chaque écran selon mes besoins. Ce sera également un énorme avantage lorsque vous commencerez à animer vos créations ultérieurement. 35. 0133 sur la création de la barre de calendrier: Donnons plus de vie au calendrier dans notre design et utilisons nos nouveaux styles d'ambiance comme couleur d'arrière-plan. Je vais vous donner un petit aperçu de ce que je cherche. Je vais d'abord configurer les jours de la semaine, donc je dessine une zone de texte pleine largeur et j'ajoute du texte. Je vais le coiffer et le diviser par 7 pour obtenir un jour de la semaine. Je vais en faire un composant et je le stockerai à côté de mon cadre pour l' instant pendant que je travaille là-dessus. Maintenant, je vais copier les instances et configurer toute la semaine. Nous allons le copier et le renommer. Maintenant, je vais dessiner un cadre pour les dates, et je vais le diviser par 7 et lui donner une hauteur de 45. Ajoutons notre date. Je ne vais pas encore en faire un composant car je veux d'abord créer ma variance. Je vais mettre en place ce qui suit. abord, je vais configurer une version par défaut. Ensuite, j'en ajoute un avec le cercle. C'est si seulement un jour est sélectionné. Je vais colorer le cercle avec la couleur de mon humeur, et maintenant, je vais créer trois autres variantes. C'est le cas si plusieurs données sont sélectionnées. Le premier, le début garde le cercle et aura un petit rectangle pour l'arrière-plan. Le second ne contiendra que ce rectangle, et le dernier aura à nouveau un cercle et un rectangle, mais pointera maintenant vers l'autre direction comme extrémité de fermeture. Nous devons maintenant les nommer, et c'est important car ici nous devons utiliser la convention de dénomination correcte afin de créer notre jeu de variances. Nous allons les nommer, date, c'est la même chose pour tous car c'est le nom du groupe. Ensuite, nous allons avoir une barre oblique, mettre de l'humeur, ici nous allons dire super, triste ou ainsi de suite, quelles que soient les couleurs. Ensuite, nous allons avoir une barre oblique et mettre la position, donc ce sera soit aucun, un jour, un début, un milieu ou une fin. Allons tous les nommer. Une fois que j'ai fini de nommer, je ne copierai que le set avec les couleurs et je vais en faire un pour chaque humeur. Je les sélectionne tous et parmi les composants, je vais maintenant choisir Create Component Set. C'est exactement la même chose que la création variance à partir du panneau Propriétés du côté droit. Maintenant, je n'ai pas changé le nom de l'ambiance, qui est ma propriété 1. Ce que je vais faire, c'est que je vais sélectionner la variance pour chaque humeur et passer au panneau Propriétés du côté droit pour ma variance et chaque année, je vais ajuster les noms et les humeurs plus anciens. Essayons ça. Maintenant, à partir de mon panneau d'actifs, je vais retirer mon volet rendez-vous et je vais configurer ma semaine. Si je choisis maintenant l'une de ces variantes, je peux les coiffer joliment à l'aide de mon panneau Composants. Pour ma journée actuelle, je veux simplement ajouter un cercle avec un contour. Ce que je vais faire, c'est revenir dans ma variante par défaut, et je vais ajouter un cercle, mais je vais le rendre invisible. Maintenant, dans ma variante, je peux l'écraser et simplement ajouter un contour. 36. 0134 de plus à plus de contraintes Créer un calendrier réactif: instant, notre écran est génial, mais si je change la taille, le calendrier est collé en haut à gauche, car il s'agit du paramètre par défaut. Ajoutons quelques contraintes et rendons-le réactif. Nos jours de semaine sont faciles. Il suffit de choisir l'ensemble du groupe et de le régler à l'échelle horizontale. Mais si nous faisons la même chose à nos dates, cela ne sera pas juste. Maintenant, nous voulons que nos chiffres et nos cercles soient placés au centre en hauteur et en largeur. Ils sont fixes, et seul le fond de couleur est celui que nous voulons mettre à l'échelle. Je vais sélectionner toutes mes variantes et les mettre au centre dans les deux sens. Ensuite, je ne choisis que la couleur d' arrière-plan. Maintenez la touche « Maj » pour que vous puissiez rejoindre plusieurs sélections, et je les mettrai à l'échelle. Revenons maintenant à notre cadre et au groupe qui contient les variantes et veillons à ce qu'il soit mis à l'échelle. Maintenant, c'est exactement ce que nous recherchons. Créons maintenant notre cadre de calendrier. Je vais copier sur ma filaire comme référence. Je vais dupliquer le cadre d'accueil et modifier un arrière-plan pour mes jours de semaine, car ils seront collés à l'en-tête. Je vais me débarrasser de mes boutons Mood et assurer d'ajuster l'icône de la barre d'onglets. J'utiliserai ma semaine calendaire pour créer un mois, simplement en le dupliquant. En utilisant des variantes, je peux créer un aperçu des humeurs passées et tout changer à mon goût en un rien de temps. Vous avez compris l'idée. Je vais avancer un peu plus vite. J'ai ajouté le nom du mois et j'ai tout regroupé. J'ai maintenant un calendrier personnalisable entièrement réactif. J'ai fait un peu plus ici et j'ai mis mon calendrier sur son propre cadre, et ce cadre j'ai mis à l'échelle et je l'ai fixé au bas. De cette façon, le mois actuel et le dernier mois d' août seront toujours visibles lorsque je redimensionne. Si je saute sur le plus petit écran, vous pouvez voir que les cercles s'adaptent parfaitement à une rangée. C'est parce que j'ai défini la taille fixe sur 45, j'ai calculée à partir de la plus petite taille d'écran à l'avance. C'est ainsi que j'ai choisi de configurer mon calendrier. Vous pouvez opter pour un comportement différent. Par exemple, il peut être fixé au milieu. Ou vous pouvez même créer un résultat similaire avec la mise en page automatique. Maintenant, n'envoyons nos variantes que sur notre page de composants et de style, et c'est fini. 37. 0135 de l'évolution dans Figma Construire les pages d'humeur: Nous voulons montrer ce qui se passe lorsque j'appuie sur chacun des boutons d'ambiance, nous avons donc besoin d' une page pour chaque action. Je vais donc dupliquer quatre fois mon écran d'accueil et je veux rendre cela un peu plus amusant que dans mes filaires. Je veux qu'un seul des boutons soit vraiment grand et qu'il soit mis à l'échelle. Je peux dissocier le contenu avec Shift, Command et G. Je vais donc me débarrasser des boutons dont je n'ai plus besoin. Maintenant, nous prenons le bouton d' ambiance qui reste et nous voulons le rendre vraiment grand. Si je voulais simplement l'agrandir, cela ne mettrait pas à l'échelle les traits et le contenu. J'utiliserai donc l'outil d' échelle que je peux simplement sélectionner dans le menu ou simplement appuyer sur K. Je peux maintenant agrandir le bouton à la taille souhaitée et le repositionner. Pour que le menu reste visible devant le bouton Face, vous pouvez soit le déplacer en haut dans le panneau Calques, soit simplement le copier , le supprimer et le coller sur le cadre. Assurez-vous simplement qu' il se trouve sur le cadre. Pour quitter le mode échelle, il suffit d'appuyer sur Echap. Super. Faisons de même avec nos autres boutons et mettez-les à l'échelle et vous verrez que notre design commence vraiment à prendre vie sans trop d'efforts. Maintenant, je vais juste modifier un texte chacun de mes cadres en fonction de l'ambiance et je pense que je vais juste effectuer quelques derniers ajustements de positionnement. Laissez-moi voir. Oui, je pense que c'est comme ça que j' aime ça et ce sont mes boutons d'humeur qui sont faits. 38. 0136 de contenu d'écrasement à la création des pages de magazine: Maintenant, tout ce qui manque, c'est mon bloc sur la vue d'ensemble du magazine et ma page détaillée. Comme j'ai déjà configuré mise en page automatique de mon contenu pour mon filaire, je vais simplement les copier, puis revenir sur ma page de conception. Ici, je vais créer un nouveau cadre et j'adapterai un en-tête. Pour l'instant, je n'ajouterai qu' un bloc en gros titre et je m'en débarrasserai aujourd'hui. Assurez-vous également de définir l'icône du calendrier sur active dans notre barre d'onglets. Maintenant, je vais coller la carte que j'ai copiée plus tôt de mon filaire dans mon nouveau cadre design. Comme il s'agit d'un composant filaire , veillez à le détacher. Je vais maintenant apporter mes modifications. Je vais modifier la légende, le titre et le corps du texte mes styles prédéfinis en topographie et en couleur. Je vais aussi me débarrasser de l' accident vasculaire cérébral autour de ma carte. Tout le rembourrage me semble bien. Maintenant, je vais prendre cette carte et en faire un nouveau composant de conception. Je garderai une instance ici et j'enverrai le composant maître vers la page de mes styles et de mes composants. Super. Maintenant, je peux dupliquer l'instance, et je vais refaire de cela une mise en page automatique, imbriquée dans des cartes de mise en page automatique à l'intérieur. Maintenant, je peux simplement copier et coller les cartes, mais je ne les verrai pas car elles commencent à être en dehors du cadre. Je vais désactiver le champ de contenu du clip dans le menu Cadre situé à droite. Je suis maintenant en mesure de les modifier davantage. Je peux maintenant adapter les gros titres de mes cartes. Parce que j'ai configuré la mise en page automatique, tout va bien se trier. Maintenant, la seule chose qui manque, ce sont nos images. Je vais importer plusieurs images en appuyant sur Maj Command et K. Maintenant, juste pour les déposer sur le terrain. Vous pouvez également sélectionner Forme et, via le menu du film, télécharger des images une par une. Je vais désactiver le contenu du clip et m'assurer que la barre d'onglets est au-dessus de mes cartes. Une petite note de côté, n'oubliez pas que nous avons placé des images dans nos styles avec lesquelles travailler. Si vous souhaitez les utiliser, vous devez d'abord les exporter, puis vous pourrez les saisir à nouveau comme je viens de le faire. Pour exporter, il suffit de sélectionner toutes les images, d' appuyer sur Exporter dans le panneau Propriétés du côté droit, puis de les exporter au format JPEG ou, si vous avez des transparences, des fichiers PNG. Pour vous assurer qu' ils sont beaux, sur les écrans haute résolution, veillez à choisir 2X ou même 3X. Cela signifie qu'ils vont être exportés en double ou triple de la taille que vous voyez ici en ce moment. Cela est possible car l'original j'ai téléchargé est également plus grand, et Figma le stocke. Maintenant, je vais faire de même avec ma page d' article détaillée. Je vais configurer un cadre, copier le contenu de mon filaire, coller ici et ajuster le style ainsi que l'image. Assurez-vous, comme d'habitude, d' utiliser nos styles prédéfinis, puis pour les images, je télécharge simplement une de mes images avant et j'ajoute le menu, et c'est fini. 39. Mode de présentation 0137 avec des éléments défilables et fixes: La vue de présentation nous permettra de prévisualiser nos designs. Ici, vous verrez également des gifs animés, une action. Sélectionnez un cadre et appuyez sur le bouton de lecture dans le coin supérieur droit. Notez que cela ouvre un onglet séparé. Vous pouvez passer d' un design à l'autre et passer en mode aperçu. Vous pouvez également ajouter un cadre pour appareil. Ouvrez simplement un onglet Prototype et choisissez de définir la taille de l'écran sur laquelle vous travaillez. Assurez-vous que la taille de l'appareil et la taille du cadre que vous avez définie sont identiques. C'est vraiment important. Vous pouvez passer d'un cadre à l'autre à l'aide des touches fléchées de votre clavier. Maintenant, cela convient parfaitement à tous mes cadres qui s'adaptent exactement à une taille d'écran donnée. Mais certains d'entre eux ont un contenu défilant, comme l'aperçu de mon article sur la page de détail. Et ce contenu est désormais masqué. Revenons à nos designs et sélectionnons un cadre dont le contenu doit pouvoir être défilé sélectionnons un cadre dont . Sur le côté droit, le menu du panneau des propriétés. Nous choisissons maintenant, parmi le défilement par débordement, l'option défilement vertical. Pour en revenir à notre prototype, nous pouvons constater que cela fonctionne très bien. Cependant, maintenant tout rampe. Dans votre fichier de conception. Sélectionnez les éléments que vous souhaitez garder faux. Et dans mon cas, il s'agit des barres supérieures et de la barre d'onglets inférieure. Et puis passez au prototype. Et sous Position, choisissez Fixe, restez en place. Vous pouvez voir que maintenant tout est corrigé sauf mon contenu défilable. Via le même menu. Vous pouvez également choisir que les éléments ne deviennent collants qu'une fois qu'ils atteignent le haut lors du défilement. Donc, si nous faisions cela, vous pouvez voir que maintenant, si nous faisons défiler la barre inférieure, quel défilement et restons fixés vers le haut. Nous ne voulons donc rien dans ce cas, mais c'est très pratique pour d'autres configurations. 40. 0138 Figma Mirror - Aperçu sur votre appareil: Vous pouvez également prévisualiser vos prototypes mobiles sur votre téléphone physique, ce que je recommande vivement. Accédez à Apple ou Google Play Store et recherchez Figma Mirror, puis installez l' application gratuite sur votre appareil. Il suffit maintenant d'ouvrir l'application et connecter avec un nom d'utilisateur et un mot de passe. Dans l'application, vous verrez un aperçu de tous vos designs. Cela peut également être vide si vous venez de commencer. Cliquez sur « Miroir » et il vous demandera de sélectionner le cadre ou les composants. Dans votre fichier Figma réel, il suffit de cliquer sur n'importe quel cadre. Le cadre sélectionné sera ensuite affiché sur votre appareil. Cela fonctionne en temps réel pour que vous puissiez passer à travers différentes images, mais aussi si vous souhaitez apporter des modifications à votre conception, cela se refléterait directement sur votre écran. Mirror utilise toujours 100 % de la largeur, c' est pourquoi il est si important que vous vérifiiez que la taille du cadre correspond à l'appareil réel. Sinon, votre conception sera évolutive et ne sera pas fiable. 41. 0139 de partage des fichiers avec les concepteurs et les développeurs: Figma est particulièrement incroyable lorsqu'il s'agit de partager des fichiers et de travailler avec plusieurs membres de l'équipe. Vous pouvez soit inviter des personnes à participer à l'ensemble de votre projet, soit partager un seul fichier avec d'autres personnes. Lors du partage, vous pouvez choisir entre inviter par e-mail ou via un lien. Vous pouvez accorder des droits d'affichage ou de modification. Les droits de modification donneront essentiellement à la personne que vous invitez le même accès et la même vue du fichier que vous possédez. Si vous souhaitez inviter un autre concepteur ou rédacteur à travailler sur un design, vous devez choisir Modifier. Les droits d'affichage sont plus limités. Cependant, ce n'est pas une mauvaise chose. Il est en fait idéal pour le développement de transfert ou le partage conceptions avec des non-concepteurs afin d'éviter des changements accablants et accidentels. Vous pouvez accorder autant d'autorisations d' affichage que vous le souhaitez sur vos fichiers sans frais supplémentaires. Créons un lien de vue et entrons uniquement avec des droits d' affichage. Nous ne voyons que des outils pour commenter et nous pouvons nous déplacer mais pas travailler dans le fichier. Les utilisateurs invités en mode Affichage peuvent toujours voir toutes les pages et toutes les couches. Ils peuvent modifier la vue de la présentation. Si vous configurez un prototype, ils peuvent également y accéder. En mode Affichage, vous pouvez également voir les grilles et les règles que vous avez peut-être définies et vous pouvez également appuyer sur la touche Alt pour voir n'importe quelle distance par rapport à un objet donné. Au lieu du panneau des propriétés, vous verrez apparaître le panneau d'inspection qui inclut également la fonction d'exportation. C'est essentiel pour les développeurs. Un résumé de vos styles s'affiche également lorsque vous cliquez sur le fond gris du Canevas. Si vous travaillez simultanément sur un fichier, vous verrez le curseur de l' autre utilisateur et dans le coin supérieur droit de votre écran, vous pouvez voir toutes les personnes qui accèdent actuellement à ce fichier. Si vous cliquez sur l'icône, vous pouvez suivre leur mouvement et leur affichage à l'écran. 42. 0140 Figma de 0140 d'inspection: Examinons de plus près le panneau Inspecter. Le panneau Inspect nous montre tous les détails d' un élément et est essentiel à la communication avec le développement. Les développeurs peuvent choisir s'ils souhaitent générer une décision CSS s'ils devaient développer un site Web ou pour des applications sous iOS ou Android, vous n'avez pas à vous en soucier. Ils peuvent le choisir eux-mêmes. Lorsque vous cliquez sur n'importe quel élément, toutes les informations sont affichées dans le panneau Inspecter. Notez également que tous les styles sont notés en tant que commentaires, ainsi que les noms de vos groupes et de vos calques. En mode Affichage, toutes les distances seront affichées automatiquement sans même avoir à appuyer sur Alt. Vous pouvez également activer vos grilles. En passant, l'onglet Inspecter est également toujours disponible dans votre mode d'édition, sorte que vous pouvez y jeter un coup d'œil à tout moment. 43. 0141 Exporter des actifs: Toute personne ayant accès à votre fichier disposant d'une autorisation d'affichage ou de modification peut également exporter des ressources. Ceci est vraiment important pour garantir des images de bonne qualité dans différentes résolutions d'écran lors de la programmation. Cliquez sur une image et accédez à votre panneau Exporter. En mode Affichage, il s'agit d'un onglet propre. En mode édition, il se trouve à la fin du panneau Propriétés. Cliquez sur le signe Plus et vous obtiendrez votre première exportation à 1x, ce qui correspond à la taille actuelle dans laquelle nous sommes en train de concevoir. Par défaut, vous obtenez un PNG, mais vous pouvez le modifier en JPEG ou SVG. Le format JPEG sera toujours votre priorité. Il s'agit d'une image standard. Si votre image est transparente, optez pour un PNG. Si vous exportez une icône, un logo ou un dessin semblable à un vecteur , utilisez SVG. Il y a aussi l'option pour PDF, mais c'est plus important si vous souhaitez exporter, disons un écran pour une présentation ou quelque chose du genre, ce n' est rien dont vous avez besoin pour la programmation. Maintenant, cliquez à nouveau sur le signe Plus pour ajouter une deuxième exportation. Notez comment il va le définir à 2x, puis ajouter un suffixe de 2x. Cela signifie qu'il représente le double de la taille de votre design actuel, ce qui est vraiment important pour garantir une image nette sur les écrans Retina. Il se peut que vous ayez besoin d'une résolution plus élevée ou différente. Renseignez-vous auprès de vos développeurs. Une fois que vous les avez tous configurés, appuyez sur « Exporter ». Un petit conseil à l'avance. Si vous nommez vos images avec une barre oblique comme les images ici, la barre oblique , le coucher du soleil, le premier sera un dossier créé et le dernier sera le nom de l'image à l'intérieur de ce dossier. dossier. Vous pouvez également créer des sous-dossiers comme celui-ci. C'est vraiment génial et vous évitera beaucoup de glisser-déposer. Que vous exportiez toutes les images ou que cela soit fait par votre équipe de développement, vous pouvez en discuter directement au sein de votre équipe. 44. 0142 Bibliothèque d'équipe Figma: Lorsque nous travaillons en équipe, nous voulons que tous les membres de l'équipe aient accès aux mêmes styles et composants afin de maintenir la cohérence de notre conception. Nous pouvons publier nos styles et nos composants dans la bibliothèque dite Team Library. Les styles de publication sont actuellement disponibles pour les forfaits gratuits, mais pour publier des composants, vous devez disposer d'un plan de page. Ici, j'ai quelques styles et composants, publions-les dans la bibliothèque. Accédez à l'onglet Actifs et, sous la droite, vous verrez une icône de livre, qui ouvrira la fenêtre Bibliothèque d' équipes. Si vous avez déjà d'autres bibliothèques partagées sur votre compte, vous les verrez ici et vous pouvez les activer avec un tockle. En haut, vous verrez le fichier actuel dans lequel vous vous trouvez et le bouton Publier s'affiche. Si le bouton Publier ne s'affiche pas, assurez-vous d'abord de créer certains styles de composants. Appuyez sur Publier, et une nouvelle fenêtre s'ouvre, ce qui vous invite à ajouter une description. C'est très pratique si vous apportez des modifications ultérieurement, alors vous devriez noter ce que vous publiez et pourquoi vous publiez. Figma, enregistrera une version pour vous après la publication du fichier , appelée contrôle de version, ce qui signifie que vous pouvez revenir en arrière en cas d'erreur. Il est conseillé de publier plus souvent en petits morceaux et d' ajouter toujours une description très solide. Vous trouverez ci-dessous un résumé des composants et des styles nouveaux ou qui ont été modifiés et qui seront publiés. Vous pouvez les sélectionner tous ou simplement quelques-uns. Lorsque vous êtes prêt, appuyez sur Publier. Bien joué. Vous venez de créer votre première bibliothèque d'équipes. Ouvrons un nouveau fichier vide et nommons le site Web. n'y a pas de styles, ni de composants ici jusqu'à présent. Revenez maintenant à l'onglet Actifs et ouvrez à nouveau la bibliothèque. Vous verrez une liste de tous les projets et fichiers qui ont publié des bibliothèques. Activez le fichier que vous venez de créer et vous verrez tous les styles et composants disponibles. Vous pouvez également activer plusieurs bibliothèques. Certaines personnes aiment conserver, par exemple, leur typographie dans une seule bibliothèque, leurs couleurs dans une seule bibliothèque. Mais c'est vraiment à vous et à votre équipe de décider de la façon dont vous souhaitez organiser cela. Dès que vous créez un nouveau style ou un nouveau composant, vous serez invité à mettre à jour la bibliothèque. Une fois cela fait, le reste de l'équipe recevra également une invite à mettre à jour sa bibliothèque et à extraire les nouvelles modifications. Une fois qu'ils ont cliqué sur Mettre à jour, ils verront les modifications apportées aux cadres et peuvent décider de mettre à jour la version la plus récente ou non. 45. 0143 Configurer une miniature: Lorsque vous partagez des fichiers, il est très intéressant d'avoir une orientation à première vue sur ce que contiennent les fichiers. miniatures sont parfaites pour cela. Considérez-les comme une couverture de livre. Par défaut, Figma transforme la première page de votre création en miniature, mais vous pouvez également définir la vôtre. Les dimensions des vignettes sont de 1 920 par 960. J'ai configuré un cadre avec ces dimensions et j'ai ajouté des informations sur mon application. J'ai aussi fait une belle maquette. Par la présente, j'ai simplement obtenu un iPhone de la section communauté. Assurez-vous d'en choisir un qui se trouve dans les calques, puis vous trouverez généralement l'un des calques contenant une image que vous pouvez remplacer par la vôtre. Vous ne pouvez pas le remplacer par un cadre réel. Il faut qu'il s'agisse d'une image. J'ai simplement exporté mes images au format JPEG, puis je les ai retéléchargées sous forme d'image dans l'écran de mon iPhone. Comme vous pouvez le constater, j'ai également créé un écran de démarrage en assemblant simplement mes phases d'humeur, et j'ai ajouté un logo pour donner plus de vie à l'application. Vous pouvez à peu près inclure tout ce que vous voulez sur votre miniature. C'est également un excellent endroit pour ajouter d' autres informations telles que des liens vers des polices ou des bibliothèques externes. très facile de définir cette application en tant que vignette. Il suffit de cliquer avec le bouton droit de la souris sur le cadre et de choisir « Définir une vignette ». Maintenant que nous revenons à la page d'accueil, nous pouvons voir que notre vignette est définie comme titre, et cela sera également visible tous ceux qui travaillent sur votre fichier. 46. MISE À JOUR : mise en page automatique: La nouvelle mise en page automatique de Figma a été mise à jour et annoncée lors du conflit en mai 2022. Certaines choses restent les mêmes, certaines foetus et toutes nouvelles et excitantes, et d'autres choses viennent de bouger et sont accompagnées de petits détails à ne pas manquer. Donnez-moi cinq minutes de votre temps et je vous tiendrai au courant de tout ce qui concerne la nouvelle mise en page automatique. Ainsi, vous gardez une longueur d'avance et pouvez vous remettre au travail. Commençons par le tout début, appliquant la mise en page automatique, en appuyant sur Shift a, ou en utilisant le menu. Rien n'a changé. Cependant, remarquez que la façon dont les couches s'empilent désormais dans l'ordre indiqué sur le canevas est beaucoup plus logique. Merci pour ce Figma, ce vieil ordre inversé qui m'embêtait vraiment. Cependant, l'apparence du menu Auto Layout a changé. Enquêtons. direction fonctionne de la même manière qu'avant, et aussi l'espace entre les deux. Vous pouvez également définir le rembourrage horizontal et vertical comme nous le faisions auparavant. Si vous souhaitez un remplissage personnalisé, cliquez simplement pour ouvrir les options de tous les sites. Assez standard. Conseil : maintenez la touche Commande enfoncée et cliquez sur n'importe quel champ de remplissage. Vous pouvez désormais utiliser les notations courantes comme vous le feriez en CSS, ou simplement saisir un chiffre pour toutes. L'outil d'alignement permet simplement de changer de position du sous-menu vers le menu principal. Sinon, elle reste exactement la même. Et il contient de nouveaux raccourcis sympas, que je vais vous montrer sous peu. Le nouveau contrôle sur Canvas. Outre le menu Auto Layout, vous disposez désormais de votre propre contrôle Canvas. Et c'est vraiment incroyable. Ainsi, si vous passez la souris sur un cadre de mise en page automatique, vous verrez apparaître les petites poignées roses et vous pouvez simplement les faire glisser pour les ajuster. Cela fonctionne pour l'espace entre les deux et aussi pour le rembourrage. Cela vient avec de très bons raccourcis. Laissez-moi donc vous montrer quelques trucs et astuces. Si vous maintenez la touche Shift enfoncée tout en faisant glisser la souris, vous augmentez ou diminuez d' un ensemble de valeurs de déplacement. Très agréable. Vous pouvez également double-cliquer sur poignée pour lier la valeur spécifique. Maintenez toutes les touches enfoncées lors du réglage du rembourrage et vous obtiendrez les mêmes valeurs pour l' horizontale ou la verticale. Si vous maintenez les touches Shift et Alt enfoncées tout en faisant glisser , nous redimensionnerons de la même manière tout le remplissage Nouvel espacement négatif. Ok, celui-ci m'enthousiasme vraiment. Vous pouvez désormais avoir un espacement négatif entre les enfants de mise en page automatique, ce qui signifie que vous pouvez empiler des éléments. Enfin, si vous cliquez sur les trois petits points, n'importe quel menu de mise en page automatique, vous accédez aux options avancées du menu de mise en page. Et il y a des choses nouvelles et d'anciennes améliorations. Le mode d'espacement est le même, mais les nouveaux raccourcis sont intéressants. Donc, tout comme une mise en page automatique, avant par défaut, tout soit configuré pour être emballé. Emballé signifie que l'espace entre les éléments de votre enfant est défini sur un nombre fixe. revanche, si vous le remplacez par un espace entre les deux, cela utilisera tout l'espace disponible et créera des espaces égaux entre les éléments enfants directs. Maintenant, j'adore cette fonctionnalité et je l'utilise beaucoup, mais c'est un peu ennuyeux de toujours parcourir ces sous-menus. La nouvelle mise en page automatique propose de nouveaux raccourcis géniaux pour basculer entre les espaces et les espaces entre eux. Sélectionnez simplement la case d'alignement et appuyez sur X pour basculer entre les espaces entre les impacts. Ou cliquez sur la poignée de commande sur Canvas et tapez simplement auto pour définir un espace entre ou une valeur fixe pour l'emballage. Une autre fonctionnalité inédite que vous trouverez dans le menu de mise en page avancé consiste à inclure l'exclusion des traits. Cela va être d' une grande aide pour intégrer les traits à vos composants. Vous trouverez également dans la mise en page automatique avancée la modification de l'ordre d'empilement. Vous pouvez donc modifier l'ordre ici si vous avez des éléments empilés via un espacement négatif. Notez que cela ne modifie pas l'ordre dans le menu Couches. Outre l'empilage, vous pouvez toujours utiliser bonnes vieilles flèches du clavier si vous souhaitez modifier la position réelle d' un enfant de mise en page automatique. Et un dernier, tout nouveau et d'une grande aide, est l'alignement de la ligne de base du texte. Vous avez besoin d'au moins un élément de texte pour que cela fonctionne. Vous pouvez ensuite choisir d'aligner texte au centre ou via la ligne de base. Autre raccourci intéressant : sélectionnez la case d'alignement et appuyez sur B pour activer l'alignement de la ligne de base du texte. Positionnement absolu inédit et incroyable. Celui-ci est une bouée de sauvetage totale. abord glisser un élément dans votre cadre de mise en page automatique, puis vous aurez l'option de le définir sur absolu dans le menu des cadres. Vous pouvez désormais le faire glisser et le positionner n' importe où dans votre cadre de mise en page automatique. Et c'est vraiment à l'intérieur de votre cadre de mise en page automatique. Cela signifie également que vous pouvez définir des contraintes de redimensionnement. Redimensionner le menu. C'est le même vieux, mais il a été déplacé et il est livré avec de nouveaux raccourcis géniaux. J'ai été un peu choqué lorsque j'ai ouvert une nouvelle mise en page automatique pour la première fois , car le menu Resize avait disparu. Ce n'est pas le cas, il s'est simplement déplacé juste ici, deux cadres. Ça a l'air un peu différent, mais ça marche exactement de la même façon qu'avant. Nous n'avons plus de représentation visuelle. Mais Figma a ajouté d' excellents raccourcis. Cliquez sur la ligne supérieure ou inférieure d' un cadre de mise en page automatique à définir, pour l'épouser verticalement. Cliquez sur le côté gauche ou droit d' un cadre de mise en page automatique pour le déplacer horizontalement. Et il en va de même si vous maintenez l'ancien enfoncé tout en cliquant pour le changer pour remplir le récipient. Alors c'est ça. Tout ce que vous devez savoir sur une nouvelle mise en page automatique pour démarrer. 47. Merci: Bravo pour avoir terminé ce cours. N'hésitez pas à nous contacter sur moonlearning.io, nous sommes toujours intéressés à connaître vos commentaires. Vous nous rendriez également un grand service, si vous pouviez juste prendre une minute et laisser un avis ici. Si vous appréciez ce cours, assurez-vous également de jeter un coup d'œil à nos cours supplémentaires. Chez moonlearning.io, nous abordons tous les sujets, depuis les fondements mêmes de la conception UX/UI jusqu'à Figma et même quelques bases du code. Assurez-vous de visiter notre site Web à l'adresse moonlearning.io, où vous pouvez également vous inscrire à notre newsletter.