How long does it take to learn Framer (for non-techies/designers)
Aug 22, 2023
While the learning curve for Framer when it comes to building websites can vary depending on your prior experience, the complexity of the projects you have in mind, and the amount of time you dedicate to learning, I would say that one could become quite proficient in building static websites within two weeks of starting with Framer. For context, I’m neither a programmer or a designer, but I have been building websites on Wordpress for several years now for different personal and work-related projects. I enjoy tinkering and learning by doing, I have a basic understanding of HTML and CSS and generally enjoy looking at landing page designs, current trends in illustration and design and testing out different no-code platforms.
First of all, what is Framer?
Framer is a web design and prototyping tool that takes a distinctive approach to designing websites and user interfaces. Unlike traditional design tools, Framer places a strong emphasis on interactivity, animations, and dynamic user experiences and in the process, allows anyone of any skill level to create stunning websites. The overall platform is very minimal in appearance and does not appear daunting to a first time user. For some time, Framer has been marketed as a tool for designers to level up and build websites without the need to engage with traditional developers, however, I believe that Framer opens up the world of development to anyone and doesn’t need to be niched towards designers. You can build a fully functional website without ever writing a line of code.
Regardless, whether you're an aspiring entrepreneur embarking on your first website project or an experienced designer seeking to elevate your creations, Framer opens the door to a new realm of possibilities and significantly accelerates the speed of development. It transforms web design from a static endeavor into an interactive, immersive journey that connects with users in a fun and engaging manner.
Who is Framer for?
Framer is for anyone. I really do not feel that there should be any restrictions on who can use Framer. You can set up a blog, build a storefront or a business website in a few hours. Framer also launched an AI feature which with a few prompts, will actually build a fully-responsive website in seconds.
Publishing a website is also fairly easy. You can use a free framer link such as mylink.framer.app or else you can use your own custom domain on a paid plan, i.e. mylink.com or any other URL of your choosing. I’ve come across many people who struggle in setting up their own domain, so I imagine playing around with the DNS can be challenging if you’re a first timer. I’ll set up a quick, easy tutorial to guide you through this process.
Where are you most likely to feel challenged?
If you’re interested in a website that looks good across all device sizes, which everyone should be doing, then this piece of work is likely to take the most time and cause the most frustration. Everything from the navigation bar, to the footer, to displaying images, can be a hassle in figuring out whether to use FILL or FIT or RELATIVE. It usually comes down to tinkering but in my case, even after I got the website to look good on my phone, I found out that things were still wonky on my partner’s phone, even though they are both iPhones? This feels confusing and tiresome at first, but with practice, it definitely gets easier!
So, how long does it take to learn Framer?
For someone with my experience, I was able to hit the ground running and build a website within two days on Framer. My major struggles came from learning how to ensure that the website looked good across desktop, tablet and mobile and probably took the largest chunk of my time figuring it out. I do have prior experience building on Webflow and before I landed on the Framer canvas, I watched 2 tutorial videos on YouTube to get the general gist of the basics of Framer.
For someone with no prior experience building websites, using Figma or Webflow, and who is just getting started on building digital products, this is what my estimate would be.
Beginner Level (2-3 Days)
As with any new tool, the journey would begin with the basics. During the first one to two weeks of exploration, you would need to become acquainted with Framer's user interface, its essential tools, and the foundational principles that underpin its capabilities. Here's what you can expect at this stage:
Getting Acquainted: Dive into Framer's interface and understand its various components. This includes navigating the workspace, understanding the layout system, how the different layers work, what breakpoints mean when building and the different types of elements available for use.
Pre-designed Components: Discover the pre-designed components and templates that Framer offers. These serve as the building blocks for your initial projects, making it easier to grasp the basics without starting from scratch. This includes full pre-developed pages such as a blog page or components such as a pricing or FAQ table.
Interactions and Animations: Begin to explore the realm of interactions and animations. Learn how to create simple interactions that respond to user actions, and experiment with basic animations to add visual appeal to your designs. For example, what happens when you click on an item or hover over it.
Building Simple Websites: Use the provided templates and components to create straightforward static websites or landing pages. Focus on arranging elements, applying basic animations, and setting up user interactions.
Intermediate Level (2-3 Weeks)
With the foundations in place, you're ready to deepen your understanding and skills over the next two to four weeks. The intermediate stage elevates your ability to design more engaging and interactive websites. Here's what's in store:
Advanced Interactions: Dive deeper into creating interactions that provide users with seamless and immersive experiences. Learn how to trigger interactions based on specific user behaviors, enhancing user engagement.
Responsive Design: Explore responsive design principles, ensuring your websites look and function optimally across various screen sizes and devices.
Customisation and Adaptation: Enhance your design skills by customising existing components to match your unique style and requirements. Learn how to adapt components for different contexts and functions.
Advanced Features: Begin to experiment with some of Framer's more advanced features. This might include creating custom animations, building complex navigation systems, and integrating media elements.
Advanced Level (3+ Weeks)
As you approach the advanced level, your journey becomes a deeper exploration of Framer's capabilities and your creative potential. Over the span of four or more weeks, you'll embark on projects that showcase your proficiency in designing dynamic and interactive websites:
Learn about Code Overrides: Code overrides enable you to take your designs beyond the boundaries of what comes out of the box with the Framer platform. With code overrides, you can leverage coding to add further customisations or interactivity to your website.
Data Integration: Learn how to integrate data sources and APIs into your websites, enabling you to fetch and display real-time information. This adds a dynamic dimension to your creations.
Optimisation and Performance: Master the art of optimising your websites for performance. Ensure fast loading times, smooth animations, and a seamless user experience across different devices and network conditions.
It's important to recognise that everyone's learning curve is unique. The timelines mentioned above serve as general guidelines, but your individual journey may vary based on factors such as prior design experience, the time you dedicate each day, and the complexity of the projects you undertake. I find it very useful to learn from pre-built themes. Some of the free templates available on Framer are gorgeous and come packed with different beautiful features and interactivity. Furthermore, there are several community members building components that can be found on their Twitter accounts as well as the Framer community such as framer.supply.
To expedite your learning, consider engaging with the Framer community. Online tutorials, forums, and discussions with fellow creators can provide valuable insights and shortcuts to accelerate your progress.
It’s also worth noting that this iteration of Framer is relatively new and new updates, features and capabilities are being added all the time, so it’s important to stay up-to-date, keep up with other creators on social media or the Framer forum and just play around to see what you can build, especially using a little bit of code here and there.
