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 RUclips 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.
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.
This is the best Framer course on the RUclips. Well structured, easy to follow and pack with invaluable information. Thank you so much for your effort!
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!
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.
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. 👍👍
ç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)..
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 am only 40 minutes into the tutorial, but wow, I already learned so much!!! Thank you so much for making this tutorial. I'm going to finish the rest another night when I have more time
@@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 .
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.
"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!"
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?
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?
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.
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.
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
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.
hey, Im developing the website with next js, using your awasome figma desing with some changes, My repo will we aviable for anyone. But it would be nice if you can help me with something, I need you to share the spline animates spiral blue please, so I can use it and modify, I would really appreciate it
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?
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 RUclips 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!
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.
This is the best Framer course on the RUclips. Well structured, easy to follow and pack with invaluable information. Thank you so much for your effort!
You are amazing, you explain impeccably, much appreciated, much love!
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
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!
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?
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 just saw this and I just have to subscribe FAST!
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.
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.
This was exquisite, thank you DesignCode. This free course would typically cost a lot
Glad you liked it!
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!
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!
Thank you for this awesome course and for explaining step by step! 🤩
Glad it was helpful!
Exactly what I was looking for! Bought the Framer & Figma design system and absolutely love it
incredibly grateful for your support!
Thank you for making this tutorial.
Ngl, You are doing charity work.
We spent so much time on it, so glad it's helpful!
I learn a lot from watching this one. Thanks! I tried Framer today.
glad it helped you! thank you for watching
ç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)..
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!
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.
I am in love what I have created! Thanks a lot for explaining step by step :)
That’s the dream
This is the best Framer course on the RUclips. You are so amazing!
Wow, thank you!
Love the way you explain it
Can’t wait to finish this video. Thank you was waiting for this 👏
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
AMAZIIIIING course thank you so much!!!!
Imma just mark where I'm at so I remember it hh
1:41:20
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!
bro dropped the best youtube tutorial and think we wouldn't know 💥💥❤🔥
Appreciate that!
🗣️ 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.
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!
Its like the Framer communtity is building new jobs and perspectives better than the gov. :P
I am only 40 minutes into the tutorial, but wow, I already learned so much!!! Thank you so much for making this tutorial. I'm going to finish the rest another night when I have more time
Makes my day, thanks so much for spending time learning with us!
Thank you so much! ❤ Best RUclips recommended video
nice, good to see that we got recommended!
Absolute legend , I love this channel , better than flux , or design course , this is the best RUclips 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 .
Dangg bro. This tutorial definitely i was lookin for🫶🏼🫶🏼
Excellent 🤗I liked n subscribed then watched and am not disappointed 😮
Thank you for being a new subscriber!
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!
Thank you so much for this Meng, the 4 hours was worth it...great content.
Glad you enjoyed it! Thanks for being a subscriber!
Wow...amazing video. Starting now.
You got this!
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!
It was amazing!
Best teacher🚀
Amazing ! Thank you DesignCode and thank you Framer ! That shit is just crazy ! Love it
Great tutorial. Thanks
Glad you liked it
5 star world class
Thanks for the big value! However can we do everything inside this course with the FREE plan?
This is awesome! Thank you!
You're very welcome!
Thank you 🙌 Awesome course.
thank you! did you finish it already? :)
@@DesignCodeTeam Sure did, watched it in 2 sittings. High quality content. 💯
finally designCode is backkk!!!!!!
good to be back. already working on the next one.
Thanks for this valuable content ❤❤❤
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?
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.
you are my guru Masta
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!
What a great course
"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!"
Thank you. Ultra helpful 😉
You're welcome!
Love the website , would you mind telling us how you create those UI images? Do you create them in figma?
yep and the figma file is provided: www.figma.com/community/file/1349410423606748407
Hey, great video! What is the screen recording/video editing software you use for these zooms and enhanced mouse curser?
Thank you
You're super welcome. Thank you for leaving a note.
Thank you guy's
looking forward to hearing your thoughts!
loved it
thanks for watching!
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. :)
I am waiting for your next video figma to webflow ..
Third request about webflow. We'll do what we can.
33:23 How can you check the pixel distance between elements? It doesn't show up neither I dragging or using arrow keys.
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
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
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?
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.
are will to crate another design in figma
Framer just added styles for shadows, and others. Will you be updating the framer design system?
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?
Thank you!
Welcome!
Thank you bro 👊
Happy to help. Thanks for subscribing!
thanks
You're welcome!
How can we add scroll to top floating button?
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
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
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?
amazing!!!
Thank you!!
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.
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.
I don't really understand how you designed those transparent sections copied from Figma and pasted to Framer. Is their a course on that pls?
@designcode, I need your help pls. Kindly respond to thus message.😊
Use figma to html with framer plugin
hey, Im developing the website with next js, using your awasome figma desing with some changes, My repo will we aviable for anyone. But it would be nice if you can help me with something, I need you to share the spline animates spiral blue please, so I can use it and modify, I would really appreciate it
bro if you can share de spline hexagons background animated blue, so I can remix it! I would really preaciated :)
Hi, pls can I install plug-in on free framer plan. I don’t seems to find the option here
famer websites hang a lot my brower stuck so i am choosing reactjs websites as before
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
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
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?
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!
can you create a portfolio
why you cannot follow the layout
How can I learn UI/UX and coding from scratch?
I dont know but the live example is so sluggish and freezes my browser. It this typical of Framer or what's going on?
Can you tell me what machine you have? It might be some elements, which can be turned off.
I did some fixes to improve. Will continue to investigate.
It's pretty good but can you tell me how can i export this website as html/css with assets to a zip? For uploading to cpanel or on a hosting..
not possible with framer unfortunately but with webflow, yes.
@@PascalHoareau thanks
Omg!!!!!!❤