Interactive prototyping

We currently support linear-based prototyping

A basic primer

Figma’s prototyping features allow you to create interactive flows that explore how a user may interact with your designs. There are multiple ways prototyping is used:

• Creating complex branched user-flows

• Creating interactive and non-interactive micro animations through Smart Animate

Linear and branched prototyping

In the above example, Flow 1 and Flow 2 are linear prototypes, which Dualite supports whereas Flow 3 is branched prototype, which we do not support

Types of effects, actions and transitions we support

Triggers	Animations	Actions
On-click	Instant	Navigate
While hovering	Dissolve
After Delay	Smart Animate

Smart Animate

We're the only product that can convert Smart Animate based interactive prototypes to high quality code, but there are few things to be mindful of.

Smart animate looks for matching layers, recognises differences, and animates layers between frames in a prototype.

Naming in Interactive Prototyping

Naming is important for the identification of elements in any interactive prototyping, especially if your flow is dealing with Smart-Animate transitions between frames.

Frame 1 had Ellipse 1 naming of the element, but in Frame 2 it was changed to Ellipse 4, which post-conversion in Dualite will not work due to inconsistent naming across frames