Persona Library
← All personas
framerdesignAPP-146

The Framer Motion Designer

#framer#web-design#motion#prototyping#animation
Aha Moment

A teammate asked how they managed design and prototype complex animations and transitions that developers would struggle to implement from specs. They started explaining and realized every step ran through framer. Specifically, code components with React integration had become load-bearing.

Job Story (JTBD)

When I'm a startup asks the designer to create a landing page that "feels premium, I want to design and prototype complex animations and transitions that developers would struggle to implement from specs, so I can ship production websites where the motion design survives the design-to-code translation.

Identity

A product designer or motion designer who gravitates toward Framer because it treats animation and interaction as first-class design elements. They don't just design screens — they design how screens transition, how elements respond to hover, how content enters and exits. They've used Figma for static design but find it limiting when the design's value is in how it moves. They are the person who insists that the ease curve matters and that a 200ms delay feels different from a 300ms delay.

Intention

To reach the point where design and prototype complex animations and transitions that developers would struggle to implement from specs happens through framer as a matter of routine — not heroic effort. Their deeper aim: ship production websites where the motion design survives the design-to-code translation.

Outcome

framer becomes invisible infrastructure. Design and prototype complex animations and transitions that developers would struggle to implement from specs works without intervention. The old problem — the CMS and SEO capabilities lag behind Webflow for content-heavy sites — is a memory, not a daily fight. Improved CMS capabilities with the same design flexibility as static pages remove the "blog looks different" problem.

Goals
  • Design and prototype complex animations and transitions that developers would struggle to implement from specs
  • Ship production websites where the motion design survives the design-to-code translation
  • Create interaction patterns that differentiate the product through feel, not just function
  • Build a portfolio of motion-rich work that demonstrates the value of interaction design
Frustrations
  • The CMS and SEO capabilities lag behind Webflow for content-heavy sites
  • Collaboration with developers is awkward because Framer's code output doesn't map cleanly to a dev team's component library
  • Performance on animation-heavy pages can degrade on mobile devices
  • The learning curve for advanced interactions requires understanding code concepts that pure designers don't have
Worldview
  • Motion is meaning — how something moves communicates as much as how it looks
  • Static mockups are blueprints, not designs — the design is the experience, and the experience includes movement
  • The gap between a prototype and production should be measured in hours, not sprints
Scenario

A startup asks the designer to create a landing page that "feels premium." The designer builds it in Framer: parallax scroll effects, staggered content reveals, a 3D product showcase that rotates on scroll, and a pricing toggle with a smooth morph animation. The client is thrilled — it looks exactly like a polished SaaS site from a well-funded company. Then they ask for a blog section. The designer spends a day fighting Framer's CMS to get blog posts rendering with the same design quality as the rest of the site. The blog works but feels less polished than the animated sections. The designer considers using Framer for the marketing pages and a separate CMS for the blog.

Context

Designs 3–8 websites or prototypes per year, primarily for startups, agencies, and portfolio pieces. Uses Framer for projects where motion and interaction are selling points. Maintains a library of reusable animation components. Has learned enough React and CSS to extend Framer's built-in capabilities. Spends 60% of work time in Framer, 30% in Figma for static design, 10% in code editors. Charges a premium for motion-rich projects. Active in the Framer community and follows motion design trends.

Success Signal

The proof is behavioral: design and prototype complex animations and transitions that developers would struggle to implement from specs happens without reminders. They've customized framer beyond the defaults — especially built-in page transitions and animations — and their usage is deepening, not plateauing. Their marketing team ships landing pages independently — no design or dev bottleneck.

Churn Trigger

Not a feature gap — a trust failure. The CMS and SEO capabilities lag behind Webflow for content-heavy sites happens at the worst possible moment, and framer offers no path to resolution. They needed blog functionality and Framer's CMS couldn't handle their content volume. Their belief — motion is meaning — how something moves communicates as much as how it looks — has been violated one too many times.

Impact
  • Improved CMS capabilities with the same design flexibility as static pages remove the "blog looks different" problem
  • Performance optimization tools that show animation impact on mobile frame rates prevent shipping janky experiences
  • Better design-to-code export that maps to standard React component patterns enables developer collaboration
  • A motion design library with community-contributed animation presets accelerates project starts
Composability Notes

Pairs with framer-primary-user for the standard web design perspective. Contrast with webflow-designer for the CMS-first approach to web publishing. Use with figma-developer for the handoff perspective when motion specs need to be implemented in code.