In this 4-hour free course, you’ll learn to create beautiful, modern interfaces. Sponsored by https://framer.com

Start with dark mode and glass designs, then move from Figma to Framer, using stack and grid layouts for responsive websites. Add animations, scroll effects and custom components.

– Final site:
https://significant-nature-656376.framer.app

– Figma template: https://www.figma.com/community/file/1349410423606748407/framer-course

– Framer Remix: https://framer.com/projects/new?duplicate=nIehHcqxA4c8HTksIYKC

– Watch on DesignCode with full content: https://designcode.io/framer-web-design-intro

———-
GETTING STARTED

This course is perfect for beginners! No need for prior coding or web design experience. We’ll guide you through everything step by step, starting from the basics. However, a little familiarity with computers and understanding the basics of HTML and CSS will be helpful.

Here’s how to begin:

– View the final site to get inspired and see what you’ll be able to create by the end of this course: https://significant-nature-656376.framer.app

– Sign up at Framer to join the community and start designing: https://www.framer.com.

– Get the Remix link to dive into the design file with ease: https://framer.com/projects/new?duplicate=nIehHcqxA4c8HTksIYKC.

– Download the Figma file to start with ready-made designs: https://www.dropbox.com/scl/fi/r6914i8almfd6jgon1v34/Framer-Course.fig.zip?rlkey=08k2klxw5g7dlj2j9axuqv4x7&dl=0.

Or skip ahead using the Framer template: https://framer.com/projects/new?duplicate=nIehHcqxA4c8HTksIYKC.

– Framer Desktop App: Enhance your designing workflow by downloading the app or work directly in your browser: https://www.framer.com/downloads/.

– Framer Academy: A treasure trove of documentation at your fingertips. Visit the Framer Academy: https://www.framer.com/academy/topics/start.

– Learn Framer UI: Master the basics of Framer’s user interface here: https://www.framer.com/features/design-layout/.

———-
ABOUT FRAMER

Framer is your go-to web design tool for crafting stunning, interactive websites with ease. Designed for a smooth transition for Figma users, it boasts a comprehensive Figma plugin for quick layout imports. With a wealth of preset templates, components, dynamic effects, and even AI-powered tools, Framer is both powerful and accessible, regardless of your experience level.

Dive in and start creating! This course will open up a whole new world of web design possibilities for you. Let’s make something amazing together.

0:00:00 Intro to Course
0:03:07 Getting Started
0:07:08 Create your first layout
0:20:55 Framer AI
0:28:21 Basic Layout
0:43:47 Animated Text
1:02:03 Figma to Framer
1:15:16 Adaptive Layout
1:27:22 Breakpoints
1:41:19 Components
1:52:15 Effects
2:03:33 Scroll Speed
2:18:51 Scroll Variants
2:31:04 Copy Components
2:41:04 Grid Layouts
2:52:28 Icon Animation
3:03:31 Code Components
3:15:42 Property Controls
3:25:05 Code Overrides
3:38:25 CMS
3:52:49 Search and Conclusion

———-
FOLLOW MY JOURNEY

Twitter: http://twitter.com/mengto
Instagram: http://instagram.com/mengto
TikTok: https://www.tiktok.com/@mengto.design

#framer #webdesign #nocode

source

45 Comments

  3. If you're like me and doing this tutorial on a super old Mac (Macbook Pro 2015) then I suggest only copying one thing at a time from Figma, when I tried to copy "Progress Ring, Score, Main Card & Browse App" from Figma, no matter what I did, it would not paste in Framer, wasnt until I copied the Browse App and the Browse App only that it worked. I def need to upgrade my Mac when I get some more money lol

  4. 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

  19. 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!

  21. 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?

  25. 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

  27. 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.

  30. 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. 👍👍

  35. 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.

  42. 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….

Leave A Reply

Please enter your comment!
Please enter your name here