Figma to Website in MINUTES with this INSANE tool…

Building real websites without coding has never been easier for designers. In this quick tutorial we look at the (in my opinion) best tool for designers to create websites in 2023.
🔴 Find Free Framer Tutorials & Resources: timgabe.com

[@Abiisstudying.yessss]

How do you actually upload it live as a website ?

[@turaluix]

I remember the days Framer was a just design tool like Figma. Seeing that they lost in that competition and making a come back as low-code tool is such a great positioning. Now they use their experience from design aspect of the product and that gives them huge advantage. I am pretty good at Webflow but it has its own learning curve which would be hard for some people to pick it up. I hope they buy Framer and use their experience as a design tool in their really powerful product. Thanks Tim for teaching the community❤

[@TimGabe]

we really live in a time with awesome design tools right at our finger tips, so exciting 🤩 thank you for the kind words, Tural ❤️ happy to share the knowledge I have, and beyond grateful for comments like yours 🙌🥳

[@andrewsabeni137]

I've started to learn Figma for a side project. Things you've said inspired me to do continue, Framer didn't give up, still fighting.

[@Framer]

Love the video, Tim!

[@TimGabe]

wow, thank you-your tool is awesome! 🤩 expect more tutorial videos from me!

[@studioj183]

Thank you for showing everything without skipping ahead or speeding up the video!

[@relja_]

Pls do more, maybe build a full website. I'm interested in how the html and css look.

[@TimGabe]

planning on doing a much more thorough video on it, Relja ☺️🙏

[@scabento13]

​@@TimGabedo we now have the video? I'd like to see. I'm a designer but I want to start learning building front end, how do I start?

[@edlin.o]

Although webflow is a great tool, it is still very programming oriented in its ui. I think that a design oriented tool for a no-code platform was very much needed!

[@TimGabe]

agree totally!

[@kimcruz3889]

Can you make a video about the deliverables of a no code web designer? I’m confused what should I actually DELIVER to the client

[@TimGabe]

thanks for the video suggestion!!

[@mariamzayed-pv8de]

the copy pasting with figma become grouped differently once added to framer, also the masks get mixed up. I find it useful when the website is completely ready not for quick drafts. Maybe as an actual plugin into the figma would be nice

[@pseast]

Good video. Thanks for sharing. However, what is not mentioned is that you can't export code at all, and you can't use use your own domain unless paying for a subscription.

[@TimGabe]

you can export with Handshake (google for more info), but yes, domains require a subscription although i'd say that's fair considering how much value you get!

[@rivermanochio1430]

Hey Gabe! Could you please do a tutorial on clicking components on Figma and linking that click to another page? No one has done that yet and i'm trying to decide if the work flow within figma makes it the right tool for me. Thank you.

[@TimGabe]

hey river! will get back to figma tutorials in 2024, so then i'll revisit my list of topics to cover. i'll add this as an idea!!

[@thattech_boy]

Bro this is mad 🔥

[@anthonyobata5756]

Great video please do a full free tutorial video on how to create a website with animations effects using figma and framer thanks 🙏

[@TimGabe]

the series covering this is in the works 🤩

[@flaschnpost_aus_fernost9167]

Awesome Tim, ...i have to switch from a WP-Website, with a bulky builder (thrive) to a more intuitive tool thats why i consider Figma and i wonder, and have the question: "Has it the same functionality as a wordpress-environment !? ....I mean it is convinient to design, but if i want to connect it to Tag manager, hotjar and / or other marketing stuff, ...is there a way to implement those Taks, into my site!? ...I mean obvious it should be a work-around !? cause every marketer needs this :-)

[@TimGabe]

hey, my friend! 🥳 you can do anything and everything with custom code additions (eg. code components and code overrides) inside of Framer, so you'll maintain the same flexibility as you would with WordPress! check out Framer's Discord channel and ask them if you have specific questions, they're super responsive and helpful 😃

[@progressisbeautiful1541]

1. Can I export HTML to Tailwind? 2. Can I connect it to backend system using headless, or so?

[@TimGabe]

1. you can export React code 2. not sure about this one... 🧐 although, I think everything is possible if you're code savvy!

[@thelaundryman9287]

Could you do a video on how to structure our designs (with auto layout etc) so that we can get clean css and html exports?

[@TimGabe]

are you referring to Framer exports?

[@thelaundryman9287]

@@TimGabe yeah 😍 would be awesome I use Webflow currently but am looking to learn Framer

[@kidseathealthy2173]

I don't understand why would I design on Figma and then deal with the headache of resizing to make the website responsive when I can simply design the whole website in one of the platforms like Wordpress or Squarespace of Shopify where all the tools are available?

[@moggietweaks7914]

same question, however this is the where big company hires designer where designers do what the clients exactly wants on a small amount of time and when gets approve it will passed the impossible design to the developer lol(wich is my current situation we ah designer design the website and passed it to me once approved). the vid was misleading I was expecting a conversion from figma to html or wordpress (well to make the work easy for the developer hehe)

[@workmail1]

I love no/low code stuff! Can you do a tut with Framer/MUI and with a responsive hamburger menu? Like a real world example :)

[@TimGabe]

alfredo!! 🤩 thanks for the support ❤️more tutorials incoming on Framer, and I really like your suggestion about the responsive menu 👌

[@jogoeire]

Problem is it's now out-out-sync with Figma. Also the frame didn't see to auto expand vertically. He had to make it fit. Close though!

[@TimGabe]

some tweaking needed sometimes, but overall magical!

[@NJORD_]

Awesome tutorial. Very straight forward

[@ManjulaDasundepiction]

How did you design the animated Background?

[@TimGabe]

it's just a video from pexels made into a gif 😃

[@hawalk5707]

Thanks for sharing. Suggest to improve the sound

[@TimGabe]

have done that since this video, thank you!!

[@FranzEscolasticoDesigns]

Does it recognize components you added from Figma instead of making them in Framer?

[@TimGabe]

unfortunately no, not at this point. components in Framer work a bit differently, so I'm not sure they'll make that part of the export plugin. still though, recreating them in Framer is super fast! 😃

[@davidostrowski679]

I know this a year old but I literally just designed a portfolio in Figma full of components and fully prototyped. I go to Framer and I'm like oh great gotta do that all again. I guess it's a common story!

[@Youtube-user-create]

How you publish it, whether it doesn't need host and domain

[@Spaceolade]

Insane efficiency hack for quick deployment

[@TimGabe]

it really is insane... I'm so blown away by Framer. 😃

[@cubensic]

Yes, this content is awesome!

[@TimGabe]

appreciate it, Geraltas!! 😃

[@goku_cooks]

whats the diff b/w framer and webflow? why did you prefer framer but not webflow?

[@TimGabe]

webflow has a much bigger learning curve and isn't as intuitive to work with for designers (and thus a lot slower)! although, it's very powerful!

[@sizzleishola_phynest3288]

Hello Tim! Thank you for the lesson. Was that a video is the background? If it is where can I get it please? And also can you design an accordion in Figma and get it exported to framer or perhaps just build it there in framer?

[@TimGabe]

it's a video from pexels.com that i made into a gif! 😃 as for the accordion, you can create the base structure in figma and then create the interactions in framer!

[@sizzleishola_phynest3288]

@@TimGabe Oh I see, That's understandable. Thank you. Keep making for us great stuff. Gracias mucho 🙏🏽

[@escapingthematrix321]

Hey man, could you make a tutorial on how to make a functional website after doing this?

[@TimGabe]

will be coming more and more stuff on this!!

[@gastonlee1935]

Thanks for the video! How did you create the background?

[@yuvrajux]

Yes 6:20 we need more of framer tutorial... 🏁🏁🏁🏁

[@TimGabe]

it’s on its way. Yuvraj! planned for december 👌☺️

[@maheshvommi1092]

ok using ai i can make a front look of a web site fine ,but how can i make the website live , how can i make the buttons functional , without working how can i sell this to some , which is only for showing but not working plese tell me how to convert this front look into functional

[@madhoundes]

Amazing tool and content please make new video series related to this platform

[@TimGabe]

will do for sure, Ahmad! 🤩

[@Rb0301]

Great content as always 💯. Please make more Framer tutorials .

[@TimGabe]

thanks a lot for supporting, Rb! will definitely be doing more Framer stuff 😃🙏

[@xhongaronga]

Thanks for sharing this, brother! Love that you're so enthusiastic about this tool. You mentioned it feels like cheating. To me it looks like magic. Is it magic? I'd love to see more tutorials on this 🤯

[@TimGabe]

my brother ❤️ it really is magic and cheating all in one. will definitely share more stuff on the channel 🤩 thanks for the support! 🙏

[@anthonyobata5756]

Also do a UI/UX designs for mobile app using framer

[@TimGabe]

appreciate the suggestions, Anthony ☺️🙏

[@Progettiamodivertendoci]

but on figma projects with automatic layout? I can't, he doesn't leave me free thought. you can make a video that build a site about figma and then port it to worpress or webflow or framer. I thank you

[@TimGabe]

I will definitely make a full Figma to Framer website tutorial in the future 🤩

[@Progettiamodivertendoci]

@@TimGabe thx you man 🙏

[@loganlandonline]

The pricing on Framer is crazy.

[@gabrielcornejo2892]

Where did you get that animation in the background of your demo?

[@TimGabe]

that’s a Pexels video I made into a GIF ☺️👌

[@Jonathan-we3kf]

Love framer, omg.

[@TimGabe]

me too!! it’s an amazing tool 🙌

[@henkegiaretta]

This is awesome, thanks for sharing! Is this a doable alternative for a portfolio site instead of Wordpress for example?

[@TimGabe]

for sure, it's the perfect tool for portfolios!! 😃 I'm going to share more tutorials on Framer these coming weeks, so stay tuned for that. 🥳

[@iinewsiicom]

Sir, can you do a comparison between Webflow and Framer.

[@alaliphotographics]

The Frammer tool is it a Plugin for Figma or its an Application that need to download?

[@TimGabe]

it’s a web app, so no download needed ☺️ their Figma plugin is just for exporting your designs into Framer! 👌

[@meyravoz3800]

wow! Thank you!

[@TimGabe]

happy to be of help! 😃

[@WhatsMyLane]

Hey @TimGabe I love that animated background how did you create that without adding tons of loading time to the site?

[@TimGabe]

it’s actually just a high-quality GIF! 😃 pretty cool, right?

[@hautewire]

I just asked the same question so I guess never mind. Looks great.

[@hautewire]

Well, what did you use to make your animated gif?

[@cybyr_]

Is it possible to import 3 screen sizes from Figma to Framer? Over the last couple days I have made a Desktop, Tablet & Mobile version of my site in Figma. I cant find a guide that shows how to import multiple screen sizes into framer, its insane.

[@TimGabe]

unfortunately not... you'll have to make your desktop version responsive once in framer!

[@cybyr_]

@@TimGabe thank you 🙏🏼

[@Mousymusic]

I want to know how you got that loop video, looks cool.

[@TimGabe]

it's just a video from pexels made into a gif! cool right?

[@Mousymusic]

@@TimGabe yeah, I've been thinking about making a custom one but no clue how to.

[@GamerTagged]

How long do we think it will be before Figma just allows you to publish directly from it rather than use 3rd party solutions? ;)

[@TimGabe]

not sure if that aligns with their goals as a software, but we'll see!!

[@charljustinedarapisa6758]

cAN this be used as well in transfering frames designed for phone app? [and not a website] Thank you in advance

[@ritwikmudliar4874]

I was learning webflow , so now should I stop ?

[@gabrielcornejo2892]

I have mastered Anima, but I wonder if this will be better. I stopped webflow after I figured out Anima. I just canceled my membership last week.

[@TimGabe]

Webflow is still the most versatile and feature packed no-code tool on the market and Framer even states on their website that it’s better for more complex use cases ☺️ the great thing about Framer is that you’re basically good to go if you’ve got some Figma knowledge. it’s got speed and tool familiarity on its side right now, but I really do think that their feature set will slowly creep up to the rest of the market 🙌 so to answer your question: it depends on what you will be building in the near-term. for simpler things like landing pages and blogs, I’d go with Framer ☺️

[@ritwikmudliar4874]

Thankyou for the insight

[@kimbapslayer1995]

@@TimGabebut landing pages are not complicated?

[@kavineesh12]

Thought we need to know coding if we want to use webflow and I don't know coding and for the same reason I'm confused what to learn Framer or Webflow

[@juliusdomingo2792]

Can I ask? how about the details of prototype from figma and converting to framer, all these prototype to use as interactive is still the same on the framer once the figma converted to framer? thank youuu I need your answer for our school purposes!

[@GraveRave]

Yes please do more👍🏾

[@TimGabe]

will do, my friend! 🥳

[@HienNguyen-gi8cp]

I lost effect when i copy figma design to framer. Can you help me with this problem :(((. Thank you so much

[@anthonyobata5756]

Happy new year everyone

[@TimGabe]

happy new year Anthony!! 🎉

[@tsdonalds1668]

Lord please be his good man and cover it's tutorial's too I owe my job to you,your the reason that I've a well paid job in web design and development

[@TimGabe]

wow, that's so powerful!! tell me more!!

[@BugsVsHumans]

This is so helpful for portfolio or 1 page websites, would there be any future plans to also have CMS or ecommerce? If that's the case, I'm switching to Framer. Thanks nice video.

[@TimGabe]

it really is a game changer... and they already have a CMS which people have released eCommerce templates for! 🤩

[@hautewire]

How did you make that purple blue animated bg? AE?

[@TimGabe]

it’s a gif made from a video!

[@jornvandijk3721]

Awesome video 👌

[@TimGabe]

without the awesome tool there’d be no video, so thank you so much for building what you’re building Jorn. 🙌☺️

[@abdulhameedfahm5397]

I need help. when I copy my Figma design to framer and publish it overscale and doesn't fit in the browser pls help.

[@TimGabe]

the desktop frame in Framer is 1200px by default, so if your frame in Figma is bigger than that it’ll be cut off. you can change the width to fit content if you want to make it work 😃

[@abdulhameedfahm5397]

@@TimGabe ok thanks

[@abeblue]

Did your removed your full course figma -> framer???

[@TimGabe]

the course is being built as we speak! 😃

[@abeblue]

@@TimGabe do you need help ? I’m an airplane engineer.

[@svetlanashebika8127]

It's amazing!

[@TimGabe]

happy you liked it, Svetlana! 😃

[@siddhisalvi1628]

When I pasted my components it turned into image what do I do?

[@TimGabe]

what turned into an image? make sure your image is a gif, like mine, if you want it to be moving!

[@caiopontes8650]

how do you jump over to the framer app at 1:31?

[@TimGabe]

apple fullscreen + swipe!

[@elysiumcore]

How did you have a video from figma ? When you copied file it came in as a video 👀

[@TimGabe]

it’s actually a GIF! looks cool, right? 😃

[@elysiumcore]

@@TimGabe I had no idea figma supported Gif ..brb going to uninstall lol 🤣

[@The12LVE]

How to you make it clickable like a fully functional website?

[@mariapaulamacedo520]

its great until framer makes you pay to upload pictures after a certain size

[@emeriktremblay3881]

wow this is insane!

[@knife3]

It does seem like cheating. I’m sold!

[@gregthomas5887]

How did you toggle the dark mode here ser?

[@TimGabe]

For Figma or for Framer? 😃

[@gregthomas5887]

@@TimGabe For Framer ser. I was able to do it but had to install a browser dark reader. Just wondering if Framer has something native. haha

[@javlonbeknematov4564]

how i get the code of the my project

[@TimGabe]

there's no super flawless code export, but they do have something called "handshake" -- google it! 😃

[@_______________93]

How do you jump over to the runer app

[@gottafindacoolname]

when i make breaking point it's just white? why doesn't my content copy over?

[@GraveRave]

It imported the animation too!?

[@TimGabe]

that was a GIF, and as you know these don’t auto-play in Figma unless you turn on prototyping mode ☺️ but pretty cool that Framer has live GIFs, right?

[@meghachokkar7378]

How to jump to framer

[@maheshvommi1092]

figma to website in minutes okm i agree but after in a minutes is this website funtional , why didnt u tell those things, without back end code how a website become a fully funtionalwebsite

[@views-re2om]

figma + framer + chatgpt = god mode 😂

[@TimGabe]

haha, yes!!

[@sachinRao15]

Feed me more bru ☮

[@TimGabe]

will definitely feed you more, my friend 🥳

[@gabrielcornejo2892]

How does this compare to Anima?

[@TimGabe]

I haven’t used Anima in a long time, so I really can’t speak to its current state. all I know is that Framer is really good and that they’re building fast, so expect it to become more and more powerful 🙌

[@ratatata6611]

Framerapp and figma needs to merge

[@TimGabe]

two incredible tools...

[@abbigalebingham2350]

Thats just a prototype, is it not?

[@TimGabe]

this is a real working website, which is crazy!! you should check out my Framer playlist if you want to learn how to create it: kzbin.info/aero/PLOIq79MWqv85s7lYuRPCqHvqBFIGOdPsV

[@karimvenom6459]

Where's the code??

[@TimGabe]

with Framer you really don’t have to care about code, but if you really want to you can export code from the sidebar and through a feature called Handshake ☺️

[@angstrom1058]

Insane?

[@x0z59]

You almost always lie. where is the website?

[@TimGabe]

what did i lie about? 😢

[@x0z59]

It's a joke bro. you see i said "almost".@@TimGabe