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

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

Last updated 8 months ago