In this virtual world, we are all in the race to have the most modern, original and beautiful presence online. Your Instagram feed might be the most obvious place for that but websites are also important and they are still relevant.
Whether you need one for your company or yourself, fear not. Here we are going to help you get the prettiest site with a deep look inside Framer, a website builder for designers.
Framer launched in 2015 as a single tool for design, prototyping and developer handoff, on which teams — from designers to engineers — could collaborate and build digital products.
Since then, it has grown and evolved to become a platform where you can build websites with a professional design.
It integrates with tools like Photoshop or Figma, so you can easily import your projects and turn your design into code.
Framer has a very clean dashboard that’s great for finding everything quickly. You can manage multiple workspaces and organize your projects in different folders.
There are also some nice customization options like Day Mode/Night Mode and the possibility to hide the “Get Started” buttons once you’re familiar with the platform.
When you first sign in to Framer, you’ll see a video tutorial that takes you through its main features. That’s a relief because, unlike other builders, Framer has a certain degree of complexity.
However, this is only due to the level of customization you can achieve. Framer is a no-code tool, so you will get a professional website without the need to know code.
One of the things that make Framer so cool in terms of design is its free positioning design feature. Unlike other builders that limited you to the box design model principle, Framer has more design freedom to work with.
Framer allows you to copy and paste web designs from Figma. If you’re using Figma for your portfolio, this is really great news.
When Framer first started, it was just a prototype builder, but now your output is an actual functional website.
It also has multiple templates to create your pages and sections more traditionally. And a Paste from Web feature we will talk about in a minute.
It even has built-in forms so you can find your favorite fonts from Google Fonts and Fontshare.
Another cool feature is you can establish a color style with light and dark themes and let your computer adapt to your computer’s native Appearance setting.
Framer offers advanced animation features to create engaging and interactive website experiences.
Not only are there dynamic animations that can be triggered as users scroll through your page, but also there is Framer Motion.
Framer Motion is a special React library that can be used to create your animation style.
If you’re already familiar with Figma and its animating design elements like buttons with smart animation, this will be a piece of cake.
Although you don’t need to know how to code to use Framer, it does give you the option to extend their capabilities with code.
Framer will generate a sitemap based on your site structure for search bots. It will also ensure you get a great Google Lighthouse score by default. And it lets you use semantic tags on your websites for better structure.
All the sections in the Insert panel are responsive by default, so you don’t have to worry about whether visitors will see a nice site on their mobiles.
Content Management System (CMS) is supported by Framer, however, it’s not super robust. Webflow is a builder that does a better job at it, for example. If you’re interested in it, you can go check out our post review of Framer vs Webflow.
Accessibility is often overlooked, however, it’s a key aspect of a great website, and it’s closely linked to SEO.
Framer pays close attention to things such as the contrast ratio of your site and image ALT texts, as well as other important elements.
From great security and password protection options to 99.99% uptime SLAs, you’ll get everything you need to host your site on Framer.
The bandwidth and monthly visitors are a bit limited, though, and Framer only gives you 100 GB of bandwidth and 200,000 visitors.
Framer only has 8 integrations: Mailchimp, Hubspot, YouTube and more.
If you wish to integrate with other third parties, you’ll have to add the tracking code to the Custom Code section of your project.
Website translation and localization
Framer has localization add-ons and it also offers machine-powered and manual translation. That way, you can easily localize everything on your site and then have more granular control.
The variety of languages is great. Just take a look at all the options for Spanish.
If you wish to access AI technology to take your translations to the next level, there’s an add-on for $40 per month per locale.
Framer lets you add viewers, editors and admins to your workplace. You can send them an invitation via mail or simply share a link with them.
It gives you up to 5 editor seats right from their Basic plan. You then get up to 10 editors on the Pro plan. The Enterprise plan gives you unlimited workspaces and custom editors.
Moreover, Framer gives the possibility for multiple designers to work collaboratively on a design simultaneously. You can also leave comments inside the project (see the image above) just like you would in a Google Doc.
Framer has a set of AI tools to elevate your website’s impact. You’ll find AI Translation, Text Rewrite and AI Style among them. They are mainly AI writing assistants and you can access them by purchasing an add-on.
The AI Localization add-on even provides you with image localization and visibility logic.
Where you can use it
Users choosing Framer have two options: use it on their browser or install it as an app on their computer. The app is available for Mac and Windows.
It also has a Chrome extension called HTML to Framer which allows you to move your site to Framer by copying layouts, texts and images. You can also get inspired and copy from other websites. I copied the image you see in my screenshot above from Framer’s website.
Keep in mind, though, that just like the Paste from Figma feature, it has some limitations. Not every type of design element will be imported flawlessly, so be aware of it.
Sadly, if what you’re looking for is site migration, there isn’t still anything of that sort, but Framer is working on it.
Support and resources
It has an Academy with many video tutorials, a Help Center and a community. There’s a lack of a more direct channel of communication such as chat, email or phone, which it’s unfortunate.
They host multiple meetups within the same day and in different locations, so no matter where you live, there will be one you can attend.
To get in touch with support, you can create a ticket.
Framer has five plans, including a free one:
- Free forever: you get free pages, collaboration, access the image optimization feature and instant publish and more.
- Mini: $5 per month. Custom code, publish to custom domain and get 1 GB of bandwidth hosting.
- Basic: $15 per month. Publish unlimited web pages and protect your site with a password.
- Pro: $30 per month. It includes analytics, cookie banner, add-ons and more.
- Enterprise: custom. Get dedicated support and extra training.
Framer Pros and Cons
- Advanced animation features.
- Available online and as a desktop app.
- AI writing tools.
- You won’t find many tutorials or support.
- Limited hosting.
Framer is a unique website builder for anyone looking to have a professional-looking site and especially for designers.
Its free plan makes it easy for anyone to give it a try risk-free and its affordable plans help those who are just starting out.
Plus, thanks to features like Paste from Figma and Paste from URL, you can import designs and create your pages quickly.
Although there are still some things lacking such as a more extensive set of tutorials and support, Framer is a young software that will likely fix these issues along the way.
All in all, it’s an excellent tool for building your website and we recommend you give it a try.
Have you already used it?
Tell us about it in the comments!