Oct 4, 2016
Flinto 2.0: Introducing the Behavior Designer
Flinto for Mac 2 is available now. This major release includes a new feature called the Behavior Designer that allows for the creation of micro-interactions that happen within screens. This version also includes a redesigned, easier-to-use Transition Designer and we’ve added a way to share transitions and behaviors between Flinto documents.
We’ve reset all the Flinto for Mac free trials, so if you’ve tried it in the past, nows a great time to give it another look.
Introducing the Behavior Designer
Use the Behavior Designer to create micro-interactions that happen within screens. Things like scroll-based interactions, looping animation, toggle switches, button effects and many others can be created. Behaviors are reusable, just like transitions. Behaviors can be interrupted, for super-responsive interactions.
Using the behavior designer is fast, and modifying the animation is completely visual. You actually modify the very layers that animate so you don’t feel disconnected from the end result of your work.
Behaviors are applied to groups and consist of a series of states. By adding links in each state, you can navigate between them, animation happens automatically. Learn how to the Behavior Designer works in detail on our tutorial videos page.
To design a toggle switch, create an on and off state. Each of those states would have a tap gesture targeting the other state. You could add swipe gesture between the states too for added realism.
To make a looping animation in the behavior designer, make a state for each position of the layers, then link the states together with timer links.
For a scroll-based animation, use the new scroll gesture to link from one state to another. The animation from one state to the other happens as you scroll over the range you define. The example above uses two behaviors on the same group, one for the shrinking header and another for the parallaxing image on the right.
When you exit the Behavior Designer, you can focus back on other aspects of your prototype without worrying about the details of the behavior.
Shareable Transitions and Behaviors
Also new in Flinto 2 is the ability to share transitions and behaviors between documents. Copying a link from one document to another makes any transitions associated with that link available in the new document. Groups with behaviors applied can also be copied into new documents and re-used.
This is great news for teams that want to share a standard set of transitions and behaviors. It’s also great for the overall community because it allows anyone to share a Flinto document full of cool transitions and behaviors for others to use.
New easier to use Transition Designer
The Transition Designer in Flinto for Mac also received attention in this update and is now even easier to use. We addressed several common sources of confusion in the Transition Designer and added a new setting for creating “aligned screen” transitions.
- New start and end screen thumbnails make explicit which screen is the start and which is the end.
- The screen borders have been removed in favor of treating screens like groups. Clicking and dragging a screen moves the whole thing. Double click or command click to access layers inside.
- A new “Align Screens” check box locks the screens into alignment making this common scenario much less error-prone.