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.😉
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.
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: ruclips.net/video/9nIwTjG2fdI/видео.html
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!
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,.......
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!!
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.
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 ??
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♥️
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
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.
Learning Figma will make things easy for you. HTML CSS isn't essential at this stage, You can learn it later if you want to. If you want to learn Framer first, it's completely fine, But I would suggest learning Figma quickly as it really helps in Framer.
@@gigachadtwixz7262 How much Figma should learn first before framer? Just basic or basic + prototype, auto layout,components etc? Please give me the answer kindly
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?
@@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.
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!
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 ?
@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 😔
"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?
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?
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.
I have a question. Every time I move text around that is already inside a frame, the text jumps out of the frame and below every other layer. I then have to manually place it back inside the frame so that it is visible in preview, tablet and phone mode. This gets annoying and cumbersome. How do I move text around and have it stay inside the frame? Are there any particular settings that I need to adjust in framer? Thanks a bunch.
@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?
When I create a new section the new section will not go to the next section below but instead stays in my hero stack. How can I make the new section that I create stack under the previous section vertically? Please help, thanks.
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!
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 😭
If you're used to Figma, Framer be extremely familiar. I love that it's using the same concepts for stacks, components, text styles, plugins, etc. By that extension, you have more creative freedom and can design from scratch. Webflow is more a web builder, meaning that you're implementing an already-made design with direct CSS concepts, which sometimes can be hard to understand to designers who's never done CSS. Both are good options.
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! :)
same. I feel like it works for the most part except the Mobile Menu background blur. Even after publishing, it still didn't work. Any idea, @DesignCode?
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! 🥺
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!
@@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!
I purchased the Flux Academy Framer Masterclass and your tutorial was wayyy more valuable..and also free I might add.
I think this is the best crash course I've found on RUclips.
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.😉
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!
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.
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: ruclips.net/video/9nIwTjG2fdI/видео.html
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!
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,.......
IDK what to say but i just wanted to say thank you for sharing such valuable lessons.
Amazing tutorial and site design! I’m a WordPress expert but this looks like a much cleaner foundation to build with
This is the most calming voice I ever heard!
We need tutorials on building backgrounds like yours!
Thank you for this "All in one place answers" video
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!!
Thank you for the crash course! I know where to build my portfolio now.
This video convinced me to go all in on Framer 🙌 I
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.
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 RUclips
😍
❤
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 ??
This guy is amazing, Framer should take note of his tutorials as there's are pants.
s there courier in webdesign and dev ?? alredy dora is there ? what u think ?
You are saving me a semester!
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!
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♥️
yours is perfect. These are going to takes loads of ti off the learning process.
Very well done, thank you for this amazing content and detailed explanations. Much appreciated!!
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 tutorial, amazing teacher! Thanks Meng To for this ❤🔥❤🔥❤🔥🙏
Amazing course!
Glad you think so!
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.
Learning Figma will make things easy for you. HTML CSS isn't essential at this stage, You can learn it later if you want to. If you want to learn Framer first, it's completely fine, But I would suggest learning Figma quickly as it really helps in Framer.
@@gigachadtwixz7262 How much Figma should learn first before framer?
Just basic or basic + prototype, auto layout,components etc?
Please give me the answer kindly
Great video! Very informative, easy to understand. Keep up the great work!
Glad it was helpful!
Thank you so much for this video guys! I learned a lot with you!
Thanks for this. I wish you all the best ❤
Great video and it is still relevant to todays standards 2 years old too :)
is there courier in webdesign and dev ?? alredy dora is there ? what u think ?
Thank you for the course! It´s great!! Thank you
Thank you for this wonderful tutorial 🙏🙏.
I was also wondering if you had a tutorial on how you created the 3d asset using spline
this channel is just amazing....
s there courier in webdesign and dev ?? alredy dora is there ? what u think ?
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
Thank you so much for the amazing tutorial🙏😊
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
I like the course very much.
Thank you!
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!
Wonderful course! It was very helpful😘
Your video was so helpful thanks a lot ❤
The best of the best!!!!!
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
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 so much 🙏🏻
You’re welcome 😊
Wow right to the point, do you have a class for Figma by any chance?
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 ?
thanks for this tutorial, helps me a lot! lov u
Glad it helped!
@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 😔
thank you so much!
Very good keep it up
"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?
You are the best!!🙂
Updated.
Spline URL #1: my.spline.design/framercopy-bd9e7275da55ebaf7252e8a0e4e0055f/
Spline URL #2: my.spline.design/daccord-49093ae84c00862e2451c953172dde5c/
Nice tutorial, Thanks a lot
Hello, I can't download the assets, is it possible for you to update the link please ?
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?
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.
This was awesome!!
I have one question, where did you made those images you used? the look amazing
Thank you very much
Thank you for watching!
thanks
You're welcome!
AWESOME 🤙
Thanks!
AWESOME 🥰
I have a question. Every time I move text around that is already inside a frame, the text jumps out of the frame and below every other layer. I then have to manually place it back inside the frame so that it is visible in preview, tablet and phone mode. This gets annoying and cumbersome. How do I move text around and have it stay inside the frame? Are there any particular settings that I need to adjust in framer? Thanks a bunch.
this is awesome
thank you
Appreciate the chat!
Thank you In the setup
@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?
Great!
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
When I create a new section the new section will not go to the next section below but instead stays in my hero stack. How can I make the new section that I create stack under the previous section vertically? Please help, thanks.
Love it
Thank you for your course, but nobody shows how to use the Framer code and integrate/deploy on a hosting service/headless CMS !!!
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!
You use blobs for your backgrounds yes?
Yep they are blobs
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?
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 😭
I am not getting or seeing any animations on the Spline URL #1
Curious to know how you made that hover state fade-in transition on the 'Click to view in 3D' button
Webflow vs Framer which you recommend?
If you're used to Figma, Framer be extremely familiar. I love that it's using the same concepts for stacks, components, text styles, plugins, etc. By that extension, you have more creative freedom and can design from scratch.
Webflow is more a web builder, meaning that you're implementing an already-made design with direct CSS concepts, which sometimes can be hard to understand to designers who's never done CSS.
Both are good options.
thanks for amazing and useful video!! I need a little help. Can you update spline URLs again:) ?
great stuff - anyone know how we access standard web fonts, Arial, Verdana etc?
The DropBox link doest seem to work anymore.
Hello, the dropbox link have been updated!
Great video! Can we edit breakpoints separately, or if I add / remove an element in one breakpoint it automatically reflects in others?
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.
Hello great course not able to copy paste spline url for bg
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.
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! :)
Hello, can you help me, the assets link doesn't work for me?
Hello, the dropbox link have been updated!
amazing
Thank you!
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 don't understand why my framer project doesn't have "background blur" effect, can you help me to explain it?
same. I feel like it works for the most part except the Mobile Menu background blur. Even after publishing, it still didn't work. Any idea, @DesignCode?
@@minhpl also not working for me
Yeah it works for the top bar but not for the mobile menu, even with the site published, any adea why ?
@@minhpl same for me
same here
Framer have a feature “export the site” or something else ?
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! 🥺
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!
Pls guys how do u add a new section with the +Add section button
Qual é a média de preço de um site desse modelo?
Will client pay as much a for webflow??