Complete Website in Framer: Beginner Tutorial

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

КОМЕНТАРІ • 190

  • @dandenney3046
    @dandenney3046 Рік тому +97

    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 8 місяців тому

      well im an after effect animator 😁

    • @Robbedoes-MT09
      @Robbedoes-MT09 8 місяців тому

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

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

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

  • @MrAbbo11
    @MrAbbo11 4 місяці тому +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!

  • @xhongaronga
    @xhongaronga Рік тому +30

    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 😃

  • @rajnomadheart
    @rajnomadheart Місяць тому +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!

  • @JennieLyra
    @JennieLyra 3 місяці тому +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.

  • @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 7 місяців тому +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.

  • @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.

  • @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 🤩

  • @lizcorrea6810
    @lizcorrea6810 8 місяців тому +1

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

  • @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!

  • @sabasaba2772
    @sabasaba2772 9 днів тому

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

  • @puseletsomaraba1313
    @puseletsomaraba1313 11 місяців тому +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  11 місяців тому

      thank you so much yet again! 🙏

  • @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!!

  • @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.

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

    This one is a banger Tim! Love it

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

      thanks a lot, Sharanya!! 🤩

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

    Framer is what I was looking for ❤

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

      Framer is in our hearts 💜

  • @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 🙏

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

    Fun and useful tutorial, thank you!

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

      happy you liked it 😃

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

    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?

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

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

  • @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!

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

    Amazing tutorial, thank you so much

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

      thank you for the kind comment!

  • @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!!

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

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

  • @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!

  • @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!

  • @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 17 днів тому

      @@TimGabe did you do it:P

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

    Thank you Tim😍

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

      my pleasure, Austin 🤩

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

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

    • @TimGabe
      @TimGabe  11 місяців тому +1

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

  • @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!

  • @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 😅)

  • @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!

  • @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 💜

  • @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!

  • @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?

  • @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)

  • @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!!

  • @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 😃

  • @reaperpros
    @reaperpros Рік тому +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  11 місяців тому

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

  • @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? 😃

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

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

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

    lovely Tim Gabe

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

      thank you, Oussama 😃

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

    Nice work!

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

      thanks a lot, my friend 🥳

  • @Daniel-l6g8m
    @Daniel-l6g8m 4 дні тому

    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

  • @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: ua-cam.com/video/TWumjDt_cZg/v-deo.html

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

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

  • @Donny2801
    @Donny2801 10 місяців тому +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  10 місяців тому +1

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

  • @davidstigg9355
    @davidstigg9355 10 місяців тому +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  10 місяців тому

      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!

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

    Very informative!

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

    Thank you 🎉❤

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

      appreciate the comment 💜

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

    you are the best!

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

    Thanks a ton🙏

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

      thank you for commenting!! 🤩

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

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

  • @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!

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

    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.

  • @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! 😃

  • @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.?

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

    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..

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

    Cool , lets go

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

      leeet’s go 🥳

  • @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!!

  • @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!

  • @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?

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

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

  • @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 😃

  • @ManpreetSingh-cv8jg
    @ManpreetSingh-cv8jg 7 місяців тому

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

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

    Where did you get the blue background images from?❤

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

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

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

      ua-cam.com/video/TWumjDt_cZg/v-deo.html it's right here

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

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

  • @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!

  • @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!

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

    where do you get your footers

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

    thanks

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

      thank you right back!

  • @ricardoi8171
    @ricardoi8171 7 місяців тому

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

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

    nicely explained

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

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

  • @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)!

  • @shubh8537
    @shubh8537 Рік тому +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  11 місяців тому

      glad you fixed it, friend!!

  • @federicodalfo285
    @federicodalfo285 11 місяців тому +1

    Why I don't see the same Navigation Template?

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

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

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

    Where can I download the video ?

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

    Amazing

  • @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

  • @1nonlykingnaeem
    @1nonlykingnaeem 10 місяців тому +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  10 місяців тому +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 10 місяців тому

      @@TimGabe thanks man

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

    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?

  • @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

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

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

  • @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!

  • @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!

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

    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  11 місяців тому

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

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

      ​@@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  11 місяців тому

      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 11 місяців тому

      ​@@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!

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

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

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

      probably Stacks and Constraints not setup correctly... 😢

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

    freakin wow

  • @petermckinnon3104
    @petermckinnon3104 7 місяців тому

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

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

    I wonder where its closest servers are to Australia

  • @afreenshaikh938
    @afreenshaikh938 10 місяців тому +1

    27:08

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

    🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

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

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

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

    Thank you, great tutorial! Wondering if this can be do in Framer: ua-cam.com/video/SnEjLNwyYAI/v-deo.html

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

      thanks for commenting, friend! yes, scroll animations like that can be done in framer!

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

    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.

  • @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!