Complete Website in Framer: Beginner Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ก.พ. 2025

ความคิดเห็น • 194

  • @TimGabe
    @TimGabe  10 วันที่ผ่านมา

    if you’re interested in the future of creative work, follow along here: timgabe.com/newsletter ❤

  • @dandenney3046
    @dandenney3046 ปีที่แล้ว +101

    I’m a front-end dev and this blew my mind. It’s the first time I’ve seen a tool that can really do what I do and also do it significantly faster

    • @TimGabe
      @TimGabe  ปีที่แล้ว +11

      right?! I feel like I've got superpowers every time I use it 😅

    • @rigidhammer7376
      @rigidhammer7376 10 หลายเดือนก่อน

      well im an after effect animator 😁

    • @Robbedoes-MT09
      @Robbedoes-MT09 10 หลายเดือนก่อน

      In how many years you think you'll lose your job?

    • @dandenney3046
      @dandenney3046 10 หลายเดือนก่อน

      @@Robbedoes-MT09 To AI? Longer than I would continue working I imagine

  • @xhongaronga
    @xhongaronga ปีที่แล้ว +29

    I'm only halfway through but I had to pause and comment that this is gold!
    Was thinking how I could create or use my design system in Framer. This answered it all.
    And I love how you can use Framer's ready-made sections or components and just tweak them instead of making everthing from scratch.
    Great tutorial, my dear friend! 💛

    • @TimGabe
      @TimGabe  ปีที่แล้ว +2

      my beloved brother and friend 😍 thank you, I’m so happy you could get some value from it!! it’s a long one, but I wanted to cover a full website process 😃

  • @MrAbbo11
    @MrAbbo11 6 หลายเดือนก่อน +4

    I've checked a few framer crash course vids so far and yours is by the best in terms of detail and precision as well as providing one with good project setup practice. I can see you approach things in a very systematic way, which is fantastic for a beginner to incorporate from the outset. Thank you!

  • @anlcemcavl2726
    @anlcemcavl2726 ปีที่แล้ว +4

    I've been looking at framer tutorials for a few weeks and this is really different. It's exciting to discover you.

  • @rajnomadheart
    @rajnomadheart 3 หลายเดือนก่อน +1

    Thanks, bro, for this video! I've been learning Framer for the last two weeks and have been having a very hard time making my template responsive. Your video is a big help!

  • @rbkz714
    @rbkz714 ปีที่แล้ว +8

    I’ve just switched from Wix to Framer today and whilst I was initially VERY overwhelmed and frustrated I am blown away by the functionality of Framer! I’m very thankful to have discovered your channel and I have to say that tutorials such as this are invaluable for people just starting on Framer! The pace you have used and the explanation throughout is absolutely spot on! Thank you bro! 🤜🏼🤛🏼

    • @cekuhnen
      @cekuhnen ปีที่แล้ว +2

      I looked last semester into wix new advanced editor and then thought what a chaos …

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      that's amazing to hear, my friend 😃 comments like these make me so happy!

  • @BenDixon1
    @BenDixon1 9 หลายเดือนก่อน +3

    Really great tutorial mate. Definitely going to go through more of these. As a designer, Framer seems like the perfect tool for building websites visually. I love the examples you included here too - very informative.

  • @JennieLyra
    @JennieLyra 5 หลายเดือนก่อน +1

    so I'm brand new to web design - like I got the idea to do this 10 days ago. Found webflow, I like it, easy to use and they have the "university" but the ability to zoom out to see things in a clipboard style is just amazing.

  • @G00dhead
    @G00dhead ปีที่แล้ว +6

    Very informative! Loved every second, plus it is all free! Thank you Gabe!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      really glad you liked it, my friend 🤩

  • @puseletsomaraba1313
    @puseletsomaraba1313 ปีที่แล้ว +1

    Mr Tim Gabe, another ground breaking tutorial.😮your content is absolute exceptional.Clear ,practical and can be applied.Thank you ,may your channel forever grow🎉🎉🎉🎉🎉

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you so much yet again! 🙏

  • @11celinda
    @11celinda ปีที่แล้ว +1

    GREAT tutorial! So excited to watch more of your tutorials and build my site.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      awesome celinda!! will be coming more and more stuff!

  • @lizcorrea6810
    @lizcorrea6810 10 หลายเดือนก่อน +1

    this just saved my life lol! And im in awe with Framer! thanks!

  • @sabasaba2772
    @sabasaba2772 2 หลายเดือนก่อน

    Amazing! Well explained,well performed,well Teached. Make my day welldone keep uploading videos like this.

  • @MarcusParry
    @MarcusParry ปีที่แล้ว +1

    Absolute quality - the tutorial and the working file design! Also thanks for the 'shapefest and pexels' resource tip

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      happy to be of help, marcus!

  • @jswanson859
    @jswanson859 ปีที่แล้ว +1

    This is such a great tutorial! I'm going to make my own version of what you just did. Thanks for sharing.

  • @bnagelt
    @bnagelt ปีที่แล้ว

    Comprehensive and well-explained. I feel powerful now thanks to you!

  • @WebsiteGal
    @WebsiteGal ปีที่แล้ว +1

    I'm a big fan of the style guide to begin with! Hard to imagine how i did things before.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      heard that from others too, happy it was helpful!!

  • @isthatsharanya
    @isthatsharanya ปีที่แล้ว +1

    This one is a banger Tim! Love it

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thanks a lot, Sharanya!! 🤩

  • @Daniel-l6g8m
    @Daniel-l6g8m 2 หลายเดือนก่อน +3

    Side question, how did you create all those graphics, as they are an important part of web design, it would be great to learn how/where you created them

  • @silvercrownwisdom
    @silvercrownwisdom ปีที่แล้ว +1

    I LOVE YOUR TRAINING STYLE! Very deliberate, step by step in clear steps! Thank you so much for your talent

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      really happy you like it; makes me inspired to produce more content!!

  • @vikramjeetsingh7851
    @vikramjeetsingh7851 ปีที่แล้ว +1

    Thankyou for this amazing video and ur channel is much better than paid courses ❤❤

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      that means a lot, Vikram!! thank you 💜

  • @richardxs
    @richardxs ปีที่แล้ว +1

    Framer is what I was looking for ❤

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      Framer is in our hearts 💜

  • @JaysonClarit
    @JaysonClarit ปีที่แล้ว +1

    Thank you so much, you've made a very helpful video tutorial. 🙂

  • @monstreh
    @monstreh ปีที่แล้ว +1

    Fun and useful tutorial, thank you!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      happy you liked it 😃

  • @uxuicoco8666
    @uxuicoco8666 ปีที่แล้ว +1

    This content is really good, Im product designer and this really helps to understand the power of Framer, could you make some content on how to use Framer to deliver websites for clients? I believe there are designers who would like to go that path, it would be really valuable :))

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      will take note of this, have heard the same from more people! 🙏

    • @ffmde8268
      @ffmde8268 2 หลายเดือนก่อน

      @@TimGabe did you do it:P

  • @MarkSpomer
    @MarkSpomer ปีที่แล้ว

    Really great tut. Appreciate it for someone thinking about switching.

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      5 months later and here i am answering your comment mark... hope you made the switch and that you're happy with it!

  • @samuelayodeleadeoye933
    @samuelayodeleadeoye933 ปีที่แล้ว

    absolutely mind blowing, watched your tutorials for figma and I'm glad I'm still here, is there a way to get the video file?

  • @treyunderwood
    @treyunderwood ปีที่แล้ว +2

    Incredibly helpful tutorials on Framer! I love the image/video assets for this video. Did you make those or have a resource?

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      more stuff coming, my friend 😃 i found them on pexels.com!

  • @austinmoras7800
    @austinmoras7800 ปีที่แล้ว +1

    Thank you Tim😍

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      my pleasure, Austin 🤩

  • @jaguarpaw71
    @jaguarpaw71 ปีที่แล้ว +1

    Amazing tutorial, thank you so much

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you for the kind comment!

  • @DesignDen673
    @DesignDen673 ปีที่แล้ว +2

    Great tutorial, can you talk a little bit about where you sourced the 3D elements from?

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      everything sourced from shapefest.com and pexels.com!

  • @archanarao6104
    @archanarao6104 ปีที่แล้ว +5

    Hi! Can you please make a video on how to use CMS in framer. This is not covered indepth anywhere

    • @TimGabe
      @TimGabe  ปีที่แล้ว +3

      thanks a lot for the idea!! note taken 🙏

  • @mushroomthump
    @mushroomthump ปีที่แล้ว +2

    2:03 Hey great tutorial! Curious what video you were talking about in the "top right corner", nothing popped up there or in the description

    • @omareljachi1411
      @omareljachi1411 ปีที่แล้ว

      It's right here: th-cam.com/video/TWumjDt_cZg/w-d-xo.html

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      it should be there now... (4 months after 😅)

  • @darkpsychologylab
    @darkpsychologylab ปีที่แล้ว +2

    Hello Tim. Nice video you got here. But i can not see the video in the top right coner...

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      it should be there now, friend!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      (4 months after 😅)

  • @oussamajaafar5287
    @oussamajaafar5287 ปีที่แล้ว +1

    lovely Tim Gabe

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you, Oussama 😃

  • @Aao_kuch_naya_seekhe
    @Aao_kuch_naya_seekhe ปีที่แล้ว +2

    please make a next video on : how to publish the layouts in website on google ?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      how do you mean, my friend?

  • @GraveRave
    @GraveRave ปีที่แล้ว +1

    Nice work!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thanks a lot, my friend 🥳

  • @farkaslukrecia
    @farkaslukrecia 3 หลายเดือนก่อน

    you are the best!

  • @Aao_kuch_naya_seekhe
    @Aao_kuch_naya_seekhe ปีที่แล้ว +1

    hey tim , your way of teaching -'mind blowing' keep booming on you tube @tim gabe

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      that's so nice of you to say!! thank you!

  • @Donny2801
    @Donny2801 ปีที่แล้ว +1

    This will take idk how long if i code it with react, next js, plain html and stuffs -_- im a fe dev anyway. Really a mindblowing tool!

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      i know, right? framer is super fast, which is definitely its biggest strength. 😃

  • @dakmajik
    @dakmajik ปีที่แล้ว +1

    Cool , lets go

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      leeet’s go 🥳

  • @Ryan-kr4bq
    @Ryan-kr4bq ปีที่แล้ว +1

    Hey Tim, really love this, but I'm pulling my hair out on one simple thing... at 4:28 where you have a blank desktop page/frame but I can't seem to make the same. I'm guessing they've removed the option to just make a blank page within a document? The file you supplied already has pages designed, so I can only add a breakpoint, then move it to structure, then delete all its elements/features? Quite laborious! They really need a blank page option!!

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      hey ryan!
      you can only have one >desktop< frame per page, but if you want to play around you have some options:
      1) create a new breakpoint and play around with stuff in that one
      2) create a frame on your canvas, design there and then lift over into the desktop frame
      3) create a new page ("+" in the left sidebar in pages)

    • @Ryan-kr4bq
      @Ryan-kr4bq ปีที่แล้ว

      @@TimGabe Thanks Tim! I really appreciate your generosity! Onward and forward. Hope you have a fantastic weekend!

  • @mangodae
    @mangodae ปีที่แล้ว +1

    @Tim Gabe, I have a genuine question. At 0:20, when you showed the post with flickering things around it, is it just annoying and distracting for me, or do you agree? I'm still learning and curious. I've watched your other video about how important typography is in design.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      can indeed agree that those effects might be distracting! probably would have been better without it!!

  • @somanna_bu008
    @somanna_bu008 ปีที่แล้ว +5

    Hey Tim, for your client projects do you usually build things in Figma with all the auto layout constraints/restrictions set and then use the Figma to Framer plugin to export it to Framer or do you build it from scratch in Framer like you did in this video?

    • @gilltestudent8176
      @gilltestudent8176 ปีที่แล้ว +2

      also curious

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      hey!
      this really depends on a couple of factors, like how comfortable you are with the tools, if you have big design systems already in figma, etc.
      in the end, both approaches are totally valid and will work just fine.
      i personally usually start in figma since i'm still a bit faster and feel more "free" there, then i just export over to framer. however, this might very well change in the future!

  • @zynferno
    @zynferno ปีที่แล้ว

    Very informative!

  • @malock11
    @malock11 ปีที่แล้ว +1

    Hey Tim, loved the video! Clear and consise. Quick question: Where did you get the video background and pictures from? They look sick!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you, my friend 😃 I got them from pexels.com - great for finding free video assets!!

  • @KentangKopii
    @KentangKopii ปีที่แล้ว +1

    Hi! can you tell me the shortcut that you used in 13:37 ? Thankyou

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      not sure which one you're referring to, friend?

  • @paaaauulll
    @paaaauulll ปีที่แล้ว +1

    Very nice video bro!
    I just felt like asking where you got those forms and the background for the header from :)

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      shapefest and pexels 🥳

    • @paaaauulll
      @paaaauulll ปีที่แล้ว

      Cheers, bro

  • @TermsDecoded
    @TermsDecoded ปีที่แล้ว +1

    Wonderful tutorial.
    Although when I copied the working file and started recreating the design, I couldn't find the video you used.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      the video is from pexels, if you search for "3d" you'll find it there somewhere (but it's purple originally)

  • @oksanapavlenko9478
    @oksanapavlenko9478 11 หลายเดือนก่อน

    hi Tim, thank you so much for a great tutorial! Got a question - while trying to set up the video background, there's no option to set z-index for the element, could you please help me understand, if maybe the location of the feature has been changed..

  • @kasunwitharana2933
    @kasunwitharana2933 ปีที่แล้ว +1

    Thank you 🎉❤

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      appreciate the comment 💜

  • @Drnehaprasad
    @Drnehaprasad ปีที่แล้ว +1

    Thanks a ton🙏

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you for commenting!! 🤩

  • @marktmcewan
    @marktmcewan ปีที่แล้ว +1

    Hey Tim, no video link posted in the top right hand corner as mentioned 2:00sec

    • @omareljachi1411
      @omareljachi1411 ปีที่แล้ว

      th-cam.com/video/TWumjDt_cZg/w-d-xo.html it's right here

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      it should be there now, thanks for pointing it out mark!

  • @chukwunonsoviktor7554
    @chukwunonsoviktor7554 ปีที่แล้ว +1

    Thank you for the video.
    I was following your steps but I was not able to set the hero section Hight to 100vh, do you have any idea why it is not working? the viewport is inactive at the moment.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      it's most likely something with your frame setup!
      check the working file and try to mimic that 😃

  • @nikolanikolic7936
    @nikolanikolic7936 ปีที่แล้ว +2

    This is awesome but is there any video where we can see how to make any type of form in framer, for example contact form or smth like that, and is it possible to add form in framer besides one they provide by default which are not so good? Thanks

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      you can customise the forms in Framer with some easy code tweaks, but they also recently added their newest component: the input component 😃 I think with that one you should be able to achieve some pretty cool custom stuff!

  • @nikkamaxine2566
    @nikkamaxine2566 4 หลายเดือนก่อน

    what subscription/pricing did you get to achieve this on Framer? :) I'm worried about the small upload size they offer with their pricing

  • @facundobilotto8825
    @facundobilotto8825 ปีที่แล้ว +2

    Thanks Tim! Because of your videos I want to change my workflow to integrate frame to it. I was thinking Is there a way to pass the animations from figma to framer? or should I work the animations only in framer

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      happy to be of help and inspiring you to make the transition, my friend!
      there is no "automatic" way to transfer animations. however, once you get to know Framer, it's pretty easy to recreate anything you've made in Figma inside of Framer instead.
      to save time though, it could be good to leave animation work for Framer!

    • @facundobilotto8825
      @facundobilotto8825 ปีที่แล้ว

      @@TimGabe Thanks again Tim!

  • @davidstigg9355
    @davidstigg9355 ปีที่แล้ว +1

    Hey there. Thanks so much for the great content! One question: how do people use this with Figma? Do you still do wireframes in Figma but then jump right to Framer for the Hi-fidelity mockups/prototypes, and then publish when ready?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      i think it's a lot different from person to person, but i still like ideating in figma just because i'm more used to the canvas. once i'm done ideating, i will move over to framer!

  • @ShukuraOnline
    @ShukuraOnline ปีที่แล้ว

    Where did you get the blue background images from?❤

  • @DominikPanosch
    @DominikPanosch 7 หลายเดือนก่อน

    off-topic question: What is the background music that you are using? it is pretty awesome and ive been looking for something similar to add to my own videos (at least in the intro). Can you recommend a library for audio where this is contained? 🙂
    btw. great video, I am just diggin myself into some alternatives to our Figma -> Elementor work process.

  • @pranitkharat621
    @pranitkharat621 ปีที่แล้ว

    nicely explained

  • @ManpreetSingh-cv8jg
    @ManpreetSingh-cv8jg 9 หลายเดือนก่อน

    Is there any way of adding the footer automatically for newely created page?

  • @fridadeivizsla2729
    @fridadeivizsla2729 ปีที่แล้ว +1

    merci, thank you, grazie! top! I had seen tutorials before, but I understood little, your way of explaining is really comprehensive! Thanks! i hope more such videos will come out and it would be nice to have a pro course even for a paid fee! have a good weekend!
    1 Question: the only thing that I cannot see in preview it is the footer.. any idea? it is on the bottom of the layers, set to relative, with 1440 fixed, height auto- fit ... tnx

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you Frida!! 🥳
      not sure what the question is. could you give me some more context? 😃

  • @kasforai
    @kasforai ปีที่แล้ว +1

    Can I use this tool to make landing pages for companies?

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      definitely, my friend!! it's the best tool on the market for that exact use case, in my opinion!

  • @matteoceredi1801
    @matteoceredi1801 ปีที่แล้ว +1

    Hello Tim,
    How do you deal when exporting the file from Figma to Framer and it says that the size is "too large"?? it shows some advices on their website but I would like to hear from you.
    Thanks for great contents that you share with us on Framer.

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      i've never run into that myself, but i'd suggest starting to export in bits and pieces (like smaller components) and then assembling in framer 😃
      thanks for the support, matteo!

  • @Adam-g1f2j
    @Adam-g1f2j ปีที่แล้ว +2

    Hi Tim, big fan of you videos. In regards to Figma did you learn everything from tutorials online or did you take a structured course? I'm ]in the process of designing my first website, resources online are great but everyone has their unique outlook so can sometimes get overwhelming! any advice would be great.

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      hey my friend!
      I never took courses myself, but if I could rewind and take a really high quality from someone that is really respeceted I for sure would 😃

  • @Danb187
    @Danb187 ปีที่แล้ว

    Greate video Tim. Question: How can I have 3 reviews placed next to each other?

  • @sebastianvggemose2238
    @sebastianvggemose2238 ปีที่แล้ว

    Hi Tim
    Thanks for the guide. Totally newbie here.
    Do you have a link to the guide regarding creating the style-guide text, fonts, components, etc.?

  • @amanhaque-3616
    @amanhaque-3616 ปีที่แล้ว +1

    Your video's is very helpful ❤
    I have a q.
    Bro where did you get the blue box video

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      from pexels, my friend 💜

  • @toomzestr
    @toomzestr ปีที่แล้ว

    Mobile hover button states are great!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      we love those hover states!!

  • @prashmeetverma
    @prashmeetverma 11 หลายเดือนก่อน

    I am unable to set the viewport height to 100vh. Whenever I choose any element inside a frame, I see the 'Viewport' option to be disabled/greyed out. Any insights on that please?

  • @KameDoes
    @KameDoes 11 หลายเดือนก่อน

    where do you get your footers

  • @mostafafallaha9672
    @mostafafallaha9672 ปีที่แล้ว +1

    i actually still don't understand, if i can make the frontend of the website in framer, like can i add some functions to the buttons in JS and link this website to a database?

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      for sure! everything is possible with custom overrides and code components!

    • @mostafafallaha9672
      @mostafafallaha9672 ปีที่แล้ว

      @@TimGabe thanks for your efforts,
      can u make a video explaining how to do it?
      and thanks again

  • @JasonRose1976
    @JasonRose1976 ปีที่แล้ว

    I don't see a link in the top right to the video on style guides.

  • @mehdibenzine
    @mehdibenzine ปีที่แล้ว +1

    Thanks i really appreciate this tutorial though i have a question how can we create a preloader for our website all i've seen from youtube isn't an actual preloader...Thank u Tim!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      maybe that's something for a future Framer tutorial!! thanks a lot, Mehdi! 😃

  • @Kitazshin
    @Kitazshin ปีที่แล้ว +1

    Hi am I bugging or is the working file a little different that the one you are using ( I am new to framer so not sure if I have this right ) The reference in the working file does not have any background whereas in the video reference layer there is one. Is this correct?
    Edit - The issue was coming up when i was using framer on safari, seems to be fine on google chrome my bad.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      glad you fixed it, friend!!

  • @ricardoi8171
    @ricardoi8171 10 หลายเดือนก่อน

    Does it have the code ? the html ? The Javascript ?

  • @tanny_edits
    @tanny_edits ปีที่แล้ว +1

    Can you create a video that covers all the things you do on this project, for a beginner like me it's confusing :)

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      if you check out my Master Framer playlist you'll learn most of the things!

  • @sale7680
    @sale7680 6 หลายเดือนก่อน

    Amazing

  • @stewtech
    @stewtech ปีที่แล้ว +1

    How do you publish it with a domain?

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      you'll have to have a paid plan, but it's super easy (you can do it straight through godaddy for example)!

  • @federicodalfo285
    @federicodalfo285 ปีที่แล้ว +1

    Why I don't see the same Navigation Template?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      the UI (and the templates) are updated, but it should still be good alternatives under "Navigation"

  • @applepie7282
    @applepie7282 ปีที่แล้ว +1

    thanks

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you right back!

  • @comedian_gift3684
    @comedian_gift3684 ปีที่แล้ว

    pls my design is not showing exactly how i designed it on preview...what might be the problem?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      probably Stacks and Constraints not setup correctly... 😢

  • @paulplanko
    @paulplanko 5 หลายเดือนก่อน

    Where can I download the video ?

  • @chasewells9671
    @chasewells9671 4 หลายเดือนก่อน

    where can i get nice hero animations without having to make them?

  • @cryptoshills
    @cryptoshills ปีที่แล้ว

    Spent a chunk of time outlining my desired webpage on Framer and it completely failed lol. Doesn’t seem like it knows how to generate a datatable with an advanced filter sidebar or section above it containing toggle ability fields. Have you tried generating something like that?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      this is definitely possible! maybe something for a future tutorial!

  • @BrodyJones
    @BrodyJones ปีที่แล้ว +1

    Anyone know how to get dark mode on framer like he has? Ive looked everywhere...

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      it's in the left sidebar under view > appearance > night mode!

  • @1nonlykingnaeem
    @1nonlykingnaeem ปีที่แล้ว +1

    I have some questions to you.
    1.Is it essential to learn figma before framer?
    2.Is it essential to learn HTML CSS before framer?
    3.What is the prerequisite for learning framer?
    4.Is learning figma helps to framer?
    Please answer these questions
    I am new to this field.

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      1. no, but they're very similar so if you know one of them the other one will be easier!
      2. no, but kind of the same thing... if you know html/css things will make a bit more sense, although framer is easy enough to use without any coding experience!
      3. i'm working on a course that should work as the best starting point for people wanting to go from zero to hero, so that could be a good starting point sooooon!
      4. not really, you can start with just framer!

    • @1nonlykingnaeem
      @1nonlykingnaeem ปีที่แล้ว

      @@TimGabe thanks man

  • @GamingAK
    @GamingAK ปีที่แล้ว +2

    working file need bro

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      ahh, as always I forget to update. here it is:
      framer.com/projects/new?duplicate=oY0rvvG0vcB9RlaATukc

  • @chrisf8021
    @chrisf8021 ปีที่แล้ว

    Having to bring in graphics/images from another application and design the reference project elsewhere like Figma and bring that in is very inefficient and relatively time consuming. Why not do all graphic design, photo editing, layout design, text styles, colour theming etc. and everything else associated with the full website design in a single application?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      i think it can easily become too much for one single application to handle, making it a reaaaally cluttered ui

    • @chrisf8021
      @chrisf8021 ปีที่แล้ว

      ​@@TimGabe 'Web apps' maybe. There's been desktop software that can do all this in one go easily for almost 30 years. I use it all the time (Xara Designer Pro+). I do literally everything in it from start to finish without ever leaving the application. Excellent software design and ultra clean UI in it means I can get each project done in a tiny fraction of the time it would take in Framer (or the rest). Web apps really have regressed us so badly. Whatever happened to professional fully-fledged desktop applications... 'Convenience' trumped quality. :( So sad.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      maybe in the age of AI with the machine doing the heavy lifting, negating the need to bombard the UI with functionality ☺️
      the problem as i see it: the more features you add to a tool, the more complex it becomes. the more complex it becomes, the bigger the learning curve. the bigger the learning curve, the less it’s going to appeal to a wider audience.
      there’s probably a reason we haven’t seen a ”mainstream” adopted tool that does it all

    • @chrisf8021
      @chrisf8021 ปีที่แล้ว

      ​@@TimGabe Yes: broken market forces are responsible predominantly. Market strongly enough to become a meme because you get the resources soon enough and you win, even if the product isn't as good. Adobe are 'mainstream', but it was clear long ago that popular doesn't mean better, and better doesn't mean popular. As always, it's down to individuals to figure out what the best things are out there, and it's not always easy thanks to market forces. The software I discovered decades ago shows without any reasonable doubt that you literally can have it all and be so much better for it. I find it amazing that so many swoon over competing half-baked web 'apps' with partial functionality, when the fully-fledged, all-powerful, super slick desktop application that has it all, with a similar learning curve, is sitting right there next to them, completely ignored, like the white elephant in the room twiddling its thumbs. Staggers me.

  • @cekuhnen
    @cekuhnen ปีที่แล้ว +1

    Looks like Framer cannot export to self-host which if true makes it useless for me.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      as of right now, the export with Handshake is the best "export" option! not sure if it's helpful for you!

  • @LilacDaisy2
    @LilacDaisy2 ปีที่แล้ว

    I wonder where its closest servers are to Australia

  • @petermckinnon3104
    @petermckinnon3104 9 หลายเดือนก่อน

    Sorry, got to go back to learning webflow. The tutorials on Framer/TH-cam are poor. Wanted to wait for the Tim Gabe course but that's going to be another 4/6 weeks to wait.

  • @paavan
    @paavan 11 หลายเดือนก่อน

    freakin wow

  • @MrMyers1489
    @MrMyers1489 ปีที่แล้ว +1

    🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      🎉🤩

  • @afreenshaikh938
    @afreenshaikh938 ปีที่แล้ว +1

    27:08

  • @brooke7235
    @brooke7235 ปีที่แล้ว

    You are the most attractive man I've seen in a while. LMFAO wtf.... Your wife is blessed.

  • @AtomicPixels
    @AtomicPixels ปีที่แล้ว

    gotta be honesty the brand language is super super confusing and cheap feeling. The execution i mean, using floating 3D in JUST the footer, giving it all that room and free will (as 3D objects in space prefer), then all the important parts above, stuffing the same single tone blue shape thingy in these morbidly standard layouts and boxes. Does not feel like the design of this was really even thought about, ever, lol

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      respect your viewpoint, my friend! thanks for the feedback!

  • @scottschoen3362
    @scottschoen3362 ปีที่แล้ว

    As newbie things were changed without explaining why numbers wee chosen in relationships to pixel sizes of the different formats and other components. Too confusing without establishing references.