If you’re new to Flow then this is the best tutorial to get you started. We’ll go through a few simple steps to get you up and running with our tool, introduce you to a few key ideas, and have you animating and exporting code in just a few minutes.

First Launch

The first time you launch Flow you’ll see a couple of buttons on the welcome window. One launches a short intro video, the other opens a ready-made Flow file with a number of timelines.

Welcome to Flow, don't you love our lovely window?

Intro Video

Clicking on the intro video button will launch a short video that covers everything in this tutorial.

Notice, the button disappears after you tap it.

Sample File

Flow also comes bundled with a sample file to get you started. This file was created from the intro.sketch file that you can download here…

Download intro.sketch

The sketch file we used to create the intro.flow file.

THIS FILE WAS CREATED WITH SKETCH 52!

Second Launch

After the first launch you’ll see that those buttons aren’t there anymore… Well they might be if you haven’t yet created and saved a Flow file. Anyways…

If you want to see the intro.flow file or intro video again you can always:

  1. Open them from the Help menu, or
  2. Clear the recent projects and open them again from the welcome window

Intro.flow

The intro file has a number of timelines in it, each showing a specific technique. For more on each technique you can have a our tutorials and docs. For now, let’s just have a look at how to check out each timeline in this file.

When you open basics, you’ll see this:

The timelines – drag the divider up to see all of them.

There are two things to get you started…

Play the first timeline!

To play the first timeline, select it then hit the play button with your mouse, or tap the space bar.

When that’s done, you can hit the play button again to restart the animation.

You can also toggle the loop button to watch the animation repeat.

Export some code

To export code follow these steps:

  1. Press CMD+SHIFT+E to open the export dialogue.
  2. The current timeline should be selected, as well as HTML and iOS as export languages.
  3. Hit enter to continue.
  4. Choose a place to put the folder.
  5. Hit enter to save the code.

iOS/Swift

Flow exports a full Xcode project that will run on the iOS simulator. To do so, follow these steps:

  1. Navigate to the Xcode project that you just created,
  2. Double-click to open it,
  3. Press the play button,
  4. Tap the simulator to trigger the animation
  5. Tap again to reset the animation
  6. Tap to play
  7. … (easy right?)

Flow is pretty strong when it comes to exporting iOS code. That is, what you see is Flow you’ll see 1:1 in the simulator.

There may be an edge-case or two that we missed… If so, > If so, let us know … email us.

HTML/CSS

Flow exports a pretty clean set of HTML and CSS code that uses keyframe animations. To run it, follow these steps:

  1. Navigate to the index.html file that you just created.
  2. Double-click it.
  3. Watch the lovely animation.
  4. … (easy right?)

Flow is pretty decent with HTML export.

Alas, cross-browser support is a pain even if we were coding things up by hand… Sometimes Safari just doesn’t want to cooperate.

Discrepancies

If you find a discrepancy in our export, let us know! Maybe you’re doing something complicated, maybe we missed something. In either case, we want to make Flow as strong as possible!

If so, let us know … email us

Play another timeline!

To choose another timeline, simply select it from the timeline hierarchy at the bottom-left of the app. When you select any one of the timelines you’ll notice that the previous one closes, and the new one unfurls to show it’s main layers. You’ll also see the stage change.

After choosing another timeline, hit play again to watch it.

Edit something

Wherever you’re at, whatever you’re doing, whichever timeline you’re looking at, I want you to now slide that mouse cursor over top of the stage, select a layer and move it around.

Selected a new timeline

Now hit play!

Wham.

It’s that easy to move things and have your changes become part of the animation.

Move Keyvalues

Want to play with the timing? Just move a keyvalue around.

Undo / Redo

You can undo just like in every other application on earth, or you can sliiiiiide that cursor down into the timeline viewer, click on the keyvalue that just popped up and hit the delete key.

Choose Your Own Adventure.

You’ve got the basics down now, everything else is up to you. You can:

  1. Learn to import from Sketch (yesss there’s some techniques you should know).
  2. Walk through all the techniques in the intro file.
  3. Check out some advanced tutorials, like animating the Codepen, Github, or Sketch logos.
  4. Hop on our Slack channel to get in touch.
  5. Or… our favourite..

TWEET ABOUT FLOW

We’d love it if you help spread the word about Flow.

PLEASE LET PEOPLE KNOW

You’re stellar.

You’re a gem.

You’re the  of my eye.

If you haven’t already, please go drop a dime on a license and help us keep rocking out more features for Flow!

❤︎