Framer  Course

Design with Framer

Framer is quickly becoming an indispensable piece of the modern UI designer's toolkit. Dive into designing apps with Framer, and see how to use Auto-Code to create interactive prototypes.

There are 5 episodes.

  • Tour the UI

    Framer Design has a UI that won't be terribly unfamiliar to anyone used to vector UI drawing on the Mac, but let's still take a quick tour around the UI and note some imp...

    • 6:19
    • Free to Watch
    • Watched
  • Laying Out Shapes and Text

    Framer is built with responsive layout in mind, and it automatically adjusts objects accordingly. The vector drawing tools should be pretty familiar, as well as text.

    • 9:15
    • Free to Watch
    • Watched
  • Adding Images and Effects

    Adding images and enhancing the UI with tasteful effects is a big part of design. Focus on adding that final touch in this episode with some album art, shadows, and a coo...

    • 11:31
    • Free to Watch
    • Watched
  • Add Code to Your Design

    To bring your prototype to life, you'll need to add some code. Thankfully Framer makes it easy with auto-code, even though you can still freeform edit.

    • 7:22
    • Free to Watch
    • Watched
  • Sharing Your Prototype

    Obviously prototypes are created for others to experience. Learn how to upload and share your work with Framer Cloud

    • 3:23
    • Free to Watch
    • Watched