ProtoPie School 7 min read

Lesson 2: Using Interaction Recordings to Collaborate with Developers

With ProtoPie's interaction recordings, you can make developer handoff way easier by providing the exact prototype specs they need.

Jeff Clarke
Jeff Clarke, UX Designer & ProtoPie EducatorLast updated on May 2, 2022
interaction recordings thumbnail

Welcome to the second installment of ProtoPie School where we quickly get you up and running with ProtoPie.

In this article, we'll cover a great ProtoPie feature called Interaction Recordings (previously called Interaction Recipes). In order for a developer to faithfully code your brilliant design, they need to know exactly what you intended. An Interaction Recording is more than a handoff. It is a fully interactive specification of your animation, complete with a scrubbable timeline to show your animation frame-by-frame, and exact values for easing parameters, start and end properties, timings, etc. Interaction Recordings are helpful because they take away the guesswork. Your developer won't need to guess at what you intended.

What you'll need

In order to follow along with this tutorial, you'll need to be subscribed to a Team or Enterprise plan. Interaction Recordings are not included in Individual plans.

You'll also need a Pie to work with. You can use any Pie you like, but if you want to follow along with me, you can use this one:

What you'll learn

By the end of this tutorial you'll know how to

  • Upload your Pie to a Team space
  • Record your interaction
  • Review the interaction recording from what you recorded
  • Share the interaction recording with your team

Time to complete: ≤15 minutes

Step 1: Upload your Pie to ProtoPie Cloud

  • Open your Pie in ProtoPie Studio.
  • Click the Upload icon in the upper right corner of Studio's interface.
  • Choose a Team Space to upload this to. As previously mentioned, Interaction Libraries are not available to Individual plan subscribers, and therefore not available if you upload it to your personal space.
protopie team space
  • Open the Pie in ProtoPie Cloud. You can just click on the link that Studio provides once the upload is complete.
protopie cloud link

Step 2: Record your Interaction

When viewing your Pie in ProtoPie cloud, look for the panel called Interaction Recordings on the left-hand side of the browser window.

interaction recordings

Click the Record button to start recording. Interact with your Pie showcasing the specific interactions you'd like to hand off to your engineering team. When you're done, just click the Stop button beneath your Pie.

Create new recording

That's it! In just a few seconds you've created your first interaction recording!

Step 3: Review your Recording

After you stop recording, you'll be able to review your Recording. An Interaction Recording consists of a timeline of everything you recorded, and a visual preview of your Pie that updates in sync with the timeline.

Review your interaction recording

Your interactions on the timeline are grouped into Triggers and Responses, just the same way as you see them in Studio.

Your interactions on the timeline are grouped into Triggers and Responses

💡 Some things you can do:

  • Scrub through your animation: Drag the red upside-down teardrop control — this is the play head — right and left. This will allow you to scrub through the interaction you just recorded frame-by-frame.
  • Play the animation back at different speeds: You can make the animation playback faster or slower. Click the playback speed icon and choose a playback speed. Then click the Play icon to start the animation — it will change to a Pause icon allowing you to stop playback. Playback will resume from the play head's current position. You can reposition the playhead at any time while the interaction is playing, either by dragging it, or clicking in the top bar of the timeline.
  • Resize the interface: You can make the timeline taller or shorter by dragging the division between the preview and the timeline
  • Inspect the animation of a particular Response: Click on any Response in the timeline, and an inspector window pops up in the upper right side of the screen. These show the exact values of properties at the start and end points of your animation, the animation curve easing parameters, as well as the "current" value of the particular property you are inspecting. The current value updates in real-time, in sync with the play head.
Inspect the animation of a particular Response
  • Inspect a particular Layer: The Layers stack is available to the left of the preview. If you click on any layer, the inspector window on the right updates to show the layer's properties in real-time in sync with the play head.
Inspect a particular Layer

ProtoPie gives your Recording a default name, likely New Recording. In the Interaction Recordings panel, you'll now see your new Recording listed. Click the "pencil" icon in order to rename your Recording to something more meaningful to you.

Step 4: Share your Recording

Lastly, you'll want to share your Recording with your Team. You have two ways to do this:

  • Share the Cloud link for the entire Pie. Anyone with this link will be able to see all of the Interaction Recordings created for this Pie listed on the left-hand side, under Interaction Recordings. To do this, click the purple Share button. Configure what options you'd like in Access Settings, then click Copy Link.
share pie
share pie
  • Share a direct link to just a specific Recording. Say you've got many Recordings you've recorded for your Pie, but you want to make sure you're calling out the right one. Remember in the last step, where you renamed your Pie? Instead of clicking the pencil icon, click the first icon that looks like chain links. This will copy a direct link to that specific Recording to your clipboard. Share that with your developer, and you're good to go.
Share a direct link to just a specific Recording

💡 Quick Note: Your Interaction Recordings are protected by the same access settings as the Pie itself. Click the Access Settings button for any changes you'd like to make.

access settings

A History Lesson

When you make an Interaction Recording, the recording does not update to reflect any new changes to your Pie you upload to ProtoPie Cloud. It represents that particular version of your Pie at the point you recorded it. So if the changes you have made affect a particular Recording, you'll want to record a new one and share that around to anyone involved. Your old one won't be removed automatically — it will appear listed alongside any new one you create. So you might want to get into a habit of including the date you recorded it in the name of the Recording, something like this:

Recording list

Of course, you don't need to keep the old one. You can always delete it if it helps keep things better organized. But be aware: once you delete a Recording, it's gone for good. There's no way to recover it.

Easy as Pie!

In just a few short minutes you've learned how to create fully interactive specifications for your interactions that you can share with your development team.

Resources