Framer - 2hr Responsive Web Challenge

The hardest part for any web designer is making your entire site fully responsive for any screen size.
Follow me in this 2 hour challenge or exercise style tutorial where we try to hack through making a Figma website design into a fully responsive Framer website.
Resources
- Final site design: ledbyux.com
- Figma project file: bit.ly/3HQcQfi
00:00 Introduction
00:54 Copying Figma design to Framer with the Framer Plugin
05:55 Navigation
10:00 Header section
19:23 Logos section
22:34 Section 2 - content tables
50:58 Section 3 - Event agenda
58:46 Testimonial
1:01:51 Section 4 - Education blurb
01:07:34 Help and footer section
01:18:44 Mobile responsive
02:01:45 Adding links / scroll links
02:09:01 Final checks
#framer #webdesign #responsivewebsite #landingpagedesign #tutorial #nocode #challenge #bootcamp #uiuxdesign
------------------------------------------------------------------------------------------------
Check out Framer’s FREE Canvas Based Website Builder
Sign up here → www.framer.com?via=buildwithomar
Other tools used
- loom.com - What I used to record my screen for this video
- www.figma.com - The worlds best UI/UX design tool of course :)
------------------------------------------------------------------------------------------------
Follow me here for more content:
📱 TIKTOK ‧ / omar.builds
📷 INSTAGRAM ‧ / omar.builds
🐦 TWITTER ‧ / omar_builds
🌐 LINKEDIN ‧ / omarbuilds
------------------------------------------------------------------------------------------------
Startups I am currently building:
👉 www.Glorify.com - A VC-backed SaaS design tool startup
👉 www.Together.Design - A productized UI/UX service platform
👉 www.Blitzit.app - a personal productivity tool that keeps you in flow state
And a few more in stealth mode :D

[@user-ge1in5vt9b]

the best video so far about making responsive websites. thank you so much :) I have watched a few videos about making a website responsive but most of them only shared the basics of how things work which wasn't enough especially that I'm new to this. but your video is completely different, watching you make a full website responsive helped me get a better understanding of the process of making a website responsive.

[@JT-dt9lp]

I want to thank you for sharing this as its given me the confidence to go in and play around with the tool. It was so helpful to see you trying different things and making the end product look amazing.

[@KarolisTan]

You have no idea how much I needed that Z-Index thing, thank you so much!

[@BuildwithOmar]

Glad I could help! 🙌🏾

[@davidrivers2734]

Very nice, you're a good teacher

[@elysiumcore]

This channel is a gold mine for framer 🔥 keep it up mate

[@BuildwithOmar]

Thanks dude 🙏🏽🫶

[@elysiumcore]

@@BuildwithOmar I need to make a test website ...it looks easier than webflow 👀

[@Exezvfx]

thanks for this video!

[@omnimat]

Great case study!

[@BuildwithOmar]

Thanks dude!

[@user-vo5zt6qn5t]

Sir, it help me so much to create my own portfolio. My biggest thank from me. Can't wait to see animation part video.

[@angelicojohnrago2878]

Great contenttt

[@ausome0me]

Thanks Man!

[@mkbfhd]

thank you for this!

[@BuildwithOmar]

No worries dude, let me know how you get on!

[@vishanfernando6774]

This is super useful

[@BuildwithOmar]

Thanks buddy ❤

[@srinathjk]

Really The best comparison video. And can you make me clear that I'm Building a site which uses chatbot features and File Upload feature where users upload their files so we receive them in back end and revert back to them outside our site. So confused whether to use framer or webflow, as webflows's file upload feature is expesive but there's no option i could find for this in framer ( I'm more of ok with the framer price range so wonder if i could work this out within the framer)

[@neverforget1575]

Wow was watching more and I feel your pain it keeps changing, framer says its quick to build a website, but having to spend so long just trying to fit some text is ridiculous, did you manage to work out a defacto way of doing things? Thanks

[@leslie8]

Never subscribed so fast. lol 😁

[@BuildwithOmar]

Glad your getting value!

[@razvanmuresan6683]

all the framer websites i have seen have a max width of 1440. how can I make a website that is full width (100%) and everything scales properly. i have problems with images when they scale

[@neverforget1575]

This is the problem with Framer, 30:00 mark, the fill, fit is very confusing and even more sometimes you set properties and they get removed or changed, if Framer just did a regular flex box grid type layouts it would make the switch from Webflow a no brainer and stop the confusion of having to try to work out what you need to choose. Is it fill, fit, rel, etc Thanks for the tutorial though.

[@BuildwithOmar]

Yea lots of parent child layer dependencies- but Once you get the hang off it, it becomes natural. I’m much more fluid now after these exercises.

[@nordine4359]

hello, thank you bro for this tutorial, do you plan to make others? 😁

[@BuildwithOmar]

Yes more coming soon! ❤

[@omararellanomx]

Hi Omar, how are you? I greet you from Cancun, Mexico, I see that the link to your twitter account does not exist, how do I find you on that social network?

[@BuildwithOmar]

I am on Twitter señor. Use the same handle everywhere @buildwithomar

[@taylorjackson3691]

Thinking about switching to this from Webflow.

[@BuildwithOmar]

We’re moving my entire SaaS company from webflow to this. Just keeps designers and non coders as gatekeepers! So much more efficient!

[@des7638]

@@BuildwithOmar YO can you make a video talking about this in depth? I Ive been on webflow for years and just discovered Framer. thanks :)

[@BuildwithOmar]

@@des7638 comin soon!

[@naeempersonal]

Is html css essential for making website responsive in framer? or html css essential in framer?

[@MixLife96]

From good looking site we want, that site should be can be aslo web app on framer

[@mrk3676]

this to fast for me for beginner tutorial hahaha can you recommend some comprehensive tutorial? thanks

Ain't that funny that the best practice is to design mobile first, but in framer you better design desktop first...

[@Gearyco]

The DOM output is a nightmare.

[@adnanmehedii]

Can you explain?

[@osks]

DOM???

[@jayce3820]

Promo SM 🙏

[@LorettaBangBang]

Why even design in Figma anymore? Why not design in Framer? I thought that was the whole point

[@BuildwithOmar]

That’s why I mentioned at the end that direct to Framer is one possible workflow. But to answer your question, many Ui/Ux designers get better clarity from a Figma mockup design before migrating it to Framer.