Transcription
1. Introduction: Les premiers mois où
j'ai utilisé Figma, j'utilisais mal les
composants. Ce n'est que lorsque je
me suis lancée et que j'en ai appris davantage sur la puissance
des composants que j'ai vraiment commencé à
prendre
confiance en la vitesse et que Figma s'est améliorée. comme l'UI/UX et le
concepteur de produits, les
composants sont
les éléments
constitutifs de tous nos projets. Il est essentiel de partir pied
si nous voulons
produire un travail de qualité. [MUSIQUE] Je suis Maddie Beard et je suis une designer UI/UX
basée à Denver, dans le Colorado. Je travaille professionnellement
en tant que designer depuis 2017 pour de
grandes et petites entreprises technologiques, ainsi que pour moi-même en tant qu'
indépendant et entrepreneur. Dans ce cours, nous allons
parler de six manières de tirer le meilleur parti des
composants de Figma. Nous allons créer quelques
composants à partir de
zéro de la bonne façon, configurer les
propriétés du composant, les
rendre réactifs,
leur donner quelques variantes nécessaires
et, enfin,
les rendre interactifs. Pour terminer, nous vous donnerons quelques conseils pour créer composants en tenant compte du travail d'équipe
et de la collaboration. J'espère que vous
quitterez ce cours, non seulement avec une
meilleure compréhension des composantes, mais aussi avec de réelles compétences et de la pratique à votre actif. Cette classe s'adresse à tous les
concepteurs qui découvrent Figma, les composants, ou qui
travaillent en équipe, ou peut-être que vous
travaillez avec des composants depuis un certain temps mais des termes tels que variantes, propriétés
booléennes et la mise en page automatique vient de
vous faire briller les yeux. Une fois que vous aurez terminé
ces six leçons, vous utiliserez ces
fonctionnalités et bien d'autres encore pour rendre vos
composants cohérents flexibles et vous faire gagner beaucoup de temps à vous et à
votre équipe. Je
vous encourage vivement à faire ces exercices avec moi et même les
partager avec votre
équipe si vous le souhaitez. Vous aurez bientôt
tout ce dont vous avez besoin pour appliquer ces leçons à votre propre
travail dans votre entreprise.
2. Créer un composant: Tout d'abord, apprenons à créer quelques composants de la bonne manière. Préparez-vous à un
succès à long terme en suivant ces cinq conseils lorsque vous créez vos propres
composants. La première astuce consiste simplement à considérer les composants comme
des modèles. Chaque instance d'un composant est essentiellement, chaque fois que vous
utilisez ce modèle. Les modifications que vous apportez au
composant
se répercuteront sur les instances
individuelles. Mais si vous apportez une modification
au niveau de l'instance, cela n'affectera pas le composant principal ni aucune autre instance
du composant. Conseil numéro 2 : dans la mesure du possible, utilisez des cadres plutôt que
des rectangles. Troisièmement, tirez parti de la mise en page automatique. Quatre, faites toujours
attention à l'alignement. Cinq, essayez de suivre
un système de grille de pixels. Dans mon ancienne entreprise, nous utilisions un système de grille à huit
pixels, mais tout ce que votre équipe
utilise convient parfaitement tant que tous les concepteurs
sont cohérents. Voyons maintenant comment
ces conseils entrent en jeu avec certains composants réels. Je vais commencer
par créer un composant très simple, un bouton. Je vais donc simplement
appuyer sur F sur mon clavier, qui est le raccourci pour accéder
à cet outil de cadrage. Je suis donc en train de créer un cadre. Nous allons en créer un
de 44 pixels de haut, disons 100 pixels de
large pour notre bouton. Comme je l'ai dit dans le conseil numéro 2, il est important d'
utiliser les cadres sous forme de rectangles au lieu d'
ajouter des couches supplémentaires. Ainsi, par exemple,
au lieu d'ajouter un rectangle bleu
au-dessus de ce cadre, je vais simplement donner à ce cadre une
couleur de fond bleue. De cette façon, j'ai affaire à
moins de couches et cela sera vraiment utile en matière de mise en page automatique. Maintenant, ajoutons le texte, donc j'appuie simplement sur T
comme bouton de raccourci. Maintenant, je sélectionne à nouveau
ce cadre et
je vais juste
lui donner un rayon d'angle
de quatre, beau et subtil. À tout moment, nous
pouvons en faire
un composant en le sélectionnant
sur le cadre et appuyant sur la commande Option K.
Vous pouvez également le faire en montant sur Objet puis
en descendant pour créer un composant. Maintenant qu'il s'agit d'un composant, renommons-le simplement. Passons maintenant à la mise en page automatique. La raison pour laquelle nous
utilisons la mise en page automatique est que les différentes instances
de ce composant, bien qu'elles puissent apparaître
à
des tailles différentes, doivent
toujours être centrées. Dans l'état actuel des choses, le
texte n'est pas centré. Nous allons donc sélectionner l'ensemble du
cadre et appuyer sur la mise en page automatique. Par défaut, il va
épingler l'enfant, est-à-dire dans ce cas le texte contenu dans tout le cadre, il va l'épingler en
haut à gauche avec un peu de rembourrage. Comme vous pouvez le constater,
nous avons 23 pixels de
rembourrage de chaque côté et
12 en haut et en bas. Mais ce que nous voulons, c'est nous assurer qu'il sera
épinglé au centre. Je vais donc simplement
appuyer sur cette icône. Ensuite, je pense que 12 pixels sont
bons pour le haut et le bas, mais faisons-en 24
pour la droite et la gauche. Comme je l'ai dit, l'utilisation
de multiples de huit et même de quatre est très
utile pour maintenir la cohérence entre vos mises en page. Alors maintenant, que se passe-t-il lorsque
nous redimensionnons ce bouton ? Vous pouvez voir que le texte
reste au milieu. C'est exactement ce que nous voulons. Créons maintenant un
autre composant. Faisons une carte. J'appuie donc
à nouveau sur F sur mon clavier. Faisons en sorte que ce chiffre soit de 200
par 200, juste pour le moment. Je vais renommer cette
carte Option Command K. Je vais faire R pour rectangle et mettre une image à l'
intérieur qui occupe la première moitié supérieure de
cette hauteur verticale. Donc, pour l'utiliser
comme masque, je vais simplement utiliser le
remplissage au lieu de le remplir, je vais appuyer sur Image, puis je vais simplement
choisir une image. J'ai cette
pizza sur mon bureau. Nous avons donc ceci,
ajoutons maintenant les autres
éléments dont nous aurons besoin. Faisons un texto. Ce sera peut-être un titre
puis une description. Cela devrait être beaucoup plus petit. Nous voulons l'aligner sur la gauche et nous ferons
de même avec le titre. Maintenant que nous avons tous
les éléments dont nous
aurons besoin, je vais activer la mise en
page automatique. Les choses sont donc devenues
un peu compliquées, mais ça va. Voyons
pourquoi cela s'est produit et comment nous pouvons faire en sorte
qu'il fonctionne exactement comme nous le
souhaitons en
tant que modèle pour le
reste de nos projets. Vous pouvez donc voir que lorsque je faisais de la
mise en page automatique, les enfants, c'
est-à-dire
les
éléments individuels dans un cadre, se positionnaient automatiquement. Il va
les positionner verticalement centrés au milieu
et épinglés vers le haut. C'est exactement ce qui se
passe ici. Ce texte est aligné à gauche, mais la zone de texte elle-même est alignée au
centre du cadre. Alors maintenant, ce que je veux faire c'est les
regrouper dans un cadre. Je vais juste
appuyer sur la sélection du cadre, et nous pouvons
activer la mise en page automatique pour ce cadre à l'intérieur du cadre. Je vais donc
les aligner en haut à gauche. Nous n'avons vraiment besoin que de
quatre pixels entre eux. Au lieu d'étreindre le texte, je veux qu'il
remplisse le contenant. la verticale, nous voulons qu'il épouse le contenu.
Donc, c'est bien. Ensuite, lorsque nous cliquons sur
cet ordinateur central ici, nous pouvons voir qu'il y a huit
pixels d'espace ici. Faisons ce 12. Voyons maintenant ce qui
se passe lorsque nous étendons cela. Tu vois, il y a de la
place de chaque côté. Donc, au lieu d'avoir une largeur
fixe pour cette image, je vais dire que l'image doit remplir le conteneur. Nous garderons la hauteur fixe. Maintenant, lorsque nous l'agrandissons, vous pouvez voir qu'il remplit tout
le contenant. Ajoutons un
peu de rembourrage. Nous voulons l'ajouter à
cet élément car nous ne voulons pas qu'il s'applique également
à l'image. Ajoutons donc simplement 12
pixels de chaque côté et 12 pixels en
bas. Ça a l'air bien. Maintenant, donnons à l'ensemble
un rayon d'angle, peut-être 16. Maintenant, nous allons
devoir ajouter cette image superposée et
l'ajouter séparément. Ça a l'air bien. Nous allons lui donner une
ombre, juste pour le fun. Je vais rendre cette ombre
un peu plus subtile. J'aime utiliser huit
pour cent. Ça a l'air bien. Avec ces deux composants, nous appliquons déjà le
conseil numéro 1. Nous
les considérons comme des modèles Nous sommes
donc très
attentifs à ce qui va se passer si, par
exemple, nous continuons à
écrire cette description jusqu'à ce qu'elle passe
au ligne suivante. Ça a l'air
parfait. Alors vérifiez, nous
réfléchissons au modèle. Deuxièmement, nous
utilisons des cadres lorsque c'est possible au lieu de rectangles. Troisièmement, nous maîtrisons la
mise en page automatique avec les deux. Numéro 4, nous nous sommes assurés que tout est correctement aligné. Numéro 5, dans la mesure du possible, nous avons utilisé un rembourrage et des dimensions qui se situent dans
une grille de huit pixels. Une façon de vérifier que nos composants sont flexibles
et que nous avons fait tout ce qui était en notre pouvoir pour réussir est d'en extraire une copie ou une instance
et
de l'utiliser comme vous.
l'utiliserait dans un projet. Alors, par exemple, et si nous
avions un titre très long ici ? Donc, comme vous pouvez le constater,
ce titre très long étendu cette composante
à une très large portée. Je ne pense pas que ce soit
nécessairement ce que nous voulons. Revenons donc à ce composant
principal et
changeons-le en un élément de largeur fixe. Maintenant, nous avons
cette largeur fixe, nous devons absolument l'
aligner vers la gauche. Voyons maintenant ce qui
se passe chaque fois que nous
changeons le titre en quelque chose de
plus long. On y va. Maintenant que c'
est une largeur fixe, il va la pousser vers le bas au lieu de la
pousser vers la droite. Alors maintenant, nous pouvons aller ici. Comme il s'agit du composant
principal, les modifications
se répercutent sur notre instance. Nous pouvons maintenant voir que c'est
exactement ce que nous voudrions. Je vais donc
attribuer
un A à cette composante et dire que nous pouvons
passer à la leçon suivante. Alors maintenant c'est ton tour. Allez-y, choisissez l'un de
ces composants ou les deux et
créez-les vous-même. Assurez-vous de cocher les
cinq cases correspondant aux conseils que j'ai partagés dans cette leçon. Je te
verrai au prochain.
3. Configuration de propriétés de composant: Maintenant que vous avez un
ou deux composants avec lesquels travailler, configurons certaines propriétés afin de le rendre encore plus flexible et de pouvoir être
utilisé dans tous vos projets. Dans cette leçon, nous allons le faire
à l' aide de trois propriétés
différentes. Boolean, qui est une propriété
marche-désactivée, un échange d'
instance et un texte. Voyons donc comment ils
entrent en jeu avec ces deux composants
que nous avons déjà créés. Commençons par les propriétés
booléennes. Pensez à cela comme à
la création d'un interrupteur marche-arrêt. Je pense qu'un bon endroit pour le faire
est à l'intérieur de ce bouton. Je vais donc simplement
placer une icône ici et voyons maintenant comment l'activer
et la désactiver. Parce que parfois, lorsque
vous utilisez ce bouton, vous pouvez avoir besoin d'une icône et
d'autres fois non. Ainsi, le
fait de pouvoir utiliser
un composant dans différentes instances
de ce composant, au lieu de créer deux composants
distincts, vous fera gagner beaucoup de temps. Surtout quand on
voit à quel point c'est facile. Donc, ce que je vais
faire, c'est entrer et sélectionner cette icône. face de la couche, nous avons cette icône ici. Il dit appliquer la propriété booléenne. Je vais donc cliquer dessus et
cela me montre automatiquement que le nom de cette propriété par
défaut est Afficher l'icône. Cela me semble donc bien, et je vais donc le créer. Maintenant, si nous le faisons glisser vers
l'extérieur pour voir une autre instance de ce composant, nous avons une bascule dont la
cible est cette icône. Figma est juste assez intelligente
pour savoir que nous voulons l'activer et le désactiver avec
une propriété booléenne. C'est donc très simple.
Allons maintenant un peu plus loin. Et si nous voulions remplacer
cette icône par quelque chose d'autre ? Eh bien, j'ai créé quelques
variantes de ce
composant ici, et nous approfondirons les variantes
dans la leçon 4. Mais pour l'instant, ne vous
inquiétez pas de la façon dont je l'ai créé, réfléchissons simplement à la façon dont
nous allons l'utiliser. J'ai donc un composant ici, c'est le composant principal
et il a plusieurs variantes. J'ai donc la
variante de téléchargement, qui est la variante par défaut, une variante de partage et une variante de sauvegarde. Figma est donc assez intelligente
pour savoir que, comme ils sont regroupés
au sein d'un composant, nous pouvons vouloir les
échanger. Encore une fois, si je viens et que je
clique sur cette icône ici, je vais voir cette icône ici, appliquer la propriété d'échange d'instance. Je vais donc cliquer dessus,
nous allons lui donner un nom instance, et ça a l'air bien. Maintenant, chaque fois que je fais glisser une instance et que je
double-clique sur cette icône, nous pouvons la
désactiver pour toutes les instances de
ce composant d'icône. Maintenant, la dernière, parlons de texte. Donc, si je veux que quelqu'un
puisse accéder à mon fichier Figma et modifier le texte sans
toucher le composant lui-même, nous pouvons
sélectionner le texte. Ensuite, en bas, nous pouvons
cliquer sur cette icône ici et créer une
propriété à partir de celle-ci. Maintenant, encore une fois, nous allons
faire glisser une instance vers l'extérieur, et au lieu de taper
le texte ici, je peux simplement sélectionner
l'instance, puis à ce panneau Propriétés, et taper du texte à la place. Alors peut-être voulons-nous qu'
il soit dit téléchargement. Ensuite, il mettra
automatiquement à jour ce composant sans
même avoir à le toucher. La même chose fonctionne avec
quelque chose comme ça. Disons que nous
voulons pouvoir
modifier le titre
et la description. Nous allons simplement appuyer sur ce bouton
ou donner un nom à ce titre, nous nommerons cette description. Maintenant, si nous avons une instance
de ce composant quelque part, sans avoir à
toucher à ce composant, il suffit de cliquer dessus
et de passer ici. Voici le titre, c'est une description. Comme vous pouvez le constater, il tiendra
également compte de toutes les propriétés
de mise en page automatique que nous avons définies précédemment. Cela rend donc
les choses beaucoup plus faciles et plus rapides pour
vous et votre équipe. Allez-y, jouez
avec ces propriétés
avec les composants
que vous avez créés N'hésitez pas à
faire
preuve de créativité , à créer quelque chose de nouveau et à tester les limites du booléen et le swap d'instance
et les propriétés du texte.
4. Rendre les composants réactifs: Il est important de
garder à l'esprit que vous et votre équipe pouvez utiliser ces composants sur
différentes tailles d'écran. rendre réactifs est donc très utile et permet de gagner du temps. Nous en avons parlé
un peu dans la leçon 1. Mais faisons un autre
exemple ici avec une barre de navigation. Commençons par
une barre de navigation optimisée pour un iPad mini, et voyons si nous pouvons la rendre réactive pour un écran de bureau. Je vais donc appuyer sur « F » pour le
cadre et créer quelque
chose d'une largeur de 774 pixels, et passons à une hauteur de
60 pixels. Je vais lui donner une
belle couleur de fond. Nous allons prendre un faux logo que j'ai
créé et le mettre dedans. Passons ensuite à quelques éléments de menu. Donc, s'il s'agit d'un café, nous aurons peut-être besoin d'un menu, d'un horaire et d'un contact. Maintenant, comme avant, nous voulons
en faire un composant, option « Command K », je vais l'appeler nav. Activons ensuite la mise en page
automatique dès le départ afin de voir avec
quoi nous travaillons. Donc, par défaut, il s'adaptera
à l'ensemble de notre contenu. Regroupons-les dans un cadre afin de pouvoir mettre en place une mise en page automatique et
disons que nous voulons 24 pixels entre chacun d'eux. Ensuite, il semblerait ils
soient plus
serrés vers le bas, alors assurons-nous de pouvoir l'aligner au centre. Nous avons donc maintenant le cadre parent, qui est le
composant dans son ensemble et deux enfants différents. Voyons donc ce qui se passe lorsque nous essayons de l'élargir. Ce n'est certainement
pas ce que nous voulons. Donc, ce que je vais
faire, c'est sélectionner ce cadre, puis cliquer sur
ces trois points, et au lieu de le ranger, nous allons le remplacer
par un espace entre les deux. Vous pouvez voir que cela correspond davantage à
ce que nous voulions. Nous pouvons ensuite entrer et changer
le rembourrage sur le côté, peut-être que 24 suffiraient pour cela. Alors ça a l'air
un peu grand, donc je vais juste entrer
et le rendre un peu plus petit. Mais quand je l'ai réduit, ai l'impression que la hauteur
a changé. Je veux donc m'assurer
que ma hauteur est toujours de 60 pixels, disons fixe pour cela. Donc ça a l'air bien. Alors maintenant, testons-le. J'ai ces cadres ici, un pour un iPad Pro et un
pour un MacBook Pro 16 pouces. Donc, ce que je vais
faire, c'est les copier et les
coller et nous allons
simplement les positionner. Donc d'abord, pour notre iPad, puis pour notre ordinateur de bureau. Comme vous pouvez le constater, cela
a très bien fonctionné, et vous vous demandez peut-être
ce que vous feriez si vous vouliez en créer un pour un écran d'iPhone ? Eh bien, ce que nous
pourrions faire, c'est en
faire un menu de hamburgers, et il faudrait
en fait que ce soit une variante distincte. Parlons donc de la variance
dans la prochaine leçon. Mais avant cela, essayez de
vous entraîner
à créer un composant
réactif. Vous pouvez créer quelque chose de réactif d'un iPhone à un
iPad, d'un iPhone à un ordinateur de bureau
ou d'un iPad à un ordinateur de bureau. vous le souhaitez, et si vous êtes bloqué, n'
hésitez pas à faire ce que j'ai fait et à créer
cette même barre de navigation.
5. Créer des variantes de composants: Parfois,
les propriétés et la mise en page automatique ne suffisent pas à
rendre vos composants suffisamment
flexibles pour être utilisés dans l'ensemble du projet
ou du système de conception. C'est là que les variantes
entrent en jeu. Ils peuvent vous faire économiser beaucoup de
temps et d'efforts lorsqu'il s'agit de concevoir des écrans à
l'aide de vos composants. Dans cette leçon, nous allons créer des variantes pour différents
états d'un bouton, champs et d'icônes que vous pouvez utiliser et remplacer de
manière interchangeable. Commençons par ce bouton
que nous avons déjà créé. Je vais donc simplement cliquer
sur le cadre dans son ensemble. Ensuite, nous passerons aux
propriétés, cliquerons sur le
bouton « Plus » pour créer une nouvelle variante. Ensuite, je vais cliquer sur
le bouton Plus en bas pour en créer un nouveau. Cela
sera donc automatiquement étiqueté par défaut. Nous allons maintenant modifier cette propriété
et lui donner un nom. Nous l'appellerons État. La valeur par défaut est bonne ici. Maintenant, que voulons-nous que soit
cet État ? Je pense que nous allons commencer par le survol. Faisons donc en sorte
que l'état de survol soit légèrement plus foncé. Je vais simplement cliquer sur
Commande pour accéder à la couche de cadre située
derrière le texte de l'icône. Je vais y aller et le faire glisser vers
le bas jusqu'à ce que je pense
qu'il fait assez sombre. Juste un petit peu, il n'est pas nécessaire que
ce soit trop radical. Maintenant, c'est l'état de survol
et créons-en un autre. Peut-être que nous avons un État
qui est handicapé. Au lieu de ce bleu, prenons une couleur grise comme
celle-ci afin qu'elle soit clairement
désactivée et que vous ne puissiez pas l'utiliser. Je pense que c'est bien,
donc c'est assez simple. Maintenant, faisons la même
chose avec un champ. Tout d'abord, créons
ce champ ensemble. Je vais appuyer sur F pour le cadre. Voyons voir, nous voulons absolument que
cela fasse 44 pixels de haut, le champ lui-même, et la longueur n'a pas d'
importance pour le moment. Étiquetons ce champ et
en faisons un composant. Maintenant, ce que nous voulons
faire, c'est ce contexte n'existe pas car ce que nous voulons, c'est
avoir une étiquette de champ. Cela peut donc être assez petit. Nous allons simplement le
positionner en haut à droite. Ensuite, nous voulons qu'un autre
cadre de
ce cadre soit
le champ réel, et celui-ci sera rempli. Pour l'instant, nous allons simplement le
rendre blanc. C'est ce que nous voulons
faire 44 pixels de haut. Ensuite, nous voulons nous assurer que tout cela
est conforme au cadre. Maintenant, faisons la mise en page automatique et jouons un peu avec
eux. Nous avons ce label. Je pense que nous voulons faire cette étiquette
un peu plus grande,
12, c'est généralement bon pour les étiquettes. Désormais, par défaut, il est
séparé par quatre pixels, ou cinq pixels entre les deux
. Faisons-en quatre. Arrondissons un peu
ces angles. Ça a l'air vraiment bien. Mettons maintenant du
texte dans le champ. Exemple de texte. Nous allons le rendre un peu plus grand. Je pense que nous voulons en
faire au moins 14, et nous allons avoir
un poids normal. Alignons-le vers la gauche. Faisons en
sorte qu'il soit également aligné vers la gauche et
encadrons-les ensemble afin pouvoir mettre en page automatique. Je pense que nous voulons corriger la largeur et nous
assurer d'avoir, je pense que nous pouvons
avoir moins de rembourrage. Faisons huit pixels, puis
16 en haut et en bas. Faisons en sorte de
centrer le texte à l'intérieur. Ça a l'air bien. Maintenant, nous allons certainement avoir besoin de plusieurs variantes pour cela. Je vais juste ajouter une
propriété, ajouter une variante. Nous en ferons notre option par défaut. Nous l'appellerons l'état par défaut de la
propriété. Alors appelons ce champ. Maintenant que j'y pense,
je pense que l'état par défaut
avant que quelqu'un ne commence à
taper quoi que ce soit devrait
ressembler davantage à un exemple de texte. Allons-y et faisons en sorte que ce soit gris. Cela suffira pour le moment. Maintenant, ce texte est
en fait le texte rempli. Nous avons maintenant deux
variantes différentes et faisons-en une de plus. Peut-être que si quelqu'un passe la
souris dessus, il devrait y avoir un trait dessus rempli ici pour attirer
votre attention. Nous allons simplement ajouter un trait. Faisons en sorte que ce soit un
peu plus subtil. Cela devrait être une bonne chose.
Un pixel, c'est bien. Ça a l'air vraiment bien. Nous avons maintenant trois variantes
différentes. Mais celui que nous avons créé, l'état que nous voudrions
lui donner plane. Mais le problème est que quelqu'un aurait pu
survoler un champ déjà rempli et un champ qui ne l'
est pas encore. Nous voulons en fait
en faire deux propriétés différentes. Je vais m'en
débarrasser pour le moment. Ce que je vais faire, c'est ajouter
une autre variante. Ensuite, visuellement, j'aime
les aligner un peu différemment lorsqu'il s'agit d'une propriété
différente
afin de pouvoir voir visuellement avec
quoi je travaille ici. Maintenant, nous avons celui-ci, et recopions
celui-ci également. Maintenant, dans cette colonne de gauche, nous en avons ceux qui sont par défaut. Nous devons maintenant ajouter une
toute autre variante. [BRUIT] Au lieu d'appeler
celui-ci état, appelons ce survol. Maintenant, le survol va être oui avec ces deux-là et
non avec ces deux-là. Ensuite, pour ces deux-là, nous allons lui donner le même
coup que nous l'avons fait plus tôt. Faisons en sorte de remplir l'état pour cela également. Il s'agit de la valeur par défaut. Cela devrait être rempli. Nous avons maintenant ce composant avec quatre variantes au total
et deux propriétés. Voyons maintenant ce qui se passe
lorsque nous l'utilisons. Je vais juste
coller ça ici. Maintenant que nous avions une valeur oui, non comme l'une de
nos propriétés, elle l'a automatiquement
transformée en valeur booléenne, ce
qui signifie que nous pouvons la
désactiver et la réactiver, un qui signifie que nous pouvons la
désactiver et la réactiver, peu comme l'icône du
bouton dans une leçon précédente, ça facilite les choses. Ensuite, nous pouvons également
passer
du texte par défaut
au texte rempli. Vous pouvez maintenant voir comment
cela fonctionne. Vous pouvez avoir autant de variantes que vous le souhaitez avec le composant. Vous pouvez être
très précis avec cela. Ceci est juste un exemple très
simple de la façon d'utiliser
des variantes avec un champ. Passons maintenant ces icônes que je vous
montrais tout à l'heure. Je vais
les rendre noirs juste qu'ils soient plus visibles
pour le moment. Pour vous montrer comment j'ai procédé, je vais juste en
ajouter un autre. Nous allons utiliser
le bouton Plus, et cela va simplement en
ajouter un qui, par défaut, ressemble
à celui-ci. Je vais juste
double-cliquer ici et le supprimer. Mais nous avons toujours
ce cadre ici. Je vais juste prendre
l'une de ces autres icônes. J'appuie simplement sur la commande C pour copier. Maintenant, je vais sélectionner ce cadre et
la commande V à coller. Ensuite, je vais simplement le
redimensionner pour qu'
il s'intègre parfaitement dans ce cadre,
comme le font les autres. Ça a l'air bien. ne
nous reste plus qu'à lui donner un nom. Tapez, nous allons
appeler cette modification. C'est tout ce que vous
devez faire pour créer cet ensemble d'icônes. Si vous avez des icônes tailles
différentes dans
votre système de conception, vous pouvez absolument avoir deux composants
principaux différents. Un petit et un grand ou grand, moyen et petit, selon ce qui vous convient. Je veux juste
vous montrer rapidement comment je
les ai fabriqués. J'appuie juste sur T pour envoyer un texto. J'ai une
police de caractères appelée Font Awesome 5 Pro. Si je commence juste à taper, je vais taper pause, puis il y a une
icône de pause pour cela. Je vais faire
la version solide. Ensuite, il ne me reste plus qu'à cliquer sur
Ctrl pour aplatir. C'est ainsi que j'ai créé
ces icônes. Créons-en
quelques autres ici. Ajouter une variante,
double-cliquer,
supprimer, copier-coller, redimensionner. Vous pouvez même bien le centrer dans ce cadre.
Ça a l'air bien. Nous avons maintenant cinq
variantes différentes de cette icône. Vous pouvez l'utiliser dans l'ensemble de
votre projet dans tous les composants ou mises en page
dotés de cette icône. Cela facilite
grandement les échanges. Voyons cela en action. Je vais maintenant prendre une
instance de ce composant et voir dans quelle mesure
nous pouvons être flexibles avec cela. Si nous le sélectionnons, nous
pouvons changer l'état. Peut-être que nous le changeons pour planer. Nous pouvons appuyer sur l'icône et la remplacer par l'une de celles
que nous avons créées. Modifier. Ensuite, nous pouvons même revenir ici et modifier le texte sans même toucher
le composant. Pour vous entraîner, prenez l'un de vos composants et créez
quelques variantes. Si vous êtes bloqué,
un bon
point de départ est l'état de ces
boutons. Comme je l'ai fait, créez
un état par défaut, un état de survol et
un état désactivé. Alors n'hésitez pas à en faire une capture d'écran et à la partager dans
la section de discussion.
6. Rendre des composants interactifs: Rendre vos composants
interactifs est certainement une chose supplémentaire que vous pouvez faire si vous avez le temps
ou si vous voulez vraiment vous lancer
dans le prototypage. Cela dit, si vous travaillez une équipe qui réalise
beaucoup de prototypage, ce soit pour les tester ou présenter à des non-concepteurs, cela peut certainement vous faire
gagner beaucoup de temps. Considérez cela comme un prototypage
au niveau du composant ou du
modèle plutôt qu'
au niveau de l'instance. Par exemple, tout écran
contenant une instance de ce
composant de bouton principal
adoptera ce
changement de comportement lorsque vous passez la souris. Voyons cela en action. Maintenant, comment y
parvenez-vous réellement ? Eh bien, c'est super facile. Nous allons simplement nous concentrer sur ces deux états du bouton. Ce que je vais faire, c'est cliquer sur celui-ci et passer
au prototype. Une fois que je l'
aurai fait, je verrai ce signe plus ici
lorsque je le retournerai. Je vais cliquer et faire glisser. Je vais faire glisser cette
flèche jusqu'à l'état de survol. Alors ici, au lieu d'appuyer, nous allons le faire en survolant et nous passerons
à cet état de survol. C'est assez simple. Ensuite, nous passerons du
mode prototype au mode conception. Je vais copier
ce composant. Juste pour le montrer en action, je vais le coller
dans ce composant ici. Ensuite, je vais cliquer sur
l'ensemble du cadre de l'iPhone et appuyer sur le bouton Play ici. Une fois qu'il sera chargé, vous
pourrez voir un aperçu de l'écran et je
vais y revenir. Comme vous pouvez le voir en survolant la souris, cette instance de
ce
composant passe du
bleu clair au bleu plus foncé. Il y a tellement de choses que vous pouvez faire avec ces types
d'interactions. C'est le plus
simple mais c'est celui que je
trouve que j'utilise le plus souvent. Allez-y, essayez-le
, puis faites preuve de créativité. Créez votre propre
interaction,
créez-en quelques instances et testez-les avec
le lecteur d'aperçu.
7. Construire avec travail d'équipe: Avant de terminer ce cours, je voudrais partager certains de mes conseils pour construire en tenant compte du
travail d'équipe. Si vous créez des composants
à utiliser au sein de votre équipe, que votre équipe soit composée de deux
designers ou de 50 concepteurs, ces étapes vous aideront à faciliter
le processus. Premièrement, utilisez des conventions de
dénomination cohérentes pour vos composants. Peu importe
si vous n'avez que quelques composants comme
nous en avons actuellement, mais lorsque vous commencez à développer
un système de conception complet, vous aurez de
nombreux autres composants,
de nombreuses variantes, et même différentes
versions de composants. Ce que j'aime faire, c'est les
diviser en différentes pages et
commencer à créer un fichier qui correspond à votre système de
conception. Nous n'approfondirons pas cela dans ce cours, car
les systèmes de
conception sont une toute autre bête sur laquelle je peux créer un cours
complet. Mais commencer tôt avec
les conventions de dénomination peut
vraiment vous aider. Supposons, par exemple, que nous ayons deux versions de ce composant de
carte. Peut-être en avons-nous une avec une image et peut-être en avons-nous
une avec des icônes. Ensuite, vous pouvez
les nommer en conséquence. Vous pourriez dire carte/image
et carte/icônes. Cela sera vraiment utile
chaque fois que des utilisateurs utiliseront ces composants
et les feront glisser depuis le panneau Asset de Figma. en revenir à notre autre exemple, nous pourrions également dire Nav/Mobile
contre Nav/Desktop, ou Icons/Large, Icons/Small. Vous pouvez même obtenir des informations plus
précises, des icônes/12 pour 12 pixels contre
Icon/24 pour 24 pixels. Je l'ai également vu faire de cette façon. Numéro 2, nommer vos
couches au sein d'un composant. Chaque fois que je
crée des composants, je ne m'
inquiète pas trop de leur complexité. Mais j'y reviendrai une fois que je satisfait du fonctionnement d'un
composant, que je le testerai sur différentes tailles d'écran,
puis j'en serai satisfait. À ce moment-là, vais-je
revenir en arrière et commencer à nommer mes couches et à
vraiment organiser les choses ? plupart du temps, je vais encadrer des éléments dans des cadres
différents. Il se transforme en un cadre à l'intérieur d'un cadre à l'intérieur d'un
cadre à l'intérieur d'un cadre. Il est très
utile d'étiqueter tous ces
différents cadres si quelqu'un
doit modifier ce composant. numéro 3 consiste à réfléchir
au type d'étiquettes de texte que vous utilisez lorsque vous
utilisez un exemple de texte. C'est difficile à
décrire de manière abstraite. Jetons un coup d'œil à
cet exemple de champ. Pour tous ces éléments, nous avons utilisé le mot étiquette comme
étiquette de champ, mais pour le texte qu'il contient, nous utilisons un exemple de texte
plutôt que du texte plein. Cela aidera aussi beaucoup
les développeurs Au lieu de simplement avoir du
Lorem ipsum
dedans, il leur
décrit à quoi devrait ressembler le
texte rempli,
il est noir, alors que c'est ça l'exemple de texte doit
ressembler à, qui est gris. J'ai fait la même chose avec
le composant de la carte. J'ai nommé le titre Titre, puis la description
que j'ai dedans. C'est une description et parfois je mets
même quelque chose, cela peut être fait sur deux lignes avant d'être
tronqué ou quelque chose comme ça. Je vais m'en servir comme guide
pour mes développeurs. Cela dit, le
but est d'essayer d' utiliser le texte dans vos composants
à votre avantage, et cela ne fera que
clarifier la situation pour toutes les personnes impliquées. Numéro 4, je l'ai déjà partagé dans plusieurs leçons,
mais j'utilise la mise en page automatique. Je ne peux pas vous dire
combien de fois j'ai utilisé un composant et j'ai été tellement frustrée parce que dès
que je l'utilise
dans un projet réel, il n'est tout simplement pas
assez flexible pour que je l'utiliser et Je dois donc l'ajuster,
et tout en même temps, il
serait beaucoup plus rapide de l'ajuster
au niveau des composants afin
que le travail ne soit pas doublé, triplé ou quadruplé par tous les concepteurs de votre équipe. Ce sont mes quatre conseils pour construire en tenant compte du travail d'équipe. N'hésitez pas à y
réfléchir et partager certaines de vos
préférées avec votre équipe.
8. Réflexions finales: Félicitations pour avoir suivi ce cours. J'espère vraiment que petit à petit, ces leçons
vous ont aidé à vous sentir plus l'aise pour créer
des composants dans Figma. Je vous encourage vivement à continuer à vous entraîner et à partager ce que vous apprenez avec votre équipe. Vous pouvez également n'hésitez pas
à laisser toutes les questions qui ont été soulevées dans la section de
discussion ci-dessous et je m'assurerai
d'y répondre. Merci beaucoup d'
avoir passé du temps avec moi aujourd'hui et je vous verrai lors mon prochain cours ou plus sur
ma chaîne YouTube. Au revoir.
Maddy Beard, Product Designer & Educator
