A collection of Framer.js resources, tutorials and other related things.

• General
• Articles
• Videos
• Tutorials
• Video Course
• Books
• Examples
• Modules
• Sites
• Other

• Framer.js Official Site
• Framer.js Official Examples
• Framer.js Documentation
• Framer.js Facebook Group

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

• 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 - A 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.

• Framer.js Official Basics - The place to start prototyping with Framer.js
• Framer Video Tutorials - Video tutorials provided directly from Framer.js 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 - A simple guide to getting started by Dan Moore
• Prototyping with Framer.js - Framer.js basics by Tackmobile team
• Getting Started with Framer - Very basic Framer.js 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.js 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.js
• Using Parse to power up your Framer prototypes - Using Framer.js with real data Part 1 by George Kedenburg III
• Give your Framer prototypes a better memory - Using Framer.js 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 JS
• 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

• 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

• CoffeeScript for Framer by Tessa Thornton

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

• framer-googlefonts - Google Fonts loader module for your Framer.js prototypes.
• tabBarModule - A module for Framer that replicates the iOS tab bar.
• framer-animation-collections - Framer.js classes for managing large sets of animations.
• framer.iosnotification - A framer module that mimics an iOS notification.
• Framer-Grid - A 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 - A collection of useful functions to make mobile prototyping with Framer easier.
• framer.placehold - This is a module for framer that provides a library of different image placeholder services.
• FramerNavigationComponent - Reusable and customizable navigation component for Framer, based on iOS.
• RippleTransition.framer - Framer JS Module for a Material design like ripple transition.
• framer-icon - Framer.js dynamically tinted icons based off of a template image.
• framer.makeGradient - This is a module for framer.js that makes it easy to create static linear/radial gradients. Want them to animate? I welcome pull requests.
• WatchKit-Framer - Apple Watch Kit module for Framer JS.
• Framer-AudioPlayer - AudioPlayer Module for Framer.
• Framer-VideoPlayer - A video player module for Framer Studio and Framer.js.
• Framer-Module-ShakeEvent - ShakeEvent Module for FramerJS.
• Framer-Module-UISound - UISound Module for FramerJS
• CameraLayer - Framer.js layer displaying camera image.
• ios-keyboard-for-framer - iOS Keyboard module for Framer 3.
• textLayer-for-Framer - Framer.js module that simplifies the process of adding text to your prototypes.
• Kinetics - Test spring animations on any layer in your Framer Studio project without having to reload.
• framer-flip-card-module - A framer module to quickly create a flip card effect with two image layers.
• Input-Framer - Framer module to easily turn your designs inputs into real inputs.
• StickyHeaders-for-Framer - A module to create scroll components with sticky stamps in Framer.
• OrientationEvents - Module for Framer Studio to handle device orientation events.
• ScaleFrame - Module for Framer Studio to calculate properties of a scaled layer using its new dimensions.
• framer-label - Label module with multi-line truncation support for Framer.js.
• framer-equally-rotate-images - Give this module an array of images, and it will rotate them equally around in a circular path.
• framer-colour-transition - A framer module that transitions the background colour of a layer.
• framer-webview - Web view module for Framer.js
• framer-uistatusbar - iOS status bar module for Framer.js
• framer.module.ajax - An Ajax module for Framer.
• framer.module.fill - A fill module for Framer.
• SpeechSynth - Framer module for Web SpeechSynthesis.
• Comment-for-Framer - Framer.js module for making comments in your prototypes
• framer-viewNavigationController - A simple controller for FramerJS that allows you to transition between views with just a couple lines of code.
• Layers-for-Framer - Framer.js module that makes it easier to find layers in your project
• Framer-Highlightr - A custom Framer.js module that shows hotspots over clickable layers in your prototype.
• SVGLayer - A module and corresponding Sketch plugin that make it trivial to work with SVG Paths in Framer.
• VRComponent - A virtual reality component for Framer.
• 3D Touch Module - Module for iOS 3D Touch support by Jordan Dobson
• Simple Android Ripple - A Framer Studio module for adding touch ripple animations to any layer
• Simple Android Keyboards - Easily add a static Android Keyboard to your Framer Studio project with just one line of code.
• Simple Android Toast - Use this module to easily add Android toasts to your Framer Studio projects.
• Simple Android Snackbar - A Framer Studio module for adding Android Material Design Snackbars to your project
• Framer Path - Create custom SVG shapes and animate each point individually
• Material Kit for FramerJS - Make prototyping with Material Design fast and easy without compromising the quality or customization
• iOS Kit for FramerJS - Make prototyping for iOS fast and easy without compromising the quality or customization
• framer-Firebase - The Firebase module allows your Framer prototype to load, save and sync data effortlessly between multiple sessions and devices.
• spotifyApiFramer - Framer module that allows to get JSON objects when querying with Spotify API

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

• Framer Snippets - A library of Framer snippets to help speed up workflow
• Stitch - Lightweight framework for adding interaction to your Framer prototypes directly from your Sketch designs.