Tellement clair ! Aucune étape n'est oubliée ou juste dite, tout est montré et expliqué. Un bonheur ! Tellement rare de tomber sur une telle implication et application aux détails. Mille mercis !
Vous êtes l'une des rares personnes qui explique en détails sans rien sauter franchement c'est super. On peut pas faire mieux que ça Le tuto sur la génération d'images est très attendu
Première fois je tombe sur ton compte. J'ai envie de suivre une formation en XD et Figma en cherchant je suis tombé sur toi et je pense que je vais y rester. Tes explications sont claires et très compréhensibles. Merci
Merci beaucoup pour ce tuto ! J'ai fais une formation Chef de projet dans laquelle on a eu des cours Figma complètement éclatés ! Le prof nous a fait faire des animations complexes sans même nous montrer les bases. Dans ta vidéo, tout est bien expliqué. Je détestais Figma. Grâce à toi, je suis maintenant comme un gosse qui découvre un nouveau jouet. ;)
Et bien défi réussi pour cette vidéo qui permet de partir d'une première utilisation à une compréhension du logiciel avec des bases solides et un exercice concret ! exactement ce qu'il me fallait. Je continu sur ta formation Udemy, merci !
Votre tuto est vraiment bien, j'ai déjà visionné et appris avec d'autre tuto, les méthodes sont différentes et c'est ça qui j'ai adoré dans votre tuto. Ce sera encore trop bien si vous nous montrez d'autre technique pour ne pas perdre trop de temps et avec de norme en tant que design web ou application.
j'en ai les larmes aux yeux tellement c'est bien expliqué, même sur la page officielle de figma ils n'expliquent pas aussi bien comment se servir de la large palette de fonctionnalités à disposition. vraiment merci ❤️ Dupril depuis le Cameroun 🇨🇲
Oh je ne pensais pas donner tant d'émotion. Ca fait super plaisir 🙂 Un grand merci à toi pour tes encouragements😉 Je suis content de voir qu'on me suit jusqu'au Cameroun 😊
trop bon le niveau de professionnalisme, le temps passe sans s'en rendre compte, je ne sais pas si c'est à cause de figma qui est vraiment intéressant ou si c'est a cause de vous, mais une chose est sûre j'ai adoré et j'en ai beaucoup appris...
Vraiment, félicitation pour cette mini formation. Elle est super bien réalisée. Et merci, je découvre Figma, c’est un outil génial . J’ai hâte d’en apprendre plus.
Fantastique! Tout est limpide et surtout, concret: chaque étape est gratifiée d'un résultat. Dans le cadre d'une réorientation professionnelle, je dois suivre un cours "officiel" qui se montre essentiellement théorique et donc peu clair. Grâce à ce tuto, la lumière a jaillit et j'ai pu comprendre ce que le cours officiel tentait vainement d'expliquer. D'ailleurs pour comprendre la partie pluggins et protypage, je vais acquérir la version payante (vraiment pas chère) du tuto ;-) Merciiii !
Même en prenant cette vidéo en 2024, malgré quelque petit changement, on s'y retrouve assez vite, suivi en faisant à coté, terminé sans trop de problème ! super ! Pas mieux comme vidéo en vrai, J'ai jamais trop mis les pieds sur les wireframes et les maquettes en tant que dev (malgré que pendant ma formation j'ai du passer par la pour validé le diplôme) je ne connaissais pas trop Figma. Maintenant il est clair qu'avec ce petit cours on à des bonnes bases. Vraiment bien expliqué. Au top 👌
excellentissime super bien expliquer ... je suis en formation et un peu perdu , heureusement que j'ai trouver ton tuto montre nous les prototypes , interactions ... j'ai bien plus compris les auto layout avec ce tuto que dans mes cours merci
J'ai pris ta formation avant meme de finir le tuto....merci infiniment pour cette approche je suis en formation développeur front et cela m'est trop utile. pour le tuto j'ai ajouté un flow 2 a l'overlay pour le faire disparaitre si la souris sors...je viendrai ensuite essayer de créer le bouton qui renverra des card vers le haut de page...👌
49:40 Clique sur le côté (là où sont censées apparaitre les poignées) pour sélectionner la " propriété " (sans doute pas le nom adéquat mais tu m'auras compris). Si tu fais Command (ou Control) + C puis Command + V ça marche tout pareil, pas besoin que les " poignées " soient présentes.
Bonjour j'ai un problème concernant le "space between" car il n'apparait pas à cette endroit et quand je met auto pour les marge tout ce centre. Le logo et les onglet ne se sépares pas d'un côté à l'autre :(. Merci
Salut chef ! Très bonne vidéo , j'ai adoré .... Je voudrais savoir si tu peux aussi nous montrer comment générer des designs de sites web ou des images avec Midjourney et compagnie ...
Merci pour la vidéo. Je voulais savoir vu comment tu utilises les auto-layout on peut assimiler ça à des "Div" comme en Html Css pour une meilleure compréhension? Ou ça n'a quasiment rien avoir ? parce que je comprend pas trop à quel moment on doit les utiliser 😅😅
Je dirais plutôt que l'autolayout est une sorte de fonction qui dit à ta frame (qui serait la div) comment elle doit se comporter. Ca serait un peu comme lui faire un display : flex. Les autolayout permettent a ta frame d'avoir un certaine comportement et placer les éléments enfants d'une certaines manière. Par exemple un autolayout va permettre à ta frame de s'agrandir pour s'adapter à son contenu, ou va permettre d'avoir un alignement en ligne de tes éléments ou à l'inverse en colonne etc. Peut être que je devrais faire une vidéo spécial sur les autolayouts 🙂
Bonjour, je viens de démarrer le tuto et dans la foulée je me suis rendue compte que je suis inscrite à votre formation sur UDEMY que j'avais déjà commencée. Je la reprendrai après car j'ai besoin d'utiliser Figma rapidement (je suis une vieille adepte de la trilogie Adobe). Cela m'intéresserait aussi un petit tuto sur Midjourney ou Leonardo. Merci pour votre vidéo qui est très claire.
Sans quoi ? Coder ? Jamais de la vie ! Ahah. Je plaisante. J'ai rien contre le no-code au contraire. Un petit tuto wordpress un jour pourquoi pas. Même si c'est pas mon truc préféré je sais que c'est très utile surtout pour les indépendants. En tout cas merci pour ton commentaire ca fait plaisir 😉
Salut merci à toi pour cette vidéo et tes autres vidéos qui sont très bénéfiques, à part ton cours sur udemy, est-ce que tu donnes des cours à distance ?
Je travail actuellement pour créer ma plateforme de formation orienté sur le dev front. Et d'autre cours en ligne sur Udemy probablement. Tu demandes ca pour savoir si je fais du coaching ?
Merci beaucoup pour ta vidéo, très bonne introduction sur Figma. Petite question, lors du scroll avec le bouton, de mon coté sa fonctionne mais mes cards vont jusqu'en au de l'écran et ne monte pas juste un peu comme toi dans la vidéo ... ... pourquoi?
C'est surement que moi je n'ai rien en dessous tout simplement ^^ Mais si toi tu as du contenu en dessous et que tu veux gérer le scroll pour qu'il soit moins important tu peux jouer sur l'offset Y dans ton "scroll to" 😉 Merci en tout cas pour ton retour 😊
Excellent, merci de ta réponse. Sinon je suis entrain de suivre ta formation sur Udemy, j’en suis aux Propriétés, j’attends un peu avant de mettre mon avis mais c’est claire que ça va etre 5 ⭐️ ⭐️ ⭐️ ⭐️ ⭐️
Bonjour merci pour votre Video vraiment j ai besoin de votre aide apres avoir finit un project avec figma quoi faire avec le project peut on directement importer à wordpress?
Je ne connais pas d'outil permettant de passer directement de Figma à Wordpress. Figma est uniquement un outil de prototypage, pour réaliser un site sans code il existe des outils comme webflow ou framer. Et justement le transfert de figma vers ces outils est possible en quelques clic grâce à des plugins. Je ferais surement des vidéos sur le sujet en attendant vous pouvez aller voir sur le site de webflow ou framer 😉
Bonjour, Je viens de découvrir Figma et surtout ta chaîne qui me convient parfaitement pour progresser dans Figma. Mais, étant débutant, c'est bien joli cette "landing page" mais qu'est-ce que j'en fait? Comment l'exporter dans Wordpress sur mon site? Cela peut paraitre puéril pour plein de gens, cette question, mais je ne sait pas tout. Merci beaucoup.
Bonjour, Figma n'est qu'un logiciel de prototypage. Autrement dit, il permet d'avoir un aperçu le plus fidèle possible de l'application ou du site que l'on souhaite réaliser. Une fois cette maquette réalisée et validée on l'envoi au développeur ou on la réalise soit même selon nos compétences (code, wordpress, framer, webflow... etc)
Hello :) Oui j'en parle dans ma formation, je l'ai mis à jour avec ces nouvelles features. J'ai fait une vidéo sur la chaine en rapport avec le dev mode également ;)
la formation sera evolutive à l'avenir car elle m interesse beaucoup mais sa va me suffire pour du maquettage et prototypage de premier ordre avec animation et tout @@tutos-front-end
Ce n'est plus au même endroit. Plus besoin d'aller sur les 3 petits points, il suffit de mettre l'espacement entre les éléments à auto (au lieu d'une valeur en pixel). C'est toujours dans la partie autolayout juste en dessous des flèches pour choisir la disposition horizontale ou verticale, sur la vidéo la valeur est à 10 et il faut la mettre en auto. C'est une petite mise à jour de Figma qui n'y était pas lors de la création de la vidéo 😉
C'est une maj qui à été faite depuis , dans le panneau de propriété "auto layout" sous les flèches, tu à cette option" ]|[ " de base sur 10 tu déroule le menu et tu passe en auto ;)
@@eikodo8432 Ok, merci beaucoup pour ta réponse ; c'est sympas de voir de l'entraide entre "viewers" ! • Ce que je ne comprends pas : dans le tuto, il est question d'accéder à un menu appelé *Spacing mode*, puis, à l'intérieur de ce menu, de basculer de l'option "Packed" à l'option "Space between". Toi, tu proposes, via un bouton *]|[* de basculer de l'option "valeur chiffrée (10, par défaut)" à l'option *Auto*. Ce ne sont pas du tout les mêmes intitulés ??🤔 • Ma question : l'option *Packed* correspond maintenant à l'option à *valeur chiffrée* et l'option *Space Between* à l'option *Auto* ? Je suis vraiment paumée, là...
NB : La mise à jour continuelle des logiciels en rend parfois difficile l'apprentissage.. en particulier pour Figma, ou toutes les ressources d'aide sont en anglais
@@elsacoco3810 Il semble effectivement que le fonctionnement ait changé et soit plus rapide à utiliser. Il n'y a plus l'option Packed et Space Between. Ils ont simplifié avec les petites barres bleues de l'Auto-layout dans le carré gris. Elles ont le même fonctionnement que flexbox en css Quand on clique dessus, elles sont soient compactes, soient espacées. Quand on clique en barres espacées, cela se met automatiquement en Auto et les éléments de la Top-bar se trouvent bien de part et d'autre. Quand on clique en barres compactes, cela revient à 0 et les éléments sont rapprochés les uns des autres.
0:49:34 Pourquoi ne pas : - dupliquer directement le "dégradé" utilisé pour le coin supérieur gauche de la "card" ? Plutôt que : - ajouter d'abord un "nouveau dégradé" ; - puis dupliquer le "dégradé" du coin supérieur gauche (par ctrl+C - ctrl+v) ; - puis supprimer le "nouveau dégradé" ? Vous évoquez une "petite poignée" : - qui apparaît en créant un "nouveau dégradé" ; - sans laquelle la duplication du "dégradé" SERAIT impossible. Pourtant, quand j'essaie de dupliquer directement le dégradé du coin supérieur gauche, ça marche. Je suis paumée... Mais merci pour le tuto en tout cas.
salut Alors je vais sans doute poser une question bete ( ouais j'y connais pas grand chose ) . Mais si on veut quand on clic sur blog cela amene à la page 2 , c'est faisable avec figma ou il faut le faire via un "truc" qui gere les site genre wordpress ou autre ?
Salut Nicolas, Figma est un outil de prototypage, pas de création de site web, donc on peut simuler un site web avant une futur intégration. Des plugins permettent de transformer tout ca en site web à peu prêt fonctionnel mais si tu veux un vrai site oui il faut passer par du code, wordpress, webflow ou autres. Et rassure toi il n'y a pas de question bête ici 😉
Hello je suis tombé sur ta video en cherchant un tuto pour le design d un projet d appli sur figma . Et je vois que tu t en sers pour créer des landing page. C est le bon outil pour des landing page ? Mieux que wix , sarbacane et les autres ? Je pensais que figma servait qu a faire de la conception d appli.
Bonjour! J'ai regroupé le LOGO et les éléments du topbar et après ça a donné un frame 3, mais le problème c'est que quand je clique sur "Hug contents" pour sortir le "Fill container", rien ne se passe, il n'y a que l'étendue du sélection qui a changer, mais les éléments à l'intérieur ne bouge pas... Je ne comprend pas pourquoi.. j'avance toujours en le déplaçant manuellement mais je crois que c'est plus rapide avec votre manipulation... En tout cas merci pour le tuto, c'est très compréhensible
Je crois que j'ai résolu le même problème, si j'ai bien compris ce que tu dis. Pour que les éléments à l'intérieur de la Frame contenant le menu et le logo puissent se mettre de part et d'autres de la top-bar, il faut aller dans Auto layout et double-cliquer sur les petites barres bleues à l'intérieur du carré gris. Tu verras que quand tu cliques, les petites barres bleues sont soit compactes, soit espacées. Quand elles sont espacées, cela fait le space-between dont le formateur parle dans la vidéo et tu vois bien le logo complètement à gauche et le menu à droite.
Je voulais faire une mini formation d'une heure, le but était de rester simple et "captivant" tout le long, donc pas possible de donner trop de détails, je le fais dans ma formation complète déjà 😉
C'est dans l'espacement latéral entre les éléments qu'il faut mettre en auto maintenant, ça à changer mais malheureusement on ne peut pas éditer sa vidéo sur RUclips :/
Coucou ☺️ je suis désolée de t’embêter mais j’ai créé des posts pour Instagram et quand j’essaye de les exporter en png cela ne fonctionne pas … ça n’enregistre pas tous les éléments de mon image malgré que je sélectionne toute la frame. Je ne sais pas du tout comment remédier à ce problème 😅 aurais-tu une idée stp ? 🙏🏼
Ah oui en effet je pense savoir d'où viens le problème. Il m'arrive le même parfois et c'est parce que je n'ai pas tout mes éléments dans une même frame. On peut avoir l'impression que tout est au bon endroit mais tout les éléments ne sont probablement pas à l'intérieur de la frame que tu exportes. Vérifie dans l'arborescence de tes calques si les éléments sont bien à l'intérieur de la frame que tu exportes et redis moi 😉
coucou j'ai un petit problem avec le auto layout. Je ne trouve pas les 3 petit point du advanced setting pour mettre l'espace entre les elelments. Si quelqu'un pouvais me répondre ce serais super
Il faut mettre l'espacement à Auto, les 3 ptits point n'existe plus ils ont un peu changé l'interface. Je prévois de refaire un tuto complet du même genre d'ici peu ;)
Bonne vidéo, il y a des moments tu vas trop vite comme sur la top Bar ton explication est clair mais sur les mouvements de la souris ça va beaucoup trop vite. il n’y a pas que des experts qui te regardent.
Merci pour le retour. A quel moment de la vidéo exactement ? Car je n'ai pas l'impression d'aller trop vite pour la top bar mais j'ai peut être loupé le passage exact. Sinon n'hésite pas à jouer avec la vitesse de lecture de la vidéo également ça peut aider (ex : x 0.75 ou 0.50). J'essaierai de faire attention pour les prochaines fois 😉
Tellement clair ! Aucune étape n'est oubliée ou juste dite, tout est montré et expliqué. Un bonheur ! Tellement rare de tomber sur une telle implication et application aux détails.
Mille mercis !
Merci, ca fait plaisir 😊
Je valide ce commentaire ! C'est exactement ça !!
La qualité de ton tuto est impressionnante, je suis parti de rien et je viens de terminer une landing page sans souci. Mes respects 🙌🏾
Ahah merci :) Content d'avoir pu aider 😉
Vous êtes l'une des rares personnes qui explique en détails sans rien sauter franchement c'est super. On peut pas faire mieux que ça
Le tuto sur la génération d'images est très attendu
ça serait vraiment cool le tuto pour générer les images
Première fois je tombe sur ton compte. J'ai envie de suivre une formation en XD et Figma en cherchant je suis tombé sur toi et je pense que je vais y rester. Tes explications sont claires et très compréhensibles. Merci
Merci beaucoup 😊
Merci beaucoup pour ce tuto !
J'ai fais une formation Chef de projet dans laquelle on a eu des cours Figma complètement éclatés ! Le prof nous a fait faire des animations complexes sans même nous montrer les bases. Dans ta vidéo, tout est bien expliqué. Je détestais Figma. Grâce à toi, je suis maintenant comme un gosse qui découvre un nouveau jouet. ;)
Et bien défi réussi pour cette vidéo qui permet de partir d'une première utilisation à une compréhension du logiciel avec des bases solides et un exercice concret ! exactement ce qu'il me fallait. Je continu sur ta formation Udemy, merci !
Merci bien :) J'espère que tu trouveras ton bonheur 😉
Je découvre à peine Figma.. Un vrai bijou ! Merci pour cette introduction 🙏
Merci à toi 😊
Merci vraiment pour le cours , et en plus on est aussi intéréssé par la manière dont vous générerez les images et designs par IA .
Votre tuto est vraiment bien, j'ai déjà visionné et appris avec d'autre tuto, les méthodes sont différentes et c'est ça qui j'ai adoré dans votre tuto. Ce sera encore trop bien si vous nous montrez d'autre technique pour ne pas perdre trop de temps et avec de norme en tant que design web ou application.
Merci c'est encourageant, il y aura surement d'autres tutos Figma qui arriveront bientôt. (Enfin bientôt par rapport à ma fréquence de publication 😅)
grand merci pour le tutorielle c'est vraiment excellent surtout les explication et je voudrais vraiment apprendre plus de ta part.
De rien et merci. Il y a d'autres vidéos Figma sur la chaine n'hésite pas 😉 (et même une formation Figma en lien ^^)
EXCELLENT; un grand merci monsieur pour cette explication.
Merci à vous 😊
Excellent tuto ! Merci. Le rythme et les explications sont parfaits pour moi ! 👌
Merci ça fait plaisir ! Content que tu ai pu trouver ton bonheur 😉
j'en ai les larmes aux yeux tellement c'est bien expliqué, même sur la page officielle de figma ils n'expliquent pas aussi bien comment se servir de la large palette de fonctionnalités à disposition. vraiment merci ❤️ Dupril depuis le Cameroun 🇨🇲
Oh je ne pensais pas donner tant d'émotion. Ca fait super plaisir 🙂 Un grand merci à toi pour tes encouragements😉 Je suis content de voir qu'on me suit jusqu'au Cameroun 😊
trop bon le niveau de professionnalisme, le temps passe sans s'en rendre compte, je ne sais pas si c'est à cause de figma qui est vraiment intéressant ou si c'est a cause de vous, mais une chose est sûre j'ai adoré et j'en ai beaucoup appris...
Ca doit être un peu des 2 😅
Merci pour ton commentaire en tout cas
Excellent ! Merci pour ce tuto et les explication hyper claires !
Merci à toi 😊
Vraiment, félicitation pour cette mini formation. Elle est super bien réalisée. Et merci, je découvre Figma, c’est un outil génial . J’ai hâte d’en apprendre plus.
Merci pour cet excellent travail 😊
De rien 😊
Fantastique! Tout est limpide et surtout, concret: chaque étape est gratifiée d'un résultat. Dans le cadre d'une réorientation professionnelle, je dois suivre un cours "officiel" qui se montre essentiellement théorique et donc peu clair. Grâce à ce tuto, la lumière a jaillit et j'ai pu comprendre ce que le cours officiel tentait vainement d'expliquer. D'ailleurs pour comprendre la partie pluggins et protypage, je vais acquérir la version payante (vraiment pas chère) du tuto ;-)
Merciiii !
J'ai tellement appris en une vidéo! Merci bcp, je m'abonne
Merci et bienvenue 😊
J'ai sorti d'autres contenus Figma en Janvier n'hésite pas à aller voir les dernières vidéos 😉
Merci beaucoup. C'est très clair même pour moi qui débute.
Avec plaisir 😉
on comprend maintenant ce que tu trafiquais au labo. Tjrs des master class tes tutos. tkt Udemy c'est validé 👍🏾
Waaaoh merci beaucoup ! 😀
Même en prenant cette vidéo en 2024, malgré quelque petit changement, on s'y retrouve assez vite, suivi en faisant à coté, terminé sans trop de problème ! super !
Pas mieux comme vidéo en vrai, J'ai jamais trop mis les pieds sur les wireframes et les maquettes en tant que dev (malgré que pendant ma formation j'ai du passer par la pour validé le diplôme) je ne connaissais pas trop Figma. Maintenant il est clair qu'avec ce petit cours on à des bonnes bases. Vraiment bien expliqué. Au top 👌
Un grand merci à toi pour ce commentaire encourageant 😊
Excellent tuto avec des explications claires
merci beaucoup
Avec plaisir 😊
@@tutos-front-end je me suis déjà abonné ☺
Merci beaucoup ça m aide vraiment pour les cours
Content de pouvoir aider 😉
excellentissime super bien expliquer ... je suis en formation et un peu perdu ,
heureusement que j'ai trouver ton tuto
montre nous les prototypes , interactions ...
j'ai bien plus compris les auto layout avec ce tuto que dans mes cours
merci
Merci 😊
Check mon cours en lien si tu veux progresser vite sur Figma 😉
Sinon j'ai d'autres vidéos Figma sur la chaine et j'en ferais d'autres 😉
Merci beaucoup, tout est plus clair pour moi !!!!
Merci à toi 😉
Merci beaucoup, ta video m'a beaucoup appris
J'en suis ravi 😊
J'ai un probléme au moment de regrouper les éléments a 32:35, j'aimerais peut étre une explication merci bcp
La meileure formtion sur Figma en Fran_ais que j'ai suivi jusqu'ici. Aussi, j'achète la formation complète sur Udemy. Merci.
Super Tuto!!! Merci 👍👍👍
Merci beaucoup 😉
un GRAND MERCI
Merci également 😉
Super le format je t'encourage
Merci 😊
Très beau tuto. Merci !
Avec plaisir 😊
J'ai pris ta formation avant meme de finir le tuto....merci infiniment pour cette approche je suis en formation développeur front et cela m'est trop utile. pour le tuto j'ai ajouté un flow 2 a l'overlay pour le faire disparaitre si la souris sors...je viendrai ensuite essayer de créer le bouton qui renverra des card vers le haut de page...👌
Bienvenue dans le développement front-end collègue 😉
Un grand merci pour ton soutient 😊
49:40 Clique sur le côté (là où sont censées apparaitre les poignées) pour sélectionner la " propriété " (sans doute pas le nom adéquat mais tu m'auras compris). Si tu fais Command (ou Control) + C puis Command + V ça marche tout pareil, pas besoin que les " poignées " soient présentes.
Merci beaucoup pour l'astuce et tes contributions 😉
@@tutos-front-end NP. Si ça peut profiter à quelqu'un c'est tant mieux.
Bonjour j'ai un problème concernant le "space between" car il n'apparait pas à cette endroit et quand je met auto pour les marge tout ce centre. Le logo et les onglet ne se sépares pas d'un côté à l'autre :(. Merci
superbe presentation rapide concrète avec pas mal d'astuces. Merci
Merci, c'était là tout l'effet recherché 😊
Salut chef ! Très bonne vidéo , j'ai adoré .... Je voudrais savoir si tu peux aussi nous montrer comment générer des designs de sites web ou des images avec Midjourney et compagnie ...
Super tuto👍👍🏾
Merci 😊
Exemple et tuto très complets : Merci !!
Merci à toi 😊
Bravo et Merci !!! je vais surement aller sur ton cours Udemy....
Ah merci ! 😊 Si tu as aimé cette vidéo tu devrais aimé aussi mon cours 😉
Super vidéo !
c'est un super tuto ! Merci 👌
Merci à toi 😊
Merci beaucoup pour ce cours très clair !
De rien 🙂
Bravo!
Merci 😉
Tres explicite. Excellent tuto
Merci 😊
T'es vraiment un pro.
I like it😊
Merci pour la vidéo. Je voulais savoir vu comment tu utilises les auto-layout on peut assimiler ça à des "Div" comme en Html Css pour une meilleure compréhension? Ou ça n'a quasiment rien avoir ? parce que je comprend pas trop à quel moment on doit les utiliser 😅😅
Je dirais plutôt que l'autolayout est une sorte de fonction qui dit à ta frame (qui serait la div) comment elle doit se comporter. Ca serait un peu comme lui faire un display : flex. Les autolayout permettent a ta frame d'avoir un certaine comportement et placer les éléments enfants d'une certaines manière. Par exemple un autolayout va permettre à ta frame de s'agrandir pour s'adapter à son contenu, ou va permettre d'avoir un alignement en ligne de tes éléments ou à l'inverse en colonne etc.
Peut être que je devrais faire une vidéo spécial sur les autolayouts 🙂
Bravo merci 🙏 ça rend plus facil le css
super tuto !
Merci 😊
Bonjour, je viens de démarrer le tuto et dans la foulée je me suis rendue compte que je suis inscrite à votre formation sur UDEMY que j'avais déjà commencée. Je la reprendrai après car j'ai besoin d'utiliser Figma rapidement (je suis une vieille adepte de la trilogie Adobe). Cela m'intéresserait aussi un petit tuto sur Midjourney ou Leonardo. Merci pour votre vidéo qui est très claire.
Oui j'ai fait cette vidéo car c'est un bon moyen de démarrer figma rapidement. Merci pour ton soutien et tes encouragement 😉
Merci beaucoup 🙂
Avec plaisir 🙂
Super contenu !! J'aurai grave kiffer de voir comment intégrer cette landing page (sans coder), dans une wordpress ahahah. 😁💪👏
Sans quoi ? Coder ? Jamais de la vie ! Ahah. Je plaisante. J'ai rien contre le no-code au contraire. Un petit tuto wordpress un jour pourquoi pas. Même si c'est pas mon truc préféré je sais que c'est très utile surtout pour les indépendants.
En tout cas merci pour ton commentaire ca fait plaisir 😉
@@tutos-front-end ahaha 🤣, en vrai même en indépendant, il est important de connaître quelque ligne pour s’en sortir sur certain projet 😉
waouh!!! excellent travail, en tout cas j"ai beaucoup appris, du coup je m'abonne 😄
Merci et bienvenue 😉
merci pr le tuto
Avec plaisir 😉
Excellent tuto ! je vais de ce pas prendre la formation meric beaucoup !
super tuto ! Merci
Merci beaucoup !
Super tuto merci
De rien 🙂
J'ai beaucoup appris de ce tuto
Ca fait plaisir merci 😊
Salut merci à toi pour cette vidéo et tes autres vidéos qui sont très bénéfiques, à part ton cours sur udemy, est-ce que tu donnes des cours à distance ?
Je travail actuellement pour créer ma plateforme de formation orienté sur le dev front. Et d'autre cours en ligne sur Udemy probablement. Tu demandes ca pour savoir si je fais du coaching ?
Merci bro
Merci beaucoup pour ta vidéo, très bonne introduction sur Figma. Petite question, lors du scroll avec le bouton, de mon coté sa fonctionne mais mes cards vont jusqu'en au de l'écran et ne monte pas juste un peu comme toi dans la vidéo ... ... pourquoi?
C'est surement que moi je n'ai rien en dessous tout simplement ^^
Mais si toi tu as du contenu en dessous et que tu veux gérer le scroll pour qu'il soit moins important tu peux jouer sur l'offset Y dans ton "scroll to" 😉
Merci en tout cas pour ton retour 😊
Excellent, merci de ta réponse.
Sinon je suis entrain de suivre ta formation sur Udemy, j’en suis aux Propriétés, j’attends un peu avant de mettre mon avis mais c’est claire que ça va etre 5 ⭐️ ⭐️ ⭐️ ⭐️ ⭐️
Oh merci, ça va m'encourage énormément. Et merci pour le soutien 😉
Bonjour merci pour votre Video vraiment j ai besoin de votre aide apres avoir finit un project avec figma quoi faire avec le project peut on directement importer à wordpress?
Je ne connais pas d'outil permettant de passer directement de Figma à Wordpress. Figma est uniquement un outil de prototypage, pour réaliser un site sans code il existe des outils comme webflow ou framer. Et justement le transfert de figma vers ces outils est possible en quelques clic grâce à des plugins. Je ferais surement des vidéos sur le sujet en attendant vous pouvez aller voir sur le site de webflow ou framer 😉
j 'aimera juste savoir comment t'as fait pour trouver les couleur qui allait avec ton image merci sinon trop cool ta video
La pipette m'a surement aidé ^^
Ensuite on peaufine pour que ce soit cohérant 🙂
Cela manque , merci bien
Merci 🙂
Super tutoriel !! Le cours figma es t’il trouvable sur skill share ??
Malheureusement non. Je crois pas qu'ils acceptent les cours fr si ?
@@tutos-front-end si il y as des cours français sur la plateforme
Ok merci j'irais voir mais ce n'est pas prévu pour le moment
Bonjour,
Je viens de découvrir Figma et surtout ta chaîne qui me convient parfaitement pour progresser dans Figma.
Mais, étant débutant, c'est bien joli cette "landing page" mais qu'est-ce que j'en fait? Comment l'exporter dans Wordpress sur mon site?
Cela peut paraitre puéril pour plein de gens, cette question, mais je ne sait pas tout.
Merci beaucoup.
Bonjour,
Figma n'est qu'un logiciel de prototypage. Autrement dit, il permet d'avoir un aperçu le plus fidèle possible de l'application ou du site que l'on souhaite réaliser. Une fois cette maquette réalisée et validée on l'envoi au développeur ou on la réalise soit même selon nos compétences (code, wordpress, framer, webflow... etc)
merci beaucoup pour le tuto mais je n'arrive toujours pas à insérer une image sur figma même en utilisant votre méthode
Merciiiiii
Avec plaisir 😉
Salut sur la formation figma y aura t il le nouveautés comme le dev mode variables ....?
Hello :)
Oui j'en parle dans ma formation, je l'ai mis à jour avec ces nouvelles features. J'ai fait une vidéo sur la chaine en rapport avec le dev mode également ;)
la formation sera evolutive à l'avenir car elle m interesse beaucoup mais sa va me suffire pour du maquettage et prototypage de premier ordre avec animation et tout @@tutos-front-end
34:20 je n'est pas le Space Between
Ce n'est plus au même endroit. Plus besoin d'aller sur les 3 petits points, il suffit de mettre l'espacement entre les éléments à auto (au lieu d'une valeur en pixel). C'est toujours dans la partie autolayout juste en dessous des flèches pour choisir la disposition horizontale ou verticale, sur la vidéo la valeur est à 10 et il faut la mettre en auto. C'est une petite mise à jour de Figma qui n'y était pas lors de la création de la vidéo 😉
intéressée par ta méthode de régénérer les images
Je note 😉
et comment je peux le publier une fois terminer avec svp et ensuite j'aimerais savoir sije le monetize
Bonjour, super tutoriel.
Par contre j'ai pas trouver comment avoir acces a space-between pour la Frame2 de la top bar a 34:37 😔
C'est une maj qui à été faite depuis , dans le panneau de propriété "auto layout" sous les flèches, tu à cette option" ]|[ " de base sur 10 tu déroule le menu et tu passe en auto ;)
Oh merci, ca fait plaisir de voir de l'entraide dans les commentaires. C'est tout à fait ça 🙂
@@eikodo8432
Ok, merci beaucoup pour ta réponse ; c'est sympas de voir de l'entraide entre "viewers" !
• Ce que je ne comprends pas :
dans le tuto, il est question d'accéder à un menu appelé *Spacing mode*,
puis, à l'intérieur de ce menu, de basculer de l'option "Packed" à l'option "Space between".
Toi, tu proposes, via un bouton *]|[* de basculer de l'option "valeur chiffrée (10, par défaut)" à l'option *Auto*.
Ce ne sont pas du tout les mêmes intitulés ??🤔
• Ma question :
l'option *Packed* correspond maintenant à l'option à *valeur chiffrée*
et
l'option *Space Between* à l'option *Auto* ?
Je suis vraiment paumée, là...
NB : La mise à jour continuelle des logiciels en rend parfois difficile l'apprentissage.. en particulier pour Figma, ou toutes les ressources d'aide sont en anglais
@@elsacoco3810 Il semble effectivement que le fonctionnement ait changé et soit plus rapide à utiliser. Il n'y a plus l'option Packed et Space Between. Ils ont simplifié avec les petites barres bleues de l'Auto-layout dans le carré gris. Elles ont le même fonctionnement que flexbox en css
Quand on clique dessus, elles sont soient compactes, soient espacées. Quand on clique en barres espacées, cela se met automatiquement en Auto et les éléments de la Top-bar se trouvent bien de part et d'autre.
Quand on clique en barres compactes, cela revient à 0 et les éléments sont rapprochés les uns des autres.
0:49:34
Pourquoi ne pas :
- dupliquer directement le "dégradé" utilisé pour le coin supérieur gauche de la "card" ?
Plutôt que :
- ajouter d'abord un "nouveau dégradé" ;
- puis dupliquer le "dégradé" du coin supérieur gauche (par ctrl+C - ctrl+v) ;
- puis supprimer le "nouveau dégradé" ?
Vous évoquez une "petite poignée" :
- qui apparaît en créant un "nouveau dégradé" ;
- sans laquelle la duplication du "dégradé" SERAIT impossible.
Pourtant, quand j'essaie de dupliquer directement le dégradé du coin supérieur gauche, ça marche.
Je suis paumée...
Mais merci pour le tuto en tout cas.
😊😊😊
salut
Alors je vais sans doute poser une question bete ( ouais j'y connais pas grand chose ) .
Mais si on veut quand on clic sur blog cela amene à la page 2 , c'est faisable avec figma ou il faut le faire via un "truc" qui gere les site genre wordpress ou autre ?
Salut Nicolas,
Figma est un outil de prototypage, pas de création de site web, donc on peut simuler un site web avant une futur intégration. Des plugins permettent de transformer tout ca en site web à peu prêt fonctionnel mais si tu veux un vrai site oui il faut passer par du code, wordpress, webflow ou autres.
Et rassure toi il n'y a pas de question bête ici 😉
salut dans l 'exercice je sais pas si figma a change l 'interface jai bien les 2 auto layout cependant je n'ai pas la mention space between
Utilise "auto", ca m'as directement mis comme un space-between
Hello je suis tombé sur ta video en cherchant un tuto pour le design d un projet d appli sur figma . Et je vois que tu t en sers pour créer des landing page. C est le bon outil pour des landing page ? Mieux que wix , sarbacane et les autres ? Je pensais que figma servait qu a faire de la conception d appli.
Figma c'est pour créer des prototypes de sites, wix c'est pour créer des sites, c'est 2 choses différentes 😉
Bonjour!
J'ai regroupé le LOGO et les éléments du topbar et après ça a donné un frame 3, mais le problème c'est que quand je clique sur "Hug contents" pour sortir le "Fill container", rien ne se passe, il n'y a que l'étendue du sélection qui a changer, mais les éléments à l'intérieur ne bouge pas... Je ne comprend pas pourquoi.. j'avance toujours en le déplaçant manuellement mais je crois que c'est plus rapide avec votre manipulation... En tout cas merci pour le tuto, c'est très compréhensible
Je crois que j'ai résolu le même problème, si j'ai bien compris ce que tu dis.
Pour que les éléments à l'intérieur de la Frame contenant le menu et le logo puissent se mettre de part et d'autres de la top-bar, il faut aller dans Auto layout et double-cliquer sur les petites barres bleues à l'intérieur du carré gris.
Tu verras que quand tu cliques, les petites barres bleues sont soit compactes, soit espacées. Quand elles sont espacées, cela fait le space-between dont le formateur parle dans la vidéo et tu vois bien le logo complètement à gauche et le menu à droite.
Problème c que c bien expliqué mais t’oublie tt les petit détaille selon l’ordi des autres etc
Je voulais faire une mini formation d'une heure, le but était de rester simple et "captivant" tout le long, donc pas possible de donner trop de détails, je le fais dans ma formation complète déjà 😉
Quand je veux unpack le logo des textes dans les 3 points je n'ai pas l'option spacing mode, y'a-t-il une solution svp ?
C'est dans l'espacement latéral entre les éléments qu'il faut mettre en auto maintenant, ça à changer mais malheureusement on ne peut pas éditer sa vidéo sur RUclips :/
Coucou ☺️ je suis désolée de t’embêter mais j’ai créé des posts pour Instagram et quand j’essaye de les exporter en png cela ne fonctionne pas … ça n’enregistre pas tous les éléments de mon image malgré que je sélectionne toute la frame. Je ne sais pas du tout comment remédier à ce problème 😅 aurais-tu une idée stp ? 🙏🏼
Ah oui en effet je pense savoir d'où viens le problème. Il m'arrive le même parfois et c'est parce que je n'ai pas tout mes éléments dans une même frame. On peut avoir l'impression que tout est au bon endroit mais tout les éléments ne sont probablement pas à l'intérieur de la frame que tu exportes. Vérifie dans l'arborescence de tes calques si les éléments sont bien à l'intérieur de la frame que tu exportes et redis moi 😉
coucou j'ai un petit problem avec le auto layout. Je ne trouve pas les 3 petit point du advanced setting pour mettre l'espace entre les elelments. Si quelqu'un pouvais me répondre ce serais super
Il faut mettre l'espacement à Auto, les 3 ptits point n'existe plus ils ont un peu changé l'interface. Je prévois de refaire un tuto complet du même genre d'ici peu ;)
Bonne vidéo, il y a des moments tu vas trop vite comme sur la top Bar ton explication est clair mais sur les mouvements de la souris ça va beaucoup trop vite. il n’y a pas que des experts qui te regardent.
Merci pour le retour. A quel moment de la vidéo exactement ? Car je n'ai pas l'impression d'aller trop vite pour la top bar mais j'ai peut être loupé le passage exact. Sinon n'hésite pas à jouer avec la vitesse de lecture de la vidéo également ça peut aider (ex : x 0.75 ou 0.50). J'essaierai de faire attention pour les prochaines fois 😉
ay trop cool par contre je vois pas les foprtmations
Merci 😊
Le lien est dans la description ou en commentaire épinglé 😉
Bonjour la formation vendu est composer de contenu video ou textuel ?
Vidéo principalement
Langing page -> titre
Roh je suis un boulet ! J'ai corrigé ^^ Merci Vincou
26:57 Raccourci pour Frame : F
En effet merci d'avoir corrigé, j'ai bafouillé ^^
@@tutos-front-end Ça arrive même aux meilleurs 😉.
48.02
Que Dieu soit votre guede.