30 seconds to make interactive prototype of the secondary era artifact Flinto

30 seconds out of interactive prototype, 5 minutes to fix interactive animation! Today @payshare to everyone Amway a Super practical interactive prototype production artifact, the bright spot has 3: The whole interactive prototype production, and sketch seamless cooperation, the production speed quickly to unimaginable, contains a tutorial, less than 20 seconds effect on completion you dare to believe? Come on, collect!

Flinto's predecessor is an online prototyping tool, by uploading pictures, add hotspots with the corresponding interactive action rapid generation of the overall prototype through the Web page or mobile phone to display to the customer to see, and the previous introduction of the briefs very similar, but Flinto is online application.

With the popularity of mobile devices, Flinto is also evolving, the team developed a Flinto for Mac version, as of today's version is Flinto 1.12

The advent of any tool is to improve our efficiency. As an interactive prototyping software first to meet:

can be human-computer interaction

Easy for designers to communicate with other people

Reduce development costs

　　Some effects of Flinto

It may be hard to imagine that the last three effects are done in a very short time (very short <=5 minutes).

In addition to the current flinto with transparency changes, xyz axis rotation, XY axis displacement, motion curve adjustment, mobile side save preview, and other basic functions, the greatest advantages are five:

The making of the whole interactive prototype

Seamless coordination with sketch

Fast production speed

So fast.

The production speed is very fast

　　Case

Here we want to make the effect as above:

First, draw a static effect diagram in Sketch:

2. Use the Flinto plug-in one key to export to Flinto, click the corresponding picture to add trigger interaction behavior, here is tap, namely click, New Change (new transition)

3. Adjust the background layer transparency to 0, adjust the whole layer position, link enlarge picture to small picture, adjust motion parameter.

4. Save the action, select four pictures in groups to make scrolling scroll, add return behavior, preview effect.

The above effect I made the prototype actually took less than 20 seconds.

The reason why the short time benefit from Flinto's connet layer (similar to flash motion tween), so that changes between the layers can be very rapid production, and the back link function allows us to create a key to the return effect of the prototype, these two points undoubtedly greatly accelerate the production speed , and the interactive action made by new transition and connet layer tags can be reused, in short, unimaginable fast.