Today we are releasing version 1.1 of Flinto for Mac. This includes an update to the Mac app and the iOS viewer. If you purchased Flinto for Mac from the Mac App Store, there will be a delay of a few days as we wait for approval.

This update brings some great new features, and allows for Flinto.com prototypes to be viewed in the viewer app. Read about that here.

Video and Animated GIF Layers

Now you can add video layers to your prototypes. This means simple animated GIFs (great for loading spinners) or actual video files. There's so many cool things you can do with video layers! Here’s some ideas:

• Prototype an app that features video playback
• Display loading spinners, pulsing elements, or other subtle animations
• Create really fancy animations in another app, then bring them into Flinto
• Display decorative videos in the background of an app screen

Using video layers is really easy, just drag the file onto a screen. There’s just one option: loop. You can choose whether the video should repeat forever, or play once.

Enhanced El Capitan Support

Version 1.1 brings support for Mac OS X El Capitan’s new split view. We made it work with the viewer window also, so now you can go full screen with the preview along side the main app window. It’s super convenient!

Big Improvements to our Sketch Plugin

We’re constantly working on our Sketch plugin. We know there are some issues, and we’re working with the folks at Bohemian Coding to make it perfect. That said, this update includes lots of fixes for common import issues. Things like incorrect alignment of text, problems with masks, and half-pixel positioning have all been addressed.

Download the latest version of our Sketch Plugin

Lots of enhancements and bug fixes.

We’ve improved things all over Flinto for Mac including:

• The link line appears faster and is more responsive when creating links
• Default crossfade transition has been improved (no more dip in the middle) and been renamed to &ldquoFade In”
• Fixed several bugs that could cause the app to crash
• The maximum duration for timer links has been increased to 60 seconds
• Screens now appear in the center of the canvas after importing from Sketch

We hope you enjoy this update, and we appreciate all the feedback we've been getting. Lots of people are doing awesome things with Flinto for Mac and we couldn't be more excited. Now if you’ll excuse us, we need to get back to work on version 1.2.

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

In 2010, Kaz and I attended the WWDC keynote address where Steve Jobs introduced the iPhone 4. One moment that I was particularly excited about was when Steve explained emphatically that Apple supported two platforms for development: HTML5 and native apps in the App Store. "We are behind this 100%" Steve said of Apple’s support for HTML5.

That was great news for me as a web developer, and when I started building Flinto.com, I took full advantage of it. One of the great things Apple did with iOS was to allow for standalone web apps. The ability to install a web app meant you truly could build something that really felt like an app using HTML5. These apps could be installed on the home screen and display in full-screen outside of Safari. Flinto.com has always delivered prototypes in the form of standalone web apps.

Unfortunately, support for standalone web apps has gotten progressively worse in the past few versions of iOS. I fear Apple has forgotten about them. In iOS 9, it has gotten particularly bad and the biggest problem visible to our customers is the lack of customization of the status bar. In iOS 9, it’s not possible to customize the status bar, it always shows up as black text on an opaque white background, which is rarely what designers intend.

Our Solution

We recently released an iOS app intended for viewing prototypes made with our new tool, Flinto for Mac. We’ve concluded that the only way to get proper support for status bars is to display prototypes made in Flinto.com using the native viewer app we built for Flinto for Mac. Fortunately, iOS 9 introduced a deep link feature which makes this quite seamless. We’ve built this in the cleanest possible way to avoid any trouble adopting this workaround.

First of all, prototypes can still be installed in the usual way. Just know that the status bar will look wrong in iOS 9. If you tap an install link on an iPhone that has our Flinto viewer app installed, the link will open directly in the app and show up correctly. The prototype will also be saved within the app. It’s a bit easier than the old installation process. The only tradeoff is that you won’t see your app icon on the home screen.

An update to our viewer app is available today as part of our Flinto for Mac 1.1 release. This version supports the new deep linking feature.

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

Time for our second in a series of Flinto customer profiles. This one is about Cole Rise and his new iPhone app Litely. Read about how he used Flinto to build the wildly successful app on-time and on-budget.

Read the profile.

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

We just posted our first in a series of profiles of interesting Flinto customers. This one is all about Collective Ray, a design agency that focuses on products. They are a talented group, and they were one of the first Flinto customer ever!

Read the profile.

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

Starting today, Flinto supports iPhone 6 and iPhone 6 Plus. We’ve also made some tweaks to better support iOS 8. When you create a new prototype, you’ll see options for iPhone 6 and iPhone 6 plus devices. When you view a prototype on the web, you’ll see gorgeous device frames in all available iPhone colors too.

If you view an older prototype on a new iPhone device, the graphics will be scaled to fit. You can view any iPhone prototype on any iPhone model. Of course, you’ll get the best results by previewing your prototype on the target iPhone model.

If you’re creating screen graphics for one of the new iPhones, remember to use 750x1334 for iPhone 6 and 1242x2208 for iPhone 6 Plus.

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

Update: The dropbox sync feature will be disabled as of June 28, 2007

We’re proud of how fast and easy it is to add screens to Flinto. Just drag them into the browser and they show up immediately. You can start working before they even upload! Same is true for replacing screens with new versions.

Of course, it could be even better. Ideally you wouldn’t have to do anything, and updated screens would send themselves to Flinto. Starting today, you can choose screen images from Dropbox, and Flinto will keep them in sync when they are updated. Screen updates even get pushed to your browser moments after syncing with Dropbox.

It’s a really handy feature, especially when you re-export all your screen images with a few small tweaks. Having them update themselves may seem like a small convenience, but it really saves time. And it feels great!

The first time you add screens from Dropbox you’ll be asked to give Flinto access to your Dropbox account. After that just add screens and Flinto will keep them in sync for you behind the scenes.

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

The Flinto editor has been updated with a redesigned control panel. We’ve moved the top bar to the side. It looks nicer, is easier to access (especially when scrolled down) and best of all, it’s much more flexible for new things we may add in the future.

It can be jarring when a tool you use frequently is suddenly re-organized, so we don’t do it lightly. This is a critical change because it gives us the flexibility to add features without running out of space. The first such feature is Dropbox sync, which we also launched today.

Update: The dropbox sync feature will be disabled as of June 28, 2007

The new control panel also includes a convenient numeric input that allows you to adjust values by dragging up and down in addition to using arrow keys.

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

I was recently invited to give a “Designer Guest Hour” talk at Etsy’s headquarters in Brooklyn, New York. I was honored and excited to have been invited out. I woke up in New York on the day of my talk at 6:30am with a sore throat and a swollen eye. I went to a doctor just before the talk and was given Benadryl among other things. I ended up being sick, uncomfortable and really drowsy during my talk!

Fortunately, everyone at Etsy was very understanding and the talk ended up going really well. I was met by Magera and Jay, who were amazingly hospitable. They showed me and my fiancé all around the fabulous Etsy office.

During my presentation, I talked a bit about how Flinto got started, and showed a demo. Turns out several Etsy employees were already active Flinto users. I gave them some power-user tips before turning my attention to my design Philosophy with Flinto.

I shared one of my favorite design tips. When designing something, consider “How would it work if it were magic” and then work backwards from that until you come to a solution that's possible to build (more on this philosophy here.) I showed how this thinking was applied to our Slicers feature. I went over Slicers in detail, describing seven challenges we solved in building the feature.

1. Truly Fixed

   The fixed headers and footers created with slicers need to be really fixed in place, they can’t pull down with the page. This is surprisingly difficult to do with Web technologies on iOS.

2. Transparency

   The fixed ares need to support transparency in order to simulate floating buttons and mimic the iOS 7 style translucent effects.

3. Precise Placement

   It needs to be possible to position the slicers precisely, being off by one pixel in either direction ruins the effect.

4. Transitions

   The fixed areas should transition in a manner similar to the actual iOS transitions when both screens have fixed areas of the same height.

5. The Odd Pixel Problem

   When a slicer is placed at an odd number of pixels from the top or bottom of the screen, it creates a situation where it would need to have a height with a half-pixel in it when viewed on-device on a retina display. We spent a ton of time fixing this issue in a way that our customers never see.

6. Color Continuation

   With elastic scrolling in iOS, it’s possible to scroll beyond the top or bottom of a screen. Instead of showing some generic shade of gray, we continue the most common color of the row of pixels next to the slicer. This is such a nice effect, and it’s easy to forget that it’s even happening!

7. Snapping

   Using our LinkSnap technology, we automatically detect the slicer point for many screens. This means you can select all your screens, and drag the slicer into the pre-determined snap point and be done setting all of your slicers in just a couple of seconds!

We solved each of these problems in the best way we could. Doing things this way required a lot of extra work and time, but that’s the only way to achieve magical results.

Slicers are a feature I’m really proud of. It’s the first thing I’ve ever designed that’s been copied by other companies. Being copied give me a feeling of validation, and a motivation to be all the more ambitious with our next set of features.

Before my fiancé and I left, Jay and Magera took us to lunch at the nearby Number 7 Sub shop where we chatted and enjoyed the view. And they didn’t send us home empty handed. Thanks for having us, and thanks for the stickers, Magera, Jay and Etsy crew!

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