The Engineering of Framer WebThe Engineering of Framer Web

From the desktop to the cloud. A look at how our engineering team brought prototyping to the web.

avatar

Jan van Boghout

May 28, 2020

How did we bring a Mac-only prototyping tool to the Web? Here’s a little secret: we had a head start. Because Framer X went all-in on React, we were already using Web technologies for the main architecture of the product. Our component system was based on good old NPM packages, built by a local Node server wrangling dependencies—many days are Pirate Days in Framer engineering, with someone cursing “yarrrrn”.

It had always been possible to run the bulk of the editor in a browser. In fact, we used this ability for debugging. Still, it wasn’t a cakewalk to go from a hack in a browser to a true multiplayer, always-on platform. And though the desktop version lives on as a worthy companion app, Framer Web is a significant shift in both technology and mindset. It’s safe to say, the engineering team had to rise up to entirely new challenges.

Prioritizing stability at scale

First and most obviously, infrastructure and backend took a front seat. Desktop products are essentially distributed systems with a whole user computer’s resources for every peer, but moving to the cloud means managing scaling. Strict security. Strong uptime.

Luckily, we’ve always had great backend expertise and well-rounded product engineers who don’t mind writing a bit of Go. We dipped our toes in Kubernetes to manage our cluster, created a multitude of new microservices, enabled live pull request previews and streamlined the deployment process so anyone can Just Do It™. We secured, traced, optimized, and load tested. War stories include migrating our build and image assets pipeline to the cloud (“yarrrrn”), battling domain name-induced crashes, and boosting our logging infrastructure efficiency by a whopping 100×. Now if something breaks for you, we’ll know and fix it faster.

Rethinking the product from the ground up

Of course, Framer Web is far more than just our old product chugging along, interfacing with a bunch of Linux servers. Entire dashboards and invitation systems had to be constructed and unified. We completely rethought the UI, built our Fresco design system, and added brand new multiplayer capabilities with a more resilient file format. The core architecture was secured while still preserving performance across many moving parts. We also introduced the Insert Menu with live previews of everything at your fingertips.

As with any new product, it was imperative to have a solid onboarding and we solved this with in-app tutorials, designed to guide complete beginners. And what was once a little preview window is now a full share panel with user permissions and shareable links featuring live interaction. Less sexy but equally as important: the entire billing and teams flow was revamped, including underlying services and models.

Sharing your prototypes has never been easier.
Sharing your prototypes has never been easier.

All this required new cross-disciplinary teams that manage both Product and Platform within their area of responsibility. They move fast, building vertically through the stack where needed and checking their efforts against metrics and user testing. Together with the Foundation teams that safeguard performance, security, and stability more horizontally, we strive for the company motto: festina lente (Latin for make haste, slowly).

The magic below the surface

One thing that’s been making haste and waves is Framer Motion. By definition, our popular production-ready React animation library was good to go from day one. It drives all of our interactive features, even the in-app UI. Early on we knew that—beyond Framer’s default interactions—Motion’s amazing capabilities were largely locked away, a secret power for the more technical designers. For example, the early explorations of Framer Web’s toolbar with animating icons and illustrative tooltips were actually code components!

Tooltips in the Framer UI powered by Framer Motion.

Motion in Framer Web is a huge, magical upgrade after a fruitful collaboration between the designers and engineers on our Prototyping team. Without so much as seeing code, you can automagically transition between any two designs. This magic primitive allows you to compose almost any richly animating flow. And the best part is, you can lift these super-smooth FLIP (First, Last, Invert, Play) animated interactions right into production. Whether you prefer drawing or coding, the same power is at your fingertips. Lines are being blurred, and we’re here for it.

Lift super-smooth FLIP—First, Last, Invert, Play—animated interactions right into production.
Lift super-smooth FLIP—First, Last, Invert, Play—animated interactions right into production.

The grand finale is just the beginning

The release is a milestone for the whole company, but our engineers put their hearts and souls into it. After almost 10K pull requests—and a sizable amount of blood, sweat and tears—the real work starts. What we hope will be evident to you is that Framer Web is the easiest and quickest collaborative prototyping platform out there. Import your graphics from the major tools and we’ll make them click, flow, and bounce with unrivaled production-level quality. Or go ahead and extract amazing animations from Framer, hand off code values to your development team, and ship it with Framer Motion.

Would you enjoy more in-depth looks at the technical challenges we faced, or material about making the most of Framer as an engineer? Let us know! For now, here’s a few more helpful resources:

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.