WP Tutorials

Learn Framer in 20 Minutes (Crash Course)

Learn Framer in 20 Minutes (Crash Course)

Clone our Figma project to try rebuilding it using Framer yourself:

Our full Framer Course: https://bit.ly/3XS8Pi3

Create a new Framer account: https://www.framer.com/?via=ransegall

In this tutorial I’m going to teach you the basics & fundamentals of Framer. So you can customize and build whatever you’d like to build for your projects.


00:00 – Intro
00:13 – Project Overview
00:44 – Building in Framer
01:08 – Framer Components
04:25 – Layout Setup
06:30 – Ready Made Components
07:30 – Stacking
10:47 – Adding Effects
13:00 – Frames
16:19 – Buttons As Components

🎨 FREE RESOURCES FOR DESIGNERS 👉 https://bit.ly/3vl6UZr

📱 Find us on SOCIAL MEDIA
Flux Academy’s Instagram 👉 https://www.instagram.com/flux.academy/
Ran’s Instagram 👉https://www.instagram.com/ransegall/


Comments (39)

  1. Bro how to get only burger images like you used in this video in high quality

  2. Really helpful tutorial! One small improvement to make it even better would have been to put the video of you in the bottom left side of the screen as it blocks some of the panel hiding info.

  3. Wow, thanks for sharing this! How come you created two frames within the big green frame? Couldn't you just add the text on both sides as is?

  4. how did you got to spply motion text where's the option to access it

  5. doesn't know how to say beige either it seems.

  6. Thanks!

  7. so thank you man realy

  8. Where can i find SPPLY(((

  9. that is sooo useful

  10. fonts are not setting

  11. Thank you

  12. How can I make this responsive and publish on web?

  13. How did he open the section with the motion text in it?

  14. this framer tool is for making page content only?

  15. the figma file link is not there

  16. My god that's amazing! Just 20 minutes, but looks wayyyy better and cleaner than the 100 hour portfolio you did. I think I finally need to try Framer!

  17. Hi,
    Appreciate the work you are doing sir. But when I try to apply the transition effect on the login button, it does not show up. I would be grateful if u help me out with this.

  18. the tutorial is good, but i am having a hard time finding the same menus on my framer 🙁 not even the text options for different fonts HELP

  19. That was a very good Video We need full UI design to website deployment video please…. And you got one more subs

  20. really liked this video. just one quick suggestion, it would be helpful if you could move the video circle on the bottom right towards bottom left, especially when there is content on the right, so that it doesn't cover it up. thanks a lot.

  21. Thank you so much! What a great introduction to Framer. (I have no idea how to use it!) Your vdo is SUCH A GREAT HELP! Thanks A LOT!

  22. Nav menu doesn't show anymore on new version ::(((

  23. you can't learn framer in 20 minutes

  24. Amazing Video! Iam currently making my websites with elementor but was thinking of exploring other editing and design tools. Thanks!

  25. I am not receiving any mail please check whats happening

  26. love it! please make more videos with the following pages of that one

  27. You did not edit the navigation texts. e.g. Framer to Burger heaven. I see this is not editable in Framer.

  28. Why is there no button when I search for it. In fact, there’s a lot missing when I search for them. Is this some extension/plugin. If so please tell me what it is so I can use it

  29. Can I export framer design to html and css ?

  30. Great video pal but maybe put your commentery video to the other side of the editor so we can see the pannel you are clicking on to change things….

  31. Thanks!

  32. Why does when I paste the text into the motion text, it doesn't form multiple lines, it just went straight on. No matter what I tried, it doesnt work.

  33. Hi great video! I just started working with framer and got to watch your video. But i have a rather simple question…I can't seem to find 'spply?' Can you help me find it?

  34. I dont have the navbar that you chose from the ready made navigation bars? i know its a year old tutorial but is it possible to still find it?

  35. Stupid question but when I introduce Motion Text, the text never wraps and always overflow. How come? On your video it automatically wraps, i can't find how to change it.

  36. When i want to change the text of the motion effect it doesn't resize the box. So my text just gets cut off. How can I help this problem?

  37. Hi! Thanks for the amazing video! Please advise is there a video about making the design responsive in Framer?

  38. The figma file i requested didn’t arrive in my email??

Leave your thought here

Your email address will not be published. Required fields are marked *

Enable Notifications OK No thanks