Barre d'outils

Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Atelier Figma - Design d'application
Revoir le teaser Je m'abonne
4,5
Transcription

159,00€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
4,5
159,00€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

A l'issue de cette formation Figma vous serez en mesure de designer et vos propres interfaces, créer des composants réutilisables, créer des styles de couleurs et de texte, créer des prototypes, et utiliser les ressources de la communauté Figma. Vous serez autonome dans la création de vos projets d'interfaces sur Figma !

Figma et un logiciel de design d'interface, il permet de concevoir des design application de site web ou même des visuels pour les réseaux sociaux. Figma et surtout connu pour sa fonctionnalité collaborative car il permet de travailler en équipe sur un même projet, et en même temps. Cela permet de gagner en productivité et en efficacité. L'autre avantage de Figma, c'est qu'il permet de réaliser des projets de conception design de A à Z, du design au code en passant par le prototypage, bref, c'est un outil professionnel polyvalent et très complet !
 

Dans cette formation nous découvrirons comment installer Figma et le prendre en main, utiliser les différents menus et module, designer une application mobile de A à Z en parcourant les fonctionnalités les plus essentiels de Figma, prototype, ainsi que animer des écrans.

Voir plus
Commençons par explorer la partie haute de Figma. Alors ici vous avez le menu qui est finalement exactement le même menu que ce que vous avez en haut, donc ils l'ont répliqué ici avec les différents éléments, donc ici pas grand chose de très intéressant. On va passer directement au curseur. Pour le curseur vous avez deux types de curseurs, donc un premier curseur qui permet de pointer des éléments sur l'interface et un deuxième curseur qui va vous permettre de scale, alors scale ça veut dire quoi ? Ça veut dire agrandir ou rétrécir un élément, donc soit un élément de typographie, soit une image, soit un élément d'interface graphique, par exemple un carré blanc, par exemple ce carré blanc, et qui va vous permettre du coup, vous voyez que le curseur a une tête un petit peu originale, il va vous permettre en le modifiant de garder les proportions, donc par exemple là quand j'agrandis ce carré, il garde totalement les proportions que j'avais définies au départ. Pareil ici pour les éléments, je peux les agrandir ou les rétrécir sans qu'il y ait de changement de proportion, et je vais vous montrer ce que ça fait quand je prends le curseur normal qui permet de pointer. Vous allez voir que voilà, j'ai une modification des proportions, et donc ça peut être très embêtant d'avoir ces disproportions concrètes, donc c'est pour ça que le curseur scale vous permet quand même de garder ces proportions, ce qui est extrêmement important quand on parle de design d'interface. Autre élément d'interface en haut, c'est ce qu'on appelle les frames. Les frames, c'est ce que je vous définissais comme étant des gabarits tout à l'heure, donc par exemple si je dézoome un petit peu et que je crée une frame, j'ai la possibilité de créer une frame totalement customisée, donc exactement dans les proportions que j'ai envie, donc par exemple comme ça. Ici vous voyez que j'ai créé une frame 324 par 1852, ça n'a pas trop d'intérêt et ça ne correspond à pas grand chose, mais sachez que lorsque vous cliquez sur frame, à droite ici dans le panneau, vous allez avoir des frames prédéfinies et c'est celles-ci que vous allez devoir utiliser par exemple notamment pour construire l'application qu'on a envie de designer en utilisant par exemple ici un écran iPhone 11 Pro Max, mais en l'occurrence ce qu'on avait utilisé pour l'application qui nous intéresse, c'est ceux de l'iPhone 11 ou l'iPhone 10, voilà exactement la bonne frame. Sachez que vous avez aussi d'autres frames qui existent, vous pouvez designer pour des tablettes, vous pouvez designer pour les desktops, donc c'est-à-dire pour les ordinateurs, mais vous pouvez aussi créer des présentations, vous pouvez aussi designer pour des Apple Watch et aussi, et c'est une des particularités de Figma, c'est qu'on peut designer pour du papier alors qu'on est quand même sur un outil d'interface digitale, on peut par exemple créer une frame A4 et donc là c'est très intéressant pour pouvoir par exemple faire rapidement des PDF et on peut aussi faire du social media, donc par exemple un post Instagram, donc là il nous crée une frame de 1080 par 1080 qui est un post carré pour Instagram, bref grâce aux frames vous pouvez vraiment créer tout type de gabarits qui sont directement customisables puisque si j'ai envie de les rétrécir ou les agrandir je peux le faire, mais en tout cas vous pouvez les utiliser directement pour designer vos écrans. Dans la partie frame, j'ai un deuxième type de frame, alors c'est un outil qui est assez intéressant pour l'export notamment, donc lorsque je le sélectionne, je vais pouvoir en fait découper une partie de mon écran, donc je prends un exemple ici, je veux découper le haut de mon écran, j'ai comme une zone qui va se définir et qui va être notée tout de suite slice 1 ici et en fait cet élément là, je vais pouvoir facilement l'exporter et du coup je vais pouvoir exporter slice 1, mais uniquement la zone qui a été définie, donc là si je l'exporte, je peux choisir dans mon bureau effectivement de le mettre ici et vous allez voir que la slice 1 elle correspond vraiment à la définition de la zone que j'ai effectuée sur mon écran, donc cet outil de frame slice ça peut être intéressant pour exporter rapidement des choses et obtenir une validation d'un collaborateur ou d'une équipe sur une partie d'un écran. On continue du coup notre exploration du panneau en haut, donc ici je peux en fait décider de designer des rectangles ou plusieurs formes comme des étoiles, des polygones, donc je vous montre par exemple ici j'ai sélectionné rectangle, donc je peux sélectionner un rectangle ou une forme et vous voyez pour le coup celle-ci elle est grise, pourquoi elle est grise ? Parce que c'est pas une frame, c'est vraiment un élément de design, donc par exemple pour avoir designé ce carré blanc ici, et bien en fait j'ai utilisé un rectangle et d'ailleurs vous voyez le calque s'appelle rectangle, donc en fait j'ai utilisé un rectangle que j'ai directement mis dans la bonne taille et après j'ai changé la couleur, mais vous voyez du coup que la différence entre un gabarit, une frame et un élément de design, donc là on est vraiment sur des éléments, donc ça peut être des ronds aussi, je vous montre voilà, et ensuite on vient les placer sur notre écran pour pouvoir effectivement créer notre design. Donc ici vous avez plein de formes, vous pouvez aussi utiliser des images et insérer des images dans vos designs. On continue l'exploration de notre barre d'outils figma, ici j'ai un outil pen qui est en fait un outil qui va me permettre de dessiner mais de manière vectorisée, donc je vous montre ce que ça donne, donc j'ai sélectionné le curseur et puis là je vais dessiner voilà des vecteurs, donc c'est un petit peu comme par exemple sur illustrator, vous pouvez créer des formes, donc là j'ai fait une espèce de goutte, et cette forme ensuite vous allez, l'avantage c'est que lorsque vous avez terminé vous pouvez la valider, et tout de suite cette forme là vous allez pouvoir la réduire, l'augmenter, y ajouter une bordure mais éventuellement une couleur de remplissage ou de bordure, donc les deux sont possibles, et ensuite vous allez pouvoir l'utiliser comme vous voulez dans votre design. Et l'autre outil de dessin qui existe c'est le pencil, donc le pencil c'est le crayon, et donc là par contre vous êtes totalement libre de dessiner comme vous voulez, et une fois que vous avez dessiné, c'est pareil, vous pouvez décider de choisir la bordure ou éventuellement de remplir les zones qui sont fermées évidemment, mais vous avez une liberté de créer exactement ce que vous souhaitez grâce à ces deux outils. Donc le pen pour la partie vectorisée, et le pencil où là vous êtes totalement libre de dessiner comme vous voulez, effectivement il faut avoir en tête que le pencil va être quand même plus adapté pour les gens qui ont une tablette graphique, parce que dessiner directement depuis un ordinateur des éléments graphiques directement à la main c'est un petit peu compliqué, donc plutôt à recommander pour les gens qui ont une tablette graphique l'outil pencil. On continue avec la partie haute de Figma, et on passe au texte. Alors la création du texte c'est simple, vous sélectionnez texte, et là vous créez votre zone de texte comme vous le souhaitez, et puis directement dedans vous allez pouvoir dire ce que vous voulez et écrire ce que vous voulez, donc là j'ai écrit par exemple bonjour, et ici je vais pouvoir ensuite tout simplement je vais pouvoir tout simplement gérer mes titres avec le panneau ici qu'on va voir tout à l'heure, mais par exemple si je reprends mon outil scale pour vous montrer en fait ce que ça donne, là plutôt que de changer la typo, je peux la grossir comme ça avec cet outil scale, c'est ce qu'on a vu tout à l'heure, donc je trouvais intéressant de vous remontrer ça pour que vous voyez à quoi ça ressemble, mais voilà la partie texte il n'y a rien d'extraordinaire, après c'est plutôt tout va se jouer plutôt dans le panneau ici à droite, mais on aura l'occasion de voir ça tout à l'heure. Avant-dernier item de cette barre de menu en haut, c'est l'outil main, alors l'outil main c'est assez intéressant quand on a beaucoup d'écrans sur une sur une frame ou sur un sur un projet, et donc du coup en fait en cliquant on peut se déplacer sans avoir peur de modifier ou de déplacer des éléments d'interface, puisque là vous voyez par exemple je me place sur le texte Paris, et avec la main je peux vraiment passer d'un écran à l'autre, donc c'est assez intéressant et ça permet quand même de sécuriser ses écrans et de se déplacer d'un écran à l'autre sans rien toucher. Le raccourci c'est hash, donc vous n'êtes même pas obligé de cliquer sur ça, vous pouvez être sur votre curseur en train de travailler sur des éléments graphiques, cliquez sur hash et vous passez directement sur la main, et ensuite vous pouvez revenir directement sur le curseur ici ou en utilisant le raccourci clavier qui est V, donc vous pouvez switcher entre hash pour vous déplacer et V pour revenir avec le curseur. Dernière partie du menu du haut pour Figma, c'est la petite bulle de messages, donc c'est finalement l'ajout des commentaires, donc par exemple quand vous êtes en équipe, ce qu'il y a de très intéressant avec Figma c'est qu'on peut ajouter des commentaires, et là par exemple je vais vous montrer comment ça fonctionne, vous cliquez sur commentaire, le raccourci c'est C, et là vous dites par exemple cette boîte bleue, ce rectangle bleu, j'aimerais bien qu'en fait il soit orange, donc là je vais glisser un commentaire, mettre le rectangle en orange, et là je peux poster ce commentaire là, je clique sur poster, j'attends, ça charge, et voilà. Du coup là j'ai mon commentaire qui a été, donc quand je retourne dans commentaire, j'ai mon commentaire qui est là, il peut s'afficher et la liste des commentaires va s'afficher ici sur le côté droit, et va permettre de voir pour tout le monde tous les commentaires qui ont été mis, donc ça peut être des remarques de design, ça peut être ce que vous voulez, et les autres membres de l'équipe vont pouvoir répondre à ces commentaires, et il va pouvoir y avoir des discussions ou des échanges d'arguments pour dire oui, pour dire non, etc, etc, donc c'est quand même assez intéressant. Lorsque vous voulez quitter le mode commentaire, vous pouvez faire échappe, et ça ferme le commentaire, et si vous cliquez une deuxième fois sur échappe, vous avez vu je suis repassé directement dans le mode curseur, sinon vous pouvez toujours rebasculer avec le raccourci clavier V, ça vous permettra de récupérer votre curseur, et donc là vous voyez que ça n'altère pas votre design, puisque je suis revenu dans le mode curseur pour afficher les commentaires, je viens dans la partie commentaire, et là mon commentaire s'affiche, donc c'est très pratique parce que quand je suis en train de designer, je ne suis pas pollué par les commentaires qui s'affichent par les équipes qui veulent mettre des retours ou préciser certaines choses, etc, etc, donc c'est assez utile. Figma a bien pensé à structurer les choses pour que ça n'altère pas votre vision du design, ou que ça n'altère pas votre création graphique d'interface, donc c'est quand même assez intéressant. Voilà un petit peu pour la partie des outils en haut à gauche, et puis j'aimerais vous montrer juste pour terminer ce qui se passe en haut à droite. En haut à droite c'est finalement ces petites bulles de couleurs, c'est les utilisateurs qui sont sur ce projet. Aujourd'hui je suis tout seul à faire cette formation face à mon écran, donc c'est normal que j'ai pas d'autres bulles, mais certains projets, il y a plusieurs bulles, trois, quatre, cinq, voire plus, et on voit les curseurs de chaque utilisateur qui se baladent sur l'écran, et on voit en direct ce que les autres font, donc ça permet de vraiment travailler l'aspect collaboratif. Le bouton share qui est ici vous permet de partager votre projet, donc je vais cliquer pour que vous puissiez voir ce que ça donne. Donc soit j'invite quelqu'un via son email, et je peux choisir s'il peut voir ou s'il peut éditer le document, et sinon je peux décider de prendre le lien et de dire et considérer que le projet est accessible par tous les gens qui ont le lien, et pareil je peux décider si les gens peuvent éditer ou juste voir les choses. Donc ici je peux copier le lien, vous voyez j'ai le petit feedback ici qui me dit le lien a bien été copié, donc là je peux partager ce lien là, et les gens pourront voir le document, mais je peux aussi décider qu'ils puissent l'éditer si jamais ils veulent. Donc voilà, c'est la petite fonctionnalité de partage, donc c'est assez intéressant. Et puis pour terminer, il reste deux éléments. Celui-ci c'est pour présenter un élément, donc là par exemple je sélectionne une frame en cliquant dessus, en cliquant sur le titre de la frame, et là je clique sur play, et là je bascule dans une nouvelle catégorie de Figma qui est en fait la prévisualisation de mon écran. Donc là j'ai vraiment un aperçu de ce qu'est mon écran, comme s'il était en fait sur un mobile, puisque là en l'occurrence on est sur la création d'une application mobile, et je peux naviguer entre les différents écrans et vraiment avoir un aperçu concret de ce que ça donne, et ça permet de se projeter, de visualiser un petit peu les choses. Donc pour quitter l'aperçu, c'est simple, il faut fermer ici, hop, sachez que vous pouvez aussi partager seulement les prototypes en cliquant, donc je vais recommencer, je prends un autre écran, je clique sur prototype, le prototype va se charger, et là si vous êtes sûr de votre coup, vous pouvez partager le prototype en cliquant dessus, et là par contre ça va ne partager effectivement que le prototype. Voilà, donc je ferme ici. Enfin, dernière partie, c'est la zone ici qui va vous permettre de zoomer dans votre écran. Donc je vais par exemple pouvoir dézoomer un petit peu, sachez qu'avec un trackpad on peut le faire manuellement, mais cet outil est quand même assez intéressant, je peux zoomer à 50%, je peux zoomer à 100%, alors 100% c'est vraiment ce que les gens verraient par rapport à leur gabarit, donc c'est assez intéressant, et puis ensuite je peux décider d'afficher les grilles de layout ou pas, je peux décider d'afficher les règles, donc par exemple là la règle, hop, vous voyez, elle était ici et sur le côté elle a disparu, donc ici je vais pouvoir la remettre, voilà, donc ça permet de gérer un peu le zoom, le dézoom, les grilles, etc, donc c'est assez utile. Donc voilà pour la partie haute de Figma, on a exploré un petit peu les premières fonctionnalités, puis maintenant on va passer au panneau de gauche, et puis on finira par le panneau de droite avant d'entrer dans le vif du sujet, c'est-à-dire la création de cette application de météo.

Programme détaillé de la formation

Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
8 commentaires
4,5
8 votes
5
4
3
2
1
pa12
Il y a 10 months
Commentaire
Je viens de débuter la formation mais quel dommage de ne pas avoir le fichier de travail avec... Une grosse perte de temps pour les images, les icones...etc. Pouvez-vous svp ajouter ce fichier à télécharger?
jc.mosca
Il y a 1 year
Commentaire
Comme dit plus haut, mise à part les centaines de "du coup" et "en fait" plutôt agaçants, c'est comme d'habitude chez Elephorm une formation enrichissante. J'ai mis seulement 4 étoiles car il manque la démonstration des overlays, des contraintes, des listes à puces et pas mal d'autres. Ce serait bien qu'Elephorm fasse des mises à jour de ses formations.
ousmane.ndia
Il y a 1 year
Commentaire
Bien pour apprendre les bases, mais manque les nouveautés de 2022.
nicolas.dessis
Il y a 1 year
Commentaire
Merci !
pioupiou06
Il y a 1 year
Commentaire
Super formation ! très bien expliquée !
pulpozien
Il y a 2 years
Commentaire
Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super
maellechancerelle
Il y a 2 years
Commentaire
Super formation!!
stephanehugon
Il y a 3 years
Commentaire
Cette formation est vraiment au top ! Je ne connaissais rien de Figma (étant "seulement" développeur à la base) et j'ai appris beaucoup de choses, je recommande donc cette formation; le formateur est très sympathique et professionnel dans sa pédagogie, c'est très agréable à suivre. Je recommande par contre d'avoir au moins deux écrans (voir trois) pour suivre la vidéo et pratiquer/prendre des notes en même temps.

Seul bémol par contre, pitié Elephorm, mettez les fichiers de travail avec la formation... (Ce n'est pas la seule sur laquelle il manque les fichiers d'ailleurs); mais mettez-les, ça évite d'aller chercher à droite et à gauche des SVG que l'on doit convertir, des images, etc...

A part ça, super formation !
Nos dernières formations Figma
  • Apprendre Figma - Les fondamentaux
    Découvrir
    Dès la fin de cette formation Figma, vous serez capable de créer des designs interactifs avec Figma, de gérer efficacement les styles et les composants, et d'appliquer les principes du responsive design. Vous saurez également comment importer des ressources, utiliser des plug-ins essentiels et partager vos prototypes de manière professionnelle.
    4h41 43 leçons

éditeur de vidéos pédagogiques

Des supports pédagogiques en vidéo, produits avec les meilleurs experts. Dans nos studios à Paris, Lyon ou Montpellier. Vous souhaitez travailler avec nous ?
image-micro