In an exact contradiction to the title, prototyping is not a myth. My understanding towards it differs in that very aspect, wherein, prototyping in the way I learnt it, is not how the real world of engineering and design prototyping functions. Things are a bit more complex, and layered. This piece is an attempt to examine the practices around:

  1. Figma / Powerpoint Prototyping
  2. Stateful Prototyping
  3. Microinteraction Prototyping

While when I first played around on Figma as a college kid, it was both fun and a sense of vow to see how “Smart” Animate affected change, and produced an effect of change of state.

If interaction within an UI layer can be represented at its most atomic level, we can see that there is an action, which in turn causes its constituent components to change, in this case, a button in its default state turning into a different colour as it is being pressed.

If interaction within an UI layer can be represented at its most atomic level, we can see that there is an action, which in turn causes its constituent components to change, in this case, a button in its default state turning into a different colour as it is being pressed.

What the surface represented was a change of state, or some sort of change, from a lighter shade of blue, to a darker shade of blue.

The three keywords that can be understood:

  1. The Subject - the molecular unit, in the above example, a button.
  2. The Surface / Interaction unit - The relevant unit of the subject where the state change is reflected.
  3. The State - The primary, and resultant forms of existence for the said unit
  4. Interaction - The irreversible change that takes place post a stimulus in the environment

Why Figma Prototyping ≠ Prototyping

I can sound like a person who takes very hot takes, and call Figma prototyping as glorified slide-making, without a central object model, hence lacking any real interaction value.

But with the recent changes to the variable modes, inherent component states, variants, it is getting closer to modulating actual data-dense product applications.

From figma.com: If an object changes in size between frames, Figma will animate it shrinking or growing.

From figma.com: If an object changes in size between frames, Figma will animate it shrinking or growing.

What does Figma say about Smart Animate

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