Transcription
1. Bienvenue dans ce cours: Tout le monde. Je m'appelle Adi. Bienvenue à cette session
rapide de Figma. Aujourd'hui, nous allons créer un composant de bouton intelligent et
réutilisable. Notre bouton comportera deux
variantes : principale et secondaire, et nous ajouterons des
propriétés permettant de modifier la visibilité de l'icône, de changer
d'icône et de modifier
le texte du bouton Ce que vous apprenez aujourd'hui
ne s'applique pas uniquement aux boutons, mais à tout type de composant que vous pourriez vouloir créer dans Figma Vous n'avez pas besoin de compétences particulières en
Figma pour cela, d'un nouveau fichier et de 15
minutes de votre temps Oh, et il y a aussi un projet
de classe que vous pouvez réaliser. Ouvrons donc Figma
et commençons.
2. Concevons un bouton intelligent: Bien, je veux donc créer
un bouton polyvalent qui puisse être réutilisé à plusieurs
endroits dans mes designs, et ce bouton doit
d'abord avoir
deux styles, un principal
et un secondaire, qui soit plus discret De plus, je
voudrais afficher
soit une étiquette à l'intérieur du
bouton, soit une étiquette plus une icône. Et j'ai besoin d'un moyen de
modifier très facilement cette icône et le texte du bouton, ainsi le texte du bouton, ainsi
que
la visibilité de l'icône. C'est là que les
propriétés des composants entrent en
jeu, mais à ce sujet
un peu plus tard. Pour l'instant, nous
allons commencer par ces trois icônes
que j'ai obtenues grâce à un ensemble d'icônes appelé icônes au
phosphore Il s'agit d'un ensemble d'icônes gratuit. Ce sont donc des SVG,
et je vais les
sélectionner tous les trois et
les transformer en composants Maintenant, c'est très important car cela va nous permettre d'échanger l'icône de nos boutons. Sinon, ça ne
marchera pas. Sélectionnez donc les trois,
et nous allons
accéder au panneau Inspecteur, cliquer sur Créer des options de
composant et sélectionner Créer
plusieurs composants. Et cela va prendre
chaque élément que j'ai sélectionné et le transformer en un
composant comme ça. J'ai donc maintenant un composant
pour l'icône du cube, un pour la flèche droite et un pour la flèche en haut à
droite. C'est la première étape. Deuxième étape, commençons à
concevoir notre bouton. Je vais appuyer sur T pour l'outil de
texte, taper du texte. Dans mon cas, étiquette du bouton. Cela peut être ce que tu veux. Pour la typographie,
je vais utiliser une
taille de police intermédiaire de 16 pixels (140 % de hauteur de ligne Pour l'instant, nous allons mettre
le fond en noir. Maintenant, je vais prendre l'une des icônes. Disons celui-ci en forme de cube. Et collez-le dans mon cadre. Et changeons sa couleur en noir pour
voir ce que nous faisons. Et je vais créer un
bouton avec ces deux éléments. Maintenant, j'aimerais que mon bouton
soit redimensionnable, non ? Je voudrais qu'il change
automatiquement de largeur, en fonction du
contenu à l'intérieur. Donc, pour cela, je vais
utiliser la mise en page automatique. Sélectionnez ces deux éléments, appuyez sur Shift A pour ajouter une
mise en page automatique à ces éléments. Et si vous ne savez pas
comment fonctionne la mise en page automatique, cela crée essentiellement un
cadre dans le panneau des calques, et
ce que l'on appelle la mise en page
automatique est automatiquement
appliqué à ce cadre . La mise en page automatique me permet
de modifier la direction dans laquelle les
éléments sont affichés. Cela me permet de modifier l'
espace entre les éléments. Dans mon cas, je vais
choisir dix pixels, et cela me permet également d'
ajouter un rembourrage vertical et
horizontal Mais pour l'instant, ajoutons une couleur de
remplissage à ce cadre, et cette couleur sera 00 51bc. C'est comme un bleu plus foncé. Maintenant, je vais remplacer
le noir par du blanc, et je vais utiliser 90 %. C'est un petit truc
que j'aime faire. Cela emprunte une partie de
la couleur de l'arrière-plan car ce n'est pas du blanc pur C'est un peu transparent. Donc, nous obtenons un peu de ce bleu
en arrière-plan. Maintenant, ajoutons de la marge de
manœuvre autour de l'étiquette et de l'icône. Pour cela, je vais
ajouter du rembourrage. Je vais donc opter pour 40 pixels de rembourrage à gauche et à droite
et 20 en haut et en bas Maintenant, je l'ai découvert en utilisant, disons, X sur les côtés
et X divisé par deux. Donc, la moitié de ce X en haut et en bas est
une bonne règle empirique, et cela donne généralement de très
bons résultats. Rendons également cela
un peu plus convivial. Ajoutons huit pixels
de rayon d'angle, arrondissant
simplement ces coins. Et le design initial de
mon bouton est terminé. Maintenant, rendons-le réutilisable en
le transformant en composant. Je le sélectionne donc, et je peux
le transformer de différentes manières. Je peux aller dans l'
inspecteur ici et cliquer sur Créer un
composant ou utiliser le raccourci
clavier Control Alt K ou l'option de commande K
si vous êtes sur un Mac, ou je peux cliquer avec le bouton droit de la souris et choisir Créer un composant
comme ça. Maintenant, la façon dont j'aime travailler
consiste à définir mes composants en dehors de
tout cadre de conception fini. Je vais donc travailler ici. Renommons
cette commande R Control R pour la renommer en bouton Non, je peux toujours contrôler C ou le copier et le
coller dans mon cadre, et cela
créera une copie de celui-ci ou une instance
comme on l'appelle. Donc, dans Figma, c'est
le composant principal, et c'est une copie
de ce composant Et si j'apporte une quelconque
modification au composant principal, elle sera automatiquement
appliquée à n'importe quelle copie de celui-ci. Disons que je vais changer la taille de cette icône
au lieu de 32 par 32, je vais la faire 22 par 22. Et ce changement se produit ici, mais également dans n'importe quelle
copie. Super cool. Ajoutons maintenant quelques propriétés à ce composant de bouton,
car actuellement, si vous souhaitez apporter des
modifications à l'instance, c'est
assez difficile à faire. Vous pouvez, bien sûr, sélectionner l'étiquette à l'intérieur et simplement la
modifier comme vous le souhaitez. Mais, vous savez, vous
devez creuser vers le bas et, vous savez, le sélectionner directement. Euh, vous pouvez sélectionner
l'icône elle-même et simplement cliquer sur cette liste
déroulante et la changer
pour autre chose. Et si vous souhaitez masquer complètement
cette icône, vous suffit de cliquer sur le bouton Masquer ici et
elle disparaîtra. Mais il existe en fait
une façon plus élégante de contrôler
ces éléments avec des composants, et c'est avec des propriétés. Nous allons donc sélectionner le composant
principal, et là où
il est indiqué propriétés, nous allons cliquer sur le
titre ou sur le signe plus. Et nous avons quatre types de
propriétés que nous pouvons choisir : texte variant, booléen et échange d'instance Commençons par le texte, car c'est
ce que nous allons utiliser pour modifier le libellé du bouton. Alors cliquez dessus.
Appelons ça une étiquette. Et pour la valeur, appelons-la
étiquette du bouton. Créez une propriété. Ensuite, ajoutons une propriété
permettant de modifier l'icône, appelée propriété d'échange
instantané. Encore une fois, cliquez et
sélectionnez Instant Swap. Cette fois, appelons-le icône. Et choisissons simplement
une valeur par défaut. Choisissons le cube que
nous avons défini ici. Maintenant, cette liste vous montre
essentiellement tous les composants
qui peuvent être utilisés pour, vous savez, échanger cet élément Je vais donc choisir
Create property. Enfin,
cliquons à
nouveau sur le signe plus et nous choisirons Bolion bolien est comme un zéro et un, un vrai, un faux, une propriété
intermittente C'est l'un ou l'autre. Alors, choisissez Bollion. Appelons cela afficher l'icône. Par défaut, définissez la valeur sur
true et créez une propriété. Maintenant, ces trois
propriétés ont été créées, mais en elles-mêmes,
elles ne font rien. Nous devons les relier
à des éléments spécifiques. Sélectionnez donc l'étiquette du bouton, et dans l'inspecteur, nous allons cliquer sur
cette icône qui indique Appliquer une propriété variable, et nous allons choisir l'
étiquette car il s'agit de
l'une des propriétés
disponibles dans le bouton. Ensuite, je vais
sélectionner l'icône. Et encore une fois, dans l'inspecteur, cliquez sur le bouton
Appliquer la propriété d'échange d'instance. Je vais choisir
le nom de la propriété ou la propriété appelée icône. Et tant que nous en
avons encore sélectionné, passons à l'apparence. Ici, cliquez sur la propriété
Appliquer la variable, et je vais
choisir Afficher l'icône. Maintenant, cela va
lier la variable
booléenne show icon à l'
apparence de cet élément Alors, comment cela fonctionne-t-il exactement ? Eh bien, si je sélectionne cette instance ou cette
copie du composant, vous pouvez voir que
dans l'inspecteur, j'ai maintenant trois options avec lesquelles
je peux jouer. Je peux choisir de masquer complètement
l'icône. Je peux choisir d'échanger cette
icône avec autre chose. Et je peux facilement changer
l'étiquette de ce bouton. Disons, commençons, et choisissons
la flèche droite. Bien sûr, avec ça, je peux, vous savez, copier-coller, créer autant de boutons
que je veux qui aient une apparence différente et qui
fassent des choses différentes. C'est ce qui fait la beauté de
l'utilisation de composants. Maintenant, j'ai mentionné que nous devions
également ajouter un
style secondaire au bouton,
et pour cela, nous utiliserons
ce que l'on appelle la variance dans figma Sélectionnez donc le bouton du
composant principal. Et dans l'inspecteur, cliquez sur Ajouter une variante. Maintenant, cela va tout ajouter à ce type de conteneur ici, et cela va faire deux choses. Il va faire une copie de ce style initial ou de
cette variante initiale, et il va également ajouter
une autre propriété à mon bouton. Elle est appelée propriété 1 par
défaut, mais je peux la renommer en style
de bouton Ou ce que je veux.
Et ce style de bouton, si vous regardez dans le
panneau des couches, comporte deux options. Le premier, qui s'
appelle default, vous savez, vous pouvez le
renommer en principal Et la deuxième variante, vous pouvez la renommer en,
disons, secondaire Maintenant, faisons en sorte que ce type de bouton
secondaire ait un aspect différent. Je vais commencer par
changer la couleur de remplissage, et je vais utiliser EB
F three Ff pour cela. Je vais y ajouter un trait
ou une bordure. C'est b8d7 FF, un pixel. Ensuite, je vais changer le blanc du texte
et de l' icône en noir à
80 %, juste comme ça. Maintenant, si je fais une autre
copie de ce composant, j'ai maintenant une autre option dans la barre latérale
appelée style de bouton, qui me permet de choisir
entre les deux variantes J'ai également accès
aux autres propriétés telles que
Afficher l'icône, l'étiquette et l'icône. Et si, à un moment ou à un autre, vous n'aimez pas l'ordre
de ces éléments, il est très facile de le modifier. Sélectionnez simplement le bouton principal
et accédez à l'inspecteur, simplement la souris sur la
gauche de la propriété jusqu'à ce que vous obteniez cette icône à
trois points Ensuite, vous pouvez les déplacer. Alors peut-être que je veux que l'étiquette soit placée au-dessus, puis qu'elle affiche
l'icône, puis l'icône. D'accord. Maintenant, si je sélectionne
l'une de ces instances, vous remarquerez que l'ordre de
ces propriétés a changé. Changeons donc l'étiquette
de ce bouton pour en savoir plus et masquons complètement
l'icône. J'aimerais donc juste
un simple bouton dans, vous savez, le style secondaire
qui n'a pas d'icône. D'accord, c'était
super simple à faire. Comme vous pouvez le constater, configurer les composants de cette manière vous
fait gagner beaucoup de temps. Plus besoin de reconstruire
les boutons ou apporter des modifications
constantes à vos designs. Maintenant c'est ton tour. Utilisez ce que vous avez appris
dans cette vidéo pour créer votre propre composant de
bouton, et n'hésitez pas à
faire preuve de créativité avec les couleurs, la
typographie et les icônes Faites-en le vôtre. Si vous avez besoin d'un point de départ, vous pouvez télécharger le
fichier Figma sur lequel j'ai travaillé Vous trouverez un lien vers ce lien
dans la section du projet. Et une fois que vous avez fini de
créer votre bouton, veuillez partager une capture d'écran ou simplement une courte vidéo de votre
bouton en action et, vous savez, publiez-la dans la galerie de projets de
classe. J'adorerais voir
ce que tu trouveras. Si ce cours vous plaît, regardez mes autres vidéos. J'ai un cours approfondi sur la mise en page automatique de
Figma qui pourrait
vous être utile Cela dit, merci
beaucoup d'avoir regardé. Bonne conception et
je vous verrai la prochaine fois.
Adi Purdila, UI/UX Designer, Framer Developer, Educator
