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
8 июл 2024