Flow 1.0.0 – All the Polish

Flow
Prototypr
Published in
4 min readAug 9, 2018

--

The mad dash, the rush, the “final” push. Over the last few weeks, we’ve had our heads down, crushing new bugs, tidying house, and bringing things up to an acceptable level of incomplete as we geared up for the 1.0.0 release. Now, with our first full release open to the public, we’re very proud to let you know what went into Flow after our 0.7.0 release.

UI/UX Polish

Our designer, nicolas prieto, took us to town on getting the UI up to a passing grade. In doing so, we updated and improved a lot.

Nudging with Arrow Keys

It’s now possible to nudge layers and values one point at a time with arrow keys. Pressing shift will nudge by them ten points.

Relative Mode

Any property with a number value can now be changed across the entire timeline using Relative Mode. If you want to nudge an object a few pixels up or down, Flow will preserve your animations by applying the change to all the keyvalues in the same property track for your layer throughout the timeline.

Touch Bar

We tightened up the touch bar to be more responsive. If your project is animating, it pauses when you start dragging on the touch bar.

Timeline Header

A few color, position, and typographic tweaks made the timeline header so much more lovely.

So Many UI

There’s still a lot for us to do on this front, but for 1.0.0 we tuned a lot of the interface elements from highlight colors and locations to new button graphics, and padding.

Before (left). After (right). How many differences can you spot?

Performance

Some of our lovely beta users brought a few performance issues to our attention. Which we then proceeded to crush.

Flow was beach balling after moving a lot of layers or keyvalues at the same time.

Media Export

We improved the quality of exporting movies, and added GIF (as well as single-frame PNG) to our list of export options.

Go make a bunch of stuff for Dribbble, plz.

Code Preview

We tightened up the code preview panel to show layer code on the left, and animation code on the right. We also made it prettier.

So much pretty.

Bugs

Like Jeff Daniels, we found them everywhere we looked. Like John Goodman, we crushed them out of existence. Between 0.7.0 and 1.0.0 we focused heavily on stability and pushing Flow to its limits.

In the 3 weeks between releases, we tackled dozens of new bugs that popped up… We won’t go into all the details here, but there are a few good general ones to note:

  • Copying and pasting text layers – within a Flow project – used to crash
  • Undoing wildly like is far more stable – deleting layers, undoing timeline creation, manipulation of multiple keyvalues, etc.
  • Resizing and scaling the timeline is like butter now

… and a few good code export ones …

  • Shadows, fonts, rotations, and masks (ios only for this one) are lovely now.
  • There was an interesting, and highly annoying flicker on animations in iOS. We core-animation-whizzed it out of existence by looking back at our open-source project c4ios.com which has an insane level of Core Animation tricks in it.
  • Paths — we overhauled our approach to defining them, and now they’re super perfect.
  • Dash Patterns—this was an interesting addition that was very useful for HTML because it can be used to animate a line over top of a shape.

What’s next?

Our job in the next few weeks is to focus on making sure our early adopters are able to work smoothly with Flow. We’ll be:

  • Creating tutorial content
  • Continuing outreach
  • Keeping the conversations going with our early adopters. We want to hear from you! Get in our Slack channel.
  • Fixing user-reported bugs (we’ve already released 3 patches)

After all that, we’re going to nail down a timeline for feature additions. There are a lot of little things we know people want, and that we want to add, so we will figure out the plan of attack.

Wait. What’s Flow?!?!

Great question.

Flow is a production tool that lets you animate 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 our previous article:

Our Site

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

createwithflow.com

Get a Copy

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

createwithflow.com/download

…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

❤︎

--

--

A new class of UI Animation software. Import from Sketch. Animate in Flow. Export production-ready code.