awesome-framer
A curated list of awesome things related to Framer prototyping tool
https://github.com/podo/awesome-framer
Last synced: 12 days ago
JSON representation
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.
Books
General
Modules
- SVGLayer - Module and corresponding Sketch plugin that make it trivial to work with SVG Paths in Framer.
- 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.
- 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 enable sticky headers within Framer's Scroll Components.
- 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.
- VRComponent - Virtual reality component for Framer.
- 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.
- 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
- 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 Status Bar Module - Module to initialize a status bar in a Framer application.
- Framer Android Picker - An Android Picker Module.
- 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.
- RippleTransition.framer - Framer Module for a Material design like ripple transition.
- 3D Touch Module - Module for iOS 3D Touch support by Jordan Dobson.
Other
- 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.
- AllFramer - Discover the curated list of Framer templates, components, blocks, plugins, and more with a blazing-fast search & filter experience!
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.
- Prototyping With Framer - Blog by Kenny Chen with lots of great examples, tutorials.
- Prototyping With Framer - Blog by Kenny Chen with lots of great examples, tutorials.
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 with Framer.js - Framer basics by Tackmobile team.
- Getting Started with Framer - Very basic Framer starting guide by Andrew Nalband.
- 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.
- 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.
- 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 for Virtual Reality using Framer JS - Excerpts of some interaction considerations Keyur Jain learned of while prototyping for a Virtual Reality experience in Framer.
- 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.
- 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.
- 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.
- 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 for Virtual Reality using Framer JS - Excerpts of some interaction considerations Keyur Jain learned of while prototyping for a Virtual Reality experience in Framer.
- Framer.js for people who think things like Framer.js are weird and hard - Sean Mateer makes weird and hard things look easy.
- 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 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 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 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 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 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 for Virtual Reality using Framer JS - Excerpts of some interaction considerations Keyur Jain learned of while prototyping for a Virtual Reality experience in Framer.
- Framer Video Tutorials - Video tutorials provided directly from Framer team.
- 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.
- New to Framer? Just 3 Things to Get You Started - David Lee’s guide to get started.
- 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.
- 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.
UI Libraries
- iOS 11 iPhone GUI - Templates of GUI elements found in the public release of iOS 11.
- Framework - A general-purpose component kit for Framer.
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.