large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p>Published on <a href="https://blog.prototypr.io/flow-beta-1c458367b168?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Flow </p>
<p>We are very proud to announce the release of Flow.</p>
<h4>What is Flow?</h4>
<p>Flow is a motion-design tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by generating native code that can be directly incorporated into larger more complex projects by a developer.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iUiXQfiN8iffe2dV5yKrAQ.png"></p>
<p>As a designer, you can work in Sketch, animate in Flow and export production-ready code.</p>
<p>As a developer, you can customize the kind of code you need to make it easy to integrate into your already existing projects. If you only want to cherry-pick the animations you can do so using the <em>code preview window</em>.</p>
<h4>WAIT… I Thought That Was C4 Studio!?</h4>
<p><a href="http://www.c4studio.co">It was.</a> We’ve rebranded and released the latest version with a new name, new logo and new look and feel for the application.</p>
<p>We’ve also added an incredible amount of:</p>
<ul>
<li>infrastructure,</li>
<li>controls, and</li>
<li>features</li>
</ul>
<p>…that makes this version production-ready. Even though we still consider this release a Beta, <strong><em>we are confident that you can now work with Flow in your daily routine.</em></strong></p>
<h3>Sketch Integration</h3>
<p>You can animate Sketch files in seconds. When you have created a before and after artboards you can load your file into Flow which then allows you to pick the two states for your transition. When you’re done, Flow animates all the differences between the two states.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235861935&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235861935&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657797225_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/8c27f61f767ee70b1503f45ae5f6d9d7/href">https://medium.com/media/8c27f61f767ee70b1503f45ae5f6d9d7/href</a></iframe></p>
<p>Oui, c’est si simple.</p>
<h3>Artboards are States</h3>
<p>When designing for an animation, think of your artboards as states. Create two similar artboards like Menu Open and Menu Closed, then load them into Flow.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235862719&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235862719&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657798214_295x166.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="576" height="360" frameborder="0"><a href="https://medium.com/media/1952142fbf871741b2f10abdf75f07ea/href">https://medium.com/media/1952142fbf871741b2f10abdf75f07ea/href</a></iframe></p>
<h3>Interface</h3>
<p>Flow’s interface is clear, clean and just what you’d expect.</p>
<h4>Stage</h4>
<p>This is where you can select and move layers around.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235861956&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235861956&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657797244_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/fb4645d50fb862ca20c77a891b876205/href">https://medium.com/media/fb4645d50fb862ca20c77a891b876205/href</a></iframe></p>
<h4>Timeline Viewer</h4>
<p>This is where the magic happens! A Layer that animates will have a track for every property that changes.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235861956&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235861956&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657797244_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/fb4645d50fb862ca20c77a891b876205/href">https://medium.com/media/fb4645d50fb862ca20c77a891b876205/href</a></iframe></p>
<h4>Properties</h4>
<p>There is a powerful panel that lets you customize every property on a selected layer.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235861949&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235861949&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657797245_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/7018cc0b8cea12aaf3c92a2a18e3795e/href">https://medium.com/media/7018cc0b8cea12aaf3c92a2a18e3795e/href</a></iframe></p>
<h4>Hierarchy</h4>
<p>The hierarchy panel lets you select, group, hide and lock layers.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235861917&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235861917&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657797203_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/acc0d94cc8594bb057239b3b49cbc3db/href">https://medium.com/media/acc0d94cc8594bb057239b3b49cbc3db/href</a></iframe></p>
<h4>Code Preview</h4>
<p>Eager to see what your animation looks like?? Select an object and open up the code preview panel!</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235861902&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235861902&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657797189_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/6ecbef117aff062fe9e83995269b3c56/href">https://medium.com/media/6ecbef117aff062fe9e83995269b3c56/href</a></iframe></p>
<h3>Animation</h3>
<p>Animating your Sketch files is intuitive, fast and delightful.</p>
<h4>Key Values</h4>
<p>Every time you move or change a layer on the stage a new key value will appear in the timeline for the properties you just edited. You can then move and edit those key values to your ❤’s content.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235861943&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235861943&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657797215_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/6f8c862e74966df0af226dc38aac459d/href">https://medium.com/media/6f8c862e74966df0af226dc38aac459d/href</a></iframe></p>
<h4>Easing</h4>
<p>Control your animations by changing the easing between key values.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235861903&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235861903&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657797211_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/05de229e6f9fd4c6c68d1b19aefb01c1/href">https://medium.com/media/05de229e6f9fd4c6c68d1b19aefb01c1/href</a></iframe></p>
<h4>Expanding Rows</h4>
<p>Can’t find the track you’re looking for?</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235863147&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235863147&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657798813_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/821e17a210e8fdbde2ed52fa66a215d1/href">https://medium.com/media/821e17a210e8fdbde2ed52fa66a215d1/href</a></iframe></p>
<h3>Groups and Hierarchies</h3>
<p>The hierarchy panel works as you’d expect, and has some lovely dynamic icons too.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235863223&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235863223&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657798902_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/9a92b93d12ddfa89c13c0dd0e6304458/href">https://medium.com/media/9a92b93d12ddfa89c13c0dd0e6304458/href</a></iframe></p>
<h3>Exporting</h3>
<p>Convert your animations to movies, or code()!</p>
<h4>Export a Movie</h4>
<p>You can export your animation to a lovely compressed mp4 file.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235861923&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235861923&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657797213_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/d0af7bd4aa4aefc55dd76974d085142d/href">https://medium.com/media/d0af7bd4aa4aefc55dd76974d085142d/href</a></iframe></p>
<h4>COOOOOOOOOODE!</h4>
<p>You can export your animation to iOS, and it works in <em>the </em>Xcode!</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F235953410&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F235953410&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F657913211_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/bc512e25f1cad4eb3e489b598207b2d5/href">https://medium.com/media/bc512e25f1cad4eb3e489b598207b2d5/href</a></iframe></p>
<h3>Want to try Flow?</h3>
<p>We’re actively looking for people who work at the cross-section of design and development and would love for you to try Flow.</p>
<h4>Grab the Beta</h4>
<p>We have an open beta, you can grab a license and a copy from:</p>
<p><a href="https://download.createwithflow.com">https://download.createwithflow.com</a></p>
<h4>Join Us on Slack</h4>
<p>Hop on Slack to ask us questions, and keep in touch:</p>
<p><a href="http://join-createwithflow.herokuapp.com">join-createwithflow-on-slack</a></p>
<p>For more information, features, and tutorials please visit:</p>
<p><a href="http://www.createwithflow.com">www.createwithflow.com</a></p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1c458367b168" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/flow-beta-1c458367b168">Flow Beta</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 Beta

Flow Beta

What is Flow?

Top Stories