<p>Published on <a href="https://blog.prototypr.io/flow-0-6-0-7f7d2ded7f1f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Flow <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ThMly7x1NeQqf_yeSLRhEw.png"></p>
<h3>Flow 0.6.0 — Steps, Space, and Time.</h3>
<p>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é.</p>
<p>We’re definitely getting slightly faster – 2 months instead of 5.</p>
<h3>Multi-Keyvalue Selection</h3>
<p>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:</p>
<ul>
<li>select multiple key values…</li>
<li>and copy them…</li>
<li>and paste them…</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F270826115%3Fapp_id%3D122963&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F270826115&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F701963856_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/a7064967538581d5369536f5613a6ee7/href">https://medium.com/media/a7064967538581d5369536f5613a6ee7/href</a></iframe></p>
<p>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.</p>
<h3>A New Step Curve</h3>
<p>In <a href="https://blog.prototypr.io/flow-0-5-0-408044424ebd">0.5.0</a> 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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8uPmczLOrzF3FLnxeBllHA.png">This essentially creates a pause in an animation – e.g. between 0.6 and 1.0s the property value is identical.</p>
<p>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.</p>
<p>So, we’ve introduced a new kind of curve we call a STEP.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F270827873%3Fapp_id%3D122963&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F270827873&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F701965763_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="354" frameborder="0"><a href="https://medium.com/media/926125694213143205a5d04dbbbd117c/href">https://medium.com/media/926125694213143205a5d04dbbbd117c/href</a></iframe></p>
<p>Steps let you specify that there should be <strong>no animation between two differing keyvalues</strong>.</p>
<h3>Grouping Across Time and Space</h3>
<p>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.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F270835871%3Fapp_id%3D122963&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F270835871&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F701975115_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1016" frameborder="0"><a href="https://medium.com/media/a7744e6c68948939a8255e2bb48003e9/href">https://medium.com/media/a7744e6c68948939a8255e2bb48003e9/href</a></iframe></p>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/718/1*HIUhQ6xeRJxqfKsNaf8N-Q.png"><img alt="" src="https://cdn-images-1.medium.com/max/720/1*ie9bYQYaXvqUuecl-4d1kw.png"><img alt="" src="https://cdn-images-1.medium.com/max/716/1*YgkkOV5dp4UaQEVgXQgLTw.png">At 0s, 0.5s, 1.0s the group has a different height.</p>
<h4>Groups Take Their Earliest Shape</h4>
<p>When you create a group it generates a new “group layer” the size of which wraps the positions of all it sublayers <strong>at the beginning of the animation. </strong>If a sublayer’s animation causes it to move beyond the group, the group itself doesn’t actually change shape an position.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9_x_mYcS64udvRicBmj2Cg.png">The group’s border is the same shape as its layers at <strong>t0</strong>, but layers can animate out past those initial bounds.</p>
<p>And, you can always resize the group to fit its layers (which does create an animation on the group layer) by hitting ⌃⌘G.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PUNMcDPbcoW7L3-ZAZyC3Q.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Y5qfjk27kBHbWJdw28PgnA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ScTCHlCJBIUSQ3GQpCzj6w.png">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.</p>
<h3>What’s next?</h3>
<p>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.</p>
<h3>Wait. What’s Flow?!?!</h3>
<p>Great question.</p>
<blockquote><p>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.</p></blockquote>
<p>If you’re not already familiar with our product please have a look at the following other articles:</p>
<h4>Our Features</h4>
<p>Check out our features article for an overview of the newest release:</p>
<p><a href="https://medium.com/@createwithflow/flow-beta-1c458367b168">Flow Beta</a></p>
<h4>Our Site</h4>
<p>If you want to know more about the product, just visit our website:</p>
<p><a href="http://www.createwithflow.com">www.createwithflow.com</a></p>
<h4>Get a Copy</h4>
<p>If you want to try it out, grab a copy from:</p>
<p><a href="https://download.createwithflow.com">download.createwithflow.com</a></p>
<p>…where you can get a license and a .dmg with all our love and hard work bundled within.</p>
<h4>Get in Touch</h4>
<p>Have some more questions? Connect with us at:</p>
<p><a href="mailto:info@createwithflow.com">info@createwithflow.com</a></p>
<p>Or, Slack Us…</p>
<p><a href="http://join-createwithflow.herokuapp.com">join-createwithflow-on-slack</a></p>
<p>❤︎</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7f7d2ded7f1f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/flow-0-6-0-7f7d2ded7f1f">Flow 0.6.0</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Flow 0.6.0

Flow 0.6.0 — Steps, Space, and Time.

Top Stories