Figma Tuto • Responsive Design & Auto Layout

Поділитися
Вставка
  • Опубліковано 25 сер 2024

КОМЕНТАРІ • 121

  • @BastiUi
    @BastiUi  3 роки тому +25

    🦊 😉

  • @opheliebancod4692
    @opheliebancod4692 6 місяців тому +1

    Meilleur prof ever ! MERCI c'est limpide, beau et clair

  • @o0Granolla0o
    @o0Granolla0o 3 роки тому +4

    Je découvre tes vidéos.
    J'adore ton énergie et tes explications sont super claires !
    Fortiche !

  • @Ahrkaa
    @Ahrkaa 3 роки тому

    Après 2 semaines de retard je la regarde en entière. Vraiment puissant cette feature et en faisant des composants imbriqués y'a moyen de faire tellement de choses !

  • @TheElnick_guitar
    @TheElnick_guitar 3 роки тому +4

    Idée de vidéo pour la prochaine, les variantes dans Figma, y'a aussi de quoi s'amuser :)

    • @BastiUi
      @BastiUi  3 роки тому +1

      Hello, merci pour ton message :)
      J'ai déjà fait un live sur les Variantes : ua-cam.com/video/VgjslsosdtY/v-deo.html
      Mais je ne pense pas en faire une vidéo UA-cam dédiées pour l'instant.

  • @melazik_
    @melazik_ 2 роки тому

    Hi ! Merci mille fois ça fait des mois que je ne comprenais pas DU TOUT le layout, je crois avoir été débloqué, c'est top !

  • @laboriefabien
    @laboriefabien 3 роки тому +4

    Meilleure vidéo de 2021

  • @Vivi-sama
    @Vivi-sama 3 роки тому +5

    L'auto layout est vraiment devenue une de plus grosses core features de Figma, une fois qu'on y goûte, et qu'on commence à bien jouer avec, impossible de retourner en arrière !

  • @kyurann78
    @kyurann78 3 роки тому +7

    Ça fait 1h que j'ai envie de retourner coder mais j'arrive pas à quitter tes vidéos bordel, je fais même pas d'UI en plus je suis dev backend quel enfer

    • @BastiUi
      @BastiUi  3 роки тому +1

      Ahah, bienvenue chez les designer 🤓

  • @osho7874
    @osho7874 4 місяці тому

    Cette vidéo c'est de l'or en bytes

  • @thomasharmel7298
    @thomasharmel7298 3 роки тому +2

    Il est fort ce Basti. Merci pour le tuto !

  • @emelinewang9164
    @emelinewang9164 3 роки тому +1

    Merci pour ce tuto archi cool. Super ta façon de présenter, c'est simple et captivant, j'adore !

  • @alexandrecohen5816
    @alexandrecohen5816 3 роки тому

    C'est tellement ma vidéo exemple ! Je me la repasse en boucle pour bien comprendre, encore merci ! =)

  • @KarzasCross
    @KarzasCross 10 місяців тому

    Oh merci !!! Tout est plus clair ! ♥

  • @Francoisvrais
    @Francoisvrais Рік тому

    whaou j'essaye de faire a peu pres pareil sur la nouvelle version en sachant que cette video date de 2 ans j'en suis pas loin mais c'est pas tout a fait ça, refait nous des video de mise a jours :p surtout avec les nouveauté d'autolayoute 🙏

  • @misterkukiz
    @misterkukiz 3 роки тому +2

    j'utilise figma depsuis 2ans, j'adore ce logiciel :3

  • @sessouboris8261
    @sessouboris8261 3 роки тому

    Le clin d'oeil à la fin. Trop mignon

  • @user-oq6de8sd6y
    @user-oq6de8sd6y 3 роки тому +1

    C'est trop bon ça. Et top le fill container, bien mieux que le collins.

    • @BastiUi
      @BastiUi  3 роки тому

      Le collins ? Le Collins d'alaska ?

    • @user-oq6de8sd6y
      @user-oq6de8sd6y 3 роки тому

      @@BastiUi Non le fill collins ……… coup de cymbale, par Phil évidement

  • @glodelmosatu9001
    @glodelmosatu9001 Рік тому

    merci infiniment pour ce tuto claire et précis !

  • @toonssound8969
    @toonssound8969 3 роки тому

    Tu es une source incroyable ! Bonne continuation et merci de ton contenu très enrichissant !

    • @BastiUi
      @BastiUi  3 роки тому

      Merci à toi 😊

  • @VincentVisionOff
    @VincentVisionOff 3 роки тому

    Salut, j'ai découvert ta chaîne sur tiret du 8, ça fait 2 mois que j'apprends le développement en auto didacte (à 33 ans un boomer). je kiffe la musique de ton générique je l'avais déjà entendu mais trop bien, sinon en terme de contenu mouais bof...
    non je plaisante j'apprends plein de truc c'est cool

  • @aboubacresall8013
    @aboubacresall8013 Рік тому

    la formation en ui design serait top

  • @nemaiahdhulu849
    @nemaiahdhulu849 5 місяців тому

    le bouton s'abonner marche et en plus le pouce bleu aussi :)

  • @senegamers
    @senegamers 10 місяців тому

    MERCI!😍

  • @stonoly
    @stonoly 3 роки тому

    Super video et j’ai adoré voir l’anim en attente de Basti faite en live

    • @BastiUi
      @BastiUi  3 роки тому

      C'est vrai bien vu :)

  • @Grapfy
    @Grapfy Рік тому

    Très intéressant mais assez complexe à comprendre, mais je suis en sortis. 😮‍💨

  • @lewisaupy
    @lewisaupy 3 роки тому

    Merci Bastiprof ! 🔥

  • @juliette6616
    @juliette6616 Рік тому +1

    Merci beaucoup ! Bon hum.. j'ai dû te mettre au ralenti pour suivre la cadence et t'ai fait repeat pendant 3 heures en essayant de faire en même temps, mais y'a toujours une merdouille qui fait que ça marche pô 😅Pas évident, j'ai l'impression d'être bête, mais je vais persévérer. Une fois que j'aurais compris le truc, je ne ferai plus que auto-layer mes frames! Merci merci 👍🏼👍🏼

    • @bishop2049
      @bishop2049 Рік тому

      j'ai l'impression que figma à maj l'autolayout depuis, pcq pareil je deviens fou ça marche pas! :D Si t'as trouvé d'autres videos à ce sujet jsuis preneur, mes debuts sont TRES laborieux

    • @tomlayet
      @tomlayet Рік тому +1

      Yes, j'ai remarqué que les paramètres "fixed height" et "hug contents" ont bougé un tout petit peu plus haut, à côté des dimensions de la frame. Au cas où ça aide quelqu'un qui repasse par ici plus tard !

  • @cell1820
    @cell1820 2 роки тому

    Super tuto ! Merci beaucoup.

  • @AngyDelporte
    @AngyDelporte 3 роки тому

    Super intéressant le tuto ! Merci Basti 💜

  • @haroldaholoukpe7704
    @haroldaholoukpe7704 2 роки тому

    Incroyable contenu

  • @killervolant47
    @killervolant47 3 роки тому

    Toujours au top tes vidéos 💪🔥

  • @daviddupuis9934
    @daviddupuis9934 3 роки тому

    Super propre!

  • @berru2783
    @berru2783 3 роки тому

    🙏Amour sur toi💚

  • @geoffroyoger5313
    @geoffroyoger5313 2 роки тому

    Merci

  • @farfadet2222
    @farfadet2222 2 роки тому

    Bon tuto ! waoua tu vas vite ! Par contre les constraints ne s'affichent pas toujours chez moi 🤔Je passe de Sketch à Figma et j'avoue que j'ai un peu du mal sur Figma avec ces deux notions de contraintes et auto-layout qui auraient pu être mergés dans le même environnement...

  • @stephanenicolas6250
    @stephanenicolas6250 3 роки тому

    Merci 🙏

  • @JosephMaarek
    @JosephMaarek 3 роки тому

    Intéressant

  • @ToX1nE
    @ToX1nE 3 роки тому

    justement ça tombe bien que tu mettes en intro le test du compresseur sonore parce que dans la plupart de tes vidéos, le son pète beaucoup trop les oreilles lorsque tu parles, ça agresse grave :/ (cela n'enlève en rien que tes vidéos sont de bonne qualité et le contenu est vraiment bien :) )

    • @BastiUi
      @BastiUi  3 роки тому

      Ça t’agresses dans quel sens ? Le volume, les aigus ou autres choses ?

  • @4zqS
    @4zqS 2 роки тому +1

    7:11 scale est grisé chez et impossible de trouver comment le rendre actif. Les explications sont superbes par contre merci beaucoup.

    • @4zqS
      @4zqS 2 роки тому +1

      Je viens de répondre à ma question : si la contrainte "Scale" est grisée, il faut que la frame (de couleur) soit en resizing "fixed" en hauteur et en largeur. Les textes quant à eux doivent être en resizing "Fill" en hauteur et en largeur. Ces paramètres se trouvent au niveau des coordonées des objets et de la taille en haut à droite dans l'interface.
      J'adore Figma mais c'est la première fois que je trouve quelque chose d'aussi contre intuitif dans ce logiciel.

  • @lacompagniedesidees7679
    @lacompagniedesidees7679 3 роки тому

    Ouah, c'est vraiment puissant Figma... merci pour cette vidéo, de nouvelles astuces pour simplifier, c'est top ! Il y a une étape que tu passes vite... celle quand tu changes les photos... je multiplie les cards mais je n'arrive pas à incorporer ou changer de photo sur les components ?! Peut être as tu déjà fait une vidéo sur cela ?!

    • @BastiUi
      @BastiUi  3 роки тому

      Je pense que juste tu double clique dessus et dans Fill tu changes l'image ;)

  • @ixo9763
    @ixo9763 Рік тому +1

    salut, à 7,14 de la vidéo, quand il sélectionnes "scale, moi il est grisé (pareil pour left and right) ,la fenêtre resizing n'apparait pas, je pense que c'est car j'ai 2 flèches bleu de sélectionné alors que lui a que la flèche bleu vers le bas, j'ai recomencé le tuto à chaques fois l'option scale ne s'affiche pas, HELP, pareil à 9,32 la fenetre resizing ne s'affiche pas (avec les options fill container)

    • @damdou94
      @damdou94 Рік тому

      Hello, est ce que tu avais trouvé la solution à ton problème ? Je suis exactement dans le même cas ! Merci

  • @matheodebray4776
    @matheodebray4776 6 місяців тому

    Hyper ludique, très bonne vidéo ! Comment marche ta formation ?

  • @darky2600
    @darky2600 5 місяців тому +1

    "on est bientot 10k"
    moi qui regarde la video en 2024 :

  • @babayaga2609
    @babayaga2609 6 місяців тому

    Slt Basti la forme ? J'ai suivi ton tuto en adaptant a mon besoin (exactement la meme chose sauf qu'en dessous du titre et sous titre, j'ai un Btn) j'ai beau re re refaire ton tuto le comportement du btn pose probleme ^^ .

  • @malanbadji2385
    @malanbadji2385 Рік тому

    bonsoir, je veux savoir quelle application utiliser. merci

  • @enzovilaca2521
    @enzovilaca2521 2 роки тому

    Pourrais tu faire un tuto pour faire un formulaire ??

  • @monsieurVD
    @monsieurVD 3 роки тому

    Top 👌

  • @BBbuzzTv
    @BBbuzzTv 3 роки тому +1

    J'aimerais bien que mon boss me paye des formations Basti Ui pour que je maitrise Figma. ^^

  • @nolosotwitch
    @nolosotwitch 2 роки тому

    Bonjour, super vidéo par contre il y a quelques chose qui ne marche pas. J'ai beau tout essayer et je me suis servie de ton fichier source pour comparer et ca ne marche toujours pas.
    Dans la partie "Masonery Grid", lorsque j'ajoute un pluging Bluch dans mon composant parent, ça me l'applique dans tous les enfants dans la grid. Impossible de le supprimer dans les enfants, ça me le cache juste et impossible d'ajouter une autre illustration Blush dans les enfants composants. Est-ce que vous pouvez m'aider car j'ai tout essayé et rien à faire... Merci beaucoup

  • @ThomasPOV
    @ThomasPOV 19 днів тому

    Bonjour,
    Pour le responsive d'un site ( desktop / tablet / phone ), vous utilisez les frames " android " ou " apple " ?

    • @BastiUi
      @BastiUi  19 днів тому +1

      Je privilégie le device de test que j’ai ou le device de test du client. Après peut importe vu que je rends le proto responsive avec l’autolayout et les contraintes

  • @kunnykuni
    @kunnykuni 3 роки тому

    Basti : Salut à tous ! J'suis la carte ! La carte ! La carte !
    Dora l'exploratrice : Je fais te coller un procès

  • @raphaelkoudite2967
    @raphaelkoudite2967 3 роки тому +1

    ❤️❤️❤️❤️

  • @yaragri9552
    @yaragri9552 3 місяці тому

    Bonjour Basti.
    Est-ce que vous avez une école de formation, avec qualification Qualiop ?
    Si oui, je peux débloquer un budget pour faire vos formations.
    Merci par avance.
    Merci pour tout.

  • @tristannoellec1213
    @tristannoellec1213 3 роки тому

    Salut ! J'ai un problème que je ne comprends pas, comment faire pour que mes typo soient aussi responsive (je veux qu'elle s'agrandisse en même temps que mes éléments.) quand j'agrande mon bloc elle reste sur la même taille, est ce que c'est possible de faire ça ?

  • @monleboncoin8220
    @monleboncoin8220 Рік тому

    Je ne sais jamais trop quand utiliser "groupe" ou "frame"

  • @bogossito4516
    @bogossito4516 2 роки тому

    c'est quoi la différence entre un groupe et une frame ?

  • @Alpange
    @Alpange 2 роки тому

    A 17:15 , tu n'utilises pas le cmd-click pour sélectionner directement l'élément le plus profond de l'arbre. Do you know ?

    • @BastiUi
      @BastiUi  2 роки тому

      Yes I know. Mais parfois ça va trop profond et ça sélectionne le tracé du picto, donc pas idéal tout le temps.

    • @Alpange
      @Alpange 2 роки тому

      @@BastiUi 👍C'est vrai.
      Il y a aussi shift-return pour sélectionner le parent si tu es descendu trop bas.
      Je voulais juste être sûr que tu n'étais pas passé à côté car j'étais comme un fou quand j'ai découvert ces méthodes de navigation.
      Gros merci pour ces vidéos btw.

  • @call.me.ic4rus
    @call.me.ic4rus 3 роки тому +1

    ça fonctionne pour les gens qui ont un panaris ?

  • @arieldiahou1940
    @arieldiahou1940 Рік тому

    fais une nouvelle video pour les nouveaux s'il te plait

  • @T_web3
    @T_web3 3 роки тому

    C'est quoi tes tarifs dans le graphisme?

  • @poneyardent.4684
    @poneyardent.4684 3 роки тому

    C'etait un lel pour le référencement.

  • @loiclafferriere262
    @loiclafferriere262 Рік тому

    merci pour le tuto mais il doit me manquer les bases, tu utilises beaucoup de raccourcis clavier qui rendent la compréhension pour un débutant difficile... Quelqu'un aurait un tuto plus simple pour du responsive sous figma à me conseiller?

  • @arantxa3842
    @arantxa3842 3 роки тому +1

    Bonjour Basti, merci pour cette vidéo, c'est top. j'ai essayé de télécharger le fichier figma que tu proposes, mais je n'ai pas réussi à le voir sur figma, je dois faire comment ???????

    • @ElectraPsycho
      @ElectraPsycho 3 роки тому

      Hello ! J'ai le même soucis ...

    • @BastiUi
      @BastiUi  3 роки тому

      Ah c'est étonnant 🤔
      Quand tu télécharge le fichier source tu as bien un ".fig" ?
      Si oui tu prends le ".fig" et tu l'ouvres dans Figma.
      D'autres personnes ont eu le soucis ?

    • @ElectraPsycho
      @ElectraPsycho 3 роки тому

      @@BastiUi On obtient bien un .fig mais Figma n’en veut pas ...

    • @arantxa3842
      @arantxa3842 3 роки тому

      même chose

    • @BastiUi
      @BastiUi  3 роки тому

      Windows ? Mac ?
      Et avec d’autre .fig vous y arrivez ?

  • @benlcmb
    @benlcmb 3 роки тому

    c'est genial ça , merci pour le tuto, parcontre Figma c'est hyper puissant , mais y'a qu'un truc que j'arrive pas a faire ( attention lynchage) mais comment on ouvre les psd dans figmaaaaaaaa , j'ai chercher mais pas trouvé :'( en tout cas merci pour tes tutos ça aides vraiment bien.

    • @shotolay
      @shotolay 3 роки тому +1

      Ouvrir un fichier PSD, AI, etc... est impossible avec figma

    • @BastiUi
      @BastiUi  3 роки тому +1

      Tu peux passer par du SVG mais sinon ce n'est pas possible

    • @benlcmb
      @benlcmb 3 роки тому

      Ok donc en fait vaut mieux commencer tout directement sur Figma . Ok merci beaucoup pour vos réponses .

    • @MrCaracolor
      @MrCaracolor 3 роки тому +1

      Transforme ton fichier .psd en fichier .sketch puis ton fichier sketch en Figma. (via avocode.com/convert-psd-to-sketch avant c'était gratuit) :)

  • @kamkous91
    @kamkous91 3 роки тому

    petite question :)
    ça vaut-il le coup de prendre l'abonnement de la version pro de figma?

    • @BastiUi
      @BastiUi  3 роки тому +1

      Si tu es étudiant : non
      Si tu travailles en entreprise, en collaboration avec des clients ou des designers et que tu as besoin de versionning safe : oui

  • @nicolasguy6830
    @nicolasguy6830 3 роки тому

    HEY Salut Basti ! Dis moi est ce que tu serais si il est possible de dire à un élément d'ignorer un autolayout ? Ex : dans un écran avec un autolayout globale, si je veux faire monter ou descendre un clavier en smart animate, je veux qu'il ignore les contraintes de l'autolayout pour pouvoir le positionner où je veux :)
    Merciiiiiii !

    • @BastiUi
      @BastiUi  3 роки тому

      Tu le sors de la frame AutoLayout 😬

    • @nicolasguy6830
      @nicolasguy6830 3 роки тому

      @@BastiUi et si c’est ton écran la frame autolayout ? C’est peut être pas une bonne pratique d’autolayouter l’écran... 🥶

    • @BastiUi
      @BastiUi  3 роки тому +1

      Tu met ta frame auto layout dans une frame normale et puis voilà ;)

    • @nicolasguy6830
      @nicolasguy6830 3 роки тому

      @@BastiUi Ouais je pensais à ça aussi, mais ça serait top de pouvoir ignorer un éléments dans un Layout, genre position Absolute quoi... Merci pour tes réponses en tout cas, toujours impressionné par ta réactivité !

  • @gjo9621
    @gjo9621 3 роки тому

    C'est juste fou ce que les app de UI sont capables de faire (pareil avec XD et la 3D). Mais j'ai toujours du mal à voir l'intérêt d'aller aussi loin dans le prototyping. Bientôt il sera plus rapide/facile de dev le produit que de le designer. Quand je vois l'interface de figma aujourd'hui j'ai l'impression de voir webflow (qui lui pour le coup te code le tout en html/css/js.

    • @BastiUi
      @BastiUi  3 роки тому +1

      L’intérêt d’aller aussi vite : faire des prototype plus vite pour faire plus de test utilisateurs. Grâce à ça tu es sure qu’au moment du dev tu as la bonne version entre les mains.

    • @gjo9621
      @gjo9621 3 роки тому

      @@BastiUi Justement... pas besoin d'aller aussi loin dans la précision pour faire des protos... Le testeur va rarement resizer sa fenêtre pour voir si tout est responsive. Et sur mobile, il va juste scroller et appuyer. :-)

    • @BastiUi
      @BastiUi  3 роки тому +5

      Et non justement. On ne fait pas ça pour que l’utilisateur redimensionne sa fenêtre durant le test. 😅
      On fait ça pour pouvoir décliner une maquette rapidement sous plusieurs formes à l’aide d’un seul composant responsive à la base. Pour améliorer sa vélocité de designer au quotidien en sommes.
      Les layout te permette de manipuler les éléments dans une grille propre ou tu n’auras pas à te soucier de vérifier tes margin et padding a chaque petites modification. Toute personne ayant du faire des modifications sur un logiciel graphique me comprendra 😉

  • @nikhildhaka4912
    @nikhildhaka4912 3 роки тому

    Can you mad this video with English language. 😭😭😭

  • @poneyardent.4684
    @poneyardent.4684 3 роки тому

    Lel

  • @fredpourlesintimes
    @fredpourlesintimes 9 місяців тому

    Tu vas trop vite, c'est très pénible à suivre.