checkMarkAnimated

Time icon
Tags icon

Export Custom Button for iOS

In this tutorial, you'll learn how to export a custom button for iOS.

Export

Your animation is ready, and with it you want to create an actual iOS UIButton with it.

  1. Hit ⇧⌘E, or File > Export > Code
  2. Choose the iOS - Custom Button option
  3. Select your timeline
  4. Hit Export

Done!

customButtonExport

Flow’s iOS - Custom Button template will take a selected timeline and build it into a basic iOS app that has a UIButton driving the animation. It will also reverse the animation so that when the button toggles off, it plays backwards to the original state.

That’s it, really.

You can go home now.

And all your apps can have custom buttons.

Check Mark Demo

If you don’t already have an animation prepared, you can use ours:

CheckMark.flow

The animation looks like this:

checkMarkAnimated

The Flow file looks like this:

customButton

Key Concepts

Animating a button is a style choice and you, as the designer, are the best person to judge the quality of an animation in the context of the work you’re producing. There are many possibilities to create buttons.

The iOS - Custom Button option produces a toggle button.

  1. The off state is the first frame your animation.
  2. The on state is the last frame of your animation.
  3. Animations should be short, in the vicinty of 0.25s - 0.5s.
  4. The UIButton exported can be reused throughout your app.

The animation we provided above is 0.5s long, and 44x44pt

Xcode Project

Exporting an iOS onboarding animation from Flow generates a clean Xcode project that looks like this:

xcodeCustomButton

For more detail, check out: Xcode Project Breakdown for Custom Buttons

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.