Go From Figma to Live Website in 20 Minutes (No-Code)
Вставка
- Опубліковано 26 лип 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to turn your Figma website design to a live working website with the help of Framer. You'll learn how to import your design to Framer, and how to optimize it for different breakpoints to achieve a responsive website. By watching this video, you’ll be able to publish a personal website without writing any code.
Remix the Framer project: nandi.framer.website/
Figma file: bit.ly/3LGJfa4
00:00 - Introduction
00:50 - Importing from Figma to Framer
2:50 - Setting responsive full width
4:21 - Fixed navigation bar
4:56 - Optimizing the image
5:25 - Creating a button component
7:03 - Adding tags to the sections
7:27 - Adding links
8:12 - Creating hover states
9:10 - Creating scroll sections
10:50 - Optimizing the website on smaller breakpoints
14:48 - Responsive navigation bar
20:00 - Publishing the website
21:15 - Conclusion & resources
Follow me on:
Twitter: / learnframer
Instagram: / framer.university
Another rare & Masterpiece video, Thanks Nandi ❤
Thanks, Topu, for always supporting me! 🫶
Amazing video, Nandi! And extremely helpfull, too! Thank you very much!
You're so welcome! I’m glad it was helpful :)
incredible, thank you !🙏
Oh Boy… What an awesome video Nandi….🎉🎉🎉🎉
Watching your videos are so satisfying ❤
Ahh thank you so much! You’re so kind! 🫶
I hope you learned something ✨
you have a very calming voice... learning plus relaxation... thank you
Haha thank u so much 💙💙
love the video, please keep it up!
Thank you! 🤚 I’ll keep going ;)
Thanks Nandi , Very Helpful
It is a pleasure to help, Omar! 🙌
Excited to learn framer ✨
Yeey! I hope I can help you on your journey of learning Framer.
Great video 🎉
Appreciate it, Jorn! 🙏
Keep going Bro!
Working on the learning platform at the moment learn.framer.university
New videos are coming after launching the platform.
Thanks so much! I just subscribed. Would love if you make another one perhaps with 2-3 pages with a contact form for a portfolio?
Thanks, Joanna! Yes, I'll do something like that in a future video probably.
@@framer.university was this created?
Hey Nandi, awesome content as usual.
One little feedback on the video, there is too much panning/zooming, I understand it's show details but sometimes it's more disorienting than it is helpful. :/
Hey! Thanks for the feedback.
I was also thinking about this. In the recording app I cannot easily change the zoom amount, that’s why I haven’t done it.
Hopefully they implement a feature that will allow me to set lower zoom levels for all zooms. 🙌
@@framer.university Great one. Curious to know, which recording app are you using?
Great video again. Do you prefer to make your design in Figma first or do it in Framer right away?
Framer right away!
Please release tutorials on framer, for beginners 😅 kind of webflow University it will be really helpful
Soon releasing the free beginner’s course. Make sure to hop on the waitlist to get access as soon as it’s released. framer.university
Thank you for the video, it was simple enough for figmates. However i didn't get the part about z-index. What is it used for and why did you set it to 3? Thanks!
Hey thanks! :)
Z-index determine the position of the layer on the Z axis. So basically a layer that has Z index 3 will be above an element that has Z index 1.
Higher value is always on top.
Can you teach how to make good layouts using CMS? Using filter, etc. Cant seem to find them online
Yes I’m planning content about the CMS.
Hey there, thank you for this video
Just letting you that the remix link does not work atm
Happy to help! :)
What’s wrong with the link? Works just fine for me.
Get back to the beard Nandi. Great content as always.
Appreciate it! 🫶
Hi Nandi how are you ! i would like to know , if you create animation or interaction in Figma, it work on Framer when we make import or it doesn't work for animation/interaction ?
You have to recreate animations and interactions in Framer.
@@framer.university okay thank you ! I am curious to know , today you build directly in framer or you start on figma ?
@@FloNocode straight in Framer.
& what about websites with complex functionalities or some e-commerce website ?
It depends on what you mean by complex. You can do pretty crazy stuff with code components.
If you want e commerce, I’d use Shopify ;)
How to remove the watermark which is at the bottom ?
You need to subscribe to a Framer plan. framer.com/pricing
Make a tutorial on how to create a blogging website on framer
I posted a tutorial about it on Twitter:
twitter.com/learnframer/status/1635926119684751365
@@framer.university thanku 🙏 best wishes from India 🇮🇳😃
I am not able to set width to fill for sections, please someone help me
make sure that parent frame is a stack.
Thank you, good tutorial but I think that the zooming and panning it's too much in many instances.
I hope that one day I can fix that. I am using Screen Studio and it doesn’t allow me to adjust the zooms in bulk.
Thanks for the feedback though!
@@framer.university bummer! I thought you were controlling that. Thank you, learning things with you. Appreciate it
Great video. Quick question. After I click the nav link at scrolls smoothly to a section it stucks there and i can't scroll up or down. It get unstuck only if I click the nav link again. Any idea why ? Thanks in Advance Nandi
I have no idea why is that. Can you send me a remix link for that project in Twitter DM?
What if I have multiple frames? And I don't have a one pager frame like yours
Then make it one frame :)
How to add WhatsApp to the website????
Theres no publish button for me (im free)
That’s impossible. Can you share a screenshot in Twitter DM?
Background music is too loud
Thanks for the feedback!
Relax bro just lower the volume 😂
@@framer.university amazing videos, super informative every time. Please keep dropping more of these
Thanks 😊 I’ll keep making these :)
@@SimphiweMangole🙏
Pretty "boring".
Is it? 🤪
Nice tutorial!
Thank you so much! 🫶