Learn Framer for Beginners in 2024 | Framer Tutorial

⚡ Get 3 FREE months on a Pro annual subbie!

⚡️ Timestamps:
00:00 - Introduction to Framer
02:07 - Framer ecosystem
04:59 - Framer dashboard overview
06:35 - Portfolio design we will be building
07:05 - Framer workspace overview
14:20 - Let's start building
25:00 - Framer Collections (CMS)
36:40 - Building responsive views in Framer
41:48 - Framer effects

---

Become a highly-demanded Product (UX/UI) designer with me:

Master Figma with my Ultimate Figma Design Masterclass (6,800+ students)

Practical UX Research & Strategy Masterclass (700+ students)

Shipfaster UI - Advanced Figma Design System (3,000+ designers)

Outline - Figma Wireframe Kit (500+ designers)

Follow me on IG (Daily updates):

---

Follow and learn with me:

[Mizko]

I'd love to hear your thoughts on Framer 👀

⚡Get 3 FREE months on a Pro annual subbie!

[kareemmagdi]

I’ve switched from Figma to Framer when it comes to web design. It’s extremely similar to Figma’s interface so its really easy to transition to. Also instead of prototyping in Figma, its now very easy to do so in Framer and publish your website

[MichalCilekAI]

Hi Mizko, thank you for a great video explaining how to use Framer the right way to its full potential. It helped me figure out a lot of the concepts. I work with a lot of images and text, so it needed a lot of alignment, etc. Now I understand perfectly how to do it. I can tell you one story: I was presenting at WeWork, Prague to 20 entrepreneurs from different areas. I made a comparison of 10 tools, which can build your web using AI.
And Framer was one of them. I entered the same prompt for all tools. What amazed me was that the 20 people in the room unanimously selected the Framer version of the web (and I liked it most as well). This is quite important to know, as these people were from different areas of international business from all over the World. Thank you for your great tutorial, I appreciate it.

[framerwme]

Love to see you putting Framer on the spotlight. I’ve been following you for a LONG TIME. As a newly Framer Junkie, thank you!

[millidesignux]

Thank you Mizko! You made this super easy to follow and I think the CMS feature is so awesome! Excited to dive deeper into Framer's capabilities 😍

[HallyuDan]

Exactly what I needed today. Enjoying Framer so far, and the best man for the job is creating a 46 minute video about it! I completed the Figma masterclass, so I knew this was going to be good ;). Excellent communicator.

[naveenm]

much awaited.. we need a series from mizko on Framer tutorials

[just_a_guy_]

This demo is so easy to follow along, create something realistic, and gain a lasting understanding. Please keep it up Mizko!

[OluwatunmiseAdetayo]

This was very insightful, I love how you take your time to explain everything in detail gradually👏👏. As someone who is very familiar with Figma I’m so glad the interface is very similar to Figma.

[damilolabello]

Thank you so much Mizko.
I'm definitely a die hard fan of yours.

Unfortunately, i have been trying to get into framer for the past one month now but it just keeps getting difficult for me but with this video, I'm sure to follow through and learn alot while I build alongside with you.

I am really hoping to join your Designership class someday.

Thank you so much Mizko❤

[xMUSiCLiFx]

I've been spending time on Framer, this video came just in time!

[Becominggina]

Thank you for this Tutorial. I found Framer by accident and decided I will use this platform for my artist portfolio!!!

[FeelinErie]

Thank you so much for this tutorial! I had been struggling with getting the responsiveness and fit/fill parts right for an embarrassingly long length of time. Now I understand 😊

[agungjp]

Thank you Mizko, can't wait for another video talking about framer 🔥🔥🔥

[deletingmychannel]

I love the tutorial, thanks for making it! Framer is an amazing tool so far, I like it even better than Figma. I started out designing websites in Photoshop back in the day and I'm amazed at all the new tools now a days. I can't wait to try to create a template page for my portfolio website, that way I can add new projects to my website via a CMS, rather than copying pages over and over.

A few things I noted that I'm curious about, first is I wonder if I can design for mobile-first, then create my tablet and desktop views, rather than the other way around like we did in the tutorial. I've always been taught it's easiest to design for mobile first.

And second thing I noted which I thought was odd, I felt like Framer was a lot smoother in my Browser, rather than the Mac Desktop app I downloaded for my Intel Mac. I'm still rocking the 2015 MBP, so that might be why lol. Still thought it was interesting it's easier in my browser.

Thanks again for the thorough tutorial!

[LightsaberPanda]

I like Framer, the only issue I have with it is that it only have two integrations.

Other platforms like Webflow and Wix Studio way more have more.

As a work around we can we can still embed other integrations with their code block feature.

Aside from that it's still easy to use

[albertomtferreira]

That's an amazing tutorial. Simple and efective. Well done!

[JohnDrach]

Interesting that it seems that Framer took a lot of design queues from Figma and Figma took some recent design queues from Framer

[pavitra]

The only video that i found easy to understand and could learn so much 😢thank you so much 🎉

[designwithmilly]

wow Mizko thanks for this Tutorial u good 😎