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

Flow 0.6.0 — Steps, Space, and Time.

Since the previous release, we’ve had our heads down trying like mad scientists to continue bringing Flow to life. In this release we’re introducing the first ounces of some much needed love on the timeline. There are some critical updates – like fixing the things that broke when Sketch 50 went live – as well as a lot of little tidbits to help with our stabilité.

We’re definitely getting slightly faster – 2 months instead of 5.

Multi-Keyvalue Selection

This is one I’ve been personally waiting for a long time, and its like music to my ears. As of this release, you can:

select multiple key values…
and copy them…
and paste them…

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

This new features, which hints at some more power we’re putting into the timeline, required some backend majique to remove redundant keyvalues, as well as some front-end wizardry in the form of a info panel for handling the selection of multiple keyvalues.

A New Step Curve

In 0.5.0 and earlier versions, you were able to duplicate a keyvalue by dragging it while pressing the option button. This creates a gap in the animation between two points that have the same value.

This essentially creates a pause in an animation – e.g. between 0.6 and 1.0s the property value is identical.

We wanted to improve upon this great feature to create a snapping effect by deleting the transition between keyvalues. However, when you reverse the animation the timing would always be slightly off — as Jeremie likes to say “ç’est pas symmetrique” — because the snapping action would always happen at the later keyvalue.

So, we’ve introduced a new kind of curve we call a STEP.

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

Steps let you specify that there should be no animation between two differing keyvalues.

Grouping Across Time and Space

We’ve been going back and forth about this for some time, and I have to say… getting the UX right for grouping across time and space is a tricky one. Originally, we modeled our grouping behaviour off of Illustrator and Sketch so that there would be a border around all the things in the group.

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

At any point in time the group’s frame can change. With this implementation we had a lot of issues trying to reconcile a static UX concept – the group’s edges always wrap its sublayers – with a dynamic concept where the layers can always be in motion.

At 0s, 0.5s, 1.0s the group has a different height.

Groups Take Their Earliest Shape

When you create a group it generates a new “group layer” the size of which wraps the positions of all it sublayers at the beginning of the animation. If a sublayer’s animation causes it to move beyond the group, the group itself doesn’t actually change shape an position.

The group’s border is the same shape as its layers at t0, but layers can animate out past those initial bounds.

And, you can always resize the group to fit its layers (which does create an animation on the group layer) by hitting ⌃⌘G.

A group sized to it original layout, can be resized to wrap its contents at any point in time. You can also color / animate the group background.

What’s next?

We’ve already got a 0.7.0 release that we’re working on internally. There’s a bucket more 💚 for the timeline that’s happening in the next release. We’re also pushing on UI / UX polish to get Flow looking dapper for the summer.

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 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

❤︎

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

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

Flow 0.6.0

Cool stuff, every week

More Articles