Framer - Intro Course Introducing Framer X. Interactive design for everyone. Introducing Framer X. See what’s new.

Intro Course

Learn the basics of designing and coding in Framer with 10 intro courses by

Some of the information in these videos may be outdated. For more details, visit our Help Center.

Tour the UI

The UI in Framer Design will be familiar to anyone used to vector UI drawing on Macs. Here’s a quick tour around the UI to help you get acclimated to some important features.

Shapes and Frames

Shapes don't exactly behave like the layers you're used to. You can style them, edit their shape and apply boolean operations. Frames can be placed on the canvas or in other frames, all while we guess layout and hierarchy.

Shapes and Text

Framer’s vector drawing and text tools should be familiar to designers. Because Framer was built with responsive design in mind, it automatically adjusts layouts and objects accordingly.

Images and Effects

Adding images and enhancing UI with subtle effects is a big part of design. In this episode, we’ll focus on adding final touches with some album art, shadows, and a cool trick to fade layers.

Add Code to Design

To bring your designs to life, you’ll have to add some code. Thankfully, Framer makes this easy with Auto-Code, though you can still free-form edit if you want to.

Share Your Prototype

Learn how to use Framer Cloud to upload and share your work with teammates and collaborators.

Build Layers in Code

Before doing more complex stuff, you’ll need to master building layers from scratch in Framer Code. This episode goes into the details of how to design in Code.

Layout with Loops

Using loops is typically shorter and more efficient than writing out every single layer. In this episode, you’ll use loops to rebuild your album stack from Design mode with code.

Arrays & Data

Arrays are useful constructs in any language, and in Framer it’s no different. You’ll put arrays to good use in this episode to populate your album stack with images.

Events to Looped Layers

Adding events to objects is pretty straightforward, but when those objects are in a loop, it gets a bit trickier. This time around, let’s add interaction to the album stack.

Functions & Code Reusability

Duplicating code is something to avoid no matter what you’re building, and functions are the first line of defense against that trap. In this episode, you’ll learn the basics of writing reusable Framer code.

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.