Framer Crash Course

In this tutorial, we'll cover the basics of using Framer, a powerful tool for designing and building websites without coding. We'll start by setting up site styles, then move on to building a landing page from scratch. You'll learn how to create dynamic components and make your website responsive for all devices. We'll also dive into the exciting world of animations, showing you how to bring your designs to life. By the end of this course, you'll have the skills to build your own website using Framer. Join us and start your Framer journey today!... Remember to Subscribe goo.gl/6vCw64
🖥️ ////////// Try Framer:
framer.link/jesse
🖥️ ////////// Get template:
www.framer.com/templates/mint...
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:
30dayui.com
🏆 //////////// Join my free member's community to get access to perks:
designchamps.io/
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma
psxid.figma.com/ixbomhqzoiy0
🖥️ ////////// I Build websites in Framer
framer.link/jesse
🖥️ ////////// I Prototype Magic in ProtoPie
www.protopie.io/plans?ref=jesse
📅 ////////// I run my life with Notion
affiliate.notion.so/tokendsfahjf
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/1...

Пікірлер: 66

  • @MiguelQueiros45
    @MiguelQueiros452 ай бұрын

    Framer is becoming one of the main tools in design ecosystem.

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    Me too

  • @arunk2710
    @arunk27102 ай бұрын

    Framer went from 50k subs to 138k in just 2 weeks.

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    Wild stuff

  • @chriswertz5825

    @chriswertz5825

    2 ай бұрын

    The Jesse Effect 😉

  • @neobaholo
    @neobaholo2 ай бұрын

    I'm so blown away by how much more there is to learn about Framer. Incredible tutorial Jesse!

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    More to come!

  • @anitihova4360
    @anitihova436023 күн бұрын

    Thank you for the tutorial, I am blown away how easy and straightforward Framer is!

  • @neilpearce
    @neilpearceАй бұрын

    Much appreciated, I've been needing to learn more about Framer, so thank you!

  • @muhammadbacar6051
    @muhammadbacar60512 ай бұрын

    You could have easily use the copy paste figma to framer in your landing page by first putting all your designs in an auto layout, having them all in svg than bring it in Framer. You would have little to adjustement to your design. They only adjustement you will need is for the responsive design afterwards.

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    I wanted people to know how to do it manually.

  • @muhammadbacar6051

    @muhammadbacar6051

    2 ай бұрын

    @@JesseShowalter I see ! It was still a useful video for me even tho I am already a bit proficcient in Framer. We may need more videos about framer even a course would be cool 😁

  • @andrewbccoast
    @andrewbccoast2 ай бұрын

    Amazing teacher. Thank you!

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    Thanks! If like the way I teach check out 30dayui.com

  • @petermckinnon3104
    @petermckinnon31042 ай бұрын

    FANTASTIC!!!!!!! About time a framer tutorial building a site from scratch, thank you.

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    Glad it was helpful!

  • @ziruizhao2276
    @ziruizhao2276Ай бұрын

    Wow,this crash course is very helpful ! Looking forward to more Framer tutorials.

  • @samueladigun2686
    @samueladigun2686Ай бұрын

    Thanks Jesse, awesome tutorial. I was surprised as I couldn't paste effects on other frames even after copying and trying multiple times.

  • @shroots88
    @shroots8815 күн бұрын

    Superb, thanks for that indepth tutorial and for the explanations too!

  • @SenseiVraj
    @SenseiVraj7 күн бұрын

    Nicely done work bro I loved it please make full video on it to understand full Framer.

  • @JesseShowalter

    @JesseShowalter

    6 күн бұрын

    I’m doing a full 6 part live series soon, stay tuned

  • @bharatmodiTechFist
    @bharatmodiTechFist2 ай бұрын

    Great amazingly Explained!

  • @mr.chinaski2613
    @mr.chinaski26132 ай бұрын

    Finally I see Framer contents everywhere over Webflow, hope this will help the improvement of the whole package

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    It’s gonna keep getting better

  • @millidesignux
    @millidesignux6 күн бұрын

    Thank you for such a great tutorial and for showing us how to create our own sections from scratch! Massively helpful for understanding how to make your designs responsive and I managed to follow along and complete everything myself 😊Only part I couldn't replicate was the 3D scroll at the end, when I entered 15 in the X area, I don't see a 3D effect on my image, it just scales up and down? But this was so so helpful though as a complete beginner and thank you very much again! 🙏🏼

  • @millidesignux

    @millidesignux

    6 күн бұрын

    Also when I try to expand my nav bar on mobile/desktop versions, it appears as a scrollable container, not just part of the page, how can I fix this? Thanks! 🙏🏼

  • @gabrielceslov3618
    @gabrielceslov36183 күн бұрын

    So many steps just to build something so simple. I understand Flash was propriety software, but I could have done all this in Flash in less than half hour. Including the animation and music.

  • @JesseShowalter

    @JesseShowalter

    9 сағат бұрын

    Learning curves are hard, no platform will ever compete with the one you know

  • @framerwme
    @framerwme2 ай бұрын

    Great crash course Jesse!

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    Thanks

  • @richasrivastava7887
    @richasrivastava7887Ай бұрын

    Awesome content Jesse 💙

  • @isnannugraha1368
    @isnannugraha1368Ай бұрын

    Very informative and helpful tutorial bro. Thank you.

  • @liviere1
    @liviere12 ай бұрын

    Wow, what a tut!!! that you so much!!!! 🙌🏼

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    You're so welcome!

  • @deletingmychannel
    @deletingmychannelАй бұрын

    Thanks for the tutorial! I learned a lot. Anyone else unable to get the scroll transform to work? In the video, his kind of skews backwards, but when I try it mine just starts a small size then gets bigger on scroll

  • @emilcupic
    @emilcupicАй бұрын

    Great introduction! Thank you :)

  • @JesseShowalter

    @JesseShowalter

    Ай бұрын

    Glad it was helpful!

  • @insomn_ui
    @insomn_uiАй бұрын

    Super useful tutorial! 🙌🏼 I am currently using Webflow but Framer is a very good surprise (possibility to drop content outside the canvas?? and edit variants directly?!) 😱 The customization and micro interactions possibilities are insane. And maybe even easier to use for clients than Webflow? Definitely going to learn more!

  • @webnavi5528
    @webnavi552819 күн бұрын

    Hi! Great tutorial! Why doesn't the burger menu open in tablet and phone breakpoint? 😮‍💨

  • @joiltonmelo
    @joiltonmeloАй бұрын

    Great!

  • @MalTrakSecurity
    @MalTrakSecurity15 күн бұрын

    Does it have the ability to export it into nextjs tailwind code? Or it stays within their ecosystem?

  • @roieshalom7240
    @roieshalom724019 күн бұрын

    An amazing crash course, why doesn't the 3D effect work for me on the image?

  • @chriswertz5825
    @chriswertz58252 ай бұрын

    Great tutorial. Will you be doing a Framer course?

  • @willowtainmentlolz179
    @willowtainmentlolz179Ай бұрын

    yoo. how did you get the windows to look like that in framer?

  • @LWHITEBMG
    @LWHITEBMG8 күн бұрын

    Hey Jesse! Please reply lol I would appreciate the clarity. I love your content, as a new UX designer I've improved tremendously since watching your videos. I have a question regarding Framer, can I design, build a website and transfer a website all within framer? Or do I have to use figma first then transfer it over to Webflow then Framer?

  • @JesseShowalter

    @JesseShowalter

    6 күн бұрын

    Framer is a self contained platform. You can love from Figma to Framer or just design and develop straight in Framer

  • @mdjahin99
    @mdjahin992 ай бұрын

    When do I use Framer & when do I use Webflow ?

  • @petermckinnon3104
    @petermckinnon3104Ай бұрын

    Ok, so followed the tutorial however, when I get to tablet/mobile breakpoints my burger menu stays to the left of the navigation. I've tried to move the top stack that houses the burger menu but it doesn't work. Any idea why please?

  • @deletingmychannel

    @deletingmychannel

    Ай бұрын

    That happened to me as well, you should be able to just flip the order of them in the layers panel

  • @mae2309
    @mae23092 ай бұрын

    YESSSSSSSSSSSSSSSSSS.. am READYYYYYYYYYYYYYYYYYY. LETS GO!!

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    Yaaaaas!!!

  • @petermckinnon386
    @petermckinnon386Ай бұрын

    I don't get the burger menu on tablet and below, its there just don't see the lines?

  • @JesseShowalter

    @JesseShowalter

    Ай бұрын

    Nav’s can be a little tricky, try a fresh one from the framer insert menu

  • @asdf4a
    @asdf4a2 ай бұрын

    Hey jesse, please release a figma course for web development as i have taken 30 day UI course which was mainly focuses on mobile development (App).

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    More courses coming this year

  • @asdf4a

    @asdf4a

    2 ай бұрын

    @@JesseShowalter would love to taking more courses from you as really like the energy of you and the the way you teach ….i have taken few courses from others like flux academy but they felt boring …didn’t want to continue with them after taking 2-3 classes

  • @sakibtamboli4685
    @sakibtamboli4685Ай бұрын

    How am i supposed to follow this tutorial without the files?

  • @ShukuraOnline
    @ShukuraOnlineАй бұрын

    next time make the assets available so I can do tutorial and follow along,

  • @shibanakano
    @shibanakano2 ай бұрын

    can anyone help me find this template

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    Link is in the description

  • @longtalliceman
    @longtalliceman2 ай бұрын

    I just connot download the template for Figma for free...

  • @JesseShowalter

    @JesseShowalter

    2 ай бұрын

    Check the link

  • @videogameavatar

    @videogameavatar

    Ай бұрын

    @@JesseShowalter ​ The link takes you to the Framer template which is the complete website. How do you get the assets though to rebuild yourself? Looks like we have to purchase the Figma template to get those.

  • @bankster2191
    @bankster2191Ай бұрын

    Do I still need to learn how to use Figma to be efficient?

  • @JesseShowalter

    @JesseShowalter

    Ай бұрын

    Figma is very useful to design in before you get to Framer

  • @yanhernandez3915
    @yanhernandez39152 ай бұрын

    Jesse, I like your content, but I'm curious why your business appears only on KZread to me. Is this a strategic choice? I follow great UX/UI designers who have a broader social media presence, including LinkedIn and Instagram. Am I the only one who notices this, or do you intentionally focus more on KZread? Just checking in, as I really admire your work and believe my community would benefit greatly from what you have to say.