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.
- 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.
- 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.
- 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.
- How to Create High‑Quality GIFs - How to Create High‑Quality GIFs, our guide to making amazing GIFs with some of our favorite tools: ScreenFlow and Claquette.
- 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.
- Framer Studio for Beginners: A Comprehensive Guide - Series of videos that walk you through designing and coding in Framer using hands-on projects by Cordova Putra
- 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.
- framer-googlefonts - Google Fonts loader module for your Framer prototypes.
- tabBarModule - Module for Framer that replicates the iOS tab bar.
- framer-animation-collections - Framer classes for managing large sets of animations.
- framer.iosnotification - Framer module that mimics an iOS notification.
- Framer-Grid - 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 - 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 Module for a Material design like ripple transition.
- framer-icon - Framer dynamically tinted icons based off of a template image.
- framer.makeGradient - Module for Framer 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.
- Framer-AudioPlayer - AudioPlayer Module for Framer.
- Framer-VideoPlayer - Video player module for Framer Studio and Framer.
- Framer-Module-ShakeEvent - ShakeEvent Module for Framer.
- Framer-Module-UISound - UISound Module for Framer.
- CameraLayer - Framer layer displaying camera image.
- ios-keyboard-for-framer - iOS Keyboard module for Framer.
- textLayer-for-Framer - Framer 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 - 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 - Module to create scroll components with sticky stamps in Framer.
- OrientationEvents - Module for Framer to handle device orientation events.
- ScaleFrame - Module for Framer to calculate properties of a scaled layer using its new dimensions.
- framer-label - Label module with multi-line truncation support for Framer.
- 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 - Framer module that transitions the background colour of a layer.
- framer-webview - Web view module for Framer.
- framer-uistatusbar - iOS status bar module for Framer.
- framer.module.ajax - Ajax module for Framer.
- framer.module.fill - Fill module for Framer.
- SpeechSynth - Framer module for Web SpeechSynthesis.
- Comment-for-Framer - Framer module for making comments in your prototypes.
- framer-viewNavigationController - Simple controller for FramerJS that allows you to transition between views with just a couple lines of code.
- Layers-for-Framer - Framer module that makes it easier to find layers in your project.
- Framer-Highlightr - 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 - Virtual reality component for Framer.
- 3D Touch Module - Module for iOS 3D Touch support by Jordan Dobson.
- Simple Android Ripple - Framer 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 - Framer 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.
- ViewController-for-Framer - Module for Framer helps you create multi step user flows with pre-made transitions like "fade in", "zoom in" and "slide in".
- Gridddle - Grid module for FramerJS.
- SliderLibrary - Framer library for creating sliders.
- StickyHeaders-for-Framer - Module to enable sticky headers within Framer's Scroll Components.
- framer-view-stack - Framer module for creating views that stack on top of each other.
- RemoteLayer - The RemoteLayer module allows you to instantly generate an interactive Apple TV remote for your tvOS app prototypes.
- distribute-layers - This package helps you position multiple Framer layers with ease.
- Framer-ValueLayer - ValueLayer is a Layer subclass dedicated to helping you manage numbers in your prototypes, and animate between them.
- perspective-view - Module for FramerJS to enable a perspective view of your prototype.
- Pair - Drag and Drop module for Framer.
- Cloudstitch Framer Module - Module lets you load data from Google Spreadsheets and Microsoft Excel directly into your Framer projects.
- framer-QueryInterface - Module that allows Framer prototypes to read variables from and write variables to the last part of their URL (the query).
- Framer StatusBarLayer - Module for generating accurate, customizable status bars for iOS app prototypes.
- Loading Placeholder - Module which instantly creates loading placeholder based on your layer style.
- lottie-framer - Framer module that uses AirBnb's Lottie-Web to render animations exported from After Effects (JSON files).
- ControlPanelLayer - Framer module for creating a developer panel to control aspects of the prototype from within the prototype.
- GradientHelper - Module that simplifies the process of applying gradients to Framer layers and even enables animated gradients.
- FocusEngine - Module for simulating the grid focus behavior found on Apple TV and Roku.
- MapboxLayer - Module for creating powerful Mapbox maps in your prototypes.
- Framer Sheet - Import information from Google Sheets into Framer.
- FramerAudio — Module that allows you to design audio interfaces in Framer.
- Framer Slider - Module that allows you to design sliders and then bring them to life, without losing customizability. Appearance and logic—separated.
- iOS-11-Framer - iOS 11 Design System GUI for Framer.
- framer-Symbols - Module to create symbols in Framer.
- framer-moreutils - Expand Utils with some handy helper functions.
- framer keyboardEvents - Hassle-free keyboard bindings for Framer: No need to look up keyCodes; supports 100+ keys with minimal performance impact.
- Framer Joystick - Module for Gamepad-driven UI prototypes.
- Framer Feedback - Framer feedback module makes it easier for you to prototype with feedback messages.
- Framer-Bottom-Navigation - Framer Module to add Android's Bottom Navigation to your project.
- Framer Device Rotator - A Framer module that adds a rotation button to a phone/tablet when said is displayed in a desktop browser or in Framer Studio (but not on device).
- Keyboard Input for Framer - A module that allows you to easily manage keyboard input.
- Framer DesignComponents - Module for converting your designs in design mode into full scalable classes in code, without a single line of code!.
- Framer Web Audio API Module - A Framer module that provides better audio support for your Framer projects.
- Framer Status Bar Module - Module to initialize a status bar in a Framer application.
- Framer Android Picker - An Android Picker Module.
- Yummy Framer - Yummy provides custom layer functions such as LoadViews, LoadNextView, Fade & Move Layer.
- Framer Font Loader - Painlessly, reliably load local and web fonts into Framer prototypes.
- Framer Form - Give your Framer prototypes a third dimension.
- FramerMapboxJS - Another module to integrate Mapbox maps on your Framer prototypes.
- iOS 11 iPhone GUI - Templates of GUI elements found in the public release of iOS 11.
- Framework - A general-purpose component kit for Framer.
- Prototyping With Framer - Blog by Kenny Chen with lots of great examples, tutorials.
- Framer Code - Collection of Framer modules, code examples, snippets and tips.
- framer-modules - Discover, install and save your favorite modules at one place.
- Framer Snippets - Library of Framer snippets to help speed up workflow.
- Stitch - Lightweight framework for adding interaction to your Framer prototypes directly from your Sketch designs.
- framer-bootstrap - 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.
- iOS Kit - Readymade elements for starting your next iOS app. Direct link.
- Android Kit - Material Design elements for your next Android app. Direct link.
- Web Kit - All the elements you’ll need to start your next web project. Direct link.
- Wireframe Kit - Basic wireframe elements to blueprint your next big project. Direct link.
