Figma Tuto • Responsive Design & Auto Layout

0:00 - Introduction
1:20 - Final Result
2:28 - Auto Layout
4:15 - Masonry Grid
11:22 - CTA
12:00 - Social Card
17:28 - Google Meet
20:17 - Conclusion
Download source file : gum.co/BastiUiAutoLayout
Through 3 examples, I will share with you tips on how to do Responsive Design in @Figma using Constraints and Auto Layout. Do not hesitate to write in comment if you have any questions, I read all your messages 😗
________________________________________________________
#Responsive #AutoLayout #Figma
👀 ABONNEZ-VOUS → bit.ly/KZbinBastiUi
👕 MA BOUTIQUE → shop.spreadshirt.fr/bastiui/
● SOUTENEZ-MOI
📺 UTIP → utip.io/bastiui
💰 PAYPAL → www.paypal.me/bastirelire
● SUIVEZ-MOI
📺 Twitch → / bastiui
👾 Discord → / discord
📸 Instagram → / bastiii
🐦 Twitter → / bastiui
👤 Facebook → bastiui
🏀 Dribbble → dribbble.com/Basti
😉 Merci d'avoir regardé la vidéo !
Je remercie Nath pour la composition de la musique (son Insta : lunath__)
Contact Pro et Partenariat : [e-mail]
© 2021 Bastien Marécaux | 👀 basti.fr

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

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

[@emelinewang9164]

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

[@osho7874]

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

[@alexandrecohen5816]

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

[@thomasharmel7298]

Il est fort ce Basti. Merci pour le tuto !

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

[@toonssound8969]

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

[@BastiUi]

Merci à toi 😊

[@glodelmosatu9001]

merci infiniment pour ce tuto claire et précis !

[@KarzasCross]

Oh merci !!! Tout est plus clair ! ♥

[@lewisaupy]

Merci Bastiprof ! 🔥

[@AngyDelporte]

Super intéressant le tuto ! Merci Basti 💜

[@BastiUi]

😗

[@cell1820]

Super tuto ! Merci beaucoup.

[@daviddupuis9934]

Super propre!

[@killervolant47]

Toujours au top tes vidéos 💪🔥

[@BastiUi]

Merci 😗

[@laboriefabien]

Meilleure vidéo de 2021

[@BastiUi]

💓

[@haroldaholoukpe7704]

Incroyable contenu

[@senegamers]

MERCI!😍

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

[@sessouboris8261]

Le clin d'oeil à la fin. Trop mignon

[@BastiUi]

🦊

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

[@stonoly]

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

[@BastiUi]

C'est vrai bien vu :)

[@misterkukiz]

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

[@stephanenicolas6250]

Merci 🙏

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

[@JosephMaarek]

Intéressant

[@berru2783]

🙏Amour sur toi💚

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

[@geoffroyoger5313]

Merci

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

[@Grapfy]

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

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

[@monsieurVD]

Top 👌

[@BastiUi]

😘

[@aboubacresall8013]

la formation en ui design serait top

[@nemaiahdhulu849]

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

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

[@raphaelkoudite2967]

❤️❤️❤️❤️

[@BastiUi]

😘

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

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

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

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

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

[@bogossito4516]

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

[@malanbadji2385]

bonsoir, je veux savoir quelle application utiliser. merci

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

[@T_web3]

C'est quoi tes tarifs dans le graphisme?

[@poneyardent.4684]

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

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

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

[@darky2600]

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

[@BBbuzzTv]

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

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

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

[@kunnykuni]

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

[@arieldiahou1940]

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

[@monleboncoin8220]

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

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

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

🤮

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

[@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) :)

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

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

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

[@poneyardent.4684]

Lel

[@nikhildhaka4912]

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

[@fredpourlesintimes]

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