Useful Resources

A list of useful resources for getting your team started in Framer X.

Courses

  • Resources page on Framer.com

  • Framer X Tutorial Series by Athanasia LyKoudi

  • Design+Code Framer X course : An in-depth 10 chapter course by Meng To going through the fundamentals of Framer X. You can go through the course in its entirety, or skip to the chapter that is related to the topic you're most interested in learning more about.

  • Framer X + React course by Linton Ye: Get productive in Framer X. Learn React fundamentals. No coding experience required!

  • Learning Framer X by LinkedIn Learning: Get a quick start to using Framer X, the UX prototyping and front-end development tool. Learn how to lay out, prototype, iterate, and publish your designs using Framer tools and React component integration.

  • Designer & Development Workflow in Framer X on Lynda.com: Get a quick start to using Framer X, the UX prototyping and front-end development tool. Learn how to lay out, prototype, iterate, and publish your designs using Framer tools and React component integration.

Docs

Tutorials & Blog Posts

Framer Playground:

Visual Design:

Rapid prototyping (without code)

Limitless prototyping (leveraging code):

Design systems (developers' perspective):

User testing:

Highlighted Packages for getting started

Essentials:

Animations:

  • Magic Move by Henrique Gusso - micro interactions made easy (using the Framer Library)

  • Lottie by AirBnb - allows you to connect Framer X with After Effects

Utilities:

Designing with Real Data:

Video Players:

For Learning: