Build a 3D Site Without Code with Framer - Crash Course
ฝัง
- เผยแพร่เมื่อ 6 มิ.ย. 2024
- 3-hour course for beginners on designing a multi-page site with 3D assets, animations, adaptive layouts and CMS
Sponsored by www.framer.com/?...
Final site: soft-buttons-231170.framer.app
Template: framer.com/projects/new?dupli...
Assets: www.dropbox.com/s/f4jo6h50mc9...
Text content: designcode.io/framer-3d-site
Spline URL #1: my.spline.design/framercopy-b...
Spline URL #2: my.spline.design/daccord-4909...
Imagine being able to create a fully functional site from a design tool without writing a single line of code. Framer offers the power of CSS layouts and animations with the familiar and quick editing capabilities of Figma. You can deploy and iterate almost instantly without having to wait for builds and you have essential features like search engine optimizations and a content management system.
0:00 Intro to Framer
4:06 3D Animation and Text Styles
15:50 Stacks and Adaptive Layout
32:46 Components and Interactions
48:17 Top Bar Menu Animation
01:06:32 Scroll Parallax
01:29:05 Appear Animation
01:45:52 Overlay and Forms
02:03:40 Pages and Breakpoints
02:19:55 CMS and Content
#webdesign #uidesign #nocode
new subscriber here. just came across Framer and fell in love with it. I'm new to web design and development and believe Framer can make my life much easier. thanks for this tutorial.
This is a fantastic tutorial! As a new Framer user I've run into several problems that you've actually help solve and I'm only 30 minutes in. I can't wait to see what else I learn. Thank you for creating this and sharing.
Amazing tutorial and site design! I’m a WordPress expert but this looks like a much cleaner foundation to build with
Whoever made this video, I really want to express my deepest gratitude😊. Thanks to you, I can smoothly and understand how to create prototypes in Framer, and thank you as well for providing the assets for us to learn.😉
Thank you for the crash course! I know where to build my portfolio now.
I think this is the best crash course I've found on TH-cam.
Best and most valuable free course I've ever seen on the internet. Thank you so much for this amazingly helpful content.
That’s amazing to hear, thank you!
So informative. Fact packed!
Easy explanations, if you don’t understand everything at first, give it some time, it will be referenced later. Watch this. I’m super pumped to get started on my new site!!
Best and most valuable free course i've ever seen on the internet.
Thank you so much for your effort,
One of the things I appreciated most about the video was the focus on practical, real-world examples. The instructor showed how to apply the concepts being taught to actual web design projects, which really helped me to understand how to use the techniques in a practical setting.
I totally agree, so helpful.
NEED GUIDANCE IN PURCHASING framer premium.
I have been trying to purchase the premium version of framer, but unfortunately my visa card kept declining multiple times, I also tried other cards as well, but all of them kept declining. Then I also tried making another framer account and get premium there, the same thing happened.
Anyone here who could guide me ??
Very well done, thank you for this amazing content and detailed explanations. Much appreciated!!
This is the most calming voice I ever heard!
Thank you for the course! It´s great!! Thank you
Wonderful course! It was very helpful😘
IDK what to say but i just wanted to say thank you for sharing such valuable lessons.
Great video! Very informative, easy to understand. Keep up the great work!
Glad it was helpful!
Thank you so much Framer and design code... I've been a wordpress developer but was never happy, So i have been keep jumping to various CMS's and framer is the real deal,.......
Thank you so much for this video guys! I learned a lot with you!
Amazing course!
Glad you think so!
This video convinced me to go all in on Framer 🙌 I
yours is perfect. These are going to takes loads of ti off the learning process.
Thanks for this. I wish you all the best ❤
I have watched many videos about Framer and you're the best so far.
Wow, thanks!
NEED GUIDANCE IN PURCHASING framer premium.
I have been trying to purchase the premium version of framer, but unfortunately my visa card kept declining multiple times, I also tried other cards as well, but all of them kept declining. Then I also tried making another framer account and get premium there, the same thing happened.
Anyone here who could guide me ??
You are saving me a semester!
Thank you so much for the amazing tutorial🙏😊
Hi @Designcodeteam I would like to express my gratitude to you and your esteemed team for creating this amazing tutorial. However, it is incumbent upon me to bring to your attention that certain revisions are required, as numerous components and features have either been removed or relocated to alternative sections.
Awesome tutorial, amazing teacher! Thanks Meng To for this ❤🔥❤🔥❤🔥🙏
Thank you for this "All in one place answers" video
I was about learning Webflow... Well I just found a better option 😇
It’s a great alternative to Webflow!
Same!! 🙌🏾
same
Same here.. and it looks like framer will get bigger
i hear ya!! I WAS learning WF , got freakn frustrated and turned to Framer … i wish I had the patience and capacity to learn WF but damn big learning curve plus some basic coding needed!
😍
We need tutorials on building backgrounds like yours!
This tutorial is amazing! As a Brazilian, I'm still improving my English, and there are few content creators on Framer in Brazil with this teaching style. Moreover, you speak at a slower pace, which is great for me as it allows me to better follow the tutorial. Thnks 😊
I'm glad that my teaching style suits the way you learn. I have a new Framer course as well. Feel free to check it out: th-cam.com/video/9nIwTjG2fdI/w-d-xo.html
I like the course very much.
Thank you!
Nice tutorial, Thanks a lot
Thank you for this wonderful tutorial 🙏🙏.
I was also wondering if you had a tutorial on how you created the 3d asset using spline
Great video! Can we edit breakpoints separately, or if I add / remove an element in one breakpoint it automatically reflects in others?
thanks for this tutorial, helps me a lot! lov u
Glad it helped!
thank you so much!
Very good keep it up
This was awesome!!
I have one question, where did you made those images you used? the look amazing
Thanks for the tutorial & all your patience to explain with such detail. I'm at 12:23 attempting to change the text to "Fill" however the option is greyed out & not available. Is there a setting that would cause this? Thanks in advance!
Thank you so much 🙏🏻
You’re welcome 😊
Nice job. Feel the new Squarespace Fluid Engine comes very close...
I’m sure each platform has their versions of the adaptive features. Thanks for watching!
You are the best!!🙂
Updated.
Spline URL #1: my.spline.design/framercopy-bd9e7275da55ebaf7252e8a0e4e0055f/
Spline URL #2: my.spline.design/daccord-49093ae84c00862e2451c953172dde5c/
This guy is amazing, Framer should take note of his tutorials as there's are pants.
Wow right to the point, do you have a class for Figma by any chance?
Hello and thanks for the content. It definitely has inspired me to learn how to use framer. Question. How can I go about changing the colors and elements used in the background and spline animation? I like the one used in the sample sight but would like to make a few tweaks to accommodate my color scheme?
Hey great course! I am loving it!, I just... cant use the spline links. when I embed it in my page it wont move or anything. Am I doing something wrong ?
Curious to know how you made that hover state fade-in transition on the 'Click to view in 3D' button
The best of the best!!!!!
Hi Sir
Thank you so much for this valuable tutorial. But I didn't see any of the tutorial from basic t advanced. I'm requesting you to do videos from basic and this is looking so beautiful
AWESOME 🥰
Great course! Thanks for creating this.
Cannot download assets for some reason though.
click on the "text content" link, you have a working link for the assets inside that page
@@ym.820 thank you so muchh
Hello, the dropbox link have been updated!
Thank you In the setup
AWESOME 🤙
Thanks!
Great!
"Great tutorial! I'm curious about how data storage works in Framer-designed websites. Can Framer handle backend functionality like storing user input data, or would we need to integrate with a separate backend system?
this is awesome
@DesignCodeTeam I am noat able to get my " Top Bar " to show unless it is placed In Front of the " Hero" frame. I cannot see it if it is above the Hero section in the Layers menu. It has to be below ( in front). Why is this?
Is there any method to add user authentication, state management or maybe add content like Vimeo video to the site? Right now I feel that Framer is perfect for simple website but making it functional is an issue.
Thank you very much
Thank you for watching!
Hi, I would really love to follow this properly however from the outset, I am not able to find this "basic template" you mention at 4:20, which underprins all the edits you make, e.g. the title changes in the "layers" section at 6:38. I assume many updates have been made to Framer since this video was made, however could you or someone kindly pinpoint me on how to get this basic template with all the basic pages (e.g. 404, about, contact), please? Thanks in advance for your help! :)
Thanks it's really helpful..
But what do you think about figma which one is better ?!
Figma is the best design tool. But if you want to build a site as well, Framer is a really good option.
I have a text cursor show up ( instead of my pointer arrow ) when hovering over the "text" of a button. Only the text, the pointer arrow shows when hovering over the icon of a button.
Love it
I would love to have more icon options. I tried to bring my own icon library from Figma, but it's a pain, pe vectors inside don't resize with it's parent container 😭
In The setup tNice tutorials was a really helpful video but I'm using soft soft 12, is there a reason why I can't hear my own soft play? I click to play
thanks for amazing and useful video!! I need a little help. Can you update spline URLs again:) ?
Framer is amazing for a free flow interface experience....it's more similar to a design tool with advanced features it feels like figma on steroids.
Thank you ...♥️Framer♥️
Around 1:04:44 I did exactly what u did and components are still not visable even tho I set the overflow Visable and the other on Yes, I guess it's bugged? - Anyway I appreciate your tutorial very clear and not super fast!
thank you
Appreciate the chat!
Hi. I followed through but when I click publish, only the hero showed in my browser, but it is fully responsive when I test on framer app. is this a bug or I didn't do it right?
@DesignCode Hey can you please tell me how to create circular progress baar in framer i'm not able to use progress bar i tried since morning and i didn't found any video to please tell me 😔
Hello, I can't download the assets, is it possible for you to update the link please ?
Amazing, BUT what makes the site unique are the 3D images and the background I WANT to know how to create them! ❤
Spline 3D. Tutorials on TH-cam
Hey, I wanted to make a website throw framer, and I want to connect firebase in my website for the database storage authentication. So can I do that? And if I want to integrate fire based on my project, will that be good? It's not a big project like it's my college project. So can I use firebase for the database? As I don't know coding. So will it be a good option? And please tell me a good option to watch a video where fire disintegration is there? Or could you please guide me how to integrate firebase in the same project that you made in this video? In my project, I will be uploading courses on my website so that the students can visit my website and take the courses, buy the courses. So will it all be possible with fire base integration? Or do I need to code?
amazing
Thank you!
At the end dose it becomes an html & css website? To add links and so on?
Yes, it outputs HTML, CSS and JS. You can export components to React and also include code to your site.
I am trying to scale the button component on hover but nothing happens. Any idea why this might be happening?. Opacity on hover works though.
It’s possible that another event is using scale such as scroll. Otherwise try testing on a new button.
I am not getting or seeing any animations on the Spline URL #1
Will client pay as much a for webflow??
Hello great course not able to copy paste spline url for bg
I cannot find the progress bar component from the Appear Animation section. Any suggestions on where to find this?
I couldn't either, i took the react code for the progress bar from his framer template copy - and copied it over
Me too @designcodeteam
You use blobs for your backgrounds yes?
Yep they are blobs
I’m trying to add a blank section but it wants me to insert on of their premade layouts. I’ve searched all over Google
Framer have a feature “export the site” or something else ?
thanks
You're welcome!
At 16:47 - No matter what I do, my website will not "Fit Content". When I try to add a Stack for Desktop, or when I click "Fit Content" for Height, the white space at the bottom of the Hero section won't go away. When I try to Add Section, nothing happens. It looks like the New Section is hiding underneath the Hero Section.
Does anyone know how to fix this? I feel like I'm going crazy, because it seems like such a simple error. I re-watched the video like 4 times. Thanks! 🥺
Editing in Framer is so damn complicated, your tutorial helped a lot but I am updating my custom 3 d model it's not taking it
great stuff - anyone know how we access standard web fonts, Arial, Verdana etc?
how do you select both texts at once like that? (10:02min)
Qual é a média de preço de um site desse modelo?
Hello, if I add the 3D image, the image will stay in the corner and I can’t see the full image. Does anyone know what to do?
hwo do i save the 3d asset from spline
can you connect Firebase to framer if so how do you do that
At around the 1:38:13 mark you bring in a loading progress animation into your Framer project but I'm struggling to find this. I tried using the Quick Action menu like you did but it's not popping up as an option. Has Framer removed this feature?
No, they just relocated the items. Now It's under the assets panel. Assets>framer>progressbar.
@@Micheal_Muane very strange, still not seeing it on my end. I’m a new Framer user, so perhaps newer accounts don’t have access to legacy components?
@@bryce-jones yes you have, no need to upgrade, it's on the right side under assets/framer (Pages-Layer -Assets) the tabe is close you'll need to open it to reveal the progress bar component.
@@Micheal_Muane I'm doing exactly as you describe but i'm still not seeing anything on my end.
@@Micheal_Muane also can't find anything
How do you make the buttons work?
Excellent video. Thank you so much.
Im unable to find bgblur option under view? Has it been moved somewhere else? or am i missing something?
Hi Deepak, were you able to find the basic template to work from? Could you show me how you got this, please? Sorry I do not know the answer to your question, otherwise would've loved to help!
Its already mentioned in the description
I don't see the blur option either... Did you ever figure it out?
@@TCakes I did not sadly. It's not in the description either. If you find out, please do let me know!
@@sanambalani It ended up being under Styles > Filters > BG Blur.
Framer changed quite a few things that were shown in this video, so there was a lot of digging and research to be done. I'm sure it helped me get a better understanding in doing so anyway!
Can anyone tell me where I can get more animation UrLS
Great explanation but am struggling/stuck with the progress bar addition. Did you create this?.
I'm also stuck here and struggling to figure it out. Could not find it on the components, did you find a way around it it?
@@tobiesax Did you find a soluion??
Hello, can you help me, the assets link doesn't work for me?
Hello, the dropbox link have been updated!