Go From Figma to Live Website in 20 Minutes (No-Code)

No video

Go From Figma to Live Website in 20 Minutes (No-Code)

Рет қаралды 13,865

Күн бұрын

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.univers...
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.w...
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

Пікірлер: 76

@MrTopu-hi3bk Жыл бұрын

Another rare & Masterpiece video, Thanks Nandi ❤

@framer.university Жыл бұрын

Thanks, Topu, for always supporting me! 🫶

@khaledbouya Жыл бұрын

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. :/

@framer.university Жыл бұрын

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. 🙌

@hakeemolasupo3927 Жыл бұрын

@@framer.university Great one. Curious to know, which recording app are you using?

@kevinjohnnuluddin7069 2 ай бұрын

you have a very calming voice... learning plus relaxation... thank you

@framer.university 2 ай бұрын

Haha thank u so much 💙💙

@TheCanCW 6 күн бұрын

Hey Nandi, great vid! After importing my figma project to framer the resolution got really bad...I need helppppp 😩

@aartibandekar9520 10 күн бұрын

Incredibly Insightful video! A quick question, in the navigation bar, with the nav items - I'd like to add a custom underline to appear when the nav-item is selected. I already have one designed on figma where I can control the visibility but I don't know how to toggle it in Framer. I would really appreciate your guidance.

@framer.university 7 күн бұрын

You might wanna take a look at this underline button remix: framer.university/resources/underline-button-interaction-in-framer

@ShyamnaikGuguloth Жыл бұрын

Oh Boy… What an awesome video Nandi….🎉🎉🎉🎉 Watching your videos are so satisfying ❤

@framer.university Жыл бұрын

Ahh thank you so much! You’re so kind! 🫶 I hope you learned something ✨

@itsamreennaaz Жыл бұрын

Excited to learn framer ✨

@framer.university Жыл бұрын

Yeey! I hope I can help you on your journey of learning Framer.

@jojodesigns777 Жыл бұрын

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?

@framer.university Жыл бұрын

Thanks, Joanna! Yes, I'll do something like that in a future video probably.

@laracassardelia9178 Ай бұрын

@@framer.university was this created?

@user-qh5xd2wi3c Жыл бұрын

Please release tutorials on framer, for beginners 😅 kind of webflow University it will be really helpful

@framer.university Жыл бұрын

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

@marie.bright Жыл бұрын

Amazing video, Nandi! And extremely helpfull, too! Thank you very much!

@framer.university Жыл бұрын

You're so welcome! I’m glad it was helpful :)

@LilOKhalifaa Жыл бұрын

Thanks Nandi , Very Helpful

@framer.university Жыл бұрын

It is a pleasure to help, Omar! 🙌

@Oranrash Ай бұрын

incredible, thank you !🙏

@DesignDen673 Жыл бұрын

Can you teach how to make good layouts using CMS? Using filter, etc. Cant seem to find them online

@framer.university Жыл бұрын

Yes I’m planning content about the CMS.

@ckf3182 Жыл бұрын

love the video, please keep it up!

@framer.university Жыл бұрын

Thank you! 🤚 I’ll keep going ;)

@LanguagedesignLearn Жыл бұрын

Keep going Bro!

@framer.university Жыл бұрын

Working on the learning platform at the moment learn.framer.university New videos are coming after launching the platform.

@ashuu9257 Жыл бұрын

& what about websites with complex functionalities or some e-commerce website ?

@framer.university Жыл бұрын

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 ;)

@ditismijnnaampje 11 ай бұрын

Great video again. Do you prefer to make your design in Figma first or do it in Framer right away?

@framer.university 11 ай бұрын

Framer right away!

@heyitscanci 9 ай бұрын

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!

@framer.university 9 ай бұрын

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.

@ux_loki 2 ай бұрын

I am not able to set width to fill for sections, please someone help me

@framer.university 2 ай бұрын

make sure that parent frame is a stack.

@FD-tc1ft Жыл бұрын

Hey there, thank you for this video Just letting you that the remix link does not work atm

@framer.university Жыл бұрын

Happy to help! :) What’s wrong with the link? Works just fine for me.

@jornvandijk3721 Жыл бұрын

Great video 🎉

@framer.university Жыл бұрын

Appreciate it, Jorn! 🙏

@EmmanuelAllucardCGuela 3 ай бұрын

What if I have multiple frames? And I don't have a one pager frame like yours

@framer.university 3 ай бұрын

Then make it one frame :)

@artcgix Жыл бұрын

Thank you, good tutorial but I think that the zooming and panning it's too much in many instances.

@framer.university Жыл бұрын

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!

@artcgix Жыл бұрын

@@framer.university bummer! I thought you were controlling that. Thank you, learning things with you. Appreciate it

@atharvamhadlekar609 Жыл бұрын

How to remove the watermark which is at the bottom ?

@framer.university Жыл бұрын

You need to subscribe to a Framer plan. framer.com/pricing

@shubhiagrawal9885 Жыл бұрын

Make a tutorial on how to create a blogging website on framer

@framer.university Жыл бұрын

I posted a tutorial about it on Twitter: twitter.com/learnframer/status/1635926119684751365

@shubhiagrawal9885 Жыл бұрын

@@framer.university thanku 🙏 best wishes from India 🇮🇳😃

@mihmeg Жыл бұрын

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

@framer.university Жыл бұрын

I have no idea why is that. Can you send me a remix link for that project in Twitter DM?

@FloNocode 5 ай бұрын

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 ?

@framer.university 5 ай бұрын

You have to recreate animations and interactions in Framer.

@FloNocode 5 ай бұрын

@@framer.university okay thank you ! I am curious to know , today you build directly in framer or you start on figma ?

@framer.university 5 ай бұрын

@@FloNocode straight in Framer.