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

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 176

  • @PaulineMaury
    @PaulineMaury 7 месяцев назад +7

    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  6 месяцев назад

      Merci, ca fait plaisir 😊

    • @TheNSproject
      @TheNSproject 5 месяцев назад

      Je valide ce commentaire ! C'est exactement ça !!

  • @ezechiel-johnstone
    @ezechiel-johnstone 6 месяцев назад +4

    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  6 месяцев назад

      Ahah merci :) Content d'avoir pu aider 😉

  • @brucewayne-v6k
    @brucewayne-v6k Месяц назад

    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

  • @Iskudifur
    @Iskudifur 6 месяцев назад +2

    Je découvre à peine Figma.. Un vrai bijou ! Merci pour cette introduction 🙏

  • @emmanuellebouanga3560
    @emmanuellebouanga3560 5 месяцев назад +4

    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

  • @eikodo8432
    @eikodo8432 7 месяцев назад +1

    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  7 месяцев назад +1

      Merci bien :) J'espère que tu trouveras ton bonheur 😉

  • @TeloxisJosephRAZAFIMANANTS-f8c
    @TeloxisJosephRAZAFIMANANTS-f8c 2 месяца назад +1

    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.

    • @tutos-front-end
      @tutos-front-end  2 месяца назад

      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 😅)

  • @tutos-front-end
    @tutos-front-end  Год назад +6

    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-1024
    🌟 Le coupon est attribué automatiquement en suivant le lien mais au cas ou le voici : FRONTEND-1024
    🖼 Pour ceux qui veulent la même image que moi :
    ibb.co/6yJRnvq

  • @amadoupitoutube5201
    @amadoupitoutube5201 5 месяцев назад +1

    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  5 месяцев назад

      Ca doit être un peu des 2 😅
      Merci pour ton commentaire en tout cas

  • @loriskakpo-togan3434
    @loriskakpo-togan3434 7 месяцев назад +3

    ça serait vraiment cool le tuto pour générer les images

  • @carolinemicheline
    @carolinemicheline Месяц назад

    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.

  • @duprilinuwa
    @duprilinuwa 2 месяца назад

    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 🇨🇲

    • @tutos-front-end
      @tutos-front-end  2 месяца назад

      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 😊

  • @hermannkepgang8022
    @hermannkepgang8022 7 месяцев назад +1

    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  7 месяцев назад

      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 ^^)

  • @bigo6167
    @bigo6167 4 месяца назад

    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  4 месяца назад

      Un grand merci à toi pour ce commentaire encourageant 😊

  • @adamusparadus7830
    @adamusparadus7830 21 день назад

    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.

  • @sylvielemaitre7510
    @sylvielemaitre7510 Месяц назад

    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 !

  • @khalednissia3777
    @khalednissia3777 8 месяцев назад +1

    EXCELLENT; un grand merci monsieur pour cette explication.

  • @anoniotavares1811
    @anoniotavares1811 7 месяцев назад +1

    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  7 месяцев назад

      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 😉

  • @githoweb
    @githoweb 8 месяцев назад +1

    Excellent tuto ! Merci. Le rythme et les explications sont parfaits pour moi ! 👌

    • @tutos-front-end
      @tutos-front-end  8 месяцев назад

      Merci ça fait plaisir ! Content que tu ai pu trouver ton bonheur 😉

  • @nermineelt2040
    @nermineelt2040 8 месяцев назад +1

    J'ai tellement appris en une vidéo! Merci bcp, je m'abonne

    • @tutos-front-end
      @tutos-front-end  8 месяцев назад

      Merci et bienvenue 😊
      J'ai sorti d'autres contenus Figma en Janvier n'hésite pas à aller voir les dernières vidéos 😉

  • @corinneakmelu
    @corinneakmelu 9 месяцев назад +1

    Merci beaucoup. C'est très clair même pour moi qui débute.

  • @jspt56
    @jspt56 2 месяца назад

    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...👌

    • @tutos-front-end
      @tutos-front-end  2 месяца назад +1

      Bienvenue dans le développement front-end collègue 😉
      Un grand merci pour ton soutient 😊

  • @djibril8509
    @djibril8509 8 месяцев назад +1

    Merci beaucoup ça m aide vraiment pour les cours

  • @bbe417
    @bbe417 11 месяцев назад +2

    Excellent ! Merci pour ce tuto et les explication hyper claires !

  • @isaackibs
    @isaackibs 9 месяцев назад +1

    Excellent tuto avec des explications claires
    merci beaucoup

    • @tutos-front-end
      @tutos-front-end  9 месяцев назад

      Avec plaisir 😊

    • @isaackibs
      @isaackibs 9 месяцев назад +1

      @@tutos-front-end je me suis déjà abonné ☺

  • @denisebureth5378
    @denisebureth5378 Год назад +4

    Merci pour cet excellent travail 😊

  • @akil3293
    @akil3293 Год назад +2

    on comprend maintenant ce que tu trafiquais au labo. Tjrs des master class tes tutos. tkt Udemy c'est validé 👍🏾

  • @AlphonseMumba
    @AlphonseMumba 8 месяцев назад +1

    Merci beaucoup, ta video m'a beaucoup appris

  • @goku0326
    @goku0326 9 месяцев назад +1

    Merci beaucoup, tout est plus clair pour moi !!!!

  • @francka.4174
    @francka.4174 Год назад +3

    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  Год назад +1

      Merci beaucoup pour l'astuce et tes contributions 😉

    • @francka.4174
      @francka.4174 Год назад

      @@tutos-front-end NP. Si ça peut profiter à quelqu'un c'est tant mieux.

  • @platzida01
    @platzida01 5 месяцев назад

    superbe presentation rapide concrète avec pas mal d'astuces. Merci

    • @tutos-front-end
      @tutos-front-end  5 месяцев назад

      Merci, c'était là tout l'effet recherché 😊

  • @snipsbrander8581
    @snipsbrander8581 8 месяцев назад +1

    Super le format je t'encourage

  • @ibrahimabarry189
    @ibrahimabarry189 8 месяцев назад +1

    un GRAND MERCI

  • @ancewalton9457
    @ancewalton9457 Месяц назад

    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 ...

  • @camilledumoulin4392
    @camilledumoulin4392 2 месяца назад

    Exemple et tuto très complets : Merci !!

  • @benjaminziverec1694
    @benjaminziverec1694 8 месяцев назад +1

    Très beau tuto. Merci !

  • @parisvelo6750
    @parisvelo6750 10 месяцев назад +1

    Bravo et Merci !!! je vais surement aller sur ton cours Udemy....

    • @tutos-front-end
      @tutos-front-end  10 месяцев назад

      Ah merci ! 😊 Si tu as aimé cette vidéo tu devrais aimé aussi mon cours 😉

  • @karimmarachly2112
    @karimmarachly2112 Год назад +1

    Super Tuto!!! Merci 👍👍👍

  • @tintamaria95
    @tintamaria95 5 месяцев назад

    Merci beaucoup pour ce cours très clair !

  • @Gerv_Tisse
    @Gerv_Tisse 4 месяца назад

    c'est un super tuto ! Merci 👌

  • @leoyoutools
    @leoyoutools Год назад +2

    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  Год назад +1

      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 Год назад

      @@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 😉

  • @pcmax0529
    @pcmax0529 4 месяца назад +2

    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

  • @hamissoum.barmou8795
    @hamissoum.barmou8795 6 месяцев назад +1

    Tres explicite. Excellent tuto

  • @neophusgamedesign
    @neophusgamedesign Месяц назад

    Excellent tuto ! je vais de ce pas prendre la formation meric beaucoup !

  • @yaragri9552
    @yaragri9552 6 месяцев назад +1

    Merci beaucoup 🙂

  • @vevedh
    @vevedh 9 месяцев назад +1

    Super tuto👍👍🏾

  • @emmanuellebouanga3560
    @emmanuellebouanga3560 5 месяцев назад

    T'es vraiment un pro.
    I like it😊

  • @annasokandze6240
    @annasokandze6240 6 месяцев назад

    waouh!!! excellent travail, en tout cas j"ai beaucoup appris, du coup je m'abonne 😄

  • @Cilloux972
    @Cilloux972 6 месяцев назад

    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  6 месяцев назад

      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 😉

  • @bimiox
    @bimiox 28 дней назад

    Super vidéo !

  • @robertodelv9247
    @robertodelv9247 6 месяцев назад

    Bravo merci 🙏 ça rend plus facil le css

  • @LamarmitedeAstou
    @LamarmitedeAstou 8 месяцев назад +1

    Bravo!

  • @NicolaRuto
    @NicolaRuto 10 месяцев назад +1

    merci pr le tuto

  • @BenBoketshu
    @BenBoketshu Год назад +2

    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  Год назад +1

      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 🙂

  • @guicheneyflora1235
    @guicheneyflora1235 3 месяца назад

    Merci beaucoup !

  • @yoyo_mlrd2006
    @yoyo_mlrd2006 2 месяца назад +1

    J'ai un probléme au moment de regrouper les éléments a 32:35, j'aimerais peut étre une explication merci bcp

  • @pisco1444
    @pisco1444 Год назад +1

    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 ?

  • @marianochikou
    @marianochikou 11 месяцев назад

    J'ai beaucoup appris de ce tuto

  • @nicolassoulerot4169
    @nicolassoulerot4169 Год назад +1

    super tuto !

  • @piratestuart2917
    @piratestuart2917 Месяц назад

    Merci bro

  • @catherineplisson5980
    @catherineplisson5980 5 месяцев назад

    super tuto ! Merci

  • @philc8132
    @philc8132 11 месяцев назад +1

    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  11 месяцев назад +1

      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 11 месяцев назад +1

      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  11 месяцев назад

      Oh merci, ça va m'encourage énormément. Et merci pour le soutien 😉

  • @goddamnpac5021
    @goddamnpac5021 5 месяцев назад

    Super tuto merci

  • @renaudlefebvre8311
    @renaudlefebvre8311 8 месяцев назад +1

    Super tutoriel !! Le cours figma es t’il trouvable sur skill share ??

    • @tutos-front-end
      @tutos-front-end  8 месяцев назад +1

      Malheureusement non. Je crois pas qu'ils acceptent les cours fr si ?

    • @renaudlefebvre8311
      @renaudlefebvre8311 8 месяцев назад

      @@tutos-front-end si il y as des cours français sur la plateforme

    • @tutos-front-end
      @tutos-front-end  8 месяцев назад

      Ok merci j'irais voir mais ce n'est pas prévu pour le moment

  • @alycamara9189
    @alycamara9189 9 месяцев назад +1

    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  9 месяцев назад

      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 😉

  • @nicolasmolines9871
    @nicolasmolines9871 Год назад +1

    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  Год назад +1

      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 😉

  • @florianginet7615
    @florianginet7615 Год назад +1

    Cela manque , merci bien

  • @morelg2240
    @morelg2240 3 месяца назад

    Merciiiiii

  • @gef1750
    @gef1750 8 месяцев назад

    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  8 месяцев назад +1

      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)

  • @danieldk4378
    @danieldk4378 5 месяцев назад

    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  4 месяца назад

      Figma c'est pour créer des prototypes de sites, wix c'est pour créer des sites, c'est 2 choses différentes 😉

  • @Zakidiop-s9j
    @Zakidiop-s9j Год назад +1

    Salut sur la formation figma y aura t il le nouveautés comme le dev mode variables ....?

    • @tutos-front-end
      @tutos-front-end  Год назад

      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 ;)

    • @Zakidiop-s9j
      @Zakidiop-s9j Год назад

      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

  • @michorphee1648
    @michorphee1648 8 месяцев назад

    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  8 месяцев назад

      La pipette m'a surement aidé ^^
      Ensuite on peaufine pour que ce soit cohérant 🙂

  • @olsenmusic8783
    @olsenmusic8783 6 месяцев назад

    et comment je peux le publier une fois terminer avec svp et ensuite j'aimerais savoir sije le monetize

  • @Zakidiop-s9j
    @Zakidiop-s9j 4 месяца назад

    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 4 месяца назад

      Utilise "auto", ca m'as directement mis comme un space-between

  • @NehemiaRanaivosoa
    @NehemiaRanaivosoa 6 месяцев назад

    merci beaucoup pour le tuto mais je n'arrive toujours pas à insérer une image sur figma même en utilisant votre méthode

  • @rokhayandiaye8200
    @rokhayandiaye8200 Год назад +2

    intéressée par ta méthode de régénérer les images

  • @zeydenfps
    @zeydenfps 5 месяцев назад

    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  4 месяца назад +1

      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 :/

  • @elsacoco3810
    @elsacoco3810 7 месяцев назад

    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.

  • @LesjumauxBalukuna
    @LesjumauxBalukuna 13 дней назад

    😊😊😊

  • @elodiewtn1909
    @elodiewtn1909 6 месяцев назад

    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  6 месяцев назад

      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 😉

  • @fabienpineau1580
    @fabienpineau1580 7 месяцев назад

    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 7 месяцев назад +2

      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  7 месяцев назад

      Oh merci, ca fait plaisir de voir de l'entraide dans les commentaires. C'est tout à fait ça 🙂

    • @elsacoco3810
      @elsacoco3810 7 месяцев назад

      @@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 7 месяцев назад

      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 5 месяцев назад

      ​@@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.

  • @raissabomboko
    @raissabomboko 2 месяца назад

    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

    • @tutos-front-end
      @tutos-front-end  2 месяца назад

      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 ;)

  • @marcusdelavoux6568
    @marcusdelavoux6568 2 месяца назад

    Problème c que c bien expliqué mais t’oublie tt les petit détaille selon l’ordi des autres etc

    • @tutos-front-end
      @tutos-front-end  2 месяца назад

      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à 😉

  • @andreassandriahasinala6645
    @andreassandriahasinala6645 Год назад

    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 5 месяцев назад

      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.

  • @tokyandriambahiny4688
    @tokyandriambahiny4688 5 месяцев назад

    Bonjour la formation vendu est composer de contenu video ou textuel ?

  • @LeChimelin
    @LeChimelin 9 месяцев назад +1

    34:20 je n'est pas le Space Between

    • @tutos-front-end
      @tutos-front-end  9 месяцев назад +1

      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 😉

  • @rodriguedaniel2232
    @rodriguedaniel2232 9 месяцев назад

    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  9 месяцев назад

      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 😉

  • @RokhayaGueye-cl7vf
    @RokhayaGueye-cl7vf 2 месяца назад

    ay trop cool par contre je vois pas les foprtmations

    • @tutos-front-end
      @tutos-front-end  2 месяца назад

      Merci 😊
      Le lien est dans la description ou en commentaire épinglé 😉

  • @sorendev
    @sorendev 8 месяцев назад

    48.02

  • @vincou
    @vincou Год назад +1

    Langing page -> titre

    • @tutos-front-end
      @tutos-front-end  Год назад

      Roh je suis un boulet ! J'ai corrigé ^^ Merci Vincou

  • @francka.4174
    @francka.4174 Год назад +1

    26:57 Raccourci pour Frame : F

    • @tutos-front-end
      @tutos-front-end  Год назад +1

      En effet merci d'avoir corrigé, j'ai bafouillé ^^

    • @francka.4174
      @francka.4174 Год назад

      @@tutos-front-end Ça arrive même aux meilleurs 😉.

  • @gitshanganews
    @gitshanganews 3 месяца назад

    Que Dieu soit votre guede.