Figma
Figma
Figma
UX Exploration
UX Exploration
Live Loop - Turning prototype flows into playable experiences.
Live Loop - Turning prototype flows into playable experiences.
1 Week
Product Designer
UX Strategy
UI
Interaction Design
Overview.
Overview.
Overview.
Live Loop is a concept that transforms prototype flows into autoplay, loop-able experiences that can be placed directly inside Figma Sites without recording or exporting.
Live Loop is a concept that
transforms prototype flows into autoplay, loop-able experiences
that can be placed
directly inside Figma Sites without recording or exporting.
Live Loop is a concept that transforms prototype flows into autoplay, loop-able experiences that can be placed directly inside Figma Sites without recording or exporting.
Pinpointed Issues.
Pinpointed Issues.
Pinpointed Issues.
Prototype flows are designed to be experienced, yet sharing them outside Presentation mode often requires manual recording or exporting.
Prototype flows are designed to be experienced,
yet sharing them outside Presentation mode often requires manual recording
or exporting.
Prototype flows are designed to be experienced, yet sharing them outside Presentation mode often requires manual recording or exporting.
Takes additional time.
Takes additional time.
Interrupts iteration.
Interrupts iteration.
Converts interactive experiences into static media.
Converts interactive experiences into static media.
Key Insight.
Key Insight.
Key Insight.
A prototype already contains its sequence, timing, and transitions.
Instead of recreating it as a video or GIF, those interactions can be repurposed as a native presentation format.
A prototype already contains
its sequence, timing,
and transitions.
Instead of recreating it as a video or GIF, those interactions
can be repurposed as a native presentation format.
A prototype already contains its sequence, timing, and transitions.
Instead of recreating it as a video or GIF, those interactions can be repurposed as a native presentation format.
Patching Things Up.
Patching Things Up.
Patching Things Up.
Live Loop
Convert any prototype flow into an autoplay, loop-able component that can be placed directly inside Figma Sites.
No recording. No exporting. No rework.
Live Loop
Convert any prototype flow into an autoplay, loop-able component
that can be placed directly inside
Figma Sites.
Live Loop
Convert any prototype flow into an autoplay, loop-able component that can be placed directly inside Figma Sites.
No recording. No exporting. No rework.
No recording. No exporting. No rework.
Autoplay + Loop —
Optimized for passive viewing in portfolios and websites.
Autoplay + Loop —
Optimized for passive viewing in portfolios and websites.
Linked Source —
Changes to the original prototype automatically update every Live Loop instance.
Linked Source —
Changes to the original prototype automatically update every Live Loop instance.
Native Component —
Keeps the workflow editable and eliminates repeated exports.
Native Component —
Keeps the workflow editable and eliminates repeated exports.
Live Loop interaction
Scope.
Scope.
Scope.
Key Takeaways.
Key Takeaways.
Key Takeaways.
Reflection.
Reflection.
Reflection.
