Part 2— Adding tap gestures and animation

In part one we created the basic elements of our toggle and styled them to match the designs. In part two we’ll learn how to add tap gestures and animations to make our prototype interactive.

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

In this tutorial we’re going to prototype a simple toggle with SwiftUI that animates other elements in our view. In part one we’ll learn how to:

  • 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.

In part two we’ll add tap gestures and animations to make it interactive.

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

[Originally Posted on December 10, 2014]

One of the great things about Framer is that it supports HTML5 video. In this tutorial I’ll show you how to prototype a video player with simple controls inside Framer Studio.

👉 Download the sample file

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.

Once you have your video, create a new fullscreen Framer Studio project, save it, and place the video file inside the images folder. Then copy paste this code into the editor:

# 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