No video :(

How To Make ANY Design Responsive in Figma

Подписаться 64 тыс.

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

50% 1

Unique web designs are usually only unique in the desktop breakpoint. In this video we'll cover how you can take a hyper unique layout and make it responsive for lower breakpoints like mobile. This is just one way of completing a design like this, and its important to note there are many different ways of completing it.
Download the file for yourself and try it out:
www.figma.com/...
The original post:
dribbble.com/s...
Explore Figma Components 👇
www.tilebit.io
🛠 Try Figma 👇
bit.ly/3LqgGig
🛠 Figma For Pros 👇
bit.ly/3V5oZmD
-----------------
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauro...
📄 Bonsai Referral (try for free)
www.hellobonsa...
👨‍💻 Connect with me
arnau.design
🌎 Socials
/ arnau_design
/ arnau_design
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!

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

13 июн 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@ArnauRos Год назад

How would you have done this design? There's no wrong answer!

@jhinnbay Год назад

What's the hotkey for xray mode?

@ArnauRos Год назад

Shift cmd/ctrl X!

@emilyemslee 8 месяцев назад

Great video! 10 mins of your work takes me hours😂 I'm just starting out on my UX design journey, and I really like your style of tutorial, please upload more🙏🏻

@ArnauRos 8 месяцев назад

More coming 💯

@christianmagill3829 Год назад

Great video! I'd love to see how you would create a longer landing page, what type of styles/components you setup or import for a typical project... etc.

@TheMarsvin1 10 месяцев назад

I really appreciate this chill and concise teaching style

@ArnauRos 10 месяцев назад

I appreciate that!

@AlexandraLima93 29 дней назад

Hello :) I've been struggling to make my desktop design responsive and I've been following every step in this video. However, you created a mobile design on Figma, not a responsive design, right?

@Mahinoor-ls5fn 10 месяцев назад

Very underrated channel. You make me learn more clearly than other RU-vidrs. 😇

@chezchezchezchez 7 месяцев назад

How is it underrated? People, please stop using the word underrated. you do not know how to use it. This is not a good use of the word.

@MarkWhiteartist 8 месяцев назад

I didn't know figma had outline mode, that's so helpful. thanks

@ArnauRos 8 месяцев назад

Happy to help!

@EduardoLopes-zp6lc Год назад

Congrats and thank you for this amazing video! I have some questions to do about your mobile design. For this hero, don't you think that the image in the background might work better if you use absolute position and put some top padding on this autolayout to adjust the position of the other elements? About the CTA, don't you think that buttons needs to appear in the first view of the user? Usualy when I prototype a hero section, I set the frame as 360x640 to consider the smallers screens.

@ArnauRos Год назад

Hey! Yes those are some good opportunities as well. If we set the object in the background it might cause some contrast issues which is why I opted from adding it on top. On the buttons, that could also be a good thing to explore! I designed this imagining anything inside that frame was above the fold, so 100%

@justinoneill2837 Год назад

That's one way of doing it and then adding a dark gradient overlap on the hero image that would make the texts stand out more. As far as the CTA buttons, one way to handle that on mobile is to make them fixed positioned to the bottom. Another cool trick you could do is to use the sticky positioning, which would have the exact same effect as the fixed position until the user scrolls to the bottom. This is a popular technique if you were to have a large footer at the bottom and whenever you hit the footer the buttons will scroll up and the footer content will begin to scroll up

@fanaz.8517 29 дней назад

I love your videos, and they are really helpful, but the music in the background is irritating and distracting. Maybe in the future you could leave out the music or choose music that is not as distracting. Just a genuine request from someone with adhd. Keep up the good work!

@KeplerFontenele Год назад

Great video explaing design on Figma , however the title is misleading - you created a mobile design on figma not a responsive design on figma

@ArnauRos Год назад

hey, sorry I'm having trouble understanding

@lunatico981 Год назад

@@ArnauRos do you mean by responsive the ability to simply go from desktop to mobile with only reducing the width of the artboard?

@OSANDA_Design Год назад

Something I was struggled, hopefully next time I won't. Thanx man.

@ArnauRos Год назад

Glad it helped :)

@contra_hq Год назад

Love this! 🔥🚀

@ArnauRos Год назад

Glad you like it Contra, good to see you here again you guys are doing great work!

@contra_hq Год назад

@@ArnauRos of course! We love your content 💛

@prasadwadekar805 4 месяца назад

Too much confusing

@andrewk2338 9 месяцев назад

Which is better Figma or Webflow?

@ArnauRos 9 месяцев назад

Both are different tools, figma for design, webflow for front end :)

@user-me4ne2ci8c 9 месяцев назад

How can I enable X-ray mode? Thankssss

@ArnauRos 8 месяцев назад

shift cmd/ctrl X

@justinoneill2837 Год назад

I'm curious if there's a way to create this functionality at the component level? Container queries are possible now in CSS and built for this exact thing. If you know of a way please make a video! I've searched but couldn't find anything on it for figma

@ArnauRos Год назад

hey, not sure what you mean here

@lunatico981 Год назад

I think I do understand and I am struggling with making that work in figma, but no luck so far. seems like there is no way to have it all stacking automatically the way you want by simply streching the desktop to mobile.. if thats what you were reffering to? It can, for really simple desing, but this one still needs to be rearanged and tweeked to show how it turns into mobile or tablet as well.

@jeremygarcia2083 Год назад

@@lunatico981 I´m curious. Not all designs adjust automatically, right?

@lunatico981 Год назад

@@jeremygarcia2083 now I am not sure what do you mean? you need to build autolayout in a way to be able to adjust automatically, but it works for really simple blocks and pretty useless if you ask me.