Framer lets you design and concept interactive web and mobile interfaces in a single application. Some of the top design teams use Framer to prototype their interfaces because it blurs the lines between design and reality.

There are 6 Framer courses.

  • Design an iOS App - Part Two

    4 EpisodesBy Chris Slowik

    In the first half of this course, we designed the app, and laid out the overall navigation structure. Now we can now focus on some finer int...

  • Design an iOS App - Part One

    7 EpisodesBy Chris Slowik

    Learn to design and prototype a complete iOS app in Framer - a wholistic workflow that makes product design a breeze. This first half lays t...

  • Build a Gamepad-Controlled TV Prototype

    5 EpisodesBy Chris Slowik

    Build a TV-focused prototype and learn how to use Framer Joystick, an awesome open-source module that enables gamepad control and more. Lear...

  • Make a Data-Driven Prototype

    7 EpisodesBy Chris Slowik

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

  • Code with Framer

    5 EpisodesBy Chris Slowik

    The power of Framer really lies in being able to code up anything you wish. Building a dynamic card stack, this series serves as a crash int...

  • Design with Framer

    5 EpisodesBy Chris Slowik

    Framer is quickly becoming an indispensable piece of the modern UI designer's toolkit. Dive into designing apps with Framer, and see how to ...

There are 34 Framer episodes.

  • Load and Use JSON Data with Symbols

    Symbols become even more powerful when you use them to generate dynamic content based on data. We'll start using the drink list item symbol in this episode with an extern...

    • "Load and Use JSON Data with Symbols" in Framer
    • 4:01
    • Pros Only
    • Watched
  • Replacing Sample UI Elements

    When designing your UI, it's useful to create and see states that are fueled by data. So how do you then turn around and power that UI with data in your prototype?

    • "Replacing Sample UI Elements" in Framer
    • 7:16
    • Pros Only
    • Watched
  • Framer v108 - Shapes and Frames

    Framer version 108 is an awesome design-focused update, with the addition of a pen tool, shapes, and better grouping! Learn about the new features while making a cool loc...

    • "Framer v108 - Shapes and Frames" in Framer
    • 15:34
    • Free to Watch
    • Watched
  • Using Templates and States on Symbols

    One reason symbols are so powerful is because you can set up the instances to be customizable using text templates and states. The drink list item has multiple states and...

    • "Using Templates and States on Symbols" in Framer
    • 6:45
    • Pros Only
    • Watched
  • Design-Based Symbols in Framer

    Creating components in design mode is great - but how do you reuse these elements in a dynamic way? In this episode we'll explore one method of creating reusable objects...

    • "Design-Based Symbols in Framer" in Framer
    • 10:29
    • Free to Watch
    • Watched
  • Design a Reusable List Item in Framer

    The skeleton of this prototype is just about done, so this episode will be focused on filling out the details on all the screens - including the important Drink list item...

    • "Design a Reusable List Item in Framer" in Framer
    • 9:55
    • Pros Only
    • Watched
  • Design an Interactive Settings Screen

    Every app needs a settings screen. There's not a whole lot to this app, so this can be tackled in one episode - moving a little faster with Design mode now, as you get so...

    • "Design an Interactive Settings Screen" in Framer
    • 9:38
    • Pros Only
    • Watched
  • Build Better Tap Areas Using Parent Objects

    If you're using icons or text for buttons in Framer, its often useful or even necessary to augment the tappable area for usability. Learn a quick and easy way to build be...

    • "Build Better Tap Areas Using Parent Objects" in Framer
    • 4:32
    • Pros Only
    • Watched
  • Navigation Bar Design with Framer

    Before getting into the details of each screen, it's usually useful to stub out the navigation of the app, at least for a simple one with few screens. Get some more pract...

    • "Navigation Bar Design with Framer" in Framer
    • 4:48
    • Pros Only
    • Watched
  • Simulate an App Launch with FlowComponent

    Time to get started adding interactive elements to this prototype. Learn how to use FlowComponent to create transitions, show modals, and control your app flow.

    • "Simulate an App Launch with FlowComponent" in Framer
    • 4:59
    • Pros Only
    • Watched