Designers Crawl Out of their Hobbit Holes — Communicating UI Animation

How I hand-off UI transitions to my dev team

If you have ever exported a video of UI animation to explain it to your dev team only to have them stare at it with confusion, you’re in the right place.

Designers should bring the timeline to the developers

In a hole in the ground there lived a hobbit

It’s easy for us designers to stay snug and comfortable in our design tools and let devs deal with the designs we hand off, right? No. Not if we want to see an implementation that actually honors the animation we lovingly tweaked to perfection.

Developers only have access to UI design files / prototypes. How do we communicate animation then? Bring the timeline to the UI design file. How? here’s how I did it.

“Fair speech may hide a foul heart.” 🙃 — It’s a simple animation!

An animation may look simple enough in a 2 second video but when it comes to implementation, it may contain very specific transitions.

So I replicated Principle in Figma! I was very inspired by Motion Method’s incredible video and tweaked it to match my own needs.

inspired by Motion Methods amazing system for handing off design specs.

What changes? When? for how long? and how?

“He that breaks a thing to find out what it is has left the path of wisdom.”

And we like our devs to stay their nice, wise selves 😃😃, so we explain.

in the example above, the card, moves from x:130 to x:160 starting from T:0 to T:600ms with a custom curve explained both visually and in value.

Motion System Components:

1. Properties: which are all the ways an element can change in a UI animation, like position, size, color, opacity, etc…

I like the idea of assigning colors, will become intuitive for any designer using the system later

so each of these is a component, it contains the property name and the change (value before > value after).

2. Motion Description:

Which contains Easing to describe the curve of a UI transition, and duration to describe how long a motion takes.

3. Preset Curves: because motion — like everything in a design system — is meant to preserve consistency in a product. So when a developer sees that a motion happens with a “Ease In” curve, it should always mean the same thing. I added a “custom curve” variable and made the image replaceable to allow designers to create custom motions when necessary.

And it worked!!! My team implemented the motion correctly with very little friction 😇😇😇 Hanan is a happy, happy Hobbit.

“the small everyday deed of ordinary folks that keep the darkness at bay.” — We build for us and all those coming after us.

Design leads must build a system that can be used by their design teams and understood by development team. It is no easy feat but our work does not end here, we must also build systems for testing and QA, so the journey goes on, my friends. Let’s design away ❤️

How do you explain motion to your development teams? Would love to hear it!

Till next time, lots of love! and #keepdesigning!

Disclaimer: this blogpost is LOTR themed, but I only own my own content. The story & quotes belong to J.R.R. Tolkien.