The Official Place to Learn FramerThe Official Place to Learn Framer

Learn is a brand-new section with videos, written guides, and more designed to help you become a Framer expert.

September 19, 2019

Over the years, we’ve witnessed firsthand how Framer knowledge has helped advance careers, ship groundbreaking products, and inspired thousands of designers to learn code. In the process, we’ve discovered a thing or two about teaching Framer. Now we’re putting all of that knowledge to good use and launching an official platform for learning Framer.

Framer courses, tailored to you

Separate from our Support Hub, the Learn Section will provide pathways for mastering Framer, specific to your areas of interest and technical abilities. This new section combines video and written content to cater to every learning style. Search and read a How-to guide on a single topic, like Designing with APIs, or complete a progressive course, such as Creating Custom Page Effects, to develop an entirely new Framer skillset. Navigate to Courses, Lessons, or How-to Guides, then filter by type, topic, and level to find the right resource for you.

Currently, most of our featured content has been created by the Framer product and education teams. Designers like Benjamin den Boer, Zach Johnston, and Brendan Fagan lean on years of Framer knowledge to lead you through courses, while Peri Langlois, Steve Ruiz, and Aroa Gil Bo draw from real-life experience as Framer educators and product specialists. Browse Learn today and you’ll get to choose from 38 videos, 12 guides, and 8 different topics. We plan to add to this on a continual basis. Right now, here are a few tracks that might interest you:

Just getting started?

The Framer 101 course takes you on a 37 minute tour of the UI and gets you acquainted with key Framer concepts, from Frames and Stacks to the Page tool, Code Components, and Overrides. Then, build your first code component with Steve’s short but sweet Build a Checkbox Course.

For the visual designer

There’s a lot you can achieve on the canvas in Framer. Watch this video to understand how to design fluid layouts using frames, then learn how to make beautiful icons and illustrations with the graphics tool. There’s also a quick 4-minute video on the power of using Stacks to create advanced layouts and one that teaches you about master and instances—so you can turn anything you design into a reusable component.

Jump into interaction design

The best way to learn is by doing. Start small by Building an Animating Progress Bar, which you’ll be able to re-use throughout your projects, then take the Creating Custom Page Effects course to start putting your prototyping skills to use.

Are you an advanced prototyper?

As a design tool, Framer offers you the unparalleled ability to create realistic prototypes that are indistinguishable from the real deal. Check out Hunter Caron’s guide on using Firebase to build a prototype that syncs data in real-time across prototypes. Or put your coding knowldge through it’s paces and create a full-fledged sign-in page with real inputs, states, and form validation with Steve.

No matter how long you’ve been designing or what your level of experience is with Framer, we believe that access to education is the ultimate equalizer. Our Design Education team plans to continue adding content, including short lessons on common interactions, how-tos for creating prototypes using Framer’s Base Component Kit, and much more. If you’re interested in specific content, drop us a line on Spectrum and let us know what you’d like us to create.

Otherwise, get started with Learn today:

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.