Flinto is a Mac app used by top designers around the world to create interactive and animated prototypes of their app designs. Download Free Trial. About Press Copyright Contact us Creators Advertise Developers Terms Privacy Policy & Safety How YouTube works Test new features Press Copyright Contact us Creators. Interview: How Flinto is redesigning education for the 21st century 26th March 2019. Flinto is an early learning brand that uses psychologists-backed insights to design products for critical thinking, problem-solving, collaboration and teamwork. In other words, crucial 21st century life skills.

Flintofts Funeral Home Issaquah
Flintor

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

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

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

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 specific, intense animation. Some examples where it might shine include animating based on user input (i.e. dragging of an option causes it to modify and morph) or creating exciting onboarding screens. Principle also has some tutorials available.

principleformac.com $99

Concluding Note

While at first glance they appear to be competitors, we believe there’s room for both Flinto for Mac and Principle. It in part depends on what you’re trying to achieve. Do you want to create a certain