Responsive Website In Figma

Просмотров 94 тыс.

% 2 836

Master Figma for web design with our new, in-depth Figma course: t.ly/-YVCf
Try practicing responsiveness yourself by cloning the Figma project Tim is working on: bit.ly/3SFOVDg
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.
📒 Understand the principles of layout with our FREE handbook: bit.ly/3w3QW2S
🔥 AND take advantage of all our other free resources: bit.ly/3C8gBeL
📽️ 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
Check out Tim's RU-vid Channel 👉 ru-vid.com
Tim Gabe’s Instagram 👉 timgabe.design?hl=en
Learn to build pixel-perfect websites: bit.ly/3fFhRwI
Learn how to succeed with our top-rated courses: bit.ly/3CZFtpn
Thanks for watching!
#webdesing #responsivedesign #webdesigner #figma

Опубликовано:

7 окт 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 81

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

@marlondotrafego 6 месяцев назад

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

@AK_Designer18 Год назад

Thank you. Keep making such informative videos.

@michaeldavis4483 Год назад

Awesome tutorial. Super helpful.

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

@aimenmalik5298 Год назад

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

@TimGabe Год назад

happy that you found it helpful, Aimen! 🥳🙏

@creatoratplay Год назад

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

@buwru Год назад

Amazing tutorial, Tim! Keep it up, bro!

@TimGabe Год назад

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

@taunado 3 месяца назад

Great, thanks! More content like this please.

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

@mariyavesna2074 Год назад

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

@TimGabe Год назад

thank you for the kind comment, Mariya 🤩

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

@TigaaMuller Год назад

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

@jdosses Год назад

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

@leonardofabbri3040 6 месяцев назад

Thank you!

@nhunmochii603 3 месяца назад

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?

@amirbs1684 Год назад

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

@AbeDavid-us7ql Год назад

Thank you

@miguelmondragon1366 Год назад

thank you my friend

@Jubaer5 Год назад

Keep it up! Nice Tutorial Bro😊😊

@TimGabe Год назад

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

@oboe_85 Год назад

Good, just what i need🤩

@TimGabe Год назад

that’s great to hear, Fabio! 🤩

@marvinwilliams7938 Год назад

How did you get that scaling thing in your browser?

@cassidyo5980 11 месяцев назад

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

@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

@DavidSmith-oi7nk 9 месяцев назад

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!

@ravehighlights7075 Год назад

😍 lovely

@TimGabe Год назад

happy you like it, Rave! 🤩

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

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

@desheapettiford 5 месяцев назад

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

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

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

@stardark9mc Год назад

thank

@TimGabe Год назад

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

@raymitech Год назад

How do we export to code?

@wafaalsabri556 6 месяцев назад

Thanks but where is the link of figma file please ?

@zinianawrin Год назад

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

@zenab588 5 месяцев назад

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

@nanaawuku2794 Год назад

wow good video

@TimGabe Год назад

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

@Bazlightyear007 11 месяцев назад

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

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

@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

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

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

@muhammadnahidulislam Год назад

Awesome stuff 🔥

@TimGabe Год назад

thanks a lot, Muhammad 🤩

@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