· 6 min

framer, as a production tool

What I've learned shipping HitPay's product pages on Framer for a year and a half. The strengths, the limits, and the moves you only learn the hard way.

#framer#design-engineering#process

For most of my career Framer was a prototyping tool. You built clickable mockups, you exported them as a sharable link, you got feedback, you went back to React. Framer Sites changed that — the things you make in Framer can be the thing the customer actually loads. That sounds small until you're shipping pages a couple of times a week.

The first thing you learn is that "design directly in canvas" is not the same as "design in Figma, then implement in code". It's a third workflow with its own muscles. You have to think in components from the start, because reuse on a Framer page is not a refactor, it's a primitive. Build the component once and your three product pages have the same hero rhythm without you trying.

The second thing is motion. Framer is generous about animation in a way React is not. You can scroll-link a transform, you can stagger children with one number, you can easily wire a hover state that shifts three properties at once. The temptation is to use everything. The discipline is to pick one or two motion ideas per page and let them carry the whole thing.

The limits show up where you'd expect: deeply dynamic content, complex auth flows, heavy data tables. Framer is not the place for those. It is, however, an excellent place for the marketing surface that wraps them. We separate concerns — Framer for landing pages and product marketing, our React app for the actual product — and the seam between them is just a link.

A few smaller lessons I keep relearning. (1) Variables save weeks. Set up your colour, type, and spacing tokens before you make a single component. (2) Breakpoints are state. The mobile layout is not a smaller desktop, it's a different design with the same words. (3) Scroll position is content. Treat the scroll like a timeline, not like a long page.

If you're a designer who can read code, Framer pulls you into shipping. If you're a developer who can think in design, Framer pulls you into thinking about what the page is for. Both are useful pulls. The work I make there is more thoughtful than the work I make where the canvas and the codebase are different rooms.