Ranked awesome lists, all in one place

This list is a copy of podo/awesome-framer with ranks

Awesome Framer ★73813

A curated list of Framer prototyping tool articles, resources, tutorials and other related things.

Framer is a tool to create animated and interactive prototypes. It uses modern web technologies such as JavaScript, HTML and CSS to extend the capabilities for advanced users and auto-correct, intuitive error messaging or in-app documentation to lower the learning curve for beginners.

General
Articles
Videos
Tutorials
Video Course
Books
Examples
Modules
Sites
Other

General

Articles

Designer / coder, and not the other way around - Paul Cotton talks how he started using Framer.
Why Framer.js Matters - Pedro Carmo on why Framer is a tool designers should start using.

Videos

Stripe Speaker Series: Designing with Framer - Koen Bok and Jorn van Dijk give a short talk and Q&A focused on Framer that also covers prototyping in general and a discussion of the various design tools available in the market.
FORM SF 2014: Panel - Design Tooling - Discussion between creators of popular design tools (including Koen Bok from Framer) on the value of prototyping, lessons learned in crafting products for designers, and the future of UX tools.

Tutorials

Framer.js Official Basics - The place to start prototyping with Framer.
Framer Video Tutorials - Video tutorials provided directly from Framer team.
New to Framer? Just 3 Things to Get You Started - David Lee’s guide to get started.
Framer.js for people who think things like Framer.js are weird and hard - Sean Mateer makes weird and hard things look easy.
Prototyping & Working with Framer - Simple guide to getting started by Dan Moore.
Prototyping with Framer.js - Framer basics by Tackmobile team.
Getting Started with Framer - Very basic Framer starting guide by Andrew Nalband.
Building Your First Prototype - Second guide by Andrew Nalband, where you start building real prototype from Sketch file.
Creating Your First Prototype with Framer - Animation tutorial by Kenny Chen.
Framer.js Workshop - Collection of Framer examples by Jay Stakelon.
Motion is Emotion: Prototyping Microinteractions for Apple Watch with Framer Studio - Apple Watch temperature gauge prototype tutorial.
Periscope Heart Animation Demo at the Seattle FramerJS Meetup - Presentation by Jordan Dobson on how to create Periscope heart animation with Framer.
Using Parse to power up your Framer prototypes - Using Framer with real data Part 1 by George Kedenburg III.
Give your Framer prototypes a better memory - Using Framer with real data Part 2 by George Kedenburg III.
Working with SVG Paths in Framer - Starting point for SVG Paths in Framer by Josh Puckett.
Managing Styles and CSS in Framer - Mårten Björk on styles management in Framer.
Developing a Framer Module - John Marstall teaches how to create a Framer Module.
Prototyping for Virtual Reality using Framer JS - Excerpts of some interaction considerations Keyur Jain learned of while prototyping for a Virtual Reality experience in Framer.
Prototyping Speech Recognition in Framer.js - Brian Bailey gives a breaf introduction to speach recognition prototyping in Framer.
Power your Framer prototypes with real location data - Maya Gao on Framer prototypes with real location data using Mapbox API.

Video Courses

Mobile App Prototyping: Designing Custom Interactions - 50-minute Skillshare class on how to use mobile app prototyping to communicate your ideas and execute your vision by Noah Levin.
Framerjs: Innovative prototyping and design with interaction - 54 parts, 6 hours course by Adria Jimenez.
Prototyping with Framer - Three-part prototyping course by Rafael Conde.
Rapid Prototyping with Framer - 5-hour long prototyping course by Kenny Chen.
Prototyping With Framer.js - On-location course instructed by Jay Stakelon, Noah Levin and Cemre Güngör.
UI Prototyping with Framer.js - Almost 5 hours long course by Jay Stakelon.
Framercasts - Advance your Framer knowledge with real world examples produced by Mike Johnson.
Framer for UX Design - Emmanuel Henri shows both how to use non-coding Framer tools and how the usage of programming fits into the UX design process.
Framer Crash Course - Crash course learning the basics of design and code on Framer.
designers.how Framer Courses - List of basic and more advanced Framer courses.

Books

Examples

Framer Experiments by Ed Chao - Several awesome examples with download links from designer at Dropbox.
HSL Color Picker - HSL Color Picker by Framer team.
iOS Toggle - iOS Toggle using Color class by Jorn van Dijk.

Modules

framer-googlefonts ★58 ⏳2Y - Google Fonts loader module for your Framer prototypes.
tabBarModule ★92 ⏳2Y - Module for Framer that replicates the iOS tab bar.
framer-animation-collections ★56 ⏳2Y - Framer classes for managing large sets of animations.
framer.iosnotification ★22 ⏳2Y - Framer module that mimics an iOS notification.
Framer-Grid ★22 ⏳1Y - Flexible Framer Module that creates a grid overlay on top of your prototype to precisely align content or experiment early on in the design process.
shortcuts-for-framer ★421 - Collection of useful functions to make mobile prototyping with Framer easier.
framer.placehold ★10 ⏳2Y - This is a module for framer that provides a library of different image placeholder services.
FramerNavigationComponent ★28 ⏳2Y - Reusable and customizable navigation component for Framer, based on iOS.
RippleTransition.framer ★4 ⏳2Y - Framer Module for a Material design like ripple transition.
framer-icon ★28 ⏳2Y - Framer dynamically tinted icons based off of a template image.
framer.makeGradient ★21 ⏳2Y - Module for Framer that makes it easy to create static linear/radial gradients. Want them to animate? I welcome pull requests.
WatchKit-Framer ★55 ⏳2Y - Apple Watch Kit module for Framer.
Framer-AudioPlayer - AudioPlayer Module for Framer.
Framer-VideoPlayer ★66 ⏳2Y - Video player module for Framer Studio and Framer.
Framer-Module-ShakeEvent ★55 - ShakeEvent Module for Framer.
Framer-Module-UISound ★30 - UISound Module for Framer.
CameraLayer ★67 - Framer layer displaying camera image.
ios-keyboard-for-framer - iOS Keyboard module for Framer.
textLayer-for-Framer ★262 - Framer module that simplifies the process of adding text to your prototypes.
Kinetics ★29 ⏳2Y - Test spring animations on any layer in your Framer Studio project without having to reload.
framer-flip-card-module ★93 ⏳1Y - Framer module to quickly create a flip card effect with two image layers.
Input-Framer ★300 - Framer module to easily turn your designs inputs into real inputs.
StickyHeaders-for-Framer ★93 - Module to create scroll components with sticky stamps in Framer.
OrientationEvents ★100 ⏳1Y - Module for Framer to handle device orientation events.
ScaleFrame ★8 ⏳2Y - Module for Framer to calculate properties of a scaled layer using its new dimensions.
framer-label ★12 ⏳2Y - Label module with multi-line truncation support for Framer.
framer-equally-rotate-images ★30 ⏳2Y - Give this module an array of images, and it will rotate them equally around in a circular path.
framer-colour-transition ★9 ⏳2Y - Framer module that transitions the background colour of a layer.
framer-webview ★20 ⏳2Y - Web view module for Framer.
framer-uistatusbar ★2 ⏳2Y - iOS status bar module for Framer.
framer.module.ajax ★19 ⏳2Y - Ajax module for Framer.
framer.module.fill ★6 ⏳2Y - Fill module for Framer.
SpeechSynth ★9 ⏳2Y - Framer module for Web SpeechSynthesis.
Comment-for-Framer ★16 ⏳2Y - Framer module for making comments in your prototypes.
framer-viewNavigationController ★223 ⏳1Y - Simple controller for FramerJS that allows you to transition between views with just a couple lines of code.
Layers-for-Framer ★34 ⏳1Y - Framer module that makes it easier to find layers in your project.
Framer-Highlightr ★26 ⏳2Y - Custom Framer module that shows hotspots over clickable layers in your prototype.
SVGLayer - Module and corresponding Sketch plugin that make it trivial to work with SVG Paths in Framer.
VRComponent ★170 - Virtual reality component for Framer.
3D Touch Module - Module for iOS 3D Touch support by Jordan Dobson.
Simple Android Ripple ★29 ⏳1Y - Framer module for adding touch ripple animations to any layer.
Simple Android Keyboards ★6 ⏳1Y - Easily add a static Android Keyboard to your Framer Studio project with just one line of code.
Simple Android Toast ★3 ⏳1Y - Use this module to easily add Android toasts to your Framer Studio projects.
Simple Android Snackbar ★3 ⏳1Y - Framer module for adding Android Material Design Snackbars to your project.
Framer Path ★139 ⏳1Y - Create custom SVG shapes and animate each point individually.
Material Kit for FramerJS ★268 - Make prototyping with Material Design fast and easy without compromising the quality or customization.
iOS Kit for FramerJS ★543 - Make prototyping for iOS fast and easy without compromising the quality or customization.
framer-Firebase ★205 - The Firebase module allows your Framer prototype to load, save and sync data effortlessly between multiple sessions and devices.
spotifyApiFramer ★9 ⏳1Y - Framer module that allows to get JSON objects when querying with Spotify API.
ViewController-for-Framer ★421 - Module for Framer helps you create multi step user flows with pre-made transitions like “fade in”, “zoom in” and “slide in”.
Gridddle ★46 - Grid module for FramerJS.
SliderLibrary ★20 - Framer library for creating sliders.
StickyHeaders-for-Framer ★93 - Module to enable sticky headers within Framer’s Scroll Components.
framer-view-stack ★21 ⏳1Y - Framer module for creating views that stack on top of each other.
RemoteLayer ★27 - The RemoteLayer module allows you to instantly generate an interactive Apple TV remote for your tvOS app prototypes.
distribute-layers ★81 - This package helps you position multiple Framer layers with ease.
Framer-ValueLayer ★59 ⏳1Y - ValueLayer is a Layer subclass dedicated to helping you manage numbers in your prototypes, and animate between them.
perspective-view ★38 ⏳1Y - Module for FramerJS to enable a perspective view of your prototype.
Pair ★24 - Drag and Drop module for Framer.
Cloudstitch Framer Module ★14 - Module lets you load data from Google Spreadsheets and Microsoft Excel directly into your Framer projects.
framer-QueryInterface ★21 - Module that allows Framer prototypes to read variables from and write variables to the last part of their URL (the query).
StatusBarLayer ★45 - Module for generating accurate, customizable status bars for iOS app prototypes.
Loading Placeholder ★11 - Module which instantly creates loading placeholder based on your layer style.
bodymovin for Framer - Module that renders JSON files exported with the Bodymovin plugin from After Effects.
ControlPanelLayer ★31 - Framer module for creating a developer panel to control aspects of the prototype from within the prototype.
GradientHelper ★16 - Module that simplifies the process of applying gradients to Framer layers and even enables animated gradients.
FocusEngine ★12 - Module for simulating the grid focus behavior found on Apple TV and Roku.
MapboxLayer ★13 - Module for creating powerful Mapbox maps in your prototypes.
Framer Sheet ★13 - Import information from Google Sheets into Framer.
FramerAudio ★40 — Module that allows you to design audio interfaces in Framer.
Framer Slider ★36 - Module that allows you to design sliders and then bring them to life, without losing customizability. Appearance and logic—separated.
framer-Symbols ★35 - Module to create symbols in Framer.

Sites

Prototyping With Framer - Blog by Kenny Chen with lots of great examples, tutorials.
Framer Code - Collection of Framer modules, code examples, snippets and tips.

Other

framer-modules ★201 - Discover, install and save your favorite modules at one place.
Framer Snippets ★467 - Library of Framer snippets to help speed up workflow.
Stitch ★147 ⏳2Y - Lightweight framework for adding interaction to your Framer prototypes directly from your Sketch designs.
framer-bootstrap ★26 - Use Framer Library in your preferred editor and environment.
Fiber - A free interactive UI kit with 15 screens.
Voyage - A free travel-themed UI kit that’s fully interactive and made for Framer.

License

CC0 —