Responsive Website In Figma

Do you struggle to convert your desktop design to tablet and mobile?
In this video Tim Gabe demonstrates, how to build responsive layouts by using columns at each breakpoint.

📽️ CHAPTERS

00:00 - Intro
01:00 - Reviewing Appel & Figma's responsive design
07:24 - Understanding Layout Grids inside Figma
11:40 - Getting started with responsive design in Figma
20:23 - Identifying column patterns for each breakpoint

Thanks for watching!

#webdesing #responsivedesign #webdesigner #figma

[leonstrydom]

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

[victornzedu]

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

[yusufolokode]

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

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

[marlondotrafego]

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

[mariyavesna]

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

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

[everydaydesignui]

Amazing tutorial, Tim! Keep it up, bro!

[aimenmalik]

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

[taunado]

Great, thanks! More content like this please.

[saleema]

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

[tobilobaajimosun]

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?

[nhunmochii]

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?

[AK_Designer]

Thank you. Keep making such informative videos.

[zenab]

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

[creatoratplay]

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

[Frondlock]

Can't wait for the penpot tutorials :D

[jdosses]

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

[vealchop]

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]

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.