Complete Website in Framer: Beginner Tutorial
Вставка
- Опубліковано 3 тра 2023
- In this Framer beginner tutorial we build a responsive and animated website from scratch-in 30 minutes.
🔴 Working File: timgabe.com/resources/framer-...
Timestamps
00:35 Styleguide
04:29 Structure
07:05 Design Tweaks
20:07 Responsiveness
26:29 Delightful Animations
#figma #figmatutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!
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
right?! I feel like I've got superpowers every time I use it 😅
well im an after effect animator 😁
In how many years you think you'll lose your job?
@@TheBMWdriver To AI? Longer than I would continue working I imagine
I've been looking at framer tutorials for a few weeks and this is really different. It's exciting to discover you.
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! 💛
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 😃
This is such a great tutorial! I'm going to make my own version of what you just did. Thanks for sharing.
Very informative! Loved every second, plus it is all free! Thank you Gabe!
really glad you liked it, my friend 🤩
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.
GREAT tutorial! So excited to watch more of your tutorials and build my site.
awesome celinda!! will be coming more and more stuff!
Comprehensive and well-explained. I feel powerful now thanks to you!
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🎉🎉🎉🎉🎉
thank you so much yet again! 🙏
I'm looking to switch careers from monotonous and toxic corporate roles in HR to front-end development/web development/UI design. Looking forward to checking this playlist out and learn in my free time!
Thank you so much, you've made a very helpful video tutorial. 🙂
this just saved my life lol! And im in awe with Framer! thanks!
Absolute quality - the tutorial and the working file design! Also thanks for the 'shapefest and pexels' resource tip
happy to be of help, marcus!
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! 🤜🏼🤛🏼
I looked last semester into wix new advanced editor and then thought what a chaos …
that's amazing to hear, my friend 😃 comments like these make me so happy!
This one is a banger Tim! Love it
thanks a lot, Sharanya!! 🤩
I LOVE YOUR TRAINING STYLE! Very deliberate, step by step in clear steps! Thank you so much for your talent
really happy you like it; makes me inspired to produce more content!!
Really great tut. Appreciate it for someone thinking about switching.
5 months later and here i am answering your comment mark... hope you made the switch and that you're happy with it!
Very informative!
Thank you Tim😍
my pleasure, Austin 🤩
Fun and useful tutorial, thank you!
happy you liked it 😃
Framer is what I was looking for ❤
Framer is in our hearts 💜
I'm a big fan of the style guide to begin with! Hard to imagine how i did things before.
heard that from others too, happy it was helpful!!
Amazing tutorial, thank you so much
thank you for the kind comment!
Incredibly helpful tutorials on Framer! I love the image/video assets for this video. Did you make those or have a resource?
more stuff coming, my friend 😃 i found them on pexels.com!
Thankyou for this amazing video and ur channel is much better than paid courses ❤❤
that means a lot, Vikram!! thank you 💜
Wow you really did a grate job explaining
thank you, my friend 😃
Thanks a ton🙏
thank you for commenting!! 🤩
Nice work!
thanks a lot, my friend 🥳
Thank you 🎉❤
appreciate the comment 💜
lovely Tim Gabe
thank you, Oussama 😃
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.
Hey Tim, loved the video! Clear and consise. Quick question: Where did you get the video background and pictures from? They look sick!
thank you, my friend 😃 I got them from pexels.com - great for finding free video assets!!
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?
nicely explained
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.?
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..
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 :))
will take note of this, have heard the same from more people! 🙏
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.
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 😃
Cool , lets go
leeet’s go 🥳
Hi! Can you please make a video on how to use CMS in framer. This is not covered indepth anywhere
thanks a lot for the idea!! note taken 🙏
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
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!
@@TimGabe Thanks again Tim!
Great tutorial, can you talk a little bit about where you sourced the 3D elements from?
everything sourced from shapefest.com and pexels.com!
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?
also curious
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!
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
It's right here: ua-cam.com/video/TWumjDt_cZg/v-deo.html
it should be there now... (4 months after 😅)
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
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!
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!
i know, right? framer is super fast, which is definitely its biggest strength. 😃
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?
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!
maybe that's something for a future Framer tutorial!! thanks a lot, Mehdi! 😃
Is there any way of adding the footer automatically for newely created page?
@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.
can indeed agree that those effects might be distracting! probably would have been better without it!!
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?
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!
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.
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!
Where did you get the blue background images from?❤
please make a next video on : how to publish the layouts in website on google ?
how do you mean, my friend?
thanks
thank you right back!
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.
glad you fixed it, friend!!
where do you get your footers
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.
it's most likely something with your frame setup!
check the working file and try to mimic that 😃
Very nice video bro!
I just felt like asking where you got those forms and the background for the header from :)
shapefest and pexels 🥳
Cheers, bro
Greate video Tim. Question: How can I have 3 reviews placed next to each other?
Hello Tim. Nice video you got here. But i can not see the video in the top right coner...
it should be there now, friend!
(4 months after 😅)
Hi! can you tell me the shortcut that you used in 13:37 ? Thankyou
not sure which one you're referring to, friend?
Mobile hover button states are great!
we love those hover states!!
I don't see a link in the top right to the video on style guides.
Wonderful tutorial.
Although when I copied the working file and started recreating the design, I couldn't find the video you used.
the video is from pexels, if you search for "3d" you'll find it there somewhere (but it's purple originally)
Hey Tim, no video link posted in the top right hand corner as mentioned 2:00sec
ua-cam.com/video/TWumjDt_cZg/v-deo.html it's right here
it should be there now, thanks for pointing it out mark!
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!!
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)
@@TimGabe Thanks Tim! I really appreciate your generosity! Onward and forward. Hope you have a fantastic weekend!
Does it have the code ? the html ? The Javascript ?
Your video's is very helpful ❤
I have a q.
Bro where did you get the blue box video
from pexels, my friend 💜
Can I use this tool to make landing pages for companies?
definitely, my friend!! it's the best tool on the market for that exact use case, in my opinion!
freakin wow
Can you create a video that covers all the things you do on this project, for a beginner like me it's confusing :)
if you check out my Master Framer playlist you'll learn most of the things!
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?
for sure! everything is possible with custom overrides and code components!
@@TimGabe thanks for your efforts,
can u make a video explaining how to do it?
and thanks again
Why I don't see the same Navigation Template?
the UI (and the templates) are updated, but it should still be good alternatives under "Navigation"
pls my design is not showing exactly how i designed it on preview...what might be the problem?
probably Stacks and Constraints not setup correctly... 😢
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
thank you Frida!! 🥳
not sure what the question is. could you give me some more context? 😃
Anyone know how to get dark mode on framer like he has? Ive looked everywhere...
it's in the left sidebar under view > appearance > night mode!
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?
this is definitely possible! maybe something for a future tutorial!
How do you publish it with a domain?
you'll have to have a paid plan, but it's super easy (you can do it straight through godaddy for example)!
Looks like Framer cannot export to self-host which if true makes it useless for me.
as of right now, the export with Handshake is the best "export" option! not sure if it's helpful for you!
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?
i think it can easily become too much for one single application to handle, making it a reaaaally cluttered ui
@@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.
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
@@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.
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.
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!
@@TimGabe thanks man
hey tim , your way of teaching -'mind blowing' keep booming on you tube @tim gabe
that's so nice of you to say!! thank you!
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.
working file need bro
ahh, as always I forget to update. here it is:
framer.com/projects/new?duplicate=oY0rvvG0vcB9RlaATukc
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🤩
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.
I wonder where its closest servers are to Australia
27:08
interesting!
@@TimGabe hehe :)
You are the most attractive man I've seen in a while. LMFAO wtf.... Your wife is blessed.
Thank you, great tutorial! Wondering if this can be do in Framer: ua-cam.com/video/SnEjLNwyYAI/v-deo.html
thanks for commenting, friend! yes, scroll animations like that can be done in framer!
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
respect your viewpoint, my friend! thanks for the feedback!
Your 'Beginner Tutorial" but youre not gonna go into "too much detail"? Goodbye!!
sorry i lost you!