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

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.

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:

[MrTopu-hibk]

Another rare & Masterpiece video, Thanks Nandi ❤

[kevinjohnnuluddin]

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

[MrPhysics-km]

Can we import designs for the tablet and The Mobile screens form figma too without adjusting that manually in framer??

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

[ShyamnaikGuguloth]

Oh Boy… What an awesome video Nandi….🎉🎉🎉🎉

Watching your videos are so satisfying ❤

[TheCanCW]

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

[jojodesigns]

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?

[marie.bright]

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

[aartibandekar]

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.

[PranitKharat-wf]

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

[DesignDen]

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

[ditismijnnaampje]

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

[heyitscanci]

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!

[ashuu]

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

[FD-tcft]

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

[ux_loki]

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

[artcgix]

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

[EmmanuelAllucardCGuela]

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

[atharvamhadlekar]

How to remove the watermark which is at the bottom ?

[shubhiagrawal]

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