Part 2— Adding tap gestures and animation

Adding Animation

To update our page when we tap on the toggle we’ll use a State variable. State variables are monitored by Swift so when the variable changes from true/false we can use that as a trigger for animations. Take a look at the following changes.

  • On line 5 we added our state variable with @State var toggleOn = false
  • On line 32 we added an…

Part 1: Layout basics with stacks, shapes and modifiers

  • use stacks to arrange elements on-screen.
  • build a toggle using built-in shapes and modifiers.
  • add colors, text styles and images to match designs.

Basic Setup

First things first, let’s take a look at what we’re building. Head over to this Figma file to look at the designs.


Setting up the video.

To start, let’s get a video playing inside Framer Studio with no controls. Download a short mp4 from Vimeo ‐ I used this one.

# setup a…

Todd Hamilton

Product designer @Facebook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store