How to Create and Sell Framer Templates 2023

I’m always looking for other passive income ideas. I try and sort of go through them try and see what other people are doing and something that’s come up a lot recently is framer templates.

When it comes to making website templates, one of the great things about something like this is that a lot of it is pretty much passive.There’s very little customer support required and very high margins of course.

The only thing you need to spend your time on is actually making the templates.

I’ve started recommending framer to a lot of people now especially for people who don’t want to use something like Squarespace or Wix and they want to have a bit more control over making a website. I think framer is a no-brainer right now.

Creating a Framer template and selling it can be a great way to make money and showcase your design skills, but it can also be a hoot and a half!

How to Create a Framer Template

Framer is a powerful design tool that allows you to create interactive and responsive prototypes, and with a little bit of knowledge, you can create templates that will make others say “Wow, that’s Framer-tastic!”

1. Get familiar with Framer

Before creating your template, it’s important to have a good understanding of how Framer works. You should be familiar with the interface and the different features that are available.

Framer offers a free trial, so you can start experimenting and learning how to use the tool.

Also, there are many resources online, such as tutorials and documentation, that can help you get started. Just don’t get too caught up in reading the documentation and forget to have fun! And if you’re feeling stuck, remember that “Googling it” is always an option.

Getting familiar with Framer can be done through several ways:

1. Take a tutorial:
   Framer offers a wide range of tutorials on their website, ranging from beginner to advanced level, which can help you get started and learn the basics of the tool.
2. Watch online videos:
   There are many online tutorials and videos available on platforms like YouTube that can help you get familiar with Framer.
3. Join the Framer community:
   The Framer community is a great place to learn and share knowledge about Framer. You can join the community and ask questions, share your work, and get feedback from other designers.
4. Experiment:
   The best way to get familiar with Framer is to experiment with it. Create a new project and start playing around with the different features and options available.
5. Read the documentation:
   Framer’s documentation is a great resource for learning about the tool and its features. You can find detailed information about how to use Framer and how to troubleshoot any issues that you may encounter.
6. Try Framer for free:
   Framer offers a free trial, so you can start experimenting and learning how to use the tool without any cost.

By taking a combination of these steps, you will be able to quickly familiarize yourself with Framer, and start creating your own interactive and responsive prototypes.

2. Create your Framer template

Once you are familiar with Framer, you can go straight into Figm and start mocking up your template. You should focus on creating a template that is functional and easy to use. Make sure that the template is well-organized and easy to customize.

And don’t forget, when creating your template, let your imagination run wild. You can play around with different colors, layouts, and animations to create a template that is not only functional but also visually stunning.

And if you want to take it a step further, you can even add some interactive elements, such as hover effects, animations, or pop-ups, to make your template even more engaging and fun to use.

You can include different elements, such as buttons, text fields, and images, that can be easily edited and customized by the user.

And if you’re feeling extra creative, you can even add some hidden Easter eggs for your users to discover! Like a button that makes a fart noise, or a scrolling text that says “You’re welcome”

For me, I’ve created a framer theme called “Untitled Ecommerce”

3. Test your Framer template

Before sharing or selling your template, it’s important to test it to make sure that it is functional and that there are no bugs. You should test the template on different devices and browsers to ensure that it works correctly. And don’t forget to have a little fun while testing it too! Maybe take a screenshot and send it to your friends captioned with “Testing, Testing, 1,2,3”

How to Sell a Framer Template

4. Share and Submit your template

Once your template is ready, you can share it on the Framer community or sell it on marketplaces like the Framer Store or Creative Market.

1. First , Visit Framer
2. Click on “Templates” in navbar
3. Then choose “view all”
4. Then scroll down and click on “Submit a template”

Also make sure to highlight its unique features and benefits.

Let potential customers know what makes your template stand out from the rest, and how it can help them save time and effort in their design process.

Don’t be afraid to be creative and humorous in your sales pitch, it can make it more memorable and effective.

Also, Before Submitting your template Make sure your template checks all the points below:

1. Strong graphic design principles, including contrast, typography and layout
2. At least 4 pages with distinct layouts
3. Published to a framer.app or custom framer.website URL
4. All links in the template work and point to a valid URL
5. Uses default or Google fonts included with Framer
6. Is responsive between desktop and mobile
7. Has clearly structured HTML tags on elements
8. Images have alt tags where needed
9. Has accessible color contrast where possible
10. Pick a title and write a short description for Google
11. Write an overview for the detail page of your template

You can also share your template on your personal website, so potential customers can see your work.

And don’t be shy to show off your template to your friends and family too! And if they don’t seem impressed, just tell them “It’s not for everyone, only the chosen ones”

4. Market your Framer template

To reach potential customers, you should promote your template on social media, your personal website, and other relevant platforms.

Here are several strategies for Marketing your Framer template:

1. Create a website or portfolio:
   Create a website or portfolio that showcases your template and provides information about its features and functionality. You can also include screenshots, videos, and a live demo of the template.
2. Share on social media:
   Share your template on social media platforms like Twitter, Instagram, and Behance to reach a wider audience and get feedback from other designers.
3. List on marketplaces:
   List your template on marketplaces such as the Framer Store, Creative Market, and Dribbble. These platforms are popular among designers and developers and can help you reach a larger audience.
4. Offer a free trial or demo version:
   Offer a free trial or demo version of your template to potential customers, which can help them see the template in action and decide if they want to purchase it.
5. Offer discounts and special promotions:
   Offer discounts and special promotions to encourage customers to purchase your template.
6. Participate in design communities:
   Participate in design communities such as the Framer community, and share your template, ask for feedback and get inspiration from other designers.
7. Create a landing page:
   Create a landing page that provides information about your template, including its features and pricing. This can help you to direct potential customers to your template and make it easy for them to purchase it.
8. Use SEO:
   Use SEO techniques to optimize your website, portfolio or landing page to show up in the search results when people look for Framer templates.

By using these strategies, you can reach a larger audience and generate interest in your template, which can help increase sales and grow your customer base.

Remember, to be consistent in promoting your template, and always listen to feedback from your customers to improve your template and your marketing strategy.

Also.. Besides submitting your template to be listed on Framer.com, I highly recommend to also post your template on other creative market places to generate more views and sales.

• ui8.net
• Creative Market
• Dribbble
• Envato Market

Another way to increase the reach of your template is by offering it as part of a bundle or package deal.

This can be a great way to attract customers who are looking for multiple templates at a discounted price.

And if you have other design skills, you can bundle your template with other design services such as logo or web design services to offer a comprehensive design package to your clients.

5. Support and maintain your template

Once your template is live, be prepared to provide support and updates as needed to ensure that your customers are satisfied with their purchase.

This will help you build a reputation as a reliable and professional designer.

Supporting and maintaining a Framer template can be done through several steps:

1. Provide documentation:
   Create a detailed documentation that explains how to use and customize the template, as well as troubleshooting tips and solutions to common issues.
2. Offer customer support:
   Be available to answer questions and provide assistance to customers who have purchased the template. This can be done through email, social media, or a dedicated support forum.
3. Update the template:
   Periodically update the template to fix bugs, improve performance, and add new features. Make sure to inform your customers of the updates and what changes have been made.
4. Test the template:
   Regularly test the template in different devices and browsers to ensure that it works as intended and fix any compatibility issues that may arise.
5. Listen to feedback:
   Listen to feedback from your customers and use it to improve the template. This can include adding new features, fixing bugs, and improving the overall design and user experience.
6. Be transparent with your customers:
   Be transparent about what your template does and does not do, and be honest if it is not working properly.
7. Keep the template up-to-date:
   Keep the template up-to-date with the latest version of Framer and any other dependencies.

By that, you can ensure that your template is well-supported and well-maintained, which will help to build trust with your customers and increase the likelihood of repeat sales.

It’s also important to keep an eye on the market and stay up to date with the latest trends and best practices in web design and prototyping.

This will help you to ensure that your template remains relevant and competitive.

By following the steps above, you can create a template, test it, share it, market it, and provide support to make sure that your customers are satisfied with their purchase.

And don’t get discouraged if your template doesn’t sell right away.

It can take time to gain traction and reach the right audience. Keep promoting your template, and don’t be afraid to reach out to potential customers.

And remember, a good template is not a one-time thing, you can always update it and improve it to make it even more valuable to your customers.

What are the Best Framer templates?

Here’s my 3 top picks for Best Framer Templates this year:

1. Super Normal Portfolio Website Template

If you’re looking for a minimalist approach to showcase your work, then the Super Normal Portfolio Website Template might be just the thing for you!

Designed by the talented Johnny Belton, this template has a clean and straightforward layout that’s perfect for those who prefer simplicity.

Preview of the Super Normal Portfolio Website Template

Let’s take a look at the preview of this website template. As you can see, the template has a header at the top with the name of the person or brand, which catches people’s attention.

Below that, there are some really cool layouts for selected works.

At the bottom of the page, there’s an “About” section which includes all the essential information in one place.

This one-page site approach is really useful as it allows visitors to stay longer on your site to read about you and your work.

Organizing Your Case Study

The case study section of the Super Normal Portfolio Website Template is organized in a minimalistic way that makes it easy to read.

The font size used is slightly larger, which makes it easier on the eyes, and the section only includes essential information.

The case study section also has some really nice images to showcase your work.

Customizing the Template to Suit Your Needs

If you’re just starting out and want to showcase a couple of projects, this template is an excellent starting point. You can add text and tell visitors about your role in the projects and what you did.

Remember that you can always customize the template to suit your needs. You can add more text or images to the gallery, making it a great framework to work from.

Overall, the Super Normal Portfolio Website Template is an excellent starting point for those who prefer a minimalist approach.

It’s perfect for showcasing a few projects, and the simple layout makes it easy for visitors to navigate. Give it a try and see how it works for you!

2. Oslo

let me show you the second portfolio template that I wanted to review. This one is minimal, but it offers a bit more customization and information. If you are an experienced designer, this portfolio might be a better fit for you.

Design and Features

Let’s have a look! I love how it loads with that nice animation, that smooth transition is already really good.

The header section is quite powerful; it’s much larger and already has the email of the person, and those transitions are just lovely! I really love them.

This portfolio template has that extra something that makes it stand out. See those URLs and links? Love that! Instead of just saying, “I solved problems” or “I design solutions,” you can have a big header that says “Product Design Experience” or “XR Designer” or “Freelance Whatever.” It already catches your attention. Then, you can add a bit more information at the top to explain it.

As you scroll, you can see those nice transitions on the hover and those extra things that would catch my attention if I were looking for someone to hire or portfolios.

And then, what I really like is that as you hover, you get a bit more information on the project, which is a really nice touch. They even tell you what you can write, such as the project title, and as you hover, you can add a description.

Case Study

Let’s see how they handle a case study. I love this header because if I only click on this project and I don’t scroll past this point, I know what this project is about, who the client was, what the services were, and the industry.

If you customize this template and only did part of the job, maybe you can use one of these to say “Role” and add “UX Design” or “Tasks” and add “Wireframes, User Flows, whatever.” This way of organizing the information and just showing snippets of it is excellent.

Then we have a description of the project and some really cool images and text, which is perfect. I really like how everything loads; it’s very, very nice.

I would highly recommend using this portfolio template. You can easily tweak the information and adapt it to your projects. Maybe if you don’t want it to be black, you can change the background color and the palette overall.

But it already has things like the hover states or how everything loads that will add that extra layer of quality that you might be looking for in your portfolio. So, give it a try!

3. Solveing template

If you’re in the market for a portfolio template that showcases a unique style and playful use of fonts, then look no further than the Solveig Framer template.

The Unique Style

Right off the bat, you’ll notice that this template has a different tone and uses fonts in a way that catches your attention.

For example, the banner on the homepage slows down as you hover over it, which is a neat little detail that adds some personality to the page. The use of color palettes is also something to admire.

While the images on the template are only placeholders, if you match the branding of your own projects with the color palettes and fonts on the template, it will elevate the look and feel of your portfolio.

Nice Transitions and Hover States

The transitions on this template are really nice, with overlapping sections that add depth to the page. The banner also moves as you scroll, which is a nice touch.

Plus, the hover states are well-designed, adding an extra level of detail that can help grab the attention of recruiters or companies looking at your portfolio.

A Gallery of Beautiful Images

The gallery of images on this template is really sweet. Even if you don’t have really cool images, the panels of information that scroll with them are nicely designed.

These panels also make it easy to add information about your role, what you did, and the project’s goals.

The Home Page

The home page is more of a landing page, showcasing what the person or agency does and what services they offer. You’ll need to navigate to the work section to see the projects.

The snippets of information about each project are quick and easy to read. The panels of information scroll on the homepage too, which adds a nice visual touch.

A CTA to Get Inside

I always appreciate a good CTA, and this template has one. The banner on each project page invites you to get inside and learn more.

A Template for Personality

Overall, I’m not sure if I would use this template personally, as I tend to let my projects speak for themselves. However, if you want to show off your personality through your portfolio, this is a great template to consider.

It has a unique style, nice transitions, and well-designed hover states that make it easy to catch the attention of recruiters or potential clients. If you’re a freelancer looking to show off your work, this template is a great option.

So, go ahead and copy this template and tweak it to fit your style. It’s a really beautiful template that can showcase your work in a unique way.

In conclusion, creating and selling a Framer template can be a fun and rewarding experience. With a little bit of knowledge and creativity you can create templates that others will love to use, and make money from your designs.

So, get started today, let your imagination run wild, and see where your Framer-tastic designs take you!