Have an idea? Ship it with Framer

Framer has reinvented itself quite a few times, and each time taking on a new challenge, a new market, consistently making it easier to design digital products.
Priyanshu Anand
November 20, 2023

Have an idea? Ship it with Framer

Framer has reinvented itself quite a few times, and each time taking on a new challenge, a new market, consistently making it easier to design digital products.
Priyanshu Anand
October 14, 2022

From Facebook to Framer

Koen bok and Jorn van Dijk, were both designers at Facebook before they headed out into developing what would be known as Framer. But what it is now vs. what it was when it first came out is quite an interesting story, to say the least. Framer started as a JavaScript library back in 2014 when it relied mostly on code to produce prototypes. It was welcomed with open arms nevertheless, quickly climbing up the ranks as an exciting new product in town.

Founders - Koen bok and Jorn van Dijk - Source

Framer soon realized that there was a scarcity of prototyping software out there. And as businesses started to rely heavily on digital apps, the need for higher-quality software became apparent. Despite how common it became to design apps, the idea of prototyping still was perceived as a ‘delicate’ step.

In an attempt to end that, Framer redesigned itself into an all-encompassing website design platform. Over the years, Framer has reinvented itself quite a few times, and each time taking on a new challenge, a new market, consistently banking on the idea that shipping out products shouldn’t be as hard as it is.

Design, publish, done

After two successful iterations (Framer Studio and Framer Design) and also rounds of funding, what the founders wanted to truly showcase to the world came alive with Framer X for all digital product-based companies that are constantly looking for tools that can curve the feedback loop and reduce deployment hours. Framer X came with fully integrated design and prototyping capabilities with off-the-shelf interactivity to accommodate dynamic changes without losing too much time on redesigns.

But what truly set Framer X apart and eventually drew a lot of attention was its ability to import and re-use assets of a product instead of having to build everything from scratch. What’s more, these components were available on the Framer X store and were shared widely with the developer community. This is where community-led growth started pushing the company into the mainstream.

It wasn’t long before Framer raised Series B for $24 million in 2018 led by Atomico. This brought their overall funding to $33 million.

The second generation of upgrades became more collaborative. Framer Web was launched in 2020 making it more easily accessible and more importantly, collaborative. The drag-and-drop interface became more interactive, components became more elaborate, and overall, the touch and feel of designing and prototyping got astonishingly better.

We’ll let the video speak for itself 👇

In 2022, Framer took it a few steps further by launching Framer Sites which essentially gave users the ability to design and launch entire websites without using code. The design canvas which Framer was already known for was met with rich new features like CMS and breakpoints. Furthermore, prototyping was made easier by introducing capabilities like single-click publishing and using a lot more dynamic design components.

Nailing product-market fit

If there was an award for being adaptive and disruptive, Framer deserves it. Koen and Jorn set out on a journey to help companies become digital-first and they have never settled for something that only benefits only the company. But finding product-market fit time and again is not an effortless task but when you have the right product, and you’re willing to take a leap of faith, you find a way through.

Framer has only expanded its capabilities as a product but also its reach in the market. Going from a code-heavy JavaScript library to a no-code website-building platform has been a joyride for the team. If you don’t know, Framer is known for its over-the-top launches and they’re proud of it. They can be revered as nothing short of a connoisseur when it comes to doing public launches, especially on Product Hunt.

Framer has done 54 Product Hunt launches and has close to 26K upvotes. That’s quite something to look upon and be proud of. Notably, Framer has also won a Golden Kitty Award and came in at 3rd as the Design tool of the year.

Framer's launches on Product Hunt

We now have a very large group of people that know about Framer. What we're mostly after now is people that haven't heard about Framer yet, because this space for website-building is so much bigger than what Framer was before. And I think Product Hunt is a great place to find those people. We always track how many people came from Product Hunt.” - Jurre Houtkamp, Product Designer at Framer (source)

Framer community

What started as a simple javascript library, over the years has evolved into a full-blown web design platform. Their premise was to provide a platform, that helps you ship ideas as fast as you can. Today’s world has made execution significantly easier and with the introduction of no code, organizations like Framer have realized what the next generation of digital tools should catalyze.

Inspiration comes in unprecedented ways, often through conversations or interactions where you’d least expect it from. With how easy it is to prototype designs with Framer, it’s only obvious that even the most far-fetched ideas would see the light of day, especially if there’s a sense of belonging or even support from others who’re essentially doing the same thing.

How chatty? Like a busy coffee shop

Framer nails community simply by bringing people together and giving them a platform where they can learn how others are making the best of Framer, share their own work, and directly get help from the Framer team whenever they need it. Framer has a community on Discord with close to 16,000 members.

Here’s Benjamin, Product Lead at Framer, welcoming you to the community with every piece of essential information distilled into one helpful message 👇

There are channels to engage in everything from general discussions to templates and even sharing your work. There are local channels specific to countries where people can be comfortable speaking their language or asking about problems that are more local than global.

There’s also an active forum for people to open up discussions about anything Framer.

Here’s a great example of a community-first approach: how the Framer team is crowdsourcing ideas from the users to further improve one of their features.

Building in public

One of the most important things for when you’re building something for the public is to keep them constantly informed of what’s going on. After all, the product is the platform for them and not for you.

Framer has a place just for product updates, fixes, and improvements that gives its users an overview of what’s changed. All relevant resources and links are included to give people every bit of information they need to make the most of these updates.

Learn

Tutorials, videos, and articles to get started with Framer. Get in-app tours, 3-hour courses, and elaborate YouTube tutorials to help you become an expert in designing webpages with Framer.

Find an expert

Some projects can be overwhelming, sometimes you might not have the expertise to build something you’d imagined, and other times, there’s just not enough time for you to learn and build something from scratch.

Framer gives you an option to hire experts to build professional projects for you. These can be individuals or even agencies. You can take a look at their websites and projects to get a better understanding of what better fits your requirements. It’s as easy as telling Framer what you need, and they connect you to the perfect man/agency for the job.

Launch your startup with Framer

The spirit of community thrives on initiatives. When you do something good, it creates a ripple effect impacting hundreds and thousands of people. They understand what goes into building a startup and even the smallest of help can go on for miles.

Framer lets smaller teams or startups prepare for launch by taking care of a lot more than just web design and publishing. Here are all the things Framer helps you with👇

Community made tutorials

Framer has put together tutorials made by the community so that others can benefit from them. These tutorials are a prime example of what a self-sustaining community flywheel looks like. Framer listened to the people and built not just a product but a platform for people to execute ideas. Now, the community puts out content for others to learn from. That’s what community-led growth is all about.

Check out this tutorial for instance, where a user rebuilds Linear’s website from scratch using Framer 👇

Framer gallery

Get inspired by some of the most amazing websites build on Framer. There are amazing sites ranging from websites for agencies to personal landing pages and a lot more.

Templates

Choose from dozens of top-notch templates with a variety of designs. Find the perfect template that tailor fits your needs and customize it down to the last detail to make it your own. And there are free as well as paid templates for you to make even advanced, responsive websites without having to build them from scratch.

Building websites was never easier

Framer is a simple, effective, powerful website designing tool that has a simple premise: make it so easy to execute ideas that no-code creators or even day-to-day users can ship out ideas that are other bottled up from the lack of the right platform or resource. It’s a beautiful thing, really, to build a product that aids mankind and on top of that, foster a community where people can learn, grow, and evolve.

Framer is slowly but surely nurturing a wonderful space for creators worldwide, and the best part is, they’re doing it the right way.

Start your 21 day free trial
Start your 21 day free trial
Start your 21 day free trial

Explore other apps

No items found.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Update cookies preferences