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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Pasquale D’Silva designed a fun Jupiter Weather app prototype which we added as an example to Flinto’s viewer app. Lots of people have been asking where they can download the prototype to try in Flinto for Mac, so here it is!
If you’re not familiar with Pasquale, he’s an animator and software designer known for his distinctive style. He’s one of those unique creatives who can hop seemingly effortlessly from design to illustration to music and combine elements of them all to build amazing projects.
We recently asked him a few questions about his Jupiter Weather project and his lol-worthy inspiration for it. Here’s what he had to say:
You're a great mobile app designer, what do you think makes a mobile experience great or terrible?
A great piece of mobile software carefully considers the physicality of the device, and kinetic user input. It's intimate.
A terrible mobile experience feels like something designed for consumption on a large screen, shoehorned into a space the size of a credit card.
How'd you come up with the idea of this prototype?
It's a pretty known fallacy that every amateur designer needs to design a static, impractical weather app & post it to Dribbble without irony.
I thought it'd be funny to take it further and make a plausible, but useless app prototype. Maybe one day when we're able to hop around planets, you'll care about the weather on Jupiter & its moons, and this will be a legitimate App Store chart topper.
What's your favorite detail in the prototype?
My favorite detail is the storm-tracker, which lets you see the forecast path of Jupiter's thrashing eye.
We recently sat down with Peter Nowell to discuss what it took to create the meticulous icon system in Flinto for Mac. Peter is a San Francisco based designer who created many of the UI elements in Flinto for Mac.
How did you contribute to Flinto for Mac?
I worked with Flinto in the months leading up to the release of Flinto for Mac, and contributed to various parts of the user interface and experience. But because Flinto is a very specialized tool, the more we thought through each part of the user experience the more we realized that the app was going to require a ton of custom icons. Nearly every part of the interface, from the Layers List, to the Toolbar, to the Transition Designer, to the Gestures dropdown was going to require its own set of icons. So that quickly became my main job!
What is your strategy when designing elements like icons or menus inside of a bigger app?
Design is always driven by context. Surprisingly, I found that designing for a professional Mac app was one of the most complex contexts to work within. Even just for the icons! Toolbar icons have to be a certain size, and look a certain way. That is different from the appearance of sidebar icons, which is different from those you’d find in a dropdown menu. Some icons re-appear in multiple places, at multiple sizes, and in multiple styles. Establishing consistency across all parts of Flinto’s interface meant that every icon had to be especially versatile. No symbols that looked great at one size, or in a certain style, but couldn’t be adapted to others.
My icon design process begins on paper. I’m a big believer in that. It begins with drawing every imaginable possibility for that icon — what the subject matter or metaphor will be and what variations they could take. While in this conceptual phase, I try to remind myself to put everything down on paper — even random ideas that seem unrelated. The next stage is evaluation; analyzing each concept based on how well it fits the goals, constraints, and context for this particular icon.
I find it essential to separate the drawing & conceptual process from the evaluation process. The former requires imagination, curiosity, and withholding of judgement. It is an additive process. It is spur of the moment. Evaluation — while equally important — requires criticism, pragmatism, and the time to consider a long list of implications. It is a subtractive process. If you try to do both at the same time you will end up with nothing. Your pen will never touch the paper.
I recently taught a class about Icon Design at CreativeLive, and outlined what I think are the most important design principles for icons. Those are what I use to evaluate my ideas and sketches.
Generally only a handful of concepts make their way onto the computer. When I fire up Sketch, it’s production time. There will still be some creative decisions along the way, but the predominant goal is to refine the form of an icon and make sure it is pixel-perfect. I’m really passionate about both of those, but I especially cause a racket when the latter is neglected!
Can you explain a little bit more about pixel perfection, and how to achieve it?
The term pixel perfect can mean a lot of things — it’s more of an ideal than a single concrete characteristic. Like “attention to detail,” it’s easier to identify when it has been ignored! Pixel perfection has a tremendous impact on the recognizability and efficacy of a small icon. And achieving it often requires more than just aligning design elements to the pixel grid (tips below). Basically it’s a fight against antialiasing. Antialiasing is a great thing, but it can produce very fuzzy results — especially for diagonal and curved lines.
For example, we wanted to include some indication in the Layers List about when a layer is hidden or locked. We weren’t as concerned about them being easily-clickable buttons (although they are) as we were about having small indicators that took up minimal space — especially because two icons would have to be visible if a layer was both hidden and locked. To accomplish this, the icons had to be meticulously pixel-perfect. I’m incredibly proud of how clear those little 8x8 icons turned out.
In an ideal world, a well-made vector icon can simply be exported at various pixel-densities and look great at all of those scales. But much of the time, the limitations of designing a 1x asset aren’t worth carrying over to higher pixel densities. You may be able to build an icon perfectly at 2x, but need to make adjustments to create a decent and crisp 1x asset. At least half of the icons in Flinto’s UI have unique 1x and 2x versions, such as the “Connect Layers” icon throughout the Transition Designer.
For anyone who is curious, here are some techniques I used for fine tuning the antialiasing of icons in Flinto:
Resize and reposition shapes for crisper results, even if that means the position or dimensions have decimals. It’s about appearance, not values.
Only use curves or rounded corners when there are at least 2px to render each 90° angle of that radius’s circle (see below), or 3px for 180°, as with a rounded ends of a line (below). Goodbye, rounded 1pt line caps — at least until we’re all using 3x screens.
Adjust border width/thickness to be slightly wider or thinner than 1pt on thin curved or diagonal lines, for a more consistent perceived thickness.
Mask out unwanted blurry pixels. This will even have an effect if a shape is masked out by a duplicate of itself (no change in shape).
Duplicate a shape or its border (same position) to be slightly bolder.
Determine when it’s ok to have a little antialiasing fuzziness because a more important part of the icon benefits. It’s going to be ok!
What makes a great icon?
That’s such a loaded question! Especially because icons embody so many design principles in a small package. I actually approached that topic in my icon design class, and used a couple stories from working on Flinto.
One of them was about using familiar symbols and being obvious. When we started to make the icon for the home screen in Flinto’s Canvas, Nathan had the idea that we could design the icon to be reminiscent of an Eichler home. Eichler was a builder whose “Mid-Century modern” buildings can be seen in neighborhoods all over California.
I think they’re awesome and Nathan was actually in the market to buy one, so we enthusiastically explored the idea. I produced tons of concepts for the home icon, attempting to distill what was uniquely Eichler into a very small square-ish area (ideally 16x16) without relying on color or grayscale (transparency). And we found that these more clever icons didn’t perform their core task as well as the more obvious home icons. We settled on a version that was just slightly expressive and played off the asymmetry in Eichler’s architecture, while remaining obvious and recognizable to users.
Another characteristic of a great icon is how well it harmonizes with its surroundings. That includes UI around the icon, size & weight of adjacent text, operating system conventions, and other icons in that collection.
So whereas the home icon basically exists on its own, the toolbar icons, Gesture icons, and Arrange icons exist in a set. And designing an icon set can be exponentially more challenging. You’ll get half-way through designing a collection of symbols and realize that the style or visual metaphor you’ve been using doesn’t hold up for every required icon, and now everything needs to change! 🙈
This happened with the Gesture icons (shown here at 200% scale). Their simplicity—which now seems obvious—was born from a long list of constraints and future considerations. Some of the icons shown above aren’t even in the app yet… but it was important to know that the icon set could expand to accommodate them if necessary.
Where can people learn more about all this?
I love this icon stuff, so I recently taught an online class about icon design through CreativeLive. It goes over how to design great icons, build them in Sketch, present them with SVG, and even animate them.