Schlagwort: Protopie

After completing the first part of the ProtoPie 101 Crash Course, I was excited to continue my learning journey. Unit 2 focuses on creating micro-interactions, covering three key topics:

1. Screen transitions
2. Scrolling & paging
3. Slide menus

The pace of the training picked up in this section, making it more engaging but also requiring more attention. Here are my takeaways from each topic.

Screen transitions

Trying out different transition types was interesting, and I particularly liked the smart transition, which is similar to Figma’s Smart Animate. It enables smooth custom transitions between two states as long as elements share the same name across scenes. Since this is a familiar concept for many designers, it makes ProtoPie feel intuitive right from the start.

A notable feature is the ability to add the system status bar of a specific smartphone frame without manually inserting it as a layer. This helps maintain consistent states and transitions between screens.

However, one limitation became clear: all transitions happen simultaneously without the ability to sequence animations. Thankfully, there’s a workaround. By animating elements first and then applying a smart transition, we can control the animation order. The instructor demonstrated using scale and move responses first before adding the transition.

Another useful feature introduced in this section was the reorder response, which allows changing the stacking order of layers. The four reorder options include:

1. Move forward one in the stack
2. Move backward one in the stack
3. Move to the top
4. Move to the bottom

Finally, adding a jump response enables smooth transitions between scenes. Once all responses are added, they can be sequenced independently in the timeline, making animations more dynamic and structured.

Three ways to do a screen transition:

1. Built-in transitions
2. Custom smart transitions
3. Animating elements before applying a transition

Scrolling & paging

The crash course provided well-prepared pre-made material, which made following much easier.

A container is used to basically mask a scrollable area. Any container can be turned into a scrolling container, with three scrolling options:

• Scroll (continuous movement in a direction)
• Paging (stepwise scrolling)
• None (no scrolling enabled)

Interestingly, the container tool is a standalone tool in the toolbar. The direction of scrolling can be set to vertical or horizontal and overscroll effects can be enabled or disabled. The process was extremely simple and intuitive!

Paging and carousel elements

With paging, it’s possible to position carousel elements stepwise in the center of the screen while scrolling horizontally. However, one issue emerged: the last item aligns with the screen’s edge instead of stopping at the center. To fix this, an invisible rectangle can be added at the end to create spacing. Initially, I thought this method is not elegant, but just moments later, the instructor introduced a better alternative – adjusting the properties panel. It’s great to see that ProtoPie anticipates these usability needs!

Constraints in containers

This was a short but important topic. By default, containers are anchored to the top-left corner and elements inside do not resize automatically. However, deselecting fixed height or width allows elements to resize proportionally. This feature is super useful for responsive design.

Three ways to create slide menus

As the instructor pointed out, there are multiple ways to achieve the same effect in ProtoPie. For slide menus, three trigger types can be used: drag, pull, and fling.

1. Fling trigger

The fling trigger was applied to a side menu layer, using a move response to shift it into view. However, there was a problem – the sidebar was off-screen, making it unclickable.

To fix this, the fling trigger can be applied to any visible object, affecting the sidebar indirectly. A better approach is to add a touch area, extending the interactive zone without requiring invisible layers. This is a clever and efficient way to improve usability!

To close the menu, a second fling trigger with a move response can be used or a reset response (as seen in Unit 1). One downside is that the trigger must fully complete before the menu moves, which feels slightly unnatural from a user perspective.

2. Pull trigger

The pull trigger works differently – it’s based on distance pulled rather than absolute position. This means the menu moves in sync with the user’s finger, making it a more intuitive way to implement slide menus. Additionally, when released, the menu will automatically snap open or closed based on its position.

The instructor also mentioned that the pull trigger is perfect for pull-to-refresh interactions, which is great to know!

3. Drag trigger

The drag trigger behaves similarly to fling but requires a move response. By default, dragging moves the object in any direction, but setting it to horizontal-only in the properties panel restricts movement.

A potential issue: Users can drag beyond the intended position. To fix this, custom limits can be set in the properties panel. However, the menu still doesn’t snap closed by itself.

To fix this, we use a touch-up trigger combined with a condition response. This allows defining a threshold – if the menu is more than 50% open, it stays open; otherwise, it snaps closed. Constraints make interactions much more flexible!

Further learning

At the end of this unit, the course provided additional tutorials showcasing what’s possible with ProtoPie. These examples were inspiring and raised my interest of advanced interactions. The unit concluded with another knowledge test, reinforcing the learning experience.

Conclusion

Completing Unit 2 of the ProtoPie 101 Crash Course was an exciting and rewarding experience. The structured approach made even complex interactions easy to follow and I now feel confident in creating sophisticated micro-interactions.

ProtoPie’s approach to prototyping continues to impress me – especially its flexibility, intuitive design and developer-friendly handoff process. I’m eager to continue learning and exploring more advanced features in the upcoming units.

Resources

https://learn.protopie.io/start

https://learn.protopie.io/course/protopie-101

https://cloud.protopie.io/p/1a8b65c2398caca10872b720?ui=true&scaleToFit=true&enableHotspotHints=true&cursorType=touch&mockup=true&bgColor=%23F5F5F5&bgImage=undefined&playSpeed=1

Inspired by my colleagues, I thought signing up to the official ProtoPie 101 Crash Course would be a good preparation when it comes to the work piece in my master’s thesis. Since I possibly want to use sensor technology and the visual as well as auditory level of communication, ProtoPie promises to emulate what feels like a programmed app due to its advanced prototyping capabilities.

Getting started

Every chapter of the ProtoPie 101 Crash Course begins with a clear outline of „What you’ll need“ and „What you’ll learn.“ This approach helps set expectations and ensures users are prepared with the necessary tools and mindset before diving in.

Unit 1: Introduction to ProtoPie

ProtoPie introduces a unique conceptual model based on object + trigger + response. The logic is simple: If I tap the square layer, then it will move. This principle extends to multiple micro-interactions, like carousels.

The prototyping process in ProtoPie involves three key platforms:

• Studio for creating prototypes
• Player for displaying prototypes on mobile devices
• Cloud for sharing and collaboration

To get started, ProtoPie outlines four essential steps:

1. Add assets
2. Make interactions
3. Test & share
4. Collaborate

The structure is intuitive, making the onboarding process smooth and easy to follow.

Step 1: Add assets

This step introduces knowledge tests with multiple-choice questions. For instance, I encountered this question:

„When you export an entire frame or artboard from your design tool, how does this get imported into ProtoPie?“

The answer options were:

• Object in Scene
• Scene
• New Pie
• Frame

At first, it was unclear what exactly constituted a scene, a frame, or an object in a scene. However, the narrator clarified these distinctions after the first question, making it much easier to understand.

Importing assets from Figma was incredibly smooth. Everything transferred seamlessly, making the process highly efficient.

Step 2: Make interactions

My task in this step was to create an interaction where an icon on a home screen wiggles after a long press, allowing position edits, and stops wiggling when exiting edit mode. To achieve this, I used:

• Long press and tap as triggers
• Rotate and stop as responses

Some standout features during this step included:

• Duplicating triggers and responses, which made iteration much faster
• The timeline feature, which allows responses to occur sequentially – this was an excellent addition
• The reset response, which makes it easy to revert an interaction back to its initial state

Overall, creating interactions in ProtoPie felt logical, intuitive, and efficient.

Step 3: Test & share

Now came the phase of installing the ProtoPie Player app. Prototypes can be displayed by:

• Connecting a mobile device to a computer via USB
• Scanning a QR code when both devices are on the same WiFi network

The display experience was just as seamless as in Figma. Sharing prototypes was also straightforward. A link can be distributed with controlled access settings, determining:

• Who can view the prototype
• Who can download the file for further editing
• What UI elements are visible when opening the link

This flexibility ensures that collaboration remains secure and structured.

Step 4: Collaborate

The course then introduced interaction recordings (formerly known as „interaction recipes“). Unlike other prototyping tools that attempt to generate code – often unsuccessfully – ProtoPie focuses on providing accurate interaction values for developers.

With interaction recordings, developers can:

• Play and scroll through the timeline at different speed levels to fully understand the interaction
• Share single recorded interactions via individual sub-links

Additionally, ProtoPie allows elements with interactions to be transformed into reusable components, similar to Figma. Once inside a component, interactions move with it. Components can also be uploaded to a team library, enabling:

• Cloud-based collaboration
• Editing in library mode with cloud-synced updates
• Easy pasting of components from local files to the cloud team library (though changes need to be published before others see them)

Knowledge test & learning progress

The first chapter concludes with a knowledge test, designed to help measure comprehension. If results indicate gaps in understanding, the system suggests to do the chapter again before proceeding. I found this to be an excellent learning reinforcement tool. Additionally, test results can be downloaded for documentation, making it a useful feature for employer verification.

After completing this first chapter, I had reached 20% progress in the overall crash course. This made me eager to continue and explore the advanced capabilities of ProtoPie.

Final thoughts

My experience with the ProtoPie 101 Crash Course so far has been extremely positive. The course is structured in a way that makes learning both engaging and practical. The hands-on approach, combined with well-integrated knowledge tests, ensures that users truly get the concepts before moving forward.

ProtoPie’s approach to prototyping – focusing on visual interaction recordings instead of auto-generated code – stands out as a particularly developer-friendly and intuitive method. It eliminates ambiguity and allows for precise handoff between designers and engineers.

With 20% of the course completed, I am excited to see what’s next! Stay tuned for further insights as I continue my ProtoPie learning journey.

Resources

https://learn.protopie.io/start

https://learn.protopie.io/course/protopie-101

https://cloud.protopie.io/p/1a8b65c2398caca10872b720?ui=true&scaleToFit=true&enableHotspotHints=true&cursorType=touch&mockup=true&bgColor=%23F5F5F5&bgImage=undefined&playSpeed=1