Flintopia
Flinto
Flintoclass@home

Flinto Mexico's digital wallet. Send money to friends, pay at merchants, and take care of your bills through your phone, even without a bank account. Flinto is a great tool for communicating your app design concepts and testing them on-device and in-context. Import from Sketch and Figma. Flinto integrates with the most popular design software — Sketch and Figma, which lets you easily move your work into Flinto. Flinto maintains editable text and shapes after import. Flintco provides innovative construction solutions with an unrelenting focus on quality, safety, cost and schedule. Download Flinto and enjoy it on your iPhone, iPad, and iPod touch. ‎The App Design App This is the companion app to Flinto for Mac. Flinto allows you to create high-fidelity prototypes with custom animated transition, direct manipulation gestures and flexible scrolling options. Presents the first 3DC Premium Guide in the World with full VR access. Is a premium guide with interactive presentations of the best locations of the world.

When it comes to creating advanced interactive app prototypes, there’s been no shortage of options for the design community. In the past, we tried Framer.js, Pixate, and Origami, just to name a few. As a member of the design team at Savvy Apps, we found these kinds of tools overly limiting and too complex to use. Some of them even rely on actual code, which for some designers is a scary thought. For our more basic prototypes, we’ve been happy customers of Flinto since early 2014. Like some other options, Flinto—until recently—was entirely web-based, which severely limited the kinds of interactions we could design. That’s where Flinto for Mac and Principle enter the picture.

Flinto for Mac and Principle are new, easy-to-use tools for crafting advanced interactive prototypes. The big difference between them versus past options is that they do not rely on the web to either create or use a prototype. They each provide a native Mac app to design interactions. These Mac apps subsequently produce a native app to install on a device. With this approach, the animations, transitions, and interactions are much richer. They now are akin to what could actually be developed in an actual development environment like Xcode.

Although both tools are still very young, they have managed to transform the way we communicate app designs. Here's our detailed look at how Flinto for Mac and Principle stack up against each other as mobile app prototyping tools, and how we've already integrated them into our app creation workflow.

Flinto for Mac

Flinto takes a quantity over quality approach to prototyping. It provides the tools to quickly create transition-based animations and the screen management to handle a large number of app screens. It's easy to trace the flow of a many-screen app with all of its transitions and interactions. Import tools and transition tags help designers keep naming and animation elements consistent across all screens. Designers who want more control over fewer screens will want to choose Principle instead.

Transition Designer

The Transition Designer allows us to customize animations between two screens based on where we position the second (resulting) screen and the time effects we apply to the transition. With the Transition Designer we can fade screens in and out, scale them, as well as apply curve and spring effects. The end result is always the state of the second screen. This feature is intuitive, remembering animations on objects and applying the same animations on similar objects on other screens. We can slow down the animation to better see what adjustments need to be made, input specific values for curve and spring effects, and apply multiple animations on a single object.

Sketch import

Flintopia

Flinto for Mac is one of the only, if not the only, prototyping tools that allows us to import from Sketch. The plugin imports everything we have in Sketch as an individual object and keeps the names. Sketch is quickly being adopted by designers for application-focused work thanks to its vectorized model and interface focus. We’ve seen some significant improvements to the way we design mobile apps thanks to features like multi-resolution exporting, Shared Styles, and Symbols. For those interested, you can learn more about the transition from Photoshop to Sketch designer here.

Sharing

The first, web-based, version of Flinto was fantastic in the way we were able to share our designs with customers and other Savvy team members. We tried lots of different prototyping tools before landing on Flinto because of how mobile-centric and easy it was to share. Since moving away from the web-based version to the native Mac version, sharing our mockups has become a great headache. Now we have to send a Flinto for Mac file as an attachment via email or text message. That attachment must then be opened by the [Flinto iOS companion app] (https://itunes.apple.com/us/app/flinto/id972238373) before interacting with the prototypes. It’s a shame that what was once a huge selling point to Flinto has become an afterthought.

Pros

3D transformations
Transition tags allow animations to be reused across screens
Desktop preview with a full screen option
View live previews in Flinto app
Uses artboards like Sketch
Built-in gestures: Tap, double tap, long tap, swipe, touch down

Cons

Scroll groups require a lot of setup for what should be a relatively easy task
No Photoshop import
Have to download the free Flinto app to open Flinto documents on devices
No animation value export, making it difficult to share specs with developers

When to use Flinto

Use Flinto if you're trying to prototype an entire app, particularly an app with a lot of screens and basic transitions. Check out the tutorials available on their site for more ideas.

www.flinto.com/mac $99

Principle

Built by a former Apple engineer, Principle's approach provides timeline-based control over individual elements between screens, allowing more finite and robust control over the transition. The depth of control Principle gives us makes it more suited for creating and testing more complex animations that focus on functionality, like navigation.

Animate View

The Animate view sits at the bottom of the window and is used to animate between artboards. This timeline exists between each action (tap, scroll, etc.) and a second (resulting) artboard. It allows us to animate elements, of the same name, between two separate artboards. From it we can set and alter the duration and delay of connected elements during their transition. We also have the ability to adjust easing. There are six preset easing methods, but if you’re feeling adventurous you can also create your own.

Drivers View

Flinto

The Drivers view gives us even more control in that it allows us to animate things on the screen based on an action or changing property. For example, if one element is being dragged across the screen, we can also animate something else. Drivers properties live in artboards as opposed to Animate properties, which live in the transition between screens.

Pros

Built-in preview window. Can be dragged off into its own window
Principle Mirror app used to preview Principle files
Uses artboards like Sketch
Built-in interactions: Dragging, scrolling, and paged scrolling
Built-in events: Tap, drag begin/end, scroll begin/release/end, touch down/up, long press
Scroll groups are as simple as accepting horizontal or vertical scrolling
Very easy to learn for designers not used to traditional animation tools

Flintoclass@home

Cons

No Sketch or Photoshop import
No 3D transformations
Principle Mirror app required to open Principle documents on devices
No animation value export, making it difficult to share specs with developers

When to use Principle

Use Principle to prototype a couple of screens with a s