In this tutorial, you'll learn how to export a custom button for iOS.
Your animation is ready, and with it you want to create an actual iOS UIButton with it.
Hit ⇧⌘E, or File > Export > Code
Choose the iOS - Custom Button option
Select your timeline
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:
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.
The off state is the first frame your animation.
The on state is the last frame of your animation.
Animations should be short, in the vicinty of 0.25s - 0.5s.
The UIButton exported can be reused throughout your app.
The animation we provided above is 0.5s long, and 44x44pt
Exporting an iOS onboarding animation from Flow generates a clean Xcode project that looks like this: