Framer Tutorial - Build SaaS Landing Page Website from Figma to Framer
Hi everyone, I am Abdul Aziz Ahwan from Indonesia,
In this video, we are going to learn Framer. Which we are going create Landing Page from Figma to Framer.
Say goodbye to coding. Now we can create a website without coding skills. Learn Framer together. No code site builder.
SignUp Framer for Free: https://www.framer.com/?via=abdulaziz...
Final Result Landing Page: https://saas-lp.framer.website/
#framer #landingpage #figma #design #ui #ai
My Screen Recording: https://screen.studio/@Zgn84
My Second Brain: https://taskade.com/?via=abdulazizahwan
My Hosting: https://ultahost.com/#abdulazizahwan
My UI UX Inspiration: https://mobbin.com/?via=abdulazizahwan
My Screen Recording: https://www.screenstory.io/?via=abdul...
Flutter Course: https://gumroad.com/a/659170419/fqamxr
No Code Course: https://nocodecamp.lemonsqueezy.com/?...
Support Me: https://buymeacoffee.com/abdulazizahwan
----------------------------------
Figma File: https://www.figma.com/community/file/...
Remix My Framer:
00:00:00 - Introduction
00:00:26 - Channel Support
00:00:51 - Introduction to Framer
00:01:30 - Features of Framer
00:02:48 - Creating an Account on Framer
00:03:56 - Framer Pricing
00:04:41 - Accessing the Dashboard
00:06:26 - Creating a Project on Framer
00:06:53 - Opening a Project on Framer
00:09:35 - Copying from Figma to Framer
00:12:37 - Setup Header Section
00:15:25 - Setup Logo Section
00:19:32 - Setup Product Image Section
00:23:40 - Setup Features Section
00:25:40 - Setup User Feedback Section
00:30:24 - Setup CTA Section
00:32:24 - Change Image to GIF
00:33:51 - Setup Navbar
0:42:12 - Setting the Footer
0:43:14 - Styling the Line
0:44:10 - Modifying Email Section
0:45:02 - Creating a Stack Layout
0:46:31 - Adjusting Alignment and Padding
0:47:06 - Moving to Tablet and Mobile Views
0:51:23 - Finalizing Tablet View
0:58:25 - Moving to Mobile View
1:01:47 - Adjusting Footer Section on Mobile View
1:13:24 - Fixing Image Alignment on Desktop View
1:27:02 - Applying effects to product images
1:27:28 - Adding cup effect to feature image
1:27:51 - Delaying the last card effect
1:28:08 - Previewing the effects
1:28:20 - Scrolling through the page preview
1:28:28 - Adding Animation to Feedback
1:28:48 - Adding Animation for CTA title and image
1:29:23 - Previewing the updated effects
1:29:33 - Publishing the website
----------------------------------
👨💼 Business Inquiries: [email protected]
----------------------------------
This video was made with great effort,
If you want to support me you can donate to the following link
Join this channel to get access to perks:
/ @abdulazizahwan
💰 PAYPAL
Link ► https://paypal.me/abdulazizahwan
🧧 SAWERIA
Link ► https://saweria.co/abdulazizahwan
🪙 TRAKTEER
Link ► https://trakteer.id/abdulazizahwan
☕ BUY ME A COFFEE
Link ► https://buymeacoffee.com/abdulazizahwan
----------------------------------
🤙 JOIN MY DISCORD
Link ► / discord
----------------------------------
Hopefully, you would love this video.
I am so grateful if you want to hit the subscribe button. Thanks
📌 SUBSCRIBE ME
Here ► http://bit.ly/AbdulAzizAhwan
----------------------------------
🎬 ANOTHER PLAYLIST
Flutter UI Design Best Practices
Link ► • Flutter UI Tutorial - UI Design Best ...
Flutter Firebase CRUD Tutorial
Link ► • Flutter Firebase CRUD Tutorial
Flutter Tutorial - Basic [EN]
Link ► • Flutter Tutorial - Basic [EN]
----------------------------------
👨💻 GEAR LIST & TOOLS
MacBook Pro 2017
( 8GB RAM 256GB Ventura OS )
Acer Swift 3 SF314-54G-51ZK
( 12GB RAM 256GB SSD NvME M.2 Windows 11)
Keychron K2 V2 Blue Switch
Logitech MX Master 2s
Canon EOS M50 Sigma 16mm f1.4
Logitech C922 Pro Webcam
Thronmax Mdrill Zero M4
----------------------------------
📱 FOLLOW
Twitter ► / abdulazizahwan
Github ► https://github.com/abdulazizahwan
My Blog ► https://abdulazizahwan.com
----------------------------------
Thanks for Watching!
Смотрите видео Framer Tutorial - Build SaaS Landing Page Website from Figma to Framer онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Abdul Aziz Ahwan 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 96 раз и оно понравилось 3 людям.