Protopie And Figma

Figma is a fantastic tool for quickly creating prototypes. It’s perfect for presenting designs to clients, testing important user flows, or handing off microinteractions to developers. However, Figma currently lacks the ability to use variables or create keyframe animations that work in the Presentation view.

This is where ProtoPie comes in. ProtoPie allows you to transform your Figma designs into high-fidelity prototypes with conditional interactions, multi-touch gestures, camera and device sensor access, media playback, voice control, and much more. Today, I’ll show you how to use inputs in ProtoPie.

Start in Figma

To begin, you’ll need some designs to work with. Let’s say you’re designing a view that allows users to add new profiles to their accounts. To make it more interesting, we’ll also add a simple illustration that we can animate. Remember to name all the layers correctly to keep everything organized.

Export to ProtoPie

Once you have your design ready, you’ll need to export it from Figma. Install the ProtoPie plugin and make sure the ProtoPie app is running in the background. Select the frame you want to work on and click the export button to send it to ProtoPie. Your frame will be imported as a scene with the same layer hierarchy, naming, and positioning as in Figma.

Continue in ProtoPie

Now the fun part begins! When you switch to the ProtoPie window, you’ll notice that the interface is quite similar to Figma. The left panel contains all your layers, the top toolbar allows you to add different types of objects to your prototype, and the right-side panels include properties, timeline, and interactions. Even the preview button is in a similar place, making it easy to navigate for anyone familiar with UI design software.

First, replace the placeholder with an interactive input layer. It’s located on the top-left toolbar, underneath Text. Then, customize its properties in the Property panel on the right. You can hide the placeholder text, round the edges, change the background fill and border, and adjust the font and text color to match your design.

Next, add triggers and responses to create the interaction. You’ll need three components: an object, a trigger, and a response. The object is the input layer. Triggers initiate one or more responses. Responses are modifications in an object that are activated.

We’ll use the focus trigger as an example. When the input layer is focused, the blinking cursor and the native smartphone keyboard will appear. We also want to add a green border around the input. To add a trigger, select the interactive input layer, go to the Interaction panel, click the “Add Trigger” button, and select “Focus”. Then, under the Focus trigger, click the plus sign to create a response. Select “Border” and change the width to 2px.

You’ll need to add another focus trigger to define what should happen when the input is no longer active. Select the input, click “Add Trigger” -> “Focus”, and switch from “Focus In” to “Focus Out” in the Properties panel. Then, add the “Border” response and change the width to 0.

Once you’re done, you can preview your prototype in the preview window, which can be opened from the top-right corner of the toolbar. Any interaction failures will be apparent in the preview pane. The prototype automatically refreshes as you make changes to your layers or interactions.

To add a finishing touch, let’s animate the illustration based on the input. For example, we can make the eyes follow the cursor position inside the input. Select the eyes layer and add the Move response to focus triggers. You can define the eyes’ position by counting the number of characters in the text entered using the length() formula. Add the Move response to the focus out event to reset the eyes’ position. Lastly, add the Detect trigger to make the eyes follow the cursor while typing.

The Final Result

Now it’s time to preview your finished microinteraction and see the magic in action!

Conclusion

Microinteraction prototyping is an effective way to discuss and test design decisions. The seamless workflow between ProtoPie and Figma allows designers to prepare sketches in Figma and easily create interactive prototypes in ProtoPie using formulas, variables, and conditional logic. This also makes it easier for developers to bring designs to life in code, as interaction recordings eliminate the guesswork needed in recreating After Effects animations.

With ProtoPie, designers can turn their ideas into high-fidelity interactive prototypes without writing a single line of code. Start building your own ultra-high-fidelity prototype today!