A collection of Framer.js resources, tutorials and other related things.
- 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
- 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
- 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
- Framer Experiments by Ed Chao - Several awesome examples with download links from designer at Dropbox.
- 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.
- 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.