The tiny code component I reuse on almost every Framer site: an animated counter.

Stats like '920+ projects' or '10+ years' land harder when they count up as they scroll into view. So I keep this as a small Framer code component:

requestAnimationFrame with an ease-out curve, cleaned up on unmount, and property controls (to, duration, suffix) so anyone on the team can drop it in and edit it from the canvas without touching code.

Full code is in the image. Want me to share more Framer code components like this?

5 things I set up on every Framer site (save this before your next build):

1. Components with variants for everything that repeats: buttons, cards, nav, footer. Change once, update everywhere.

2. CMS from day one for blog, case studies, team and changelog.

3. Breakpoints designed, not shrunk: 1200, 810 and 390, each with its own layout decisions.

4. SEO and social on every page: titles, descriptions, OG images, sitemap and a custom 404.

5. Performance before launch: WebP images, two font weights, no heavy embeds above the fold, and a mobile PageSpeed check.

What would you add as number 6?

Framer breakpoints: designed, not shrunk.

Five Framer sites I built, scrolled on a phone: Metrica Sports, Pathwright, Latitude Health, Milemarker and GoPlumber.

On every Framer build the 390 breakpoint gets its own decisions: stacking order, type scale, image crops and tap targets. Shrinking the desktop layout is the fastest way to a site that looks fine and converts badly.

Do you design mobile first in Framer, or desktop first?

8 Framer sites. One standard.

Metrica Sports, Pathwright, Latitude Health, Milemarker, GoPlumber, Proven Valor, Mindgrix (fully right-to-left Hebrew) and GTM Ops.

Sports tech, edtech, healthcare AI, wealth-tech, field-service SaaS, veteran benefits, coaching and RevOps. Different worlds, same checklist: components with variants, CMS for anything that repeats, real breakpoints, SEO on every page, and a fast mobile score before launch.

Which one is your favourite?

From Figma concept to a live Framer site: SmartWeave

SmartWeave builds AI-driven regenerative therapeutics. I designed the full site in Figma first (dark, scientific, calm), then built it in Framer with native animations, reusable components and CMS for resources and careers.

In the video: the Figma file on the left, the live Framer build on the right. The goal on every Figma-to-Framer job is the same: nothing lost in translation, and a site the team can edit on day one.

Do you design in Figma first, or straight in Framer?