← Back to archive

Repo of the Day

podo/awesome-framer

Published: May 23, 2022

Open repository ↗

Awesome - Framer Motion Animation resources and tutorials

Summary

podo/awesome-framer is a curated "awesome list" that collects articles, tutorials, video courses, books, example prototypes, modules, and UI libraries for the Framer prototyping tool. Framer is a tool for building animated, interactive prototypes using web technologies such as JavaScript, HTML, and CSS. The repository itself is a Markdown index — there is no library to install and no build step.

What it is useful for

This list is useful as a starting directory when you want to learn Framer or find building blocks for a prototype. Concrete use cases documented in the README include:

  • Learning Framer through official basics, written guides, or structured video courses on Skillshare, Udemy, Pluralsight, O'Reilly, and Lynda.
  • Adding reusable modules for common prototype needs, for example framer-flip-card-module, framer.makeGradient, lottie-framer, framer-Firebase, and MapboxLayer.
  • Studying example prototypes such as the HSL Color Picker and the iOS Toggle to see how finished work is structured.
  • Starting from prebuilt UI kits, including the iOS 11 iPhone GUI, iOS Kit for FramerJS, Material Kit for FramerJS, and free kits shipped from framer.com for iOS, Android, Web, and wireframes.
  • Extending the editor workflow with tools like framer-bootstrap (use the Framer Library outside Framer Studio) and Stitch (add interaction directly from Sketch designs).

How engineers can use it

  1. Open the README on GitHub and use the table of contents to jump to the section that matches your goal (Tutorials, Modules, UI Libraries, Sites, Other).
  2. To learn, start with the "Framer.js Official Basics" entry or a video course such as "Rapid Prototyping with Framer" by Kenny Chen, then follow up with specific tutorials like "Working with SVG Paths in Framer" or "Managing Styles and CSS in Framer."
  3. To extend a prototype, pick a module repository (for example framer-Firebase for data sync or lottie-framer for After Effects animations) and follow that module's own README for installation. The awesome-framer README does not include install commands for individual modules.
  4. To bootstrap a design system, clone one of the UI Libraries such as iOS-11-GUI-for-Framer or k-vyn/framer-ios-kit and adapt it.

Documented limitations: the list is a Markdown index, not a maintained package, and many entries reference Framer Studio, an older product, so individual links may be out of date. No build, test, or install steps are documented here. License is CC0.