Learn Framer in 20 Minutes (Crash Course)

Поділитися
Вставка
  • Опубліковано 24 гру 2024

КОМЕНТАРІ • 352

  • @wendysanchez13
    @wendysanchez13 4 місяці тому +48

    Lost my job of 6 yrs last May and decided to return to being a designer and wanted to make my own site to showcase my portfolio. This tutorial helped me a lot, thank you!

    • @jnslzr
      @jnslzr 3 місяці тому +2

      did you end up using framer for your website?

  • @designersanket
    @designersanket Рік тому +70

    Loved this Rann, Please create more videos on Framer! Thanks!

  • @Framer
    @Framer Рік тому +9

    Great video! 😍

  • @MultiSciGeek
    @MultiSciGeek 7 місяців тому +4

    My god that's amazing! Just 20 minutes, but looks wayyyy better and cleaner than the 100 hour portfolio you did. I think I finally need to try Framer!

  • @TerenceKearns
    @TerenceKearns Рік тому +19

    That was cool. Probably a good idea to put the PiP of yourself in the lower left so it's not obscuring half of the clicking in the tutorial. Hope this helps.

  • @MindScape322
    @MindScape322 Рік тому +20

    Hands down the best framer tutorial ever, thank you for the awesome video and keep up the great work. 😊

  • @abiodunomonijo
    @abiodunomonijo Рік тому +12

    Yo Flux!
    I just introduced to Framer a few days ago and your video is making me fall in love with it.
    I always like your lessons.
    Thank you.

  • @VisualsBySaleh
    @VisualsBySaleh Рік тому +5

    I'm searching so many tutorials on UA-cam clear and to the point tutorial about framer but know my favorite channel has done this job for me haha 🎉

  • @samueljwalter
    @samueljwalter Рік тому +68

    I am definitely interested in learning more about Framer. I do ultimately want to learn Webflow, but this feels like an easier entry point at the moment. Also gets me into Figma a little more which has been helpful.

    • @clovermk1635
      @clovermk1635 Рік тому +8

      same feeling man!

    • @busimo
      @busimo Рік тому +2

      why would you want to "ultimately" learn Webflow? lol. It's just a more difficult site builder.

    • @jasonhebert1656
      @jasonhebert1656 Рік тому +2

      Now that I’ve messed around more with framer I don’t really see how it’s any easier. It’s more or less the same once you start using proper layouts with containers. Don’t just use the blank canvas and drop things in Willy nilly, it won’t look right as the screen expands. The infinite canvas is dope as fuck though. Having your layouts right beside each other is sweet. But fundamentally if you get this it’ll take you no longer to get webflow

    • @jasonhebert1656
      @jasonhebert1656 Рік тому

      Webflows cms, logic, and code export are worth it alone. You can build much more robust sites that will ultimately earn you more money as a designer.

    • @sfyrizo
      @sfyrizo Рік тому

      same feeling man!

  • @travelsizearchitect
    @travelsizearchitect 11 місяців тому +8

    Definitely would appreciate more framer tutorials

  • @melvinmartignac5846
    @melvinmartignac5846 Рік тому +43

    I was about to learn Webflow, but i discover Framer thanks to you. The interface is much more ergonomic, and so it really hype me. Please do more tutorials like this, i follow you !

    • @jasonhebert1656
      @jasonhebert1656 Рік тому +3

      trust me, coming from Webflow this is super limited and frustrating. It's missing so many little things that Webflow is amazing at. It's worth your time to learn

    • @feelcollins4358
      @feelcollins4358 Рік тому

      @@jasonhebert1656 I have a feeling Framer will have a higher potential in the future though so it's worth learning it now

    • @PeterSather
      @PeterSather Рік тому

      ​@@jasonhebert1656 Like what? I've spent a ton of time trying to figure out some things in webflow and was so frustrated. What things is framer missing exactly?

  • @mariejae92
    @mariejae92 Рік тому +1

    since i wasnt sure how to use figma, this also just helped me understand both!! sooooo much easier and better than webflow. everything against my eyes is also much better. thank you !!

  • @cabansayjondaniel2186
    @cabansayjondaniel2186 Рік тому

    THIS IS A HUGE HELP FOR ME! AS A Newbie in creating a webpage using javascript, this is the easiest one!

  • @ag34393
    @ag34393 2 місяці тому +6

    Finally someone that did not start a video with "today we are going to go over blah blah blah" for 20 minutes

  • @vkayhere
    @vkayhere Рік тому +1

    The best Framer intro ever. Thank you for this and please do more!

  • @peacefull_moment
    @peacefull_moment Рік тому +3

    WOW!! You are an awesome at teaching! My husband just introduced me to using Figma & Framer. This is my first tutorial. I have no background in web building but have only played around with building on the very limited Google Sites (haha). But you made me feel like I can do this! SUPER EXCITED!

  • @TobiasKarnetzke
    @TobiasKarnetzke Рік тому +5

    I tried Framer a few weeks ago. It definitely has potential. I hope they expand the CMS features and make it more powerful.

  • @Kha7i
    @Kha7i Місяць тому

    Bro this video was sooo helpful honestly, im a complete beginner and im not a web designer. I just needed a website for my business and i couldnt get it right but this video will save me hours of time thank you 🙏🏼

  • @michaelbruzzese
    @michaelbruzzese Рік тому

    best Framer tutorial so far online! It would be really cool if you could make a series about building websites on Framer

  • @BugsVsHumans
    @BugsVsHumans Рік тому +3

    Is Webflow scared that they have a strong competitor? I hope Framer maintains the hype. Please make more videos on Framer.

  • @theado3183
    @theado3183 10 місяців тому

    Your video is easier to understand than Framer's tutorial. Thanks so much!

  • @Tola_io
    @Tola_io Рік тому +5

    Wow! Are my eyes deceiving me Ran made a framer tutorial who would have thought

  • @DBryan67
    @DBryan67 2 місяці тому

    Thanks so much for the video! I just started learning about framer and you are by far the best at explaining this platform. I have a background in Wordpress so all of this is Greek lol

  • @Анастасия-я2б1к
    @Анастасия-я2б1к Місяць тому

    That's awesome! Very fast and clear, please create more videos on Framer!

  • @toosharp4417
    @toosharp4417 Рік тому +5

    I'm super interested in trying this platform. The UI looks clean and intuitive, with delivering functionality. Please have couple more tutorials so that people like me who wants to try Framer, can learn more from you.

  • @kkanakan10
    @kkanakan10 Рік тому +1

    So happy you use Framer! Discovered it last year after learning Webflow. Love the Figma to Framer feature the most. Can’t wait to learn more from you 🙏🏾

  • @alexyoung-davies100
    @alexyoung-davies100 28 днів тому

    This was fabulous. Quick and clear, thank you

  • @andriyand__
    @andriyand__ Рік тому

    this introduction video about framer just makes me so excited and want to learn more. Thank you!

  • @Lmachine1
    @Lmachine1 Рік тому

    I'm loving this video, my only request is that you put yourself on the bottom left of the screen so that the menu on the right isn't covered up!

  • @SatyajeetMohanty11
    @SatyajeetMohanty11 Рік тому +3

    Hey, thanks for making this video! Really helps. One quick feedback - it would be great if you could have your video on the left hand side while working so that the right panel view is not obstructed

    • @shamulipore3830
      @shamulipore3830 Рік тому

      True, so many details were hidden because of it and also it was too distracting.. there's so much blank space on the left he could have used..

  • @katoetonic
    @katoetonic Рік тому

    Wow! Great video. Framer is a game changer for building responsive website fast.

  • @TocheImaginería
    @TocheImaginería Рік тому +1

    Great tutorial Rann! Thank you! Cheers from 🇲🇽

  • @carolsolangyjimenez9020
    @carolsolangyjimenez9020 Рік тому

    WOW it was amazing! Thank you! I learned soo much!!

  • @leonserra4960
    @leonserra4960 Рік тому +3

    Thank you, it was more useful than framer's official tutorials for understanding the layouts 🤣😅

  • @RomiD7
    @RomiD7 3 місяці тому

    Thank you! Yes, I'm interested in learning more!

  • @monigyee
    @monigyee Місяць тому

    this is the best video ever

  • @talhasaeed
    @talhasaeed Рік тому

    framer is so cool and loved the UX, easy peasy!!!

  • @leandrosilva6414
    @leandrosilva6414 Рік тому

    Thanks! i was looking for something like this! Cheers!

  • @arwen_lin
    @arwen_lin 5 місяців тому

    This was so helpful! You're the best thank you so much for this!!

  • @romaincarreau388
    @romaincarreau388 Рік тому

    great video Rann !! i want more content on framer for sure ! keep it up man !

  • @jesper.wiklund
    @jesper.wiklund Рік тому

    Awesome Ran, thank you so much for the intro !!

  • @designerraptour
    @designerraptour 9 місяців тому

    Thanks!

  • @danielagarcia191
    @danielagarcia191 8 місяців тому

    love it! please make more videos with the following pages of that one

  • @cherrygail
    @cherrygail Рік тому

    Thank you so much, Ran. Please upload more tutorials about Framer😊

  • @iamshirleyt
    @iamshirleyt Рік тому +3

    Would love to see more. I stumbled across framer and think it would work great for certain client projects

  • @prajeeshp9203
    @prajeeshp9203 Рік тому

    Great video Ran thanks! this is very helpful to learning Framer very easy

  • @SriPranavSrivatsavai
    @SriPranavSrivatsavai Рік тому +1

    Would be interested in more videos on Framer! Great content!

  • @adevikthur
    @adevikthur Рік тому

    Let's Gooo! 💪🏽🔥

  • @13CreativeStudio
    @13CreativeStudio Рік тому

    love this. Thanks for this easy tutorial.

  • @danieldey
    @danieldey Рік тому +2

    Really helpful and really nice tutorial at perfect pace! Thank you.

  • @sebastianhuidobro3319
    @sebastianhuidobro3319 8 місяців тому

    Amazing Video! Iam currently making my websites with elementor but was thinking of exploring other editing and design tools. Thanks!

  • @jayjay666
    @jayjay666 2 місяці тому

    Thanks for the crash course.

  • @uddlivewell
    @uddlivewell 8 місяців тому

    Thank you so much! What a great introduction to Framer. (I have no idea how to use it!) Your vdo is SUCH A GREAT HELP! Thanks A LOT!

  • @piotrgorski1945
    @piotrgorski1945 Рік тому +4

    Great video Ran :D Thanks! I'm planning to deep into Framer to be able to create more realistic prototypes. Definitely, please do more content with this software ;)

  • @andrianfirmansyah6189
    @andrianfirmansyah6189 3 місяці тому

    Mindblowing and Thankyou!

  • @suman121069
    @suman121069 Рік тому +2

    wow it was amazing, Please create some more videos about Framer. Cheers 🎉

  • @SimphiweMangole
    @SimphiweMangole Рік тому

    I would gladly pay for a framer course by you. We really need one.

  • @scottcitron
    @scottcitron Рік тому

    Framer looks very promising. I look forward to more videos. Thanks, Ran.

  • @SaadAlShiekhAli-sg4dl
    @SaadAlShiekhAli-sg4dl 3 місяці тому

    it is nice how you are using a webflow way to build a website in framer

  • @soorkie
    @soorkie 8 місяців тому

    really liked this video. just one quick suggestion, it would be helpful if you could move the video circle on the bottom right towards bottom left, especially when there is content on the right, so that it doesn't cover it up. thanks a lot.

  • @_kr001_
    @_kr001_ Рік тому

    Yes, more Framer videos please. Thank you!👊😉

  • @alexalex-xk8mr
    @alexalex-xk8mr 6 місяців тому

    Really helpful tutorial! One small improvement to make it even better would have been to put the video of you in the bottom left side of the screen as it blocks some of the panel hiding info.

  • @AS-ld5mz
    @AS-ld5mz Рік тому +1

    much easier and cheaper than webflow. Can't believe I spent all this time learning webflow

  • @caleb3771
    @caleb3771 11 місяців тому

    That's a badass Figma design

  • @oldgenx
    @oldgenx Рік тому

    This was super helpful! Thank you!

  • @design_with_akshay
    @design_with_akshay Рік тому

    Thanks Ran I loved this, please go on and create more videos on Framer.😊

  • @julianarosato2705
    @julianarosato2705 11 місяців тому

    Thanks! love your tutorials!

  • @jason-m
    @jason-m Рік тому +3

    Will be good to know the basics: How it's hosted? How many websites per account? Code output and page speed test results? How to connect your domain? How does it handle transactional emails? How does it handle e-commerce? Does it allow query loops and dynamic data?

    • @tomlebree
      @tomlebree Рік тому +1

      These feel like things you could understand by browsing the website dude. Might've been nice to thank the man for making his video before adding requests.

    • @jason-m
      @jason-m Рік тому +2

      @@tomlebree First he asked if any questions about this put it in the comments. Second they’re paid for these videos why do i need to say thank you??
      I was merely giving ideas to him for the next video on the subject. You got this the wrong way round.

  • @kaytomascom
    @kaytomascom Рік тому

    great video! thanks. Framer looks interesting

  • @carlosreyes6612
    @carlosreyes6612 Рік тому +3

    Thanks for this, one thing I can't change is the font type from Framer Supply it is Inter by default and It doesn't have the option to choose another one

    • @mijnnaampje
      @mijnnaampje Рік тому +1

      Same here, quite weird. When choosing a normal text block, the font selection works as it should be.

    • @PaniYaja
      @PaniYaja Рік тому +1

      same issue here, on preview I see inter instead the one I have chosen

    • @magwell777
      @magwell777 Рік тому +1

      I have a similar issue - when I copy and paste text into the motion component from supply I cannot format the text to be 3 different lines. There's no grow setting like with a regular text component. I'm not sure how he got his hero text to be 3 lines.

    • @christiangonzalez7416
      @christiangonzalez7416 Рік тому +1

      I was having this issue, and I got the text to stack like his in the Hero Text by clicking on the Motion Text, going to the Font settings under the Motion Text setting in the right pane, then selecting ‘Pre’ under the Space sub-setting in the Font settings. Hope this helps what y’all were having trouble with too!

    • @christiangonzalez7416
      @christiangonzalez7416 Рік тому

      Sorry, let me correct myself, it should be Normal and not Pre

  • @1111Charithya
    @1111Charithya 2 місяці тому

    Thank you so much sir!

  • @rodolfofigueira
    @rodolfofigueira Рік тому

    Great video, thanks! Please more on Framer!

  • @IncredibleCommentary
    @IncredibleCommentary Рік тому +1

    Please highlight your cursor to make it easier to follow, and explain when you are jumping back and forth, for example when you jumped to "Spply" I had to stop and rewind several times before realizing it was not actually in Framer. Thanks for the tutorials

  • @olhaovcharenko1663
    @olhaovcharenko1663 9 місяців тому

    Hi! Thanks for the amazing video! Please advise is there a video about making the design responsive in Framer?

  • @_aaaadam
    @_aaaadam Рік тому

    best tutorial for framer tks!!

  • @gmanfromdibloc2479
    @gmanfromdibloc2479 Годину тому

    Im considering learning Framer because it's considerably cheaper than bubble io which is what I currently use.

  • @underlevl7741
    @underlevl7741 Рік тому

    Thank You!

  • @satochy
    @satochy Рік тому

    Keep going!!! Feed me more 😤🤲

  • @rizkizfajar
    @rizkizfajar Рік тому

    it's much easier than i thought compare to webflow

  • @ikechukwukanu4096
    @ikechukwukanu4096 Рік тому +2

    How do I find the spply please, Great work Ran❤❤

  • @thisispierre
    @thisispierre Рік тому

    Great video, now I get it!

  • @johncitizen8828
    @johncitizen8828 Рік тому

    Came for the Framer, stayed for the Browney. Excellent crash course Ran - thanks! 🙏

  • @estershirabarak5747
    @estershirabarak5747 Рік тому

    Thank you! great movie!

  • @abeblue
    @abeblue Рік тому

    you guys are fkin always put ur cam on the right interface. thats crazy.

  • @jasonhebert1656
    @jasonhebert1656 Рік тому

    also the way you say beige made me smile :)

  • @XcelerateCoder
    @XcelerateCoder 4 місяці тому

    Thanks Please make a video on full website

  • @muneebanjamch
    @muneebanjamch Рік тому +2

    From where did you open SPPLY in framer?
    I didn't found it anywhere

  • @DesigningWithLaura
    @DesigningWithLaura Рік тому +3

    Where can I find the link to Supply by Framer?

  • @muhammadtalha6870
    @muhammadtalha6870 8 місяців тому

    That was a very good Video We need full UI design to website deployment video please.... And you got one more subs

  • @sivaselvan8647
    @sivaselvan8647 Місяць тому

    Wonderful 🎉

  • @ducksquidbat8315
    @ducksquidbat8315 Рік тому +65

    now make it responsive - see you in week

    • @marcus3995
      @marcus3995 2 місяці тому +6

      wdym? Add breakpoints and tweak positioning a little bit.

  • @framer.university
    @framer.university Рік тому

    Great tutorial!

  • @codelucky
    @codelucky Рік тому +4

    Hi there, which option is best for creating only the static Home-page and inner pages without the webapp? As I've built the webapp with React and deployed it to Vercel. And I'm thinking that instead of coding the Figma designs for home pages, I could just use Webflow or Framer to convert it without coding and easily host it.
    I have a designer who designs excellently on Figma. Do you think Framer would be the best choice over Webflow but I also want the micro animations and smooth transitions?

    • @michaelriga6431
      @michaelriga6431 Рік тому +1

      Webflow - Its a lot better at taking FIGMA designs. There are plugins available for it too. Framer, not fully there yet.

  • @stevendesigner
    @stevendesigner 6 місяців тому

    Thanks!

  • @Hoopstown39
    @Hoopstown39 Рік тому

    Awesome man

  • @feelcollins4358
    @feelcollins4358 Рік тому +1

    7:28 Why is my motion text not automatically line breaking to fit the box when I type longer text like here? Instead it just extends further to the right. It's so frustrating

    • @feelcollins4358
      @feelcollins4358 Рік тому +2

      Nevermind, I had to go to the Font settings while selecting the text and in the space section you can find no wrap, change it to normal. Fucking hell they didn't show this in the video and mine was automatically set to no wrap

    • @MaryGbadebo-k7g
      @MaryGbadebo-k7g 11 місяців тому

      @@feelcollins4358 how did you get to the spply screen cos i can't seem to find it?

    • @feelcollins4358
      @feelcollins4358 11 місяців тому

      @@MaryGbadebo-k7g err just type in framer spply in search engine, spply is supply basically

    • @yilangrim3209
      @yilangrim3209 9 місяців тому

      thank you I was looking for this

  • @SBEtherwave
    @SBEtherwave 5 місяців тому

    Thank You!!!!!

  • @suprajasridharan3193
    @suprajasridharan3193 5 місяців тому

    video is really good . but where is that supply in framer ?

  • @davidju98
    @davidju98 Рік тому +1

    Is there any usecase in which you prefer framer over webflow?

  • @JedHurricane
    @JedHurricane Рік тому

    Perfect timing, lol I just started with framer 😅