Flinto for Mac 2.2 is now available. Be sure to install the updated Sketch Plugin.

Text Tool

Flinto for Mac now supports text! Type and edit text directly in Flinto for Mac. Editable text also comes through when importing from Sketch. This is a powerful text tool with all the features you'd expect like character spacing, line-height, text transformations, multiple styles, underline, lists and more.

Best of all, the size and color of text are now animatable properties.

Vector Tool

You can now draw and edit vector shapes directly in Flinto for Mac. This is amazing for quickly mocking up a UI, animating it, and getting it onto your phone in minutes!

Shapes can have a single border and a single solid fill along with a drop shadow. You can animate all those properties including the position of vector points!

You can also set the border percent, and animate that too to create effects where a border appears to be drawing itself.

Sketch Plugin Update (No More Flattened Groups!)

Our updated Sketch plugin supports sending vector graphics and editable text to Flinto, and no longer flattens your groups!

Keep in mind that only text and shapes with supported properties will be imported as vector. For example, shapes with multiple borders will be converted to bitmaps because Flinto for Mac does not support that feature.

New Localizations

We're thrilled to announce that Flinto for Mac is now localized in eight languages: English, French, German, Spanish, Russian, Korean, Simplified Chinese and Traditional Chinese.

Repeat Action

We built a useful feature for repeating actions on duplicated layers. You can duplicate a layer by holding option and dragging it. Then pressing command+d will duplicate it again and move it by the same amount. What's cool is you can actually fine tune the position by nudging the shape, rotating it or changing it's opacity, then pressing command+d will duplicate all those operations.

Zoom Increase

The maximum zoom has been increased to 1,600%.

Changes to 3D

Each layer has it's own local vanishing point instead of a global vanishing point per screen.

Enhanced PT/PX Mode

There's a lot of talk about whether to design at 1x or 2x. In Flinto for Mac, you don't really need to choose. You can choose PT mode and get the feeling of designing at 1x where 100% zoom shows a comfortable 1x screen size, or choose PX mode to see a large screen with actual pixels and design at 2x (or whatever the pixel density of your document is). You can switch between these modes at any time.

Also, if you drop a bitmap into Flinto that is 100px while in PX mode with a 2x document, it will be 100px wide. If you drop it in PT mode, it will show up at 100pt wide.

• Try Flinto
• Share this on Twitter
• Join our Facebook Group

We love this kind of update. A chance to refine something we've built. Flinto for Mac 2.1 is available today and adds some great enhancements to the Behavior Designer. But we didn't stop there, we've made a series of great improvements throughout the app.

Get Flinto for Mac 2.1 and update your Sketch Plugin because we've improved that too!

Scrolling Improvements

Auto-reverse scroll animations

When you use the Behavior Designer to create a scroll-based animation, you used to have to set up two gestures, one for scrolling forward and one for scrolling back. Not anymore! Now we automatically reverse scroll gestures, so you can scroll back without doing anything. It's a huge timesaver, but it also creates new possibilities for Behaviors with multiple scroll animations.

We added a little convenience to scroll gestures too, you can drag the range arrow to quickly reposition it.

Swipe gestures on scroll groups

In this version, we've made it so that swipe gestures work when applied on scroll groups. Instead of overriding the scroll group, you can scroll it like normal. When you reach the end of the scroll group, and it comes to rest, then you can acitvate the swipe gesture. This will happen at the top with down swipes, bottom with up swipes etc.

Animatable scroll content size

Now you can animate the content size of scroll groups in the Behavior Designer. This is useful when you have something like an accordion menu where it causes the scroll content to grow when you toggle a menu item.

Other important new improvements

Screen-to-screen links on top of Behaviors

Sometimes you want to combine a behavior with a screen-to-screen link. Now, this works with all gesture types. Just put a link on top of a behavior and when you tap the link, it will activate the behavior below it as well. This lets you combine Behaviors and regular links.

Reset Scroll Groups and Behaviors

We're happy to get this frequently-requested feature into Flinto for Mac. We added a new option in the inspector for Scroll Groups and Behaviors called "Leaving Causes Reset". This setting will cause behaviors to be reset to their default state when you leave the screen by activating a screen-to-screen link. It resets scroll groups too!

And lots of Little Stuff

• The preview window is much smarter about how it sizes itself. The animations going in and out of fullscreen are smoother too.
• Added separators to the gesture menu.
• Newly added screens are placed at more logical positions.
• Improved the layer rotation UI.
• Hidden layers are now imported from Sketch. - Big performance improvements in the Behavior Designer in certain situations. - Fixed some bugs related to the back link target. - Fixed lots of bugs related to the behavior designer and the display of behaviors in the preview.
• Fixed some issues where the quicklook and thumbnail display of .flinto files would show up incorrectly.
• Prototypes are kept active when the iOS viewer goes into the background.

• Try Flinto
• Share this on Twitter
• Join our Facebook Group

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.

Try Flinto for Mac 2

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.

• Try Flinto
• Share this on Twitter
• Join our Facebook Group

Hot on the heels of version 1.5 which saw the introduction of sound support and native rectangle shapes, we’re releasing version 1.6 which you can download here. There's also an update to the Sketch plugin which you can download here.

Here’s what’s new:

The New Link Line

We've totally rebuilt the link line to be more useful and fun. Now when you select a link, the link line appears. It’s much easier to see where links are pointing. When choosing a target screen for a link, the line animates and moves in a more natural way. A convenient gesture icon appears on the link line, indicating at a glance which gesture you have assigned. Clicking the gesture icon gives you immediate access to the gesture and transition options.

Remember, you can hide links (and link lines) by clicking the "Toggle Links" toolbar button or using the command+l shortcut.

Hover Outline

This little improvement a world of difference when working in the Transition Designer. You'll see an outline when hovering over a layer which helps you to know exactly which layer you are about to select. This is handy in the canvas when arranging the layers of your screens, but it’s a lifesaver in the Transition Designer where you might be working with hidden or obscured layers more frequently.

Big Improvements to Canvas Operations

We’re kinda obsessed with making the canvas operations (things like resizing, selecting, grouping and moving layers) in Flinto for Mac work really well. With the addition of rectangles in version 1.5, we felt the need to enhance our canvas operations even further. Here’s what we’ve got for you:

• Hold command while dragging a layer to disable snapping.
• Resize layers using the command+arrow shortcut.
• Delete links from layers using command+delete.
• Set a default rectangle style (Edit > Set as Default Style).
• New minimal resize handle style with intelligent showing/hiding of handles as space allows.
• Resize handles added to the four sides of layers for more flexible resizing.
• Hide handles while adjusting properties for more precision.
• Improved the behavior of selecting layers inside groups with the command+click shortcut.
• Resizing a scroll group keeps the content size consistent.

Scalable Preview Touch Cursor

In the preview window, the cursor is a circle that represents a finger. The problem was, when you zoomed in or out on that window, the cursor stayed the same size, which isn’t quite right, the cursor should represent the size of a finger relative to the size of the preview. So, we added a new auto-scaling cursor that is dynamically drawn, so it looks crisp at all sizes.

Support for Additional Pixel Densities

We've added 1.5x, 3x and 4x options to support Android devices with those pixel densities.

Try Flinto for Mac

Download Flinto for Mac 1.6 and try it free for 14 days. If you've tried Flinto in the past, we recently reset all the free trials so now is a great time to give it another try.

• Try Flinto
• Share this on Twitter
• Join our Facebook Group

Flinto for Mac version 1.5 is available now. To celebrate, we’ve reset all the free trials. If you’ve tried Flinto for Mac in the past, you should give it another shot because we’ve made a lot of updates! Download it from the Flinto for Mac website.

Rectangles

Flinto for Mac now supports vector rectangle shapes. You can draw rectangles directly in Flinto, and rectangles in Sketch will import as actual rectangles rather than bitmaps. Having rectangle shapes in Flinto for Mac means you can smoothly animate properties such as corner radius, fill color, border and shadow. This opens up tons of new possibilities.

This means you can quickly draw simple layouts right in Flinto for Mac.

Adjust new properties that weren't previously available in Flinto for Mac.

And by animating the new properties, you can do really nice effects. Try connecting two different rectangles for smooth transitions of color, shape, drop shadow etc.

Sound Support

You can now attach sounds to gestures in Flinto for Mac! Just drag a sound file onto a gesture in the sidebar and it will be played when the gesture is activated. This adds a new dimensions of realism to your prototypes. UI sounds are so fun!

Sketch Import Updates

The Sketch plugin now sends rectangles and circles to Flinto as vector shapes when possible. As long as the rectangle has a single border, a single solid fill and a single drop shadow, it will import as a vector rectangle layer in Flinto for Mac. Circles are imported as rectangles with a corner radius that makes ‘em circular. The plugin also sends the artboard's background color to Flinto as a rectangle layer. Lastly, we’ve added a handy progress bar to show import progress.

Prevent Bouncing Properties

Sometimes you apply a bouncy spring to a layer that fades in and moves across the screen. It looks great that the layer bounces, but usually you don’t want the opacity to bounce also.

Certain properties tend to look really wrong when they bounce, so we’ve disabled repeated bouncing for opacity, color, shadow, border width and corner radius.

Transition Manager

We added a convenient transition manager sheet where you can see a list of all your transitions. Access it in the Edit menu under "Manage Transitions".

Smarter Default Zoom Level

When you create a new document, Flinto chooses a much smarter zoom level so you can see your screens at as close to 100% as your screen will comfortably allow.

Chinese Localization

Flinto for Mac is now localized in simplified Chinese.

Try Flinto for Mac, free for 14 days

Remember, we’ve reset all the trials, so you have no excuse not to give Flinto for mac a look. This is a really big update and we’ve added so much since we first launched, so there’s never been a better time to dive in.

• Try Flinto
• Share this on Twitter
• Join our Facebook Group

Have you ever had an idea that seemed good, but you wouldn’t be sure until you were able to try it out? Designers face this conundrum frequently when deciding how a software feature should work. If you don’t face this challenge, you’re either a genius, or you mistakenly think you are. Unless you are all-knowing, you will come upon ideas that seem like they will work, but you can’t really tell until you know how it feels to use it. Since software development is expensive, you may hesitate to propose such ideas unless you are certain they will work out.

This is one of the reasons prototyping is valuable, you can try lots of things quickly and refine the ones that work. Prototyping interactions using Flinto for Mac will let you test lots of interaction ideas before a software engineer ever sees them. Prototypes answer questions like, “Will this look weird if it animates?”, “Will it feel more natural for this to be a swipe gesture”, “Is there any reason not to shrink this photo?”. Testing those questions on your own through prototyping will give you confidence of their efficacy when proposing ideas to your team. And you’ll have a demo to back it up.

Industrial designers have a bigger barrier to creating products than those of us designing software. It’s not possible to build hardware, notice something wrong and then tweak it. Industrial designers build countless models to get a feel for their design before having the final product built.

Software designers are gaining the ability to do the same thing thanks to prototyping tools like Flinto for Mac. Our hope is that you’ll use Flinto for Mac to try 10,000 things, and maybe a few of them will be brilliant ideas you wouldn’t have proposed otherwise.

• Try Flinto
• Share this on Twitter
• Join our Facebook Group

The microwave at my old apartment had a voice memo feature. Microwaves are the classic example of an interface that is more complicated than it needs to be. Microwaves have so many buttons, and most of them are never used. On better-designed microwaves, there’s a button “Add 30 Seconds” which will immediately start the microwave and set the timer to 30 seconds. Pressing it again adds another 30 seconds. On microwaves that have this feature, that’s literally the only button I ever press!

My ideal microwave design would be one that I could jab with my hand, and it would activate. I should be able to poke in the general direction of the microwave and have it start. There’s only one function I ever want, that button should cover a large portion of the front of the device.

I find the same is true in my car. Sometimes I need to use the light on the ceiling, and usually it’s dark when I find myself in that situation. When I look up at the area where the light is, I’m presented with a range of knobs, switches and vents. A nice big button I can punch would be the ideal interface.

The worst offender of all is payment systems. The entire experience of paying for things is usually really bad. If you go to a store, you’ll wait in a line. Then you’ll be asked a series of questions like “Do you want to sign up for our rewards program?” before swiping your credit card, only to be told you need to insert your your card into a slot instead. Then you’ll sign a paper receipt. It’s another situation where the ideal experience would be one where I throw a handful of money in the general direction of the register as I walk out. If you want my money, make it a low-friction process!

These situations illustrate a principle I try to keep in mind when designing software. When appropriate, go to great lengths to simplify the interface to the point that if the user just stabs at it, they will probably get the result they want. Extra options, buttons and text just create opportunities for mistakes, confusion, and slowdowns.

If you find yourself creating a multi-step process, or asking a user to choose from a range of options, or to provide a plethora of data, consider whether you can simplify the process to a single step, button, or piece of data. It will probably be hard to figure out a clean way to make it work, but you only have to do that work once. Your users have to deal with an overcomplicated UI repeatedly for the life of your software.

• Try Flinto
• Share this on Twitter
• Join our Facebook Group

When something becomes easy, people go crazy with it. Desktop publishing made it possible for anyone to print a flyer, and it was seconds before someone decided it would be fun to include as many fonts and clip art as possible.

As it becomes easier to design animated prototypes using tools like Flinto for Mac, there’s always a concern that people will overdo it. When it’s easy to make every element on a screen fly in and bounce all over the place, why not do it? It’s so much fun!

Your customers will hate you.

There’s a time and place in your UI for loud animations. Just as the best print layouts make use of a small amount of carefully chosen fonts, the best UI animations tend to be the subtle ones that people barely notice. They advance the utility of the UI. Animations can and should help with the function of your app.

I have an example prototype that I build whenever I demo Flinto for Mac for local startups. My favorite transition in this prototype is a photo zoom effect where the user taps a photo thumbnail and it zooms to full size.

This is a great animation because it looks nice, it’s fun to invoke, and it serves a functional purpose. This animation helps the user maintain a mental model of where they are in the app. They can see the photo they tapped move seamlessly to full-size, giving them a solid sense of how they are flowing through the app, where they came from, and how to get back.

Animations like this are extremely easy to do in Flinto for Mac thanks to the connected layer feature. By connecting the small photo to the big photo, the animation happens automatically. There is a short tutorial video on using connected layers on our tutorials page.

• Try Flinto
• Share this on Twitter
• Join our Facebook Group