Keep design and development in sync

Framer is all about empowering designers to own their work. You get to validate and test your designs using real data, plugged into beautiful end-to-end apps that are often indistinguishable from the real thing. But what happens once your prototype goes into production? That process usually involves other team members — an engineer or two — and the possibility of details getting lost in translation. To help you maintain the integrity of your micro-interactions during development, we’re launching Handoff. A new post-prototyping feature designed to ensure that you keep that Framer fidelity from ideation to production.

Design that delivers on the details.

Instead of leaving the guesswork up to your engineer, Handoff allows you to control the accuracy of your animations. Simply right-click anywhere on a particular animation in the code editor and you’ll be able to copy and share the native values of an interaction. We do all the heavy lifting for you — converting from damping and duration down to tension and friction — ensuring that you’re always speaking the same language as your developer. Handoff supports multiple platforms on iOS, Android and Web.

Supported iOS Frameworks:

  • Facebook Pop (tension and friction)
  • Native / UIKit (damping and duration)

Supported Android & Web Frameworks:

  • Rebound (tension and friction)
  • VelocityJS (tension and friction)

From spring to bezier and back again.

Natural and intuitive product design begins at prototyping. Native animations on mobile often depend on spring curves to produce that subtle bounciness you know and love. Traditionally, they’ve been complex to master, but not anymore. In this release, we’ve made Framer’s spring curve implementation easier than ever. Manipulate properties using a slider control or play around in code. Simply set a defined time, establish the damping ratio for preferred bounciness and you’re good to go! If you’re a fan of our old syntax and functionality, you’ll be happy to know we’re also backward compatible. But to make things easy for anyone just beginning to master the physics of animation design, we’ve mapped the functionality of our spring curves to how they work on iOS. No matter what level you’re at, we’ve made it easy to keep that native-level bounce from design to development. Learn More


Medium

Leave a Reply

Your email address will not be published. Required fields are marked *