A collection of Framer.js resources, tutorials and other related things.
- 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
- 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.