Learn Framer in 20 Minutes (Crash Course)

Clone our Figma project to try rebuilding it using Framer yourself:
www.flux-academy.com/signup/f...
Our full Framer Course: bit.ly/3XS8Pi3
Create a new Framer account: 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.
📽️ CHAPTERS
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 👉 bit.ly/3vl6UZr
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
Ran's Instagram 👉 / ransegall

[@designersanket]

Loved this Rann, Please create more videos on Framer! Thanks!

[@MindScape322]

Hands down the best framer tutorial ever, thank you for the awesome video and keep up the great work. 😊

[@abiodunomonijo]

Yo Flux! I just introduced to Framer a few days ago and your video is making me fall in love with it. I always like your lessons. Thank you.

[@toosharp4417]

I'm super interested in trying this platform. The UI looks clean and intuitive, with delivering functionality. Please have couple more tutorials so that people like me who wants to try Framer, can learn more from you.

[@peacefull_moment]

WOW!! You are an awesome at teaching! My husband just introduced me to using Figma & Framer. This is my first tutorial. I have no background in web building but have only played around with building on the very limited Google Sites (haha). But you made me feel like I can do this! SUPER EXCITED!

[@travelsizearchitect]

Definitely would appreciate more framer tutorials

[@andriyand__]

this introduction video about framer just makes me so excited and want to learn more. Thank you!

[@romaincarreau388]

great video Rann !! i want more content on framer for sure ! keep it up man !

[@vkayhere]

The best Framer intro ever. Thank you for this and please do more!

[@piotrgorski1945]

Great video Ran :D Thanks! I'm planning to deep into Framer to be able to create more realistic prototypes. Definitely, please do more content with this software ;)

[@iamshirleyt]

Would love to see more. I stumbled across framer and think it would work great for certain client projects

[@danieldey]

Really helpful and really nice tutorial at perfect pace! Thank you.

[@design_with_akshay]

Thanks Ran I loved this, please go on and create more videos on Framer.😊

[@mariejae92]

since i wasnt sure how to use figma, this also just helped me understand both!! sooooo much easier and better than webflow. everything against my eyes is also much better. thank you !!

[@TobiasKarnetzke]

I tried Framer a few weeks ago. It definitely has potential. I hope they expand the CMS features and make it more powerful.

[@cherrygail]

Thank you so much, Ran. Please upload more tutorials about Framer😊

[@cabansayjondaniel2186]

THIS IS A HUGE HELP FOR ME! AS A Newbie in creating a webpage using javascript, this is the easiest one!

[@jesper.wiklund]

Awesome Ran, thank you so much for the intro !!

[@scottcitron]

Framer looks very promising. I look forward to more videos. Thanks, Ran.

[@kkanakan10]

So happy you use Framer! Discovered it last year after learning Webflow. Love the Figma to Framer feature the most. Can’t wait to learn more from you 🙏🏾

[@syed.simanta820]

Did u get luck on selling templates?

[@michaelbruzzese]

best Framer tutorial so far online! It would be really cool if you could make a series about building websites on Framer

[@VisualsBySaleh]

I'm searching so many tutorials on KZbin clear and to the point tutorial about framer but know my favorite channel has done this job for me haha 🎉

[@adebimpeomolaso]

I also make content around framer too.

[@VisualsBySaleh]

@@adebimpeomolaso ok ok

[@katoetonic]

Wow! Great video. Framer is a game changer for building responsive website fast.

[@SriPranavSrivatsavai]

Would be interested in more videos on Framer! Great content!

[@MultiSciGeek]

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!

[@user-lh8wj2uf3c]

Great tutorial Rann! Thank you! Cheers from 🇲🇽

[@TerenceKearns]

That was cool. Probably a good idea to put the PiP of yourself in the lower left so it's not obscuring half of the clicking in the tutorial. Hope this helps.

[@prajeeshp9203]

Great video Ran thanks! this is very helpful to learning Framer very easy

[@danielagarcia191]

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

[@carolsolangyjimenez9020]

WOW it was amazing! Thank you! I learned soo much!!

[@13CreativeStudio]

love this. Thanks for this easy tutorial.

[@samueljwalter]

I am definitely interested in learning more about Framer. I do ultimately want to learn Webflow, but this feels like an easier entry point at the moment. Also gets me into Figma a little more which has been helpful.

[@clovermk1635]

same feeling man!

[@busimo]

why would you want to "ultimately" learn Webflow? lol. It's just a more difficult site builder.

[@jasonhebert1656]

Now that I’ve messed around more with framer I don’t really see how it’s any easier. It’s more or less the same once you start using proper layouts with containers. Don’t just use the blank canvas and drop things in Willy nilly, it won’t look right as the screen expands. The infinite canvas is dope as fuck though. Having your layouts right beside each other is sweet. But fundamentally if you get this it’ll take you no longer to get webflow

[@jasonhebert1656]

Webflows cms, logic, and code export are worth it alone. You can build much more robust sites that will ultimately earn you more money as a designer.

[@fizz1862]

same feeling man!

[@leandrosilva6414]

Thanks! i was looking for something like this! Cheers!

[@oldgenx]

This was super helpful! Thank you!

[@suman121069]

wow it was amazing, Please create some more videos about Framer. Cheers 🎉

[@talhasaeed]

framer is so cool and loved the UX, easy peasy!!!

[@melvinmartignac5846]

I was about to learn Webflow, but i discover Framer thanks to you. The interface is much more ergonomic, and so it really hype me. Please do more tutorials like this, i follow you !

[@jasonhebert1656]

trust me, coming from Webflow this is super limited and frustrating. It's missing so many little things that Webflow is amazing at. It's worth your time to learn

[@feelcollins4358]

@@jasonhebert1656 I have a feeling Framer will have a higher potential in the future though so it's worth learning it now

[@PeterSather]

​@@jasonhebert1656 Like what? I've spent a ton of time trying to figure out some things in webflow and was so frustrated. What things is framer missing exactly?

[@RodolfoFigueira]

Great video, thanks! Please more on Framer!

[@uddlivewell]

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!

[@FluxAcademy]

Glad it was helpful!

[@_kr001_]

Yes, more Framer videos please. Thank you!👊😉

[@sebastianhuidobro3319]

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

[@Framer]

Great video! 😍

[@kaytomascom]

great video! thanks. Framer looks interesting

[@thisispierre]

Great video, now I get it!

[@siddharthponnapalli4346]

Great Video Ran! Lovely video to understand framer. I'm also interested about the font you use for your videos.

[@framer.university]

Great tutorial!

[@johncitizen8828]

Came for the Framer, stayed for the Browney. Excellent crash course Ran - thanks! 🙏

[@julianarosato2705]

Thanks! love your tutorials!

[@FluxAcademy]

Glad you like them!

[@estershirabarak5747]

Thank you! great movie!

[@designerraptour]

Thanks!

[@soorkie]

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.

[@taitaitai4270]

Thank you

[@SimphiweMangole]

I would gladly pay for a framer course by you. We really need one.

[@SatyajeetMohanty11]

Hey, thanks for making this video! Really helps. One quick feedback - it would be great if you could have your video on the left hand side while working so that the right panel view is not obstructed

[@shamulipore3830]

True, so many details were hidden because of it and also it was too distracting.. there's so much blank space on the left he could have used..

[@Tola_io]

Wow! Are my eyes deceiving me Ran made a framer tutorial who would have thought

[@Hoopstown39]

Awesome man

[@user-iv9mj4oz6p]

Thank you very much

[@theado3183]

Your video is easier to understand than Framer's tutorial. Thanks so much!

[@FluxAcademy]

Appreciate it! thanks

[@BugsVsHumans]

Is Webflow scared that they have a strong competitor? I hope Framer maintains the hype. Please make more videos on Framer.

[@gabriellachristinakandinat1925]

Hi, I'm wondering for designs that have more than just 1 page, how do we set a flow from the initial page to the another page? thanks!

[@_aaaadam]

best tutorial for framer tks！！

[@olhaovcharenko1663]

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

[@stenloo]

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?

[@Lmachine1]

I'm loving this video, my only request is that you put yourself on the bottom left of the screen so that the menu on the right isn't covered up!

[@muhammadtalha6870]

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

[@satochy]

Keep going!!! Feed me more 😤🤲

[@caleb3771]

That's a badass Figma design

[@jamesrory2832]

Love this! Can you give us the link to this particular example you did? I want to go and see and feel the website Thanks

[@user-ky3zi7yi8r]

This was really helpful Ran thank you, but I can't seem to find my way to the spply tab/screen for motion text that you displayed, please help

[@dhruvakumar5826]

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.

[@suniljadhav1889]

Thanx Bro

[@leonserra4960]

Thank you, it was more useful than framer's official tutorials for understanding the layouts 🤣😅

[@kaii456]

So with this layout concept, do we no longer need to care about 12/16 column layouts? How can we accommodate for more flexible layouts using the familiar 4-6-8-12-16 layout system?

[@adevikthur]

Let's Gooo! 💪🏽🔥

[@wperge9]

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.

[@davidju98]

Is there any usecase in which you prefer framer over webflow?

[@roanjvvuuren7698]

What does one do when you want to use a custom font with the motion text?

[@user-zr8lo7xr1x]

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?

[@muneebanjamch]

From where did you open SPPLY in framer? I didn't found it anywhere

[@kaushikmitra6402]

Hi Really loved this but when to use Rows and when column? Can you show some example.🙂

[@ikechukwukanu4096]

How do I find the spply please, Great work Ran❤❤

[@mr.chinaski2613]

Awesome content, good alternative for Webflow! Neeeeed moar :)

[@calm_harsh]

that's webflow alternative?

[@CarlosGomesCabral]

@@calm_harsh Yep

[@hui975]

I want to see more! I also want to see how to publish websites

[@codelucky]

Hi there, which option is best for creating only the static Home-page and inner pages without the webapp? As I've built the webapp with React and deployed it to Vercel. And I'm thinking that instead of coding the Figma designs for home pages, I could just use Webflow or Framer to convert it without coding and easily host it. I have a designer who designs excellently on Figma. Do you think Framer would be the best choice over Webflow but I also want the micro animations and smooth transitions?

[@michaelriga6431]

Webflow - Its a lot better at taking FIGMA designs. There are plugins available for it too. Framer, not fully there yet.

[@kimcruz3889]

can you guys let me know how to MASK a shape with image in framer?? can't seem to find that simple function!

[@nawalazhar]

I can't scroll down the in the side panels. Like when I open the insert panel and want to check out the options of headers that it gives, I have to zoom out the screen to be able to see the rest of the list, I can't scroll down!

[@JedHurricane]

Perfect timing, lol I just started with framer 😅

[@sylvia1991]

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?

[@DesigningWithLaura]

Where can I find the link to Supply by Framer?

[@somsokleap3405]

Comparing about website publish between doing with Framer and Divi WordPress Builder, what do you think about these two ? Then, why do you think that way ?

[@jasonhebert1656]

also the way you say beige made me smile :)

[@TheLexGamerYoutube]

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

[@BrentLagerman]

more framer vids please!

[@cjnnemeka2267]

Nice video and Framer is a good starting point. But ultimately Webflow has an edge I feel.

[@jokeizi213]

does someone know why i can't have the same elements than him ? i can't find for the "click" button at 16:30 ?

[@iajhy]

Thanks for the content! What is your strategy to prototyping with Framer nowadays? I think they could add a toggle to web and prototyping version. I really miss it, lot of people miss it.

[@samtobin35]

Hey, I've been using Framer a little and I'm really struggling to find any UI design kits for Framer-- all the UI kits are for Figma. Why is this? Do you guys recommend that I start in Figma and export to Framer or should I only use Framer?

[@kleinteilespezi4128]

I really like this video and try to build my own page.. but can you please make a short video of how to set a link to an text and then but in some text in the new site.. thx a lot

[@ojooluwatobi6378]

Pls am currently new on framer , but am having some issues navigating the panel containing the colors, i can't scroll down and up, is there any command for this , pls kindly help, it is very frustrating.

[@wetteristschlecht]

Hi, thanks for the video. Could you possibly add one on making the whole thing responsive? I looked into the Figma plugin, so I could build it in Figma and then use the plugin to transfer everything. But I remember you mentioned that re-building the design directly in Framer has the advantage of responsiveness. Could you go deeper into that, that would be awesome🎉 thanks for your content.