Tuto Figma débutant 2024 : apprendre les bases en créant une landing page (mini formation gratuite)

  Рет қаралды 39,556

front-end

front-end

Күн бұрын

#tuto #figma #débutant #design #formation
Dans cette formation Figma 2024 pour débutant vous allez apprendre les bases de Figma et créer une landing page.
On y verra de nombreux outils comme les auto layout, les composants, le prototypage, les plugins, etc.
Dans cette mini formation gratuite de plus d'1h de contenu vous allez apprendre les bases de Figma qui est un condensé de ma formation perso. Si tu aimes mon contenu et que veux me soutenir tu as un lien vers ma formation complète sur Figma. Et même si tu aimes mon contenu mais que tu ne veux pas t'inquiète pas je t'aimerais toujours ! Enfin si tu es abonné, je n'aime que mes abonnés 😋
NB : J'ai conçu ce tuto pour être visionné sur PC vu que Figma s'utilise uniquement sur PC mais pour ceux qui regarderait sur Mobile et qui trouve que parfois c'est trop petit vous pouvez zoomé sur la vidéo donc n'hésitez pas au besoin.
🎥 Le lien vers ma formation Figma :
www.udemy.com/course/figma-co...
🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voici : FRONTEND-0724
🖼 Pour ceux qui veulent la même image que moi :
ibb.co/6yJRnvq
🔖Chapitrage :
00:00 Introduction
01:11 Interface
02:53 Déplacement et sélection
04:06 Création du Logo Figma
12:16 Ajout de l'image de background
14:39 Création de la Frame
17:33 Création d'un dégradé
18:52 Création d'une grille
20:21 Création du bouton
22:38 Auto Layout
24:31 Composant
26:43 Création de la Topbar
36:06 Titrage et bouton scroll
41:02 Les plugins
45:27 Créations des Cards
54:05 Création de l'overlay
1:05:30 Ma formation complète Figma
1:06:17 Prototype Figma
1:11:55 Fixer la topbar
1:12:34 Prototype : le scroll
1:13:55 Prototype : overlay
1:16:09 Mot de la fin

Пікірлер: 152
@user-ec6zy6dr9f
@user-ec6zy6dr9f 3 ай бұрын
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 !
@tutos-front-end
@tutos-front-end 3 ай бұрын
Merci, ca fait plaisir 😊
@TheNSproject
@TheNSproject 2 ай бұрын
Je valide ce commentaire ! C'est exactement ça !!
@bbe417
@bbe417 8 ай бұрын
Excellent ! Merci pour ce tuto et les explication hyper claires !
@tutos-front-end
@tutos-front-end 8 ай бұрын
Merci à toi 😊
@emmanuellebouanga3560
@emmanuellebouanga3560 2 ай бұрын
T'es vraiment un pro. I like it😊
@emmanuellebouanga3560
@emmanuellebouanga3560 2 ай бұрын
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
@tutos-front-end
@tutos-front-end 2 ай бұрын
Merci beaucoup 😊
@githoweb
@githoweb 5 ай бұрын
Excellent tuto ! Merci. Le rythme et les explications sont parfaits pour moi ! 👌
@tutos-front-end
@tutos-front-end 5 ай бұрын
Merci ça fait plaisir ! Content que tu ai pu trouver ton bonheur 😉
@johnstone_zek
@johnstone_zek 3 ай бұрын
La qualité de ton tuto est impressionnante, je suis parti de rien et je viens de terminer une landing page sans souci. Mes respects 🙌🏾
@tutos-front-end
@tutos-front-end 3 ай бұрын
Ahah merci :) Content d'avoir pu aider 😉
@denisebureth5378
@denisebureth5378 Жыл бұрын
Merci pour cet excellent travail 😊
@tutos-front-end
@tutos-front-end Жыл бұрын
De rien 😊
@khalednissia3777
@khalednissia3777 5 ай бұрын
EXCELLENT; un grand merci monsieur pour cette explication.
@tutos-front-end
@tutos-front-end 5 ай бұрын
Merci à vous 😊
@robertodelv9247
@robertodelv9247 3 ай бұрын
Bravo merci 🙏 ça rend plus facil le css
@nermineelt2040
@nermineelt2040 4 ай бұрын
J'ai tellement appris en une vidéo! Merci bcp, je m'abonne
@tutos-front-end
@tutos-front-end 4 ай бұрын
Merci et bienvenue 😊 J'ai sorti d'autres contenus Figma en Janvier n'hésite pas à aller voir les dernières vidéos 😉
@catherineplisson5980
@catherineplisson5980 Ай бұрын
super tuto ! Merci
@LamarmitedeAstou
@LamarmitedeAstou 5 ай бұрын
Bravo!
@tutos-front-end
@tutos-front-end 4 ай бұрын
Merci 😉
@guicheneyflora1235
@guicheneyflora1235 12 күн бұрын
Merci beaucoup !
@Iskudifur
@Iskudifur 3 ай бұрын
Je découvre à peine Figma.. Un vrai bijou ! Merci pour cette introduction 🙏
@tutos-front-end
@tutos-front-end 3 ай бұрын
Merci à toi 😊
@benjaminziverec1694
@benjaminziverec1694 5 ай бұрын
Très beau tuto. Merci !
@tutos-front-end
@tutos-front-end 5 ай бұрын
Avec plaisir 😊
@karimmarachly2112
@karimmarachly2112 8 ай бұрын
Super Tuto!!! Merci 👍👍👍
@tutos-front-end
@tutos-front-end 8 ай бұрын
Merci beaucoup 😉
@hermannkepgang8022
@hermannkepgang8022 4 ай бұрын
grand merci pour le tutorielle c'est vraiment excellent surtout les explication et je voudrais vraiment apprendre plus de ta part.
@tutos-front-end
@tutos-front-end 4 ай бұрын
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 ^^)
@ibrahimabarry189
@ibrahimabarry189 5 ай бұрын
un GRAND MERCI
@tutos-front-end
@tutos-front-end 5 ай бұрын
Merci également 😉
@eikodo8432
@eikodo8432 3 ай бұрын
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 !
@tutos-front-end
@tutos-front-end 3 ай бұрын
Merci bien :) J'espère que tu trouveras ton bonheur 😉
@snipsbrander8581
@snipsbrander8581 4 ай бұрын
Super le format je t'encourage
@tutos-front-end
@tutos-front-end 4 ай бұрын
Merci 😊
@goku0326
@goku0326 6 ай бұрын
Merci beaucoup, tout est plus clair pour moi !!!!
@tutos-front-end
@tutos-front-end 6 ай бұрын
Merci à toi 😉
@djibril8509
@djibril8509 5 ай бұрын
Merci beaucoup ça m aide vraiment pour les cours
@tutos-front-end
@tutos-front-end 5 ай бұрын
Content de pouvoir aider 😉
@user-ro2qj5mg4l
@user-ro2qj5mg4l 4 ай бұрын
Merci beaucoup, ta video m'a beaucoup appris
@tutos-front-end
@tutos-front-end 4 ай бұрын
J'en suis ravi 😊
@corinneakmelu
@corinneakmelu 5 ай бұрын
Merci beaucoup. C'est très clair même pour moi qui débute.
@tutos-front-end
@tutos-front-end 5 ай бұрын
Avec plaisir 😉
@amadoupitoutube5201
@amadoupitoutube5201 2 ай бұрын
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...
@tutos-front-end
@tutos-front-end 2 ай бұрын
Ca doit être un peu des 2 😅 Merci pour ton commentaire en tout cas
@tintamaria95
@tintamaria95 2 ай бұрын
Merci beaucoup pour ce cours très clair !
@tutos-front-end
@tutos-front-end Ай бұрын
De rien 🙂
@annasokandze6240
@annasokandze6240 3 ай бұрын
waouh!!! excellent travail, en tout cas j"ai beaucoup appris, du coup je m'abonne 😄
@tutos-front-end
@tutos-front-end 3 ай бұрын
Merci et bienvenue 😉
@yaragri9552
@yaragri9552 3 ай бұрын
Merci beaucoup 🙂
@tutos-front-end
@tutos-front-end 3 ай бұрын
Avec plaisir 🙂
@AurelTisse
@AurelTisse 28 күн бұрын
c'est un super tuto ! Merci 👌
@tutos-front-end
@tutos-front-end 16 күн бұрын
Merci à toi 😊
@platzida01
@platzida01 2 ай бұрын
superbe presentation rapide concrète avec pas mal d'astuces. Merci
@tutos-front-end
@tutos-front-end 2 ай бұрын
Merci, c'était là tout l'effet recherché 😊
@isaackibs
@isaackibs 6 ай бұрын
Excellent tuto avec des explications claires merci beaucoup
@tutos-front-end
@tutos-front-end 6 ай бұрын
Avec plaisir 😊
@isaackibs
@isaackibs 6 ай бұрын
@@tutos-front-end je me suis déjà abonné ☺
@user-qh6zd6ok6p
@user-qh6zd6ok6p 6 ай бұрын
merci pr le tuto
@tutos-front-end
@tutos-front-end 6 ай бұрын
Avec plaisir 😉
@hamissoum.barmou8795
@hamissoum.barmou8795 2 ай бұрын
Tres explicite. Excellent tuto
@tutos-front-end
@tutos-front-end 2 ай бұрын
Merci 😊
@vevedh
@vevedh 5 ай бұрын
Super tuto👍👍🏾
@tutos-front-end
@tutos-front-end 5 ай бұрын
Merci 😊
@francka.4174
@francka.4174 11 ай бұрын
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.
@tutos-front-end
@tutos-front-end 11 ай бұрын
Merci beaucoup pour l'astuce et tes contributions 😉
@francka.4174
@francka.4174 11 ай бұрын
@@tutos-front-end NP. Si ça peut profiter à quelqu'un c'est tant mieux.
@nicolassoulerot4169
@nicolassoulerot4169 9 ай бұрын
super tuto !
@tutos-front-end
@tutos-front-end 9 ай бұрын
Merci 😊
@bigo6167
@bigo6167 23 күн бұрын
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 👌
@tutos-front-end
@tutos-front-end 16 күн бұрын
Un grand merci à toi pour ce commentaire encourageant 😊
@tutos-front-end
@tutos-front-end Жыл бұрын
J'ai conçu ce tuto pour être visionné sur PC vu que Figma s'utilise uniquement sur PC mais pour ceux qui regarderait sur Mobile et qui trouve que parfois c'est trop petit vous pouvez zoomer sur la vidéo donc n'hésitez pas au besoin. 🎥 Le lien vers ma formation Figma : www.udemy.com/course/figma-cours-complet/?couponCode=FRONTEND-0724 🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voici : FRONTEND-0724 🖼 Pour ceux qui veulent la même image que moi : ibb.co/6yJRnvq
@loriskakpo-togan3434
@loriskakpo-togan3434 3 ай бұрын
ça serait vraiment cool le tuto pour générer les images
@akil3293
@akil3293 Жыл бұрын
on comprend maintenant ce que tu trafiquais au labo. Tjrs des master class tes tutos. tkt Udemy c'est validé 👍🏾
@tutos-front-end
@tutos-front-end Жыл бұрын
Waaaoh merci beaucoup ! 😀
@goddamnpac5021
@goddamnpac5021 2 ай бұрын
Super tuto merci
@tutos-front-end
@tutos-front-end Ай бұрын
De rien 🙂
@parisvelo6750
@parisvelo6750 7 ай бұрын
Bravo et Merci !!! je vais surement aller sur ton cours Udemy....
@tutos-front-end
@tutos-front-end 7 ай бұрын
Ah merci ! 😊 Si tu as aimé cette vidéo tu devrais aimé aussi mon cours 😉
@anoniotavares1811
@anoniotavares1811 4 ай бұрын
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
@tutos-front-end
@tutos-front-end 4 ай бұрын
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 😉
@morelg2240
@morelg2240 9 күн бұрын
Merciiiiii
@tutos-front-end
@tutos-front-end Күн бұрын
Avec plaisir 😉
@marianochikou
@marianochikou 8 ай бұрын
J'ai beaucoup appris de ce tuto
@tutos-front-end
@tutos-front-end 8 ай бұрын
Ca fait plaisir merci 😊
@leoyoutools
@leoyoutools 11 ай бұрын
Super contenu !! J'aurai grave kiffer de voir comment intégrer cette landing page (sans coder), dans une wordpress ahahah. 😁💪👏
@tutos-front-end
@tutos-front-end 11 ай бұрын
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 😉
@leoyoutools
@leoyoutools 10 ай бұрын
@@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 😉
@Cilloux972
@Cilloux972 2 ай бұрын
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.
@tutos-front-end
@tutos-front-end 2 ай бұрын
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 😉
@florianginet7615
@florianginet7615 Жыл бұрын
Cela manque , merci bien
@tutos-front-end
@tutos-front-end Жыл бұрын
Merci 🙂
@pisco1444
@pisco1444 Жыл бұрын
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 ?
@tutos-front-end
@tutos-front-end Жыл бұрын
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 ?
@olsenmusic8783
@olsenmusic8783 3 ай бұрын
et comment je peux le publier une fois terminer avec svp et ensuite j'aimerais savoir sije le monetize
@user-ku4vx8ch8x
@user-ku4vx8ch8x 9 ай бұрын
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 😅😅
@tutos-front-end
@tutos-front-end 8 ай бұрын
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 🙂
@pcmax0529
@pcmax0529 Ай бұрын
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
@renaudlefebvre8311
@renaudlefebvre8311 4 ай бұрын
Super tutoriel !! Le cours figma es t’il trouvable sur skill share ??
@tutos-front-end
@tutos-front-end 4 ай бұрын
Malheureusement non. Je crois pas qu'ils acceptent les cours fr si ?
@renaudlefebvre8311
@renaudlefebvre8311 4 ай бұрын
@@tutos-front-end si il y as des cours français sur la plateforme
@tutos-front-end
@tutos-front-end 4 ай бұрын
Ok merci j'irais voir mais ce n'est pas prévu pour le moment
@NehemiaRanaivosoa
@NehemiaRanaivosoa 3 ай бұрын
merci beaucoup pour le tuto mais je n'arrive toujours pas à insérer une image sur figma même en utilisant votre méthode
@michorphee1648
@michorphee1648 4 ай бұрын
j 'aimera juste savoir comment t'as fait pour trouver les couleur qui allait avec ton image merci sinon trop cool ta video
@tutos-front-end
@tutos-front-end 4 ай бұрын
La pipette m'a surement aidé ^^ Ensuite on peaufine pour que ce soit cohérant 🙂
@philc8132
@philc8132 7 ай бұрын
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?
@tutos-front-end
@tutos-front-end 7 ай бұрын
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 😊
@philc8132
@philc8132 7 ай бұрын
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 ⭐️ ⭐️ ⭐️ ⭐️ ⭐️
@tutos-front-end
@tutos-front-end 7 ай бұрын
Oh merci, ça va m'encourage énormément. Et merci pour le soutien 😉
@elsacoco3810
@elsacoco3810 3 ай бұрын
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.
@sorendev
@sorendev 5 ай бұрын
48.02
@user-sn1wy5hi6d
@user-sn1wy5hi6d 24 күн бұрын
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
@bigo6167
@bigo6167 23 күн бұрын
Utilise "auto", ca m'as directement mis comme un space-between
@gef1750
@gef1750 4 ай бұрын
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.
@tutos-front-end
@tutos-front-end 4 ай бұрын
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)
@rokhayandiaye8200
@rokhayandiaye8200 10 ай бұрын
intéressée par ta méthode de régénérer les images
@tutos-front-end
@tutos-front-end 10 ай бұрын
Je note 😉
@alycamara9189
@alycamara9189 6 ай бұрын
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?
@tutos-front-end
@tutos-front-end 6 ай бұрын
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 😉
@danieldk4378
@danieldk4378 2 ай бұрын
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.
@tutos-front-end
@tutos-front-end Ай бұрын
Figma c'est pour créer des prototypes de sites, wix c'est pour créer des sites, c'est 2 choses différentes 😉
@user-sn1wy5hi6d
@user-sn1wy5hi6d 8 ай бұрын
Salut sur la formation figma y aura t il le nouveautés comme le dev mode variables ....?
@tutos-front-end
@tutos-front-end 8 ай бұрын
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 ;)
@user-sn1wy5hi6d
@user-sn1wy5hi6d 8 ай бұрын
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
@nicolasmolines9871
@nicolasmolines9871 9 ай бұрын
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 ?
@tutos-front-end
@tutos-front-end 9 ай бұрын
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 😉
@zeydennn
@zeydennn Ай бұрын
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 ?
@tutos-front-end
@tutos-front-end Ай бұрын
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 KZbin :/
@LeChimelin
@LeChimelin 6 ай бұрын
34:20 je n'est pas le Space Between
@tutos-front-end
@tutos-front-end 5 ай бұрын
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 😉
@andreassandriahasinala6645
@andreassandriahasinala6645 8 ай бұрын
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
@Cilloux972
@Cilloux972 2 ай бұрын
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.
@elodiewtn1909
@elodiewtn1909 2 ай бұрын
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 ? 🙏🏼
@tutos-front-end
@tutos-front-end 2 ай бұрын
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 😉
@tokyandriambahiny4688
@tokyandriambahiny4688 Ай бұрын
Bonjour la formation vendu est composer de contenu video ou textuel ?
@tutos-front-end
@tutos-front-end Ай бұрын
Vidéo principalement
@fabienpineau1580
@fabienpineau1580 3 ай бұрын
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 😔
@eikodo8432
@eikodo8432 3 ай бұрын
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 ;)
@tutos-front-end
@tutos-front-end 3 ай бұрын
Oh merci, ca fait plaisir de voir de l'entraide dans les commentaires. C'est tout à fait ça 🙂
@elsacoco3810
@elsacoco3810 3 ай бұрын
@@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à...
@elsacoco3810
@elsacoco3810 3 ай бұрын
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
@Cilloux972
@Cilloux972 2 ай бұрын
​@@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.
@rodriguedaniel2232
@rodriguedaniel2232 6 ай бұрын
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.
@tutos-front-end
@tutos-front-end 6 ай бұрын
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 😉
@vincou
@vincou Жыл бұрын
Langing page -> titre
@tutos-front-end
@tutos-front-end Жыл бұрын
Roh je suis un boulet ! J'ai corrigé ^^ Merci Vincou
@francka.4174
@francka.4174 11 ай бұрын
26:57 Raccourci pour Frame : F
@tutos-front-end
@tutos-front-end 11 ай бұрын
En effet merci d'avoir corrigé, j'ai bafouillé ^^
@francka.4174
@francka.4174 11 ай бұрын
@@tutos-front-end Ça arrive même aux meilleurs 😉.
@gitshanganews
@gitshanganews 10 күн бұрын
Que Dieu soit votre guede.
5 secrets for choosing colors 🌈 Ui Design
17:40
Basti Ui
Рет қаралды 163 М.
One moment can change your life ✨🔄
00:32
A4
Рет қаралды 17 МЛН
Smart Sigma Kid #funny #sigma #comedy
00:25
CRAZY GREAPA
Рет қаралды 26 МЛН
J'ai repris un VRAI CLIENT en freelance !
13:52
BALO
Рет қаралды 176 М.
UX/UI Design : Toutes les bases pour bien démarrer (Guide complet)
43:36
How to succeed in design in 2024?
11:59
Basti Ui
Рет қаралды 48 М.
Making money online with ChatGPT and Canva
13:53
Web3nity
Рет қаралды 449 М.
world's shortest Figma course
6:54
Juxtopposed
Рет қаралды 256 М.
5 Balises HTML méconnues qui vont révolutionner votre code
10:57
Menu Animation in Figma
4:52
Shmelt studios
Рет қаралды 583 М.
Choose a phone for your mom
0:20
ChooseGift
Рет қаралды 7 МЛН
Easy Art with AR Drawing App - Step by step for Beginners
0:27
Melli Art School
Рет қаралды 14 МЛН
КРУТОЙ ТЕЛЕФОН
0:16
KINO KAIF
Рет қаралды 5 МЛН