Framer  Course

Make a Data-Driven Prototype

Grab your keyboard and get ready to learn about imported data, gradient animations, dynamic text, and sound with this fun quiz prototype.

There are 7 episodes.

  • Build a Dynamic Quiz Game in Framer Design

    Framer's Design mode UI is easier to use than ever and includes powerful options for text. In this episode, we'll take a look at how to use gradients in design and the ne...

    • 7:19
    • Free to Watch
    • Watched
  • Import JSON Data and Map to Design Layers

    This quiz game prototype is going to be built with the intent to be easily editable. That means we want to import the quiz questions and metadata from a file. Learn how t...

    • 6:01
    • Free to Watch
    • Watched
  • Using Framer Text Layer Templates

    Templates allow you to work with specific parts of your text, eliminating the need to build complex strings with a lot of concatenation.

    • 4:17
    • Free to Watch
    • Watched
  • Framer Gradients and Animations

    Animating gradient layers is very similar to animating any other layer in Framer. In this episode, we'll handle setting up that animation and tie a gradient color to each...

    • 3:03
    • Free to Watch
    • Watched
  • Connect Events to the Button Array

    With the foundation set up, we need to set up tap events to make this quiz functional. Each button tap needs to check the text vs the answer, and provide feedback animati...

    • 6:10
    • Pros Only
    • Watched
  • Complete the Answer Transition

    The final piece of the puzzle is to advance to the next question when the user selects an answer. We'll hook up that animation and interaction in this step.

    • 4:56
    • Pros Only
    • Watched
  • Using Sound in Framer

    Framer has a generous library of built-in sound effects from Facebook to add depth to your prototypes. Sound goes a long way toward making an experience feel amazing - an...

    • 3:26
    • Pros Only
    • Watched