Published on | Prototyping: From UX to Front End — Medium Flow

We haven’t had a major feature release in nearly 5 months because we’ve been working on something incredibly interesting that required an overhaul of some major architectural components of our application. We finally have in our hands a new way to export code from Flow.

In doing so, we had to significantly overhaul how the application processes animations and converts them to usable software, then make sure that the Swift export worked exactly as it did before. The months it took us to do this was totally worth the while because…

FLOW NOW EXPORTS HTML5 (in addition to Swift)

We’ve added a new export option that allows a user to choose between Swift / iOS and HTML5 / CSS as the export for their animations. Check out this video where I show an animation in Flow, and the results in Safari and the iOS Simulator.

<a href="https://medium.com/media/ac7a9b076215c7c7fd91b1eede721669/href">https://medium.com/media/ac7a9b076215c7c7fd91b1eede721669/href</a>

Bonkers.

This is how we did it.

For the majority of Flow’s life, it has been using a framework we called CodeGen to create Swift / iOS projects. With CodeGen we were able to create really robust and fairly flexible implementations of software that could used and edited right in Xcode. The only drawback was that the export process was basically hard-coded to export only Swift… Not very flexible to say the least, and definitely not indicative of the potential power of Flow.

Our original alchemy only allowed for Swift export.

This is how we DO it.

The major rewrite that we undertook since October was the development of a new approach for exporting code. Since our goal has always been for users to be able to export to a number of different programming languages, we needed a more flexible architecture that would allow us to easily integrate new languages into Flow. With this release we’ve done exactly that. In February, after working on this new approach for many months, our lead developer shared with us an HTML page with an animation on it!

With today’s 0.5.0 release you can export to HTML5 / CSS as well as Swift / iOS!

This is how we’ll do it.

Our new approach is really powerful. So much so that once in play, it only took 8 HOURS to add HTML export to Flow. Now we’ll be able to write export functionality for a wide variety of languages.

One day we’ll have all the languages.

P.S. We’ve already written SVG export, but it wasn’t quite up to snuff for this release, so it will be coming shortly.

Highlights of the Other Lovely Things We’ve Added

Even though our major focus was on code export, we managed to put in a few lovely tweaks. Here’s a brief list of the things we added:

Drag & Drop Hierarchies

You can now move layers around in the hierarchy panel.

<a href="https://medium.com/media/71fb4d976d1829db3933fe5a43b7b348/href">https://medium.com/media/71fb4d976d1829db3933fe5a43b7b348/href</a>

This is easier said than done. Just ask jerbear… he put a lot of bsat into this to make it look and work super tight.

Parent Layers

A nice, subtle little touch we added was to make parent tracks reflect the shape of their children. All parent layers have little icons that map to the keyvalues of their underlying tracks, and if there’s a break in the animation of a track you’ll also see that in the parent track as well.

Parent tracks now show gaps where there are no animations taking place 😉

Sketch Import

As always, whenever Sketch rolls over to a new release, we have to quickly figure out if there are any major differences in their file structure and adapt. So, when 49 came out there was a small bug that prevented Sketch files from loading.

Stability / Tests

Another major improvement to Flow is the addition of hundreds, and hundreds, and hundreds of new unit tests that allow us to maintain stability as we’re developing.

Over 600 results from searching “func test”, and that’s not even all of them.

What’s Next?

We are already working on 0.6.0, and from now on we’ll be able to push out versions in a much more timely manner – the big hurdle is done, so we can now release more incrementally.

Our focus for the next release is greatly improving the ability to work with keyvalues and animations, adding multiple selection, copy and paste, reversing selected keyvalues, etc. to the Timeline viewer.

Wait. What’s Flow?!?!

Great question.

Flow is a production tool that allows users the ability to animate their static designs in seconds, then export those animations to either HTML5 / CSS or Swift / iOS code.

If you’re not already familiar with our product please have a look at the following other articles:

Our Features

Check out our features article for an overview of the newest release:

Flow Beta

Our Site

If you want to know more about the product, just visit our website:

www.createwithflow.com

Get a Copy

If you want to try it out, grab a copy from:

download.createwithflow.com

…where you can get a license and a .dmg with all our love and hard work bundled within.

Get in Touch

Have some more questions? Connect with us at:

info@createwithflow.com

Or, Slack Us…

join-createwithflow-on-slack

❤︎

Flow 0.5.0 was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Flow 0.5.0

Cool stuff, every week

More Articles