Dupplication et intégration d'un composant externe

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
On se retrouve donc dans cette nouvelle vidéo pour aborder du coup notre dernier écran de l'application, à savoir le search mais dupliqué avec l'intégration d'un écran iPhone. Donc ce que je vais faire comme d'habitude, c'est dupliquer l'écran le plus proche de mon design, je vais le renommer, cette fois c'est 2. Je vais supprimer les éléments dont je n'ai pas besoin, donc ici en l'occurrence toutes les villes, les boutons c'est pareil je peux les supprimer et puis ici en fait je vais utiliser la fonctionnalité qu'on a vu tout à l'heure. Je sais qu'on était à un espacement de 15, voilà ici on suggère Paris en fait c'est très bien et là c'est juste qu'on fait comme si on écrivait Paris mais pas totalement. Et là pour simuler ça on va juste intégrer un pavé numérique qui correspond à notre écran et là on va aller chercher ça dans la communauté parce que je suis sûr qu'il y a des gens dans la communauté Figma qui ont mis à disposition des claviers. Voilà par exemple ici, donc là je vais le dupliquer, alors il faut qu'il charge, voilà. Donc un nouveau projet s'ouvre, ça on l'a déjà vu, les éléments sont en train de se charger puis là je pense que je vais trouver mon bonheur puisque ça a l'air d'être un projet qui est dédié aux composants d'iPhone exactement. Je vais prendre par exemple ici celui-ci, je vais venir là et puis je vais l'intégrer. Alors là je vous conseille de sélectionner votre frame et de l'intégrer, le copier coller dedans comme ça vous êtes sûr qu'il s'intègre bien à l'intérieur et qu'il soit pas à l'extérieur, c'est à dire s'il était à l'extérieur le calque serait au dessus. En l'occurrence c'est un composant, donc ça veut dire que directement lorsque je l'intègre dans mon projet, dans les assets, ici je vais avoir un clavier directement qui va s'afficher en tant que composant, donc c'est assez c'est assez automatique. Et donc là on a directement notre notre écran qui est terminé puisqu'on vient d'intégrer le clavier d'iPhone, donc c'est quand même vraiment super rapide et puis je suis en train de vous dire de remarquer aussi qu'on a terminé le design de cette application et que dans la prochaine partie de cette formation on s'intéressera du coup à la partie prototype ici pour pouvoir voir comment on passera d'un écran à l'autre et comment les designs vont s'adapter pour pouvoir donner l'illusion qu'on est en train de voilà avoir une vue un peu interactive de notre application. Donc rendez-vous au prochain chapitre sur le prototypage de l'application RainAlert.

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