22 August 2017

Your New Favorite Color Picker in Flinto 23

Today we're releasing Flinto for Mac version 23. Download a free trial of Flinto for Mac

We're also leaving the Mac App Store. Flinto 23 is only available from Flinto.com. We're also announcing a new pricing model for Flinto for Mac licenses.

Your New Favorite Color Picker

We've built our own color picker to replace the macOS default one that nobody likes. We think it's going to be your new favorite. It's a really solid color picker with some cool extras:

Magic Swatch When you have a color value in your clipboard, like #FF6759 or hsba(5,65,100,100) an extra swatch will magically appear with that color value.
Quick-Add Swatch When you activate the eyedropper, hold shift and click to immediately add a swatch with the sampled color. It's great for quickly loading in a set of colors.
It's fast! You may not think of a color picker needing to be fast, but when things like activating the eyedropper and dragging the color values have even a small delay, it can really get in the way.

Improved Wireless Live Preview

We've changed the underlying technology for our wireless live preview. It's faster to connect and more reliable. Make sure to update the iOS viewer app in order to use live preview in Flinto 23.

Easier Updates with Sparkle

We're now using the popular Sparkle update system so this is the last time you'll have to download a .dmg file and copy it to your applications folder. You're probably wondering why we didn't do this sooner, right? We weren't comfortable using Sparkle because of a security feature it was lacking. That feature has been added, so now we're on-board.

New Pricing Model

We've released 10 free major updates to Flinto for Mac since launch including today's release of version 23. Today Flinto for Mac is also changing to a yearly license model.

When you buy a Flinto for Mac license, you will receive one year of free updates. If you bought Flinto for Mac more than a year ago, you receive today's version 23 release for free, and will need to purchase a new license if you wish to upgrade to Flinto 24 when it is released.

When your license expires, Flinto keeps working. You only need to buy a new license to upgrade to the next version that is released after your license expires.

This licensing model has proven succesful for other design tools such as Sketch. It encourages us to release regular updates without holding back features for large upgrade releases. We think it's the most fair option for our customers and for us.

Leaving the Mac App Store

Flinto for Mac is no longer available through the Mac App Store. If you've previously used Flinto from the Mac App Store, this version will prompt you with instructions to migrate over and we will issue you a free license key. Read our blog post for more information.

21 August 2017

Flinto is Leaving the Mac App Store

Starting with version 23, Flinto for Mac will no longer be available on the Mac App Store. Customers who purchased through the Mac App Store will be issued a license code and will be able to migrate to the direct-download version free of charge.

Why we are leaving

Leaving the app store gives us the freedom to update our app faster, to add features that were previously restricted, and to have full control over our pricing.

How to Migrate from the Mac App Store Version

If you have used the app store version of Flinto for Mac on your computer, simply download version 23 or newer of Flinto for Mac from our website. When you launch it, you will be prompted to enter an email address which will be used to send you a free license key. The app will be ready to use immediately after that.

We want to make sure everyone can migrate without trouble, so if you run into any problems please contact hello@flinto.com.

26 April 2017

Vector shapes in Flinto 2.2

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.

29 November 2016

Flinto for Mac 2.1

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!

A quick overview of the most important new features.

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.

04 October 2016

Flinto for Mac Version 2: a Big, Free Update

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.

02 June 2016

Say Hello to the New Link Line

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.

01 May 2016

Flinto’s Most Rectangular Version Yet

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.

Draw rectangles directly in Flinto for Mac.

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

Adjust properties like border, color, shadow and corner radius.

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.

Animate all the rectangle properties for awesome effects!

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!

Easily add sounds to your designs with drag and drop.

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.

Disabling opacity bounce prevents an ugly opacity flicker.

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.

28 April 2016

Your Job is to Try 10,000 Things

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.