An Intro To Framer For Freelancer's
As freelance web designers, we typically finish our work after the design hand-off. But what if we could expand our service offering to include the entire process, from design to development, and charge more because of it, ending up with an even happier client?
Introducing Framer.com, it’s a no-code website builder that has been becoming a favourite among web designers. This platform not only enhances design capabilities but also streamlines the transition from design to development, giving you a more holistic service to your clients.
Why you should use Framer for web design?
Framer isn’t yet another design tool, it’s an all in one solution that can help you design great looking sites and bringing them to production without a single line of code. If you are familiar with popular design tools like Figma, you’ll be glad to know that Framer is very similar to Figma, making it quite easy to transition to.
Key features that sets Framer a part
Framer offers a range of powerful features for website building, including a useful AI feature that can assist in writing your copy or even constructing your entire site. It also integrates smoothly with a built-in Content Management System (CMS). Additionally, if you aim to create delightful designs, Framer provides an extensive, customisable set of animations that can be added to your elements.
Client handoffs
A standout feature that I use as a Framer freelancer is it’s “Remix” link. Using a Remix link, freelancers can create the entire project in your own personal account, and hand over to their client’s account through the Remix link during the client handoff. This keeps the freelancer in control over the ownership of the project until the project is complete.
Overview of building with Framer
There’s a powerful plugin Framer created for Figma (Figma to HTML with Framer) it is pretty accurate when porting your designs over to Framer from Figma, making the process nice and seamless
Here are some tips that I find made my experience for this transition a lot smoother
- Make sure you name your key layers, this makes it easier to identify which layer or frames are which when you’re hopping between Figma and Framer.
- Make use of auto layouts.
- Framer uses this to a more extensive degree, auto layout in Framer helps with your site being responsive. It also makes it a lot easier to design and iterate with
- Framer uses this to a more extensive degree, auto layout in Framer helps with your site being responsive. It also makes it a lot easier to design and iterate with
- Design with Desktop as a default, but have designs for Tablet and Mobile.
- Framer is oriented to have the Desktop breakpoint to be the default, you then need to add in additional breakpoints for tablet and mobile. The responsive design is then dictated by the Desktop breakpoint, meaning, what you change on Desktop will propage to the other breakpoints.
Choosing the Right Framer Plan
When you go onto Framer, you’ll encounter a variety of different payment plans
The plans are divided into 2 main categories: Site plans and Team plans
Site plans are for publishing your website and making it live. Team plans are for collaborating and having more than 1 user work on a file, similar to multiplayer on Figma.
Site plans
Free Plan: Ideal for testing and proof of concept projects. It includes basic features and allows for publication under a Framer domain with a brand banner.
Mini Plan: Recently introduced, perfect for small, single-page websites that serve marketing or informational purposes.
Basic and Pro Plans: Suitable for larger sites requiring a CMS and multiple pages. The Pro plan is especially valuable for its analytics capabilities, which can be crucial for client discussions and site optimisation.
Technical Enhancements
If you have some technical expertise, then Framer becomes exponentially more powerful for you. Framer uses react for all it’s components, you can code and customise specific components to do exactly what you need
To summarise
Framer is not just a tool; it's a complete ecosystem that supports the full spectrum of web design and development. For freelancers looking to elevate their offerings and increase their marketability, Framer provides a seriously compelling solution that enhances both the creation process and the final product. Adopting Framer can lead to more satisfied clients and, consequently, a more lucrative freelance business.
Great resources
- https://www.speedrun.design/
- https://overrrides.com/
- https://nav.supply/
- https://frameroverrides.com/resources
- https://remixroad.com/
FAQS:
What is Framer and how can it benefit web designers and developers?
Framer is a robust tool for building websites without the need for extensive coding. It enables the import of designs from Figma and offers comprehensive layout features that are user-friendly and boost productivity.
How does Framer integrate with Figma?
Framer provides a plugin that enables direct importation of designs from Figma, simplifying the transition between design and development stages. This integration fosters a smooth workflow for designers who are familiar with Figma.
Can Framer be used by beginners in web design?
Framer uses existing UI design tool patterns, if you are already familiar with existing design tools, then Framer should be easy to onboard. If not, they have a lot of tutorials on their website and on Youtube.
How does Framer handle content management and blogging?
Framer has a CMS platforms, allowing designers to manage and publish content directly. The CMS is all built within Framer, making it easy to use and update.
images are sourced from framer.com
Original LinkedIn post here.
