One thing about me... when I come across invaluable videos such as this one, I throw them straight into my play list... then subscribe and hit the bell icon.❤😊
@@subhash4ever4u Bruhh!! It's definitely convenient to have these playlists. It can be tiring to look for these videos in the history list as they pile up, especially if you use UA-cam a lot.😅
I'm almost half way through this and man, I am really enjoying the pacing and the clarity at which you are teaching. Great job man! I hope you continue with these awesome tutorials! Thank you so much for sharing this level of quality FOR FREE! I dont have to spend $600 bucks to learn the basics, you really are a shining star of what its like to be a giver of knowledge.
Wow! This is one of the best Framer tutorials by far! Pretty complete, well-paced, and explained perfectly! Thank you so much for giving us this for free! Hopefully Framer supports you even further so you can go into detail with more tutorials specially CMS and custom coding for those of us that come from design background with absolutely no idea of coding... LOVED this! Also, thank you so much for giving us a tutorial with a full-screen! I think there is a trend of people making tutorials (even Framer does this) with the useless desktop background taking up some important realstate of the screen, so thank you so much for making it trully feull-screen! Best 4 hours spent in learning! Thank you!
After completing four hours of this learning gem, I feel accomplished. It took me over a week to go through the tutorial, and it was truly beneficial in enhancing my Framer journey. A big shout out to Designcode for putting so much effort into creating these excellent tutorials. Looking forward to seeing more of this quality content.
I got heaven in the world of web designing and website making after seeing the god level video 🤯. A lot of huge respect brooo. I have no words to pay you heartful❤ respect. Keep up your crearivity. 👍👍
Being a webflow usr I'm obviously constantly comparing the two in my mind, I do think I'll use each one for different use cases but still. I'm 2hours deeps and thus far the big framer Ws are undubitably the ease of creating and visualizing components and animations.
About time, a brilliant tutorial on Framer, concentrating on the editor & the tools being used and not flickering back & forth to the presenter like the crappy Framer Tutorials on their web site..... A big thank you. I don't normally like & subscribe but you have my vote....
@@turzokhan2701 WTF are you going on about, isn't it obvious I liked the video by my comment and whether I give it my vote or not is FuCK all to do with you, muppet.
Nearly done with the course and this is one of the most amazing courses I've ever seen. I love the video style (how it was edited, the zooming in and out etc) and the tutor does a pretty good job with pacing and explaining. Great work guys. Thanks.
çok çok teşekkürler...mükemmel anlatım...ve çok iyi hazırlanmış eğitim...hiç aklımda yokken ,adını bile duymamışken,framer eğitimini tamamladım sayenizde...ve artık bu güzel platformdan da devam etmeliyim diye düşündüm... manuel olarak altyazı eklediğiniz için ayrıca teşşekkür ederim.(bu şekilde İngilizce bilmeyenler otomatik çeviri ile videoyu kendi dilimizde de anlayarak izleyebiliyoruz)..
@@DesignCodeTeam Going to the final site though , it does load slow , and I'm on an m1 mac , I don't know what the issue is, but the home page is laggy, and all the animations are laggy, would you happen to know what the issue is ? The design is very beautiful though .
Great tutorial!! For some reason my framer doesn't show the measurements when I'm moving objects around. it'll only show if theres even spacing between objects or where the snap to grid areas are as I'm moving things around. Any idea on how I can see the spacing as I'm moving objects around?
"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? Thanks for any insights!"
You skip the part where you created the subtitle part, when I am creating the body style for the subtitle, it's line height is getting bigger, though I set it to 1.5. Please help me with that.
Thanks a lot for the course sir ❤️💥 And Sir please can you make a video on explaining about the pricing plans of Framer. I'm confused like do i need to pay $8 for every website i make ? Or do I've to pay $8 for a month and can create unlimited number of websites in a month
You only pay for websites that you intend to publish beyond the limitations, such as collections, visitors, without framer logo and so on. Otherwise all websites are free to create.
Use the ALT/ OPT key on your system. Depending on the type of PC you use. So you click on one element, place your mouse over the second element and press the ALT/OPT key, the distance will show up in the pink numbers. Dunno if this is too late
I had an issue with the hamburger menu. I have tested the website on my mobile and when I would likte to open the burger menu it needs double tap to open. When I tap once it doesnt respond. Can you help me?
Depends, I think Relume has many features that Framer wouldn’t be able to replicate such as site maps and wire framing by AI. But for designs, if it can make it to Figma, you can bring it to Framer easily.
Important question that I can't find. Any project I am creating, is it personal or visible to everyone or anyone? Also a free pricing project, is it personal or visible?
when you move elements how do you get the pixels to next object showing up. For example you aligned everything to the left and moved it to 60 from the edge but I can't get the pixels to show up for me as I move elements
Unfortunately, the final site is laggy and unoptimized. Following the template is good for a learning experience, but don't try to mimic the final product here. Otherwise, good tutorial that hits on various parts of Framer. Just don't be the person that goes overboard with animations and effects.
Hmm I tried on an old iPad and it’s still smooth. It’s not as simple as not to do it but to learn performance is actually a very good skill. We still need to compete. But I agree that many parts are experimental and optional.
Thanks for this course, but I have a problem: When I am moving elements around, I can't see those numbers of pixels, so I can't move something EXACTLY 20px apart from other element. Am I doing something wrong?
I really appreciate the course! Quick question: Is it normal that the animations are more laggy in Safari vs Chrome? Is there something we can do about it?
I think the hexagons part is a bit heavy due to bg blur. maybe there are too many shapes. I'll investigate in Safari. Browsers react differently to techniques.
While they’re similar, Figma is a lot more mature as a design tool, with deeply integrated features like variables, styles, components, prototyping, etc. Framer has similar features but really made for publishing websites.
Hi, thanks for great tutorial. I am having a problem in creating the components of the lists. Create component option is not showing on menu. Can anyone help? at 2:23:09
@EmpoweredLady • 2mo ago At 2:23:05, if you cannot create a component by selecting the 3 content stacks, first select all 3, add frame, then add component, and voila!
One thing about me... when I come across invaluable videos such as this one, I throw them straight into my play list... then subscribe and hit the bell icon.❤😊
very happy to take that precious space in your playlist
That's what i too do😂
i do that too🥹
I did that.😅 special playlist of selected courses from this channel so that I won't miss it again.
@@subhash4ever4u Bruhh!! It's definitely convenient to have these playlists. It can be tiring to look for these videos in the history list as they pile up, especially if you use UA-cam a lot.😅
I'm almost half way through this and man, I am really enjoying the pacing and the clarity at which you are teaching. Great job man! I hope you continue with these awesome tutorials! Thank you so much for sharing this level of quality FOR FREE! I dont have to spend $600 bucks to learn the basics, you really are a shining star of what its like to be a giver of knowledge.
Your feedback is incredibly motivating, Jadan. Makes my day. Thanks for the support!
It's amazing that education are free on UA-cam
Wow! This is one of the best Framer tutorials by far! Pretty complete, well-paced, and explained perfectly! Thank you so much for giving us this for free! Hopefully Framer supports you even further so you can go into detail with more tutorials specially CMS and custom coding for those of us that come from design background with absolutely no idea of coding... LOVED this! Also, thank you so much for giving us a tutorial with a full-screen! I think there is a trend of people making tutorials (even Framer does this) with the useless desktop background taking up some important realstate of the screen, so thank you so much for making it trully feull-screen! Best 4 hours spent in learning! Thank you!
Wow, thank you for taking the time to write such a lengthy comment. We will make sure to do more tutorials like this at fullscreen resolutions!
After completing four hours of this learning gem, I feel accomplished. It took me over a week to go through the tutorial, and it was truly beneficial in enhancing my Framer journey. A big shout out to Designcode for putting so much effort into creating these excellent tutorials. Looking forward to seeing more of this quality content.
Wtf!! This timing couldn't be better. I just finished watching your other 2hrs tutorial and it was AMAZING!
sounds like you're having a good time. enjoy the new one!
@@DesignCodeTeam yeah you're the best teacher in my opinion when it comes to framer1
Any no-code framework without source code export is simply a deal-breaker.
Does this have source code export or no?
@@takethedamnphoto no it doesn't
for you maybe
I thought framer had a built-in export to React.
Can you give me examples of such frameworks that lets you export the code?
At 2:23:05, if you cannot create a component by selecting the 3 content stacks, first select all 3, add frame, then add component, and voila!
I got heaven in the world of web designing and website making after seeing the god level video 🤯. A lot of huge respect brooo. I have no words to pay you heartful❤ respect.
Keep up your crearivity. 👍👍
Wow, thank you!
one of the best tutorial/courses I've watched in general!!! great length, depth, story arc and so on. Just awesome
I learn a lot from watching this one. Thanks! I tried Framer today.
glad it helped you! thank you for watching
Being a webflow usr I'm obviously constantly comparing the two in my mind, I do think I'll use each one for different use cases but still. I'm 2hours deeps and thus far the big framer Ws are undubitably the ease of creating and visualizing components and animations.
I’m honored that you watched this far as a long time webflow user!
This is the best Framer course on the UA-cam. Well structured, easy to follow and pack with invaluable information. Thank you so much for your effort!
Awesome content - there are lots of short Framer clips about specific tasks, but this one is a whole new level of knowledge.
Yes and the short clips are pretty useless when you dont have something like this.
Thank you for this awesome course and for explaining step by step! 🤩
Glad it was helpful!
Just upgraded my workspace into Basic! This Tutorial really inspired me and help me get into framer! Thank you so much!
so awesome to hear!
I am in love what I have created! Thanks a lot for explaining step by step :)
That’s the dream
Thank you for making this tutorial.
Ngl, You are doing charity work.
We spent so much time on it, so glad it's helpful!
About time, a brilliant tutorial on Framer, concentrating on the editor & the tools being used and not flickering back & forth to the presenter like the crappy Framer Tutorials on their web site..... A big thank you. I don't normally like & subscribe but you have my vote....
no one needs your vote here..if this was even little bit benificial then you must like this video
@@turzokhan2701 WTF are you going on about, isn't it obvious I liked the video by my comment and whether I give it my vote or not is FuCK all to do with you, muppet.
Nearly done with the course and this is one of the most amazing courses I've ever seen. I love the video style (how it was edited, the zooming in and out etc) and the tutor does a pretty good job with pacing and explaining. Great work guys. Thanks.
Wow, that means a lot. Thanks so much for leaving such a comment!
Can’t wait to finish this video. Thank you was waiting for this 👏
Mind blowing. I have got the treasure. Only thanks isn't enough for you.
you are a gentleman. just by watching it means a lot.
This video awesome, I love it. I want to learn webflow. I want your tutorial on webflow
second request about webflow today. we'll do what we can.
çok çok teşekkürler...mükemmel anlatım...ve çok iyi hazırlanmış eğitim...hiç aklımda yokken ,adını bile duymamışken,framer eğitimini tamamladım sayenizde...ve artık bu güzel platformdan da devam etmeliyim diye düşündüm... manuel olarak altyazı eklediğiniz için ayrıca teşşekkür ederim.(bu şekilde İngilizce bilmeyenler otomatik çeviri ile videoyu kendi dilimizde de anlayarak izleyebiliyoruz)..
Exactly what I was looking for! Bought the Framer & Figma design system and absolutely love it
incredibly grateful for your support!
bro dropped the best youtube tutorial and think we wouldn't know 💥💥❤🔥
Appreciate that!
This is the best Framer course on the UA-cam. You are so amazing!
Wow, thank you!
This was exquisite, thank you DesignCode. This free course would typically cost a lot
Glad you liked it!
You are amazing, you explain impeccably, much appreciated, much love!
have you completed the course? how's your progress now
Loved it. Covered almost every aspect of FRAMER. Thanks for the buttery smooth 4hrs + long video.❤
wow, did you already finish it?
@@DesignCodeTeam Yes👍
damn, that was fast
What other concepts do you think one should cover? I will be watching this video today
Best teacher🚀
Thanks for the big value! However can we do everything inside this course with the FREE plan?
This course is amazing. Thanks a lot!! ❤.
Though I have a question: do I need a workspace plan to use a site plan?
Wow...amazing video. Starting now.
You got this!
I just saw this and I just have to subscribe FAST!
Finally you uploaded a Video after Centuries
now I feel old
@@DesignCodeTeam You should 😅 You left us starving for the whole 5 months
Are you going to update the app?
@@oratilemoagi9764 Ah, but I did release DesignCode UI during that time too. I'll be more focused on content now. More courses coming!
Excellent 🤗I liked n subscribed then watched and am not disappointed 😮
Thank you for being a new subscriber!
Absolute legend , I love this channel , better than flux , or design course , this is the best UA-cam channel for framer developers !
Wow, thank you!
Once you understand coding its still better to code, you can manually control so much aspects of an website.
@@DesignCodeTeam Going to the final site though , it does load slow , and I'm on an m1 mac , I don't know what the issue is, but the home page is laggy, and all the animations are laggy, would you happen to know what the issue is ? The design is very beautiful though .
Hello friend, congratulations on your work, you explain it clearly and calmly, you gained another subscriber...
Can you also do one on each one of the nocode tools like webflow?
Webflow, Framer and Wix Studio?
@@DesignCodeTeam that would be amazing. There’s also flutterflow. But you can just do whichever you want. They would all greatly be appreciated
Thank you for this amazing video. Your past video really helped me Kickstart my framer journey.
Can't wait to see the value that this video holds💯💪🖤
Glad it was helpful!
I'm way more interested in this figma file than framer 😮
Thank you so much! ❤ Best UA-cam recommended video
nice, good to see that we got recommended!
AMAZIIIIING course thank you so much!!!!
Imma just mark where I'm at so I remember it hh
1:41:20
Would you recommend Framer over Webflow? Should i switch to framer?
it depends how similar you want your web dev tool (framer or webflow) to be to your design tool (figma). framer is a lot more similar to figma.
Great tutorial. Thanks
Glad you liked it
Dangg bro. This tutorial definitely i was lookin for🫶🏼🫶🏼
It was very helpful. Thank you.
Great tutorial!! For some reason my framer doesn't show the measurements when I'm moving objects around. it'll only show if theres even spacing between objects or where the snap to grid areas are as I'm moving things around. Any idea on how I can see the spacing as I'm moving objects around?
Love the way you explain it
Thank you so much for this Meng, the 4 hours was worth it...great content.
Glad you enjoyed it! Thanks for being a subscriber!
Thank you 🙌 Awesome course.
thank you! did you finish it already? :)
@@DesignCodeTeam Sure did, watched it in 2 sittings. High quality content. 💯
🗣️ I don't know why you have only 287k subs. You must need millions of subs after uploading such an informational and useful video like this one.
"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? Thanks for any insights!"
5 star world class
You skip the part where you created the subtitle part, when I am creating the body style for the subtitle, it's line height is getting bigger, though I set it to 1.5. Please help me with that.
This is awesome! Thank you!
You're very welcome!
Bro I was searching for something like this, I thank you from the bottom of my heart, please keep posting valuable content like this 😃😃🥰
Happy that this is helpful!
finally designCode is backkk!!!!!!
good to be back. already working on the next one.
Its like the Framer communtity is building new jobs and perspectives better than the gov. :P
Thanks a lot for the course sir ❤️💥
And Sir please can you make a video on explaining about the pricing plans of Framer.
I'm confused like do i need to pay $8 for every website i make ?
Or do I've to pay $8 for a month and can create unlimited number of websites in a month
You only pay for websites that you intend to publish beyond the limitations, such as collections, visitors, without framer logo and so on. Otherwise all websites are free to create.
@@DesignCodeTeam okay sir for example if I had to make 4 websits for clients in a month then I've to pay 4 times right?
33:23 How can you check the pixel distance between elements? It doesn't show up neither I dragging or using arrow keys.
Use the ALT/ OPT key on your system. Depending on the type of PC you use. So you click on one element, place your mouse over the second element and press the ALT/OPT key, the distance will show up in the pink numbers.
Dunno if this is too late
@bisolaahmed1003 ya i figured it already but still thx, maybe someone else will need it!
Framer just added styles for shadows, and others. Will you be updating the framer design system?
Hey, great video! What is the screen recording/video editing software you use for these zooms and enhanced mouse curser?
I had an issue with the hamburger menu. I have tested the website on my mobile and when I would likte to open the burger menu it needs double tap to open. When I tap once it doesnt respond. Can you help me?
By the way, when I add an overlay to the Hamburger, Show On is click for me not a tap.
Veryy good tutorial here. Thanks! Also, can you share your DesignCode UI figma file?
the figma file is in the description: www.figma.com/community/file/1349410423606748407
@2:23:14 I am unable to create a component by selecting all 3 content layers. Something is missed from my end? Please help
Thanks for the great tutorial. What tool did you use for the screen recording? Would love to use that too and have seen it now a couple of times. :)
Thanks for this valuable content ❤❤❤
amazing thank you so much.
Should I use Relume with Framer, or does framer accomplish everything Relume would do?
Depends, I think Relume has many features that Framer wouldn’t be able to replicate such as site maps and wire framing by AI. But for designs, if it can make it to Figma, you can bring it to Framer easily.
@@DesignCodeTeam thank you
I am waiting for your next video figma to webflow ..
Third request about webflow. We'll do what we can.
How come my framer program is running so slow, the fps is so bad. Please help
the stack thing in framer is soo annoying, cant even move stuff because of that, love your vid!!
moving items in a stack should work? thanks for watching the video!
Important question that I can't find. Any project I am creating, is it personal or visible to everyone or anyone? Also a free pricing project, is it personal or visible?
are will to crate another design in figma
when you move elements how do you get the pixels to next object showing up. For example you aligned everything to the left and moved it to 60 from the edge but I can't get the pixels to show up for me as I move elements
Unfortunately, the final site is laggy and unoptimized. Following the template is good for a learning experience, but don't try to mimic the final product here. Otherwise, good tutorial that hits on various parts of Framer. Just don't be the person that goes overboard with animations and effects.
Hmm I tried on an old iPad and it’s still smooth. It’s not as simple as not to do it but to learn performance is actually a very good skill. We still need to compete. But I agree that many parts are experimental and optional.
I made some fixes, so hopefully it's better. Are you on Chrome or another browser?
What a great course
I have used the remix link and the website is too heavy on my devices 😳!
What is the best specifications to work on 3D projects?
you are my guru Masta
i think its just static right we can not add any functinality for signin and signup logins ??
Oh GOD! This is a tressure
Thank you. Ultra helpful 😉
You're welcome!
It was amazing!
Amazing ! Thank you DesignCode and thank you Framer ! That shit is just crazy ! Love it
Thank you
You're super welcome. Thank you for leaving a note.
Thank you guy's
looking forward to hearing your thoughts!
How can we add scroll to top floating button?
Thanks for this course, but I have a problem: When I am moving elements around, I can't see those numbers of pixels, so I can't move something EXACTLY 20px apart from other element. Am I doing something wrong?
Have you tried holding the option key to see the distances?
🔥🔥🔥🙏🏻 Thanks, man!
Hi, pls can I install plug-in on free framer plan. I don’t seems to find the option here
I really appreciate the course! Quick question: Is it normal that the animations are more laggy in Safari vs Chrome? Is there something we can do about it?
I think the hexagons part is a bit heavy due to bg blur. maybe there are too many shapes. I'll investigate in Safari. Browsers react differently to techniques.
bro if you can share de spline hexagons background animated blue, so I can remix it! I would really preaciated :)
can you create a portfolio
Question: If framer is like using figma? why would you start in figma first?
While they’re similar, Figma is a lot more mature as a design tool, with deeply integrated features like variables, styles, components, prototyping, etc. Framer has similar features but really made for publishing websites.
when open in chrome browser. it is laggy on dashboard page (home page).But in safari it is good
Ah interesting. Is it from the top of the page? I'll test some more
Hi, thanks for great tutorial. I am having a problem in creating the components of the lists. Create component option is not showing on menu. Can anyone help? at 2:23:09
@EmpoweredLady • 2mo ago
At 2:23:05, if you cannot create a component by selecting the 3 content stacks, first select all 3, add frame, then add component, and voila!
How can I learn UI/UX and coding from scratch?
just starting the turorial, i clicked on the final website and the site is very buggy...the scrolling lags or something. good work tho
Can you tell me if every page is like that or some of them? Thanks!
I did some improvements. Let me know what browser you're using. That'd be helpful!
@@DesignCodeTeam The scrolling is still lagging. The design looks so good but the experience is bad.
i use brave browser, just tried it on safari, was much better@@DesignCodeTeam