Figma tutoriel : Les composants - Les basiques - Créer des composants / Les organiser / Instances

[@romainmsx3844]

Première vidéo que je visionne. Bonne accroche, ça fait plaisir. Explication claire et vous allez direct à l'essentiel. Le top ! Continuez ! Votre contenu m'est tres utile pour m'initier à Figma

[@AD-mh1nn]

Merci vous êtes très agréable et c'est un plaisir vous écouter. Merci

[@JessUIdesign]

🙏😊

[@GianniBergandi]

Top cette nouvelle série ! J'adore toujours ton "salut" à la fin :DDD

[@JessUIdesign]

Merci Gianni !

[@estellelecointe1602]

J’aime beaucoup les tutos en général mais là tu vas beaucoup trop vite ! J’ai pas le temps de suivre ou même de comprendre :(

[@JessUIdesign]

Merci pour ton retour je vais ajuster ça pour le prochain tuto :)

[@biiscott-csm]

@@JessUIdesign j'allais écrire le même commentaire. Et puis je me suis dis que ça va parce que youtube on peut s'amuser a revoir le passage, ou mettre en ralentit. Vraiment du très bon boulot tous ces tutos, merci pour votre travail.

[@JessUIdesign]

🔥🔥🔥🔥Je t'invite à répondre à un SONDAGE qui te prendra moins d'1 MINUTE avec juste 4 questions. Cela me permettra de te proposer une FORMATION qui soit vraiment ADAPTÉE à TES BESOINS 💪💪💪 ▶︎ forms.gle/sn5kAbR8UNwXnYYz6 🔥🔥🔥🔥

[@umento]

Pour remplacer pour certains besoins Photoshop canva est top aussi !

[@JessUIdesign]

C’est vrai pour des choses toutes simples ça peut faire l’affaire

[@xjrhg55]

Super tuto mais sans la musique de fond ce serait bien mieux !

[@JessUIdesign]

Les vidéos plus récentes n’ont plus de musique de fond ;)

[@Nhasub]

Pas mal de problème de montage , ( couleur , on remarque les reprises a chaque fois , camera qui disparaît ) mais au final le contenue est très intéressant et bien expliqué

[@JessUIdesign]

Effectivement cette vidéo fait partie de mes débuts sur KZbin elle va bientôt dater de 4 ans ;)

[@Nhasub]

@@JessUIdesign j'ai remarqué , j'ai était voir la dernière vidéo que tu as fait et ça change énormément la qualité est au rendez vous !

[@JessUIdesign]

@Nhasub Merci 🙏

[@janedeveloppeuse]

Bonjour moi j'ai un problème, quand je créer une frame avec deux boutons et qu'on je suis par exemple sur mon site et je veux aller récupérer un bouton dans un composant il ne m'affiche qu'un bouton au lieu de tous les boutons que j'aurai créer , des solutions svp ?

[@haegelejoan]

L'autre jour, j'ai quand même vu passer une question sur l'export des sprites à un webdesigner sur Photoshop, Indesign ou Illustrator 😝

[@JessUIdesign]

Ha ben comme quoi, il en reste encore qui ne connaissent pas les logiciels dédiés au web. Ces logiciels qui nous facilitent tellement la vie 😄 Quand on y est passé, un retour en arrière n’est plus possible. C’est comme niveau dev front, avant on faisait des css basiques puis le passage à Sass ou Less et ce n’est plus possible de revenir en arrière.

[@tituserateaux5455]

vidéo génial

[@JessUIdesign]

😊

[@michelscor1793]

Bonjour, heureusement qu'il y "pause" :-) c'est rapide, mais s/explicite, merci

[@JessUIdesign]

Je fais en sorte que le format soit le plus court et optimisé possible :)

[@michelscor1793]

@@JessUIdesign et bien c est le cas, merci.

[@carolinehouadj2288]

Merci je débute et tes vidéo m'aide beaucoup mais effectivement parfois tu ne dit pas ce que tu fais exemple pour dupliquer la page pour faire un theme bleu et violet tu selectionne le button et tu vas dans le menu je crois voir .... layout et je ne vois pas la meme chose chez moi dans mon Asset :( et si c possible de nous faire des mises a jour de figma car il évolue constament mais je m'accroche merci encore

[@JessUIdesign]

Hello Caroline, effectivement cette vidéo date un peu. Pour la vidéo sur les mise à jour, tu peux aller voir cette vidéo : kzbin.info/www/bejne/hprTYqh8p6drf6s Pour aller plus vite, j'ai créé une formation pour apprendre à utiliser Figma rapidement en 4h. Elle contient les mises à jour. Et je la mets à jour constamment en fonction des retours et des MAJ de Figma. COmme j'ai atteint les 10 000 abonnés, je lance une offre limitée d'une semaine à 10% sur cette formation, pour fêter ça (Je vais faire une annonce) : jessicatrocme.podia.com/apprendre-a-utiliser-figma-rapidement?coupon=10KABONNESOFFRE10

[@MrAbittan]

Merci pour la démo. Comment faire pour intégrer une vidéo sur Figma stp ?

[@JessUIdesign]

Grâce à des plugins je vais faire une vidéo dessus prochainement

[@justineatelierepure2296]

Je débute avec Figma... et j'ai du mal à comprendre ce qu'est un composant et à quoi il sert. Pourrais-tu m'éclairer stp ?

[@JessUIdesign]

Les composants (component) sont des éléments réutilisables. Tu crées par exemple, un bouton que tu transformes en composant. Il va se retrouver dans "Assets" ta librairie de composants. Tu vas pouvoir glisser ton bouton dans tes maquettes. Tu obtiens des copies de ton composant, on les appelle des instances. Imagine avant quand on faisait les maquettes sous photoshop, tu avais créé par exemple une quinzaine de maquette avec un bouton bleu. Finalement, ton client ne veut plus de bleu, il veut du rouge... Tu devais alors modifier chaque bouton sur chaque maquette pour changer juste la couleur. Alors que si tu as créé un composant pour ton bouton et que tu as fait une quinzaine de maquette. Le client arrive et te dit qu'il voudrait des bords arrondis pour ses boutons. Pas de soucis, tu mets des bords arrondis sur ton composant bouton (Ton master) et toutes tes instances (tes copies) seront mises à jour en même temps. Est-ce que c'est plus clair ?

[@justineatelierepure2296]

@@JessUIdesign Ok super ! Merci beaucoup pour les renseignements

[@JessUIdesign]

Avec plaisir 😊

[@sawadeesam1590]

je te kiff

[@moneyfr]

Je voulais savoir l'intérêt de dessiner ça sur figma ? On peut exporter en html ?

[@JessUIdesign]

Dans un processus avec client il y a une phase de validation de maquette donc ici sous Figma, puis viens la phase d’intégration html css. Au niveau de la récupération de code il y a des css générés. Pour l’html apparemment il y a un plugin qui vient de sortir à ajouter UIcode. Mais je ne l’ai pas encore testé je ne sais pas si le code généré est propre.

[@JessUIdesign]

Quelle activité exerces-tu ?

[@butinarnaud9351]

Merci pour cette super video ! J'ai beau crée un component et le dupliquer comme expliqué, je n'arrive pas à faire apparaître le panneau "instance" ds la colonne de droite, aurais-tu une idée ? merci encore pour ton travail, c'est très instructif et cela va bcp m'aider, continue ! :)

[@JessUIdesign]

Il faut sélectionner dans la colonne de gauche ton instance et dans ce cas tu verras les infos de ton composant dans la colonne de droite. Tu peux aussi regarder le dernier tutos que j’ai fait sur les composants complexes, ça pourrait peut-être davantage t’éclairer à ce niveau.

[@butinarnaud9351]

@@JessUIdesign Merci bcp pour ta réactivité, je vais essayer et me regarder tes autres tutos ;)

[@kanaillaurent526]

Bonjour, je suis développeur et j'ai créé il y a 20 ans déjà un site qui n'attire personne car personne n'y comprend rien et je suis le seul à l'utiliser chaque jour. Je ne peux plus travailler seul pour le faire connaître il me faudrait une expertise ux. Mais je ne sais pas vers qui m'orienter pour avoir une (très) bonne expertise. Un (des) conseil(s) avisé(s) ? Merci.

[@foreversamir]

super tuto , sauf que parfois , vous etes super rapide quand vous cliquez sur un espace ou un bouton Merci pour le partage

[@JessUIdesign]

Merci pour ton retour. Cette vidéo date de 3 ans, tu peux regarder mes dernières vidéos qui ont bien évoluées depuis ;) Tu pourras me dire ce que tu en penses :)

[@olivier2101]

Beaucoup trop rapide : impossible de suivre les mouvements de la souris pour reproduire une fonctionalité... même au ralenti, il faut décomposer image par image, c'est usant. Dommage.

[@JessUIdesign]

Merci pour ton retour, je vais le prendre en compte pour mes vidéos à venir.

[@heidiganlonon1653]

J'aime bien ce que vous proposez comme contenu mais j'aimerais bien qu'avant d'expliquer une notion que vous puissiez la définir euh pour qu'on puisse savoir ce que c'est, à quoi elle sert et quand est-ce qu'il faut utiliser des composants typiquement qu'est-ce que c'est un component merci

[@JessUIdesign]

Merci pour ton retour Heidi : Pour aller plus loin et apprendre toutes les fonctionnalités de Figma de manière structurée, tu peux rejoindre ma formation : jessicatrocme.podia.com/apprendre-a-utiliser-figma-rapidement Quand un élève a des questions je lui réponds rapidement et selon le besoin je fais même une visio. Au plaisir de te retrouver de l’autre côté :)

[@heidiganlonon1653]

@@JessUIdesign merci😊

[@mugcarnivore2493]

Petite erreur dans la vidéo : tu as écrit iOS ors tu devais parler de MacOS je pense.

[@JessUIdesign]

Merci pour ton retour :)

[@Gueshiina43]

C'est dommage j'ai vite décrochée car c'était trop rapide pour moi et j'ai pas eu le temps de tout d'assimiler les choses....

[@JessUIdesign]

Effectivement, j’ai opté pour des vidéos tutoriel les plus synthétiques possibles qui sont des contenus gratuits. Après j’ai créé une formation complète et détaillée pour apprendre à utiliser Figma. Tu trouveras le lien dans la description. En tout cas, Tu peux ralentir la vidéo ou encore mettre en pause pour mettre en pratique en vrai 😉 C’est en s’entraînant que l’on progresse.

[@ThELanTy]

bien expliquer, mais un peu rapide on dirais ta pas le temps

[@JessUIdesign]

🙏☺️ J’ai amélioré mes vidéos, mes montages après celle-ci. Je te conseille d’aller voir la vidéo sur la mise à jour 2022 des composants : kzbin.info/www/bejne/hprTYqh8p6drf6s

[@ElectraPsycho]

Super ! Mais comment fait-on quand on a créé un component par erreur ? Impossible de le supprimer :(

[@JessUIdesign]

Tu veux supprimer le fait que c’est un composant et revenir à l’état d’avant ?

[@ElectraPsycho]

@@JessUIdesign Oui c'est ça. Par exemple, j'ai mis en component une frame par erreur et je veux supprimer ça pour que ca redeviennent une "simple" frame

[@JessUIdesign]

Quand on a transformé une frame en composant il garde les mêmes propriétés que la frame. Je pense que c’est pour cette raison qu’ils n’ont pas prévu de retransformer en simple frame. Il peut rester en mode composant sans que ce soit gênant. Si vraiment tu veux que ton contenu soit dans une frame simple, tu es obligée de sortir tes éléments et de recréer une frame.

[@voxybuns]

@@ElectraPsycho Réponse tardive mais un moyen rapide de le faire serait de dupliquer ton component pour en faire une instance. Ensuite, tu fais un clic droit sur celle-ci et tu cliques sur "Detach Instance", et tu retrouveras une frame. Tu peux ensuite supprimer le component originel ! :)

[@Saskyia]

@@voxybuns Merci pour ce tip !