Transcription
1. Bienvenue sur le cours de Figma - Créer des composants: Salut, bienvenue dans la classe. Je m'appelle sidebars et je suis concepteur de
produits et marketing. Et aujourd'hui, nous allons
parler des composants. Et je vais vous montrer comment
créer ces modules vraiment
dynamiques. Et puis Figma,
qui a contribué à rendre votre processus de conception beaucoup
plus efficient et efficace. Ici, nous avons un faux site Web de flux
social et nous avons quelques boutons sur le côté droit
qui sont pré-animés. Ainsi, vous pouvez voir
que lorsque vous les survolez, ils se transforment en trait, contour,
remplissage blanc par rapport à un fichier NoStroke et bleu. Maintenant, ceux-ci représentent évidemment des
boutons et dans ce cours, je vais
vous montrer comment créer les
composants individuels nécessaires pour créer cet effet. Lorsque vous concevez
vos applications,
sites Web ou tout
type de programme, vous avez les connaissances nécessaires pour créer des composants
dynamiques
vraiment précieux qui peuvent donner une belle apparence à votre processus de
conception, plus soigné, et
surtout, vous
fait gagner beaucoup de temps. Donc, si vous recherchez
un
cours très facile à suivre et que vous avez peut-être été abonné à
mes précédents. Vous savez que
j'ai tendance à adopter une
approche très légère de l'enseignement. Et j'ai hâte de
vous voir dans mon cours de Skillshare. Si vous décidez de vous inscrire, je ne sais pas ce que vous
faites en ce moment, mais si vous voulez me rejoindre, n'hésitez pas à me suivre et nous créerons certains de
ces boutons ensemble.
2. Créer le premier atout pour les composants: Bienvenue
dans la première leçon de ce cours Skillshare, nous allons créer des boutons
qui ont des effets de survol et qui sont créés à l'aide de la fonction
composante de Figma. La première chose à faire est
donc de
concevoir nos boutons. Nous allons donc aller
dans l'onglet rectangle, créer un rectangle et renommer cette forme. Maintenant, par défaut, vous verrez la couleur naturelle, c'est un gris. Et nous allons
vouloir créer ceci et en faire
la couleur du bouton. Donc si nous allons sur le
carré et que nous choisissons Solide, puis que nous choisissons une couleur,
nous allons opter pour un bleu. Ensuite, nous allons arrondir
les coins parce que nous pouvons
créer un bouton avec solides comme des coins angulaires, mais les boutons ronds ont un toucher agréable et cela fonctionne
bien dans les applications modernes. Nous cliquons donc sur la case et
nous arrivons à cet outil ici, qui modifie le rayon des coins. Je vais faire ça quatre. Et vous verrez
ici comment nous avons une légère courbe en
fonction de la taille de votre bouton. Donc si je le réduit, vous verrez comment le
rayon changera en conséquence et l'agrandira. Il ressemble plus à
un rectangle et le raccourcit pour avoir un rapport
de rayon de coin plus grand. Donc, en fonction de la
taille
de votre bouton , vous pouvez
modifier cela. Et vous pouvez le
faire à nouveau en saisissant un nombre ou en faisant
glisser le rayon ici. Vous pouvez donc voir en faisant glisser, le rayon est plus gradué. Maintenant que c'est fait, nous allons concevoir
ce bouton dans un cadre. Maintenant, la façon de procéder est que si j' écris avec le bouton droit de la souris sur le carré, vous aurez la possibilité
de sélectionner un cadre. Cela fera de l'image un
et du coin supérieur gauche. Vous pouvez voir comment cette forme
s'adapte sous ce cadre. Maintenant, nous allons nommer
ce bouton afin que nous sachions
qu'il s'agit d'un bouton. Ensuite, nous allons ajouter du
texte à ce cadre. Appuyez sur le bouton Texte
, puis sur l'intérieur. Et nous allons
appeler ça ensuite. Dans cet exemple, il
s'agit d'un bouton suivant pour accéder à une nouvelle page ou à une autre
partie de l'application. Évidemment, ce texte
est un peu trop petit, et même s'il est écrit 18, clairement nos boutons
sont très grands. Bouton, ce sera un ratio en fonction de la
taille de votre bouton. Si je clique ici et que je
clique jeudi, ce n'est toujours pas
assez grand. Allons-y 45. Ouvrez la boîte. Vous allez maintenant voir
comment le texte suivant se trouve dans le cadre du bouton. Maintenant, ce que je vais faire,
c'est centrer ce texte dans la zone de texte
elle-même. Cliquez ici. Ensuite, toute cette section doit être centrée sur
le bouton. Vous verrez ces
icônes ici, les icônes d'alignement,
je vais cliquer sur la ligne centrale
et alignée verticalement. C'est maintenant Central.
3. Créer des variations de composants: Donc ce que nous allons faire
c'est cliquer sur le cadre. Et nous allons le convertir
en composant. Donc, si je clique avec le bouton droit, vous aurez créer un composant. Maintenant, cela
transformera automatiquement le cadre en composant. Et vous pouvez le voir
car il est de couleur violette ou regardez dans l'
onglet des calques à gauche. Maintenant, afin d'obtenir l'effet de
survol là où il change selon que vous entrez ou sortez de la
forme ou de la ressource. Nous allons créer une
variation, une variation. Et vous pouvez avoir
plusieurs variantes en fonction de la complexité de
votre composant. Donc, si vous cliquez dessus
, en haut, vous verrez Add variant uses
mask or union selection. Nous voulons ajouter une
variante et vous verrez comment elle
crée automatiquement une copie, que nous pouvons ensuite
modifier pour obtenir l'effet souhaité. Le contour en pointillés
montre simplement l'étendue
des composants. Et si vous cliquez sur
ce bouton plus, il ajoutera une autre variante. Nous avons donc le bouton par défaut en
haut, puis
une variante en dessous. Maintenant, changeons l'
esthétique de celui-ci. Donc, ce que nous voulons
faire pour qu'il soit évident que cela a été survolé, nous allons
changer les couleurs. Donc, ce que nous allons
faire c'est double-cliquer. Et lorsque vous double-cliquez,
il choisit automatiquement élément
de l'arbre le plus bas de
cette ressource sélectionnée. La forme 1, qui
est le rectangle. Il est de couleur bleue et
nous allons ajouter un trait. Maintenant, ce trait sera de la même couleur que le remplissage. Donc si nous cliquons ici, cliquez sur l'outil Pipette, frappez à l'intérieur, vous
verrez maintenant que c'est fait un contour bleu. Et puis si vous faites
l'épaisseur un peu plus large. Évidemment, nous ne pouvons pas voir à quoi cela ressemble à cause
des mêmes couleurs. Nous pouvons changer la couleur de
remplissage en blanc. On y va. Nous avons maintenant un
remplissage blanc et un trait bleu. Et vous pouvez voir que le texte a disparu parce qu'
il était blanc. Donc ce que nous allons faire,
c'est rendre ce texte bleu. Cliquez donc sur celui-ci,
l'outil Pipette. Nous avons donc maintenant essentiellement
un bouton inverse, que nous pouvons ensuite utiliser
comme effet de survol. Et maintenant ça, c'est tout. s'agit essentiellement de la partie des composants
principaux ou des principaux composants réalisés. Et maintenant, nous devons simplement travailler sur le flux réel du bouton.
4. Ajouter des actions de flux dans le composant: Donc, si vous allez dans le coin
supérieur droit, vous verrez le prototype. Désormais, le prototype vous permet d'ajouter des mouvements et des animations aux
objets dans un ordre linéaire. Donc avec cette zone prototype sélectionnée et que je
clique sur un bouton, vous verrez comment nous
avons une petite icône plus. Désormais, avec Figma, vous
pouvez faire un glisser-déposer. Si je clique dessus et que je fais glisser le pointeur vers le bas, vous verrez le
clic automatique et
s'attache
automatiquement à la variante de
composant assemblé. Allons-y. Ensuite, une
fenêtre contextuelle apparaît. Maintenant, si ce que nous pouvons faire
ici est de choisir comment nous voulons que cela interagisse avec
notre souris
ou notre toucher, ou comment vous utilisez et sur
quel appareil l'utilise. Pour le moment, par
défaut, il a cliqué. Mais nous voulons l'avoir
parce que les femmes, lorsque la souris
entre dans le bouton, nous voulons qu'il passe
à l'autre variante. Et quand il sort
du complexe composé, le conteneur du bouton, nous voulons qu'il
revienne à ce qu'il était. Cliquez donc en survolant. Il passe de la propriété
1 à la variante à. Maintenant, vous pouvez
choisir d'avoir un instant, vous pouvez choisir
de le faire dissoudre, d'
avoir un léger fondu,
ce que nous allons faire. Donc, ce que cela fait maintenant, c'est
que chaque fois que vous entrez sur ce bouton, il affichera ce bouton. Et lorsque vous quittez ce bouton,
il affichera ce bouton.
5. Tester les composants: Maintenant, pour tester cela,
nous allons créer un cadre très rapide. Nous pouvons donc imaginer qu'
il s'agit d'un moniteur. Et ce moniteur est, nous allons mettre ceci, le
mettre dans un cadre. Cliquez donc avec le bouton droit sur Et on va juste y arriver. On peut y faire ce que
tu veux. Vous pouvez donc imaginer que
c'est l'application. Et nous allons maintenant
vouloir placer
le composant
dans cette zone d'application. Donc, vous allez
dans Assets et vous verrez, parce que nous avons créé un composant, il en a fait un actif de
composant local. Vous pouvez maintenant le
faire glisser dans la zone et vous verrez comment nous
pouvons ensuite les empiler. Donc, s'il s'agit d'un bouton
isolé, tant mieux. Il peut s'agir d'un
bouton suivant et d'un bouton Précédent. Donc, si nous essayons la sortie, faites-le, copiez-collez. Et maintenant, nous avons deux boutons. Et nous pouvons appeler
celui-ci, celui-ci ensuite. Et nous pouvons double-cliquer
et revenir en arrière. Vous remarquerez maintenant qu'avec les ressources que vous avez
sélectionnées en interne, vous pouvez réellement modifier
le texte de celles-ci sans affecter le composant
d'origine. Ce qu'il fera, c'est conserver
toutes les animations, conserver tous les flux
comme nous le faisions auparavant, mais il conservera le texte
qui est vraiment utile. Vous n'avez donc pas à créer dix versions du
même composant. Vous pouvez créer une
version, puis continuer à modifier dans votre zone de travail
principale. Voici donc notre bouton de retour
et notre bouton suivant. Et évidemment, vous pouvez concevoir
votre espace d'application comme vous le souhaitez. Je vais juste rester simple et
agréable pour que nous puissions mettre une petite barre en haut pour qu'
elle ressemble à une sorte
d'en-tête de site Web. Changez la couleur. Alors peut-être, peut-être que nous sommes
en train de créer une forme. Peut-être ceci, peut-être que
c'est un formulaire. Alors faisons en sorte que ce soit blanc. Vous pouvez ajouter un effet. Si vous cliquez dessus, par défaut, il affiche une ombre portée. Nous pouvons ajouter un rayon. Encore une fois, toutes les choses que vous avez déjà
apprises en classe. Et si je reviens aux calques, vous verrez comment il s'insère
dans le cadre. Donc, si je clique sur
l'outil d'alignement, il se placera automatiquement
au centre de ce cadre. Maintenant, encore une fois, vous pouvez imaginer qu'il
s'agit d'une sorte de forme. Et juste pour montrer
qu'il s'agit d'un formulaire, je vais mettre quelques lignes. C'est donc là
que vous avez votre nom et votre adresse e-mail, et cetera. Et maintenant nous allons le tester. C'est donc la
partie où vous pouvez voir comment fonctionnent vos animations. Donc, si vous cliquez sur le cadre et que vous allez
sur cette icône de lecture, il le
chargera automatiquement dans un environnement de
type application. Donc, si je clique sur Play, et que nous
faisons un petit zoom arrière, passons à l'écran, parce évidemment nous avons créé une très
grande application ici. Mais vous allez voir ici
comment nous avons les boutons. Et si je passe en revue ces boutons, vous verrez comment ils
ont maintenant ces effets d'animation. Encore une fois, best
rend le processus de conception des composants
très, très facile. Parce que comme vous pouvez l'
imaginer, si vous
deviez créer manuellement tous ces
boutons et créer manuellement tous ces flux pour
chaque image de votre application, cela
prendrait une éternité. Et dans cet exemple, vous
pouvez voir comment si je fais un copier-coller,
créer une deuxième image. Et juste pour montrer comment cela fonctionne, vous pouvez aller ici et changer, changer cet arrière-plan pour qu' il s'agisse d'une
page différente, si vous voulez. Nous allons donc supprimer
ceci, les supprimer et modifier l'arrière-plan afin de voir qu'
il s'agit d'une application différente. Nous pouvons animer ces boutons pour qu'ils fonctionnent de la même manière. Donc, si je clique dessus
et que je vais dans le prototype, je peux réellement créer
ce flux Habits propre. Ainsi, non seulement il mémorisera
le composant, les
animations et les flux d'origine ,
mais vous pouvez également ajouter flux et de prototypes
supplémentaires directions de flux et de prototypes
supplémentaires à l'
interface réelle dans laquelle vous travaillez. Donc, si je vais dans le prototype, vous verrez comment il
a déjà l'interaction de survol, mais vous pouvez le faire
là où il a cliqué, il ferait autre chose. Donc, si je fais cela
et que je le fais glisser ici, vous verrez comment cela ajoute
une deuxième interaction. Vous devez varier l'interaction et
celle que vous faites. Dans celui-ci, nous
disons onclick, naviguez jusqu'à la deuxième image. Et puis, dans ce cadre,
nous voulons être en face. Donc, si nous cliquons sur
Précédent, cela revient à cette page. Voyons à quoi
ça ressemble. Je vais ici, je clique sur Suivant. Cela ouvre le nouveau cadre. Retour. Elle ouvre le cadre précédent.
7. Conclusion du cours: Vraiment facile, vraiment
simple à faire. Et vous pouvez rapidement
voir comment créer des conceptions vraiment utiles et très rapidement
des conceptions vraiment utiles et
rapides en utilisant les
composants et Figma. Et ce que j'
aimerais voir, c'est
créer votre propre carte ou une application ou adapter
une application, un tableau de bord, et
créer simplement quelques boutons. Et voyons comment se passent
ces animations. Et je les suivrai dans notre domaine de projet de la classe. Une fois que
vous avez fait cela,
assurez-vous prendre des
captures d'écran ou de télécharger des vidéos afin que nous
puissions voir comment vous vous en sortez. Et si vous avez des questions, hésitez pas à les laisser
dans la zone des questions. Et la critique a
toujours été très utile. Merci d'avoir
regardé ce cours. Et si vous aimez que j'aille
plus loin dans les composants, nous pouvons en créer des
très, vraiment complexes avec de
nombreuses variantes et de nombreux prototypes de flux. Merci, et je
te verrai au prochain cours.
Saad Bhatty, GeoTiktoker and UX/UI Designer
