Responsive Website In Figma

[@leonstrydom1]

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]

thanks a lot for this thorough suggestion, Leon! very appreciated ☺️🙌

[@leonstrydom1]

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

[@TimGabe]

@@leonstrydom1 video idea noted, my friend. thanks again 🙏 wish you a great week!! ☺️

[@Malachi_]

Took the words right out of my mouth...

[@victornzedu115]

by far one of the most useful / applicable tuts I’ve seen this year! thanks Tim!!

[@TimGabe]

wow, that’s so cool to hear Victor. thank you so much, my friend 🙌🤩

[@yusufolokode]

Of course, I'm definitely interested in more Figma tutorials like this, because this one is quite insightful. Thanks, Tim.

[@TimGabe]

super happy to hear this, Yusuf! thanks a lot for the nice comment 🤩

[@marlondotrafego]

That review in Figma website was very worth it. Thanks.

[@RLNDcaST]

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😂

[@TimGabe]

haha, I completely understand the confusion! 😅☺️ really glad you liked the content, Rolands!

[@aimenmalik5298]

Thanks for the guidance as well as the examples. Really helpful 🤗

[@TimGabe]

happy that you found it helpful, Aimen! 🥳🙏

[@mariyavesna2074]

such a good video, thank you fot you work and clear explaining

[@TimGabe]

thank you for the kind comment, Mariya 🤩

[@everydaydesignui]

Amazing tutorial, Tim! Keep it up, bro!

[@TimGabe]

thank you so much, Huỳnh! 🥳 means a lot!

[@jdosses]

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.

[@ArnauRos]

Great tutorial, Tim!

[@TimGabe]

Arnau, coming from a great content creator like yourself that really means a lot 🙏 thanks a lot, my fellow Flux creator! 🤩

[@Jubaer5]

Keep it up! Nice Tutorial Bro😊😊

[@TimGabe]

thanks a lot Jubaer! 🤩 makes me glad that you liked it!

[@taunado]

Great, thanks! More content like this please.

[@jdosses]

Is the 12 - 8 - 4 column a fixed rule? Is there an issue if I want to change that number? Thank you.

[@creatoratplay]

This was so helpful; thank you! I really like the CSS references and explanations! 🙌

[@michaeldavis4483]

Awesome tutorial. Super helpful.

[@AK_Designer18]

Thank you. Keep making such informative videos.

[@saleema6308]

so this is adaptive design approach as you designed for different screen sizes?

[@Frondlock]

Can't wait for the penpot tutorials :D

[@abdullahiowolabi5317]

I don't know why you're freaking out about Adobe Figma

[@TimGabe]

no Penpot tutorials planned, but happy that you watched Julianoe! 🤩

[@nhunmochii603]

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?

[@tobilobaajimosun6217]

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?

[@TimGabe]

thank you Tobiloba! 😃 the link seems to work for me -- have you tried it again after posting this comment? 😊

[@vealchop2490]

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.

[@Dark_Aeon]

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.

[@AbeDavid-us7ql]

Thank you

[@Dark_Aeon]

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.

[@samduss4193]

I do not get how you setup the all responsivness into prototype

[@awdbvzr9325]

'Breakpoints' plugin in Figma helps visualize all the views in a single frame

[@TimGabe]

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? 😊

[@awdbvzr9325]

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

[@rohith.e]

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

[@wafaalsabri556]

Thanks but where is the link of figma file please ?

[@shabnavk1394]

It's better If you colour grade your camera footage....

[@TimGabe]

point taken, my friend 🙌☺️

[@leonardofabbri3040]

Thank you!

[@desh_dev]

when i increase or decrease the size of my desktop the items stay in the same exact position

[@zenab588]

Is it possible to always adopt this method in design and deliver it to developers in this way?

[@Bazlightyear007]

Shouldn’t it be better to convert everything to components so if you change the text in 1, it’ll change in everything?

[@amirbs1684]

With your browser, how did you acquire the scaling feature?

[@DavidSmith-oi7nk]

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!

[@oboe_85]

Good, just what i need🤩

[@TimGabe]

that’s great to hear, Fabio! 🤩

[@miguelmondragon1366]

thank you my friend

[@muhammadnahidulislam]

Awesome stuff 🔥

[@TimGabe]

thanks a lot, Muhammad 🤩

[@cassidyo5980]

Does anyone know the shortcuts he is using in this video when fixing and filling the containers?

[@stardarkk]

thank

[@TimGabe]

a big thanks right back at you, my friend! ☺️

[@TigaaMuller]

Thanks a lot!!

[@marvinwilliams7938]

How did you get that scaling thing in your browser?

[@ravehighlights7075]

😍 lovely

[@TimGabe]

happy you like it, Rave! 🤩

[@carlosmartin3370]

Yh but what about tablet landscape.......? Especially with webfow breakpoints? Cmon flux?....1024px? Fux .

[@TimGabe]

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 ☺️👌

[@zinianawrin]

The Figma file link is not working. Could you check ?

[@nanaawuku2794]

wow good video

[@TimGabe]

thanks a lot Nana! happy you liked it ☺️🙌

[@raymytech]

How do we export to code?

[@weezyf775]

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

[@cruisejay1991]

Can u make like a tinder website using web flow?

[@TimGabe]

interesting idea! anything specific about Tinder's functionality/layout you're interested in? 😊

[@piotrgorski1945]

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

[@vealchop2490]

in my experience, this is generally dictated by the grid, or the importance of the content itself. There really is no formula.

[@piotrgorski1945]

@@vealchop2490 Thanks ;)

[@heyheyvicky1498]

Is there a free alternative to Figma if Adobe takes it down?

[@zquad5513]

Penpot and lunacy are good alternatives

[@TimGabe]

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

[@elifokur2610]

This isn't clear enough. I find it really hard to follow

[@kiel1730]

dude I thought i was watching pewdiepie

[@daanvanduuren9359]

geef die template

[@mingsirakowit3316]

Thank you