Figma Tuto • Responsive Design & Auto Layout

[@BastiUi]

🦊 😉

[@opheliebancod4692]

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

[@o0Granolla0o]

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

[@osho7874]

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

[@TheElnick_guitar]

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

[@BastiUi]

Hello, merci pour ton message :) J'ai déjà fait un live sur les Variantes : kzbin.info/www/bejne/jJjNpJ-ppNiXqrs Mais je ne pense pas en faire une vidéo KZbin dédiées pour l'instant.

[@melazik_]

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 !

[@Ahrkaa]

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 !

[@laboriefabien]

Meilleure vidéo de 2021

[@BastiUi]

💓

[@kyurann78]

Ç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]

Ahah, bienvenue chez les designer 🤓

[@KarzasCross]

Oh merci !!! Tout est plus clair ! ♥

[@thomasharmel7298]

Il est fort ce Basti. Merci pour le tuto !

[@sessouboris8261]

Le clin d'oeil à la fin. Trop mignon

[@BastiUi]

🦊

[@alexandrecohen5816]

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

[@emelinewang9164]

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

[@Vivi-sama]

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 !

[@senegamers]

MERCI!😍

[@glodelmosatu9001]

merci infiniment pour ce tuto claire et précis !

[@user-oq6de8sd6y]

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

[@BastiUi]

Le collins ? Le Collins d'alaska ?

[@user-oq6de8sd6y]

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

[@aboubacresall8013]

la formation en ui design serait top

[@toonssound8969]

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

[@BastiUi]

Merci à toi 😊

[@misterkukiz]

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

[@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 🙏

[@VincentVisionOff]

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

[@stonoly]

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

[@BastiUi]

C'est vrai bien vu :)

[@nemaiahdhulu849]

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

[@lewisaupy]

Merci Bastiprof ! 🔥

[@Grapfy]

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

[@juliette6616]

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]

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]

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 !

[@darky2600]

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

[@haroldaholoukpe7704]

Incroyable contenu

[@cell1820]

Super tuto ! Merci beaucoup.

[@AngyDelporte]

Super intéressant le tuto ! Merci Basti 💜

[@BastiUi]

😗

[@killervolant47]

Toujours au top tes vidéos 💪🔥

[@BastiUi]

Merci 😗

[@daviddupuis9934]

Super propre!

[@geoffroyoger5313]

Merci

[@berru2783]

🙏Amour sur toi💚

[@ixo9763]

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]

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

[@farfadet2222]

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

[@4zqS]

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

[@4zqS]

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]

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]

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

[@matheodebray4776]

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

[@JosephMaarek]

Intéressant

[@stephanenicolas6250]

Merci 🙏

[@malanbadji2385]

bonsoir, je veux savoir quelle application utiliser. merci

[@ToX1nE]

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]

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

[@ThomasPOV]

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

[@BastiUi]

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

[@nolosotwitch]

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

[@tristannoellec1213]

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 ?

[@enzovilaca2521]

Pourrais tu faire un tuto pour faire un formulaire ??

[@babayaga2609]

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

[@monleboncoin8220]

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

[@BBbuzzTv]

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

[@yaragri9552]

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.

[@bogossito4516]

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

[@raphaelkoudite2967]

❤️❤️❤️❤️

[@BastiUi]

😘

[@Alpange]

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]

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]

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

ça fonctionne pour les gens qui ont un panaris ?

[@l.graphics7605]

Oh hey nocturnal

[@call.me.ic4rus]

@@l.graphics7605 Salut toi !

[@BastiUi]

🤮

[@monsieurVD]

Top 👌

[@BastiUi]

😘

[@benlcmb]

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]

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

[@BastiUi]

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

[@benlcmb]

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

[@MrCaracolor]

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

[@kunnykuni]

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

[@T_web3]

C'est quoi tes tarifs dans le graphisme?

[@arantxa3842]

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]

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

[@BastiUi]

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]

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

[@arantxa3842]

même chose

[@BastiUi]

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

[@arieldiahou1940]

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

[@kamkous91]

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

[@BastiUi]

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

[@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?

[@nicolasguy6830]

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]

Tu le sors de la frame AutoLayout 😬

[@nicolasguy6830]

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

[@BastiUi]

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

[@nicolasguy6830]

@@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é !

[@poneyardent.4684]

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

[@gjo9621]

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]

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]

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

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]

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

[@poneyardent.4684]

Lel

[@fredpourlesintimes]

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