A "Part 2" video would make sense, I reckon -- If you could talk about collaboration with devs ("what do Figma's current restrictions mean for the handover process?" for example) in as much detail as you talked in this video, that would be pretty awesome
@@TimGabe Not sweat -- thank YOU for the cool video! But yeah, if you have any experience of handing over a responsive design to dev (where additional communication within Figma was needed -- assuming that, normally, you don't just send dev a figma link and that's it), it would be great if you could a vid about it
This is really good stuff.👍🏼 at start I didn't understand did I pushed on Flux Academy video or what... Because I have seen this guy in different videos😂
For the image, should we keep the ratio the same for every breakpoint? ( at least for mobile & desktop ), because some specific images can't be cropped?
What I find confusing in this file is the 1440 breakpoint... Going from right to left: 375px (mobile) layout works for screens lower than 744px Breakpoint 2- tablet layout- works for screens 744px-1023 px Breakpoint 1 works for screens 1024-1439 Desktop 1440px layout *should* work for 1440 and up. What's the point of the wide layout? You set it as different from 1440, as it has fixed and centered columns, and 1440 had stretch columns and fiexd margins. I am assuming that we should design all our breakpoint screens on their minimal respective space. For example, if we have a breakpoint 1024-1440, then we should design it on a 1024px frame.
One big question I have is the way it seems designers are building out responsive sites in Figma is almost exactly the same as Sketch. A lot of tutorials emphasize "auto layout", but if you're building separate templates at each breakpoint, what exactly is the point of doing that other than to maybe suggest how something should respond to a developer (who generally have their own ways of coding anyway). It seems as if the main advantage of figma is its collaboration tools and its prototyping, but at the end of the day, the actual DESIGNING of templates is not much different.
If you provide the developer with all of the answers as to how the website should behave when scaled, it's less work for them. They don't have to experiment and test as much. Plus it helps with consistency- the same elements will behave in the same way across the entire project. But autolayout is most useful for quickly modifying components and sections without worrying about accidental unevenness. The file will stay pixel perfect.
Your link to download the files doesn't seem to be working. I've tried on a couple of occasions, but the files were never sent. Would like to experiment using the files in the video if possible. Thanks!
The 4 column grid is difficult to work with. In many cases wouldn't you benefit from using 12 columns across all breakpoints? Also, wouldn't a secondary container have it's own set of columns inside? For example at 25:10 you have 3 elements (first, second, third) floating inside the main container; but wouldn't they still be spaced on their own grid? These are the instances where I get stuck. 😫
When I resize the frame my header text is overlapping the description text any reasons why? I set all the elements to fill and outer frame to fixed, yet the texts overlap when I resize
Hi Tim! Thanks for this helpful video. I was wondering if there is any chance of explaining the rules for scaling objects and typography (size and spacing)?
I don’t think you have to worry about that ☺️ although Adobe has a history of putting acquisitions in the graveyard, I’m positive they’re acknowledging why Figma has become what it is and that it has to stay true to its roots to continue being great
for the apple, they always encourage their users to use only apple products, that's the reason they only have less options in sizes respective to their products only , they don't give a F about all the other devices which are not the part of their ecosystem.
![เปิดคำทำนาย นอสตราดามุส - บาบา วานก้า ปี 2025 คนทั่วโลกต้องเจออะไรบ้าง? | แฉ 11 ธ.ค. 67 [2/3] |GMM25](http://i.ytimg.com/vi/xmTIKWJUMPM/mqdefault.jpg)
by far one of the most useful / applicable tuts I’ve seen this year! thanks Tim!!
wow, that’s so cool to hear Victor. thank you so much, my friend 🙌🤩
A "Part 2" video would make sense, I reckon -- If you could talk about collaboration with devs ("what do Figma's current restrictions mean for the handover process?" for example) in as much detail as you talked in this video, that would be pretty awesome
thanks a lot for this thorough suggestion, Leon! very appreciated ☺️🙌
@@TimGabe Not sweat -- thank YOU for the cool video!
But yeah, if you have any experience of handing over a responsive design to dev (where additional communication within Figma was needed -- assuming that, normally, you don't just send dev a figma link and that's it), it would be great if you could a vid about it
@@leonstrydom1 video idea noted, my friend. thanks again 🙏 wish you a great week!! ☺️
Took the words right out of my mouth...
Of course, I'm definitely interested in more Figma tutorials like this, because this one is quite insightful.
Thanks, Tim.
super happy to hear this, Yusuf! thanks a lot for the nice comment 🤩
That review in Figma website was very worth it. Thanks.
This was great.
Also very immersive experience with the typing sounds via laptops builtin mic^^
so this is adaptive design approach as you designed for different screen sizes?
Very interesting. It's so weird coming from print design and seeing the way the grid is used in web design, curious. Thank you for the information.
This is really good stuff.👍🏼 at start I didn't understand did I pushed on Flux Academy video or what... Because I have seen this guy in different videos😂
haha, I completely understand the confusion! 😅☺️ really glad you liked the content, Rolands!
Amazing tutorial, Tim! Keep it up, bro!
thank you so much, Huỳnh! 🥳 means a lot!
Great tutorial, Tim!
Arnau, coming from a great content creator like yourself that really means a lot 🙏 thanks a lot, my fellow Flux creator! 🤩
Nice tutorial! The best I've seen on this topic; please i can't get the Figma file to see how you set the constraints on the file, is the link broken?
thank you Tobiloba! 😃 the link seems to work for me -- have you tried it again after posting this comment? 😊
Is the 12 - 8 - 4 column a fixed rule? Is there an issue if I want to change that number? Thank you.
yes that numbers is global
For the image, should we keep the ratio the same for every breakpoint? ( at least for mobile & desktop ), because some specific images can't be cropped?
such a good video, thank you fot you work and clear explaining
thank you for the kind comment, Mariya 🤩
Keep it up! Nice Tutorial Bro😊😊
thanks a lot Jubaer! 🤩 makes me glad that you liked it!
Thanks for the guidance as well as the examples. Really helpful 🤗
happy that you found it helpful, Aimen! 🥳🙏
Thank you
What I find confusing in this file is the 1440 breakpoint...
Going from right to left:
375px (mobile) layout works for screens lower than 744px
Breakpoint 2- tablet layout- works for screens 744px-1023 px
Breakpoint 1 works for screens 1024-1439
Desktop 1440px layout *should* work for 1440 and up.
What's the point of the wide layout? You set it as different from 1440, as it has fixed and centered columns, and 1440 had stretch columns and fiexd margins.
I am assuming that we should design all our breakpoint screens on their minimal respective space. For example, if we have a breakpoint 1024-1440, then we should design it on a 1024px frame.
Great, thanks! More content like this please.
Awesome tutorial. Super helpful.
Is it possible to always adopt this method in design and deliver it to developers in this way?
This was so helpful; thank you! I really like the CSS references and explanations! 🙌
Thank you. Keep making such informative videos.
With your browser, how did you acquire the scaling feature?
Thank you
One big question I have is the way it seems designers are building out responsive sites in Figma is almost exactly the same as Sketch. A lot of tutorials emphasize "auto layout", but if you're building separate templates at each breakpoint, what exactly is the point of doing that other than to maybe suggest how something should respond to a developer (who generally have their own ways of coding anyway). It seems as if the main advantage of figma is its collaboration tools and its prototyping, but at the end of the day, the actual DESIGNING of templates is not much different.
If you provide the developer with all of the answers as to how the website should behave when scaled, it's less work for them. They don't have to experiment and test as much. Plus it helps with consistency- the same elements will behave in the same way across the entire project.
But autolayout is most useful for quickly modifying components and sections without worrying about accidental unevenness. The file will stay pixel perfect.
Can't wait for the penpot tutorials :D
I don't know why you're freaking out about Adobe Figma
no Penpot tutorials planned, but happy that you watched Julianoe! 🤩
Thank you!
'Breakpoints' plugin in Figma helps visualize all the views in a single frame
haven't used the Breakpoints plugin, but I've seen it covered in multiple videos.
what do you think about using vs. doing it manually? 😊
@@TimGabe it's very useful if you want to present the design to clients - a single figma link instead of multiple layouts for each breakpoints
Your link to download the files doesn't seem to be working. I've tried on a couple of occasions, but the files were never sent. Would like to experiment using the files in the video if possible. Thanks!
Good, just what i need🤩
that’s great to hear, Fabio! 🤩
thank you my friend
Does anyone know the shortcuts he is using in this video when fixing and filling the containers?
Thanks a lot!!
How did you get that scaling thing in your browser?
The 4 column grid is difficult to work with. In many cases wouldn't you benefit from using 12 columns across all breakpoints? Also, wouldn't a secondary container have it's own set of columns inside? For example at 25:10 you have 3 elements (first, second, third) floating inside the main container; but wouldn't they still be spaced on their own grid?
These are the instances where I get stuck. 😫
When I resize the frame my header text is overlapping the description text any reasons why? I set all the elements to fill and outer frame to fixed, yet the texts overlap when I resize
Awesome stuff 🔥
thanks a lot, Muhammad 🤩
😍 lovely
happy you like it, Rave! 🤩
Shouldn’t it be better to convert everything to components so if you change the text in 1, it’ll change in everything?
thank
a big thanks right back at you, my friend! ☺️
Thanks but where is the link of figma file please ?
when i increase or decrease the size of my desktop the items stay in the same exact position
wow good video
thanks a lot Nana! happy you liked it ☺️🙌
The Figma file link is not working. Could you check ?
How do we export to code?
I do not get how you setup the all responsivness into prototype
Hi Tim! Thanks for this helpful video.
I was wondering if there is any chance of explaining the rules for scaling objects and typography (size and spacing)?
in my experience, this is generally dictated by the grid, or the importance of the content itself. There really is no formula.
@@vealchop2490 Thanks ;)
Is there a free alternative to Figma if Adobe takes it down?
Penpot and lunacy are good alternatives
I don’t think you have to worry about that ☺️ although Adobe has a history of putting acquisitions in the graveyard, I’m positive they’re acknowledging why Figma has become what it is and that it has to stay true to its roots to continue being great
It's better If you colour grade your camera footage....
point taken, my friend 🙌☺️
Can u make like a tinder website using web flow?
interesting idea! anything specific about Tinder's functionality/layout you're interested in? 😊
Yh but what about tablet landscape.......? Especially with webfow breakpoints? Cmon flux?....1024px?
Fux
.
that’s indeed a common breakpoint Carlos, but the main message here is that it’s all contextual!
use whatever is needed for your project ☺️👌
for the apple, they always encourage their users to use only apple products, that's the reason they only have less options in sizes respective to their products only , they don't give a F about all the other devices which are not the part of their ecosystem.
dude I thought i was watching pewdiepie
This isn't clear enough. I find it really hard to follow
geef die template