awesome-framer

Framer resource hub

A curated collection of resources and tutorials on using the Framer prototyping tool

A curated list of awesome things related to Framer prototyping tool

GitHub
577 stars
42 watching
49 forks
last commit: over 5 years ago
Linked from 3 awesome lists

autocodeawesomeawesome-listframerframer-coursesframer-modulesframer-prototypeframer-resourcesframer-snippetsframer-studioframerjsprototypetutorialvideo-course

Awesome Framer / General
Official Site
Official Examples
Documentation
Facebook Group

Awesome Framer / 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

Awesome Framer / Videos
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

Awesome Framer / 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 & 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
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 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

Awesome 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
Framerjs: Innovative prototyping and design with interaction 54 parts, 6 hours course by
Prototyping with Framer Three-part prototyping course by
Rapid Prototyping with Framer 5-hour long prototyping course by
Prototyping With Framer.js On-location course instructed by , and
UI Prototyping with Framer.js Almost 5 hours long course by
Framercasts Advance your Framer knowledge with real world examples produced by
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

Awesome Framer / Books
CoffeeScript for Framer by
The Framer book by

Awesome Framer / Examples
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

Awesome Framer / Modules
framer-googlefonts 62 over 9 years ago Google Fonts loader module for your Framer prototypes
tabBarModule 94 almost 9 years ago Module for Framer that replicates the iOS tab bar
framer-animation-collections 64 over 6 years ago Framer classes for managing large sets of animations
framer.iosnotification 22 over 9 years ago Framer module that mimics an iOS notification
Framer-Grid 24 about 8 years ago 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 411 over 6 years ago Collection of useful functions to make mobile prototyping with Framer easier
framer.placehold 11 over 9 years ago This is a module for framer that provides a library of different image placeholder services
FramerNavigationComponent 29 about 9 years ago Reusable and customizable navigation component for Framer, based on iOS
RippleTransition.framer 4 almost 9 years ago Framer Module for a Material design like ripple transition
framer-icon 28 over 9 years ago Framer dynamically tinted icons based off of a template image
framer.makeGradient 23 over 9 years ago Module for Framer that makes it easy to create static linear/radial gradients. Want them to animate? I welcome pull requests
WatchKit-Framer 55 over 9 years ago Apple Watch Kit module for Framer
Framer-AudioPlayer 149 about 8 years ago AudioPlayer Module for Framer
Framer-VideoPlayer 75 about 9 years ago Video player module for Framer Studio and Framer
Framer-Module-ShakeEvent 62 over 7 years ago ShakeEvent Module for Framer
Framer-Module-UISound 32 over 7 years ago UISound Module for Framer
CameraLayer Framer layer displaying camera image
ios-keyboard-for-framer 31 about 9 years ago iOS Keyboard module for Framer
textLayer-for-Framer 257 over 5 years ago Framer module that simplifies the process of adding text to your prototypes
Kinetics 30 about 9 years ago Test spring animations on any layer in your Framer Studio project without having to reload
framer-flip-card-module 99 over 8 years ago Framer module to quickly create a flip card effect with two image layers
Input-Framer 338 almost 6 years ago Framer module to easily turn your designs inputs into real inputs
StickyHeaders-for-Framer 107 about 7 years ago Module to create scroll components with sticky stamps in Framer
OrientationEvents 102 over 8 years ago Module for Framer to handle device orientation events
ScaleFrame 8 over 9 years ago Module for Framer to calculate properties of a scaled layer using its new dimensions
framer-label 11 over 9 years ago Label module with multi-line truncation support for Framer
framer-equally-rotate-images 37 about 9 years ago Give this module an array of images, and it will rotate them equally around in a circular path
framer-colour-transition 10 over 9 years ago Framer module that transitions the background colour of a layer
framer-webview 23 over 9 years ago Web view module for Framer
framer-uistatusbar 2 over 9 years ago iOS status bar module for Framer
framer.module.ajax 21 about 9 years ago Ajax module for Framer
framer.module.fill 6 about 9 years ago Fill module for Framer
SpeechSynth 12 about 9 years ago Framer module for Web SpeechSynthesis
Comment-for-Framer 18 almost 5 years ago Framer module for making comments in your prototypes
framer-viewNavigationController 216 about 8 years ago Simple controller for FramerJS that allows you to transition between views with just a couple lines of code
Layers-for-Framer 34 over 5 years ago Framer module that makes it easier to find layers in your project
Framer-Highlightr 27 about 9 years ago Custom Framer module that shows hotspots over clickable layers in your prototype
SVGLayer 170 about 6 years ago Module and corresponding Sketch plugin that make it trivial to work with SVG Paths in Framer
VRComponent 181 over 7 years ago Virtual reality component for Framer
3D Touch Module Module for iOS 3D Touch support by
Simple Android Ripple 28 over 8 years ago Framer module for adding touch ripple animations to any layer
Simple Android Keyboards 8 over 8 years ago Easily add a static Android Keyboard to your Framer Studio project with just one line of code
Simple Android Toast 3 over 8 years ago Use this module to easily add Android toasts to your Framer Studio projects
Simple Android Snackbar 3 over 8 years ago Framer module for adding Android Material Design Snackbars to your project
Framer Path 147 over 8 years ago Create custom SVG shapes and animate each point individually
Material Kit for FramerJS 265 about 7 years ago Make prototyping with Material Design fast and easy without compromising the quality or customization
iOS Kit for FramerJS 518 almost 8 years ago Make prototyping for iOS fast and easy without compromising the quality or customization
framer-Firebase 232 over 6 years ago The Firebase module allows your Framer prototype to load, save and sync data effortlessly between multiple sessions and devices
spotifyApiFramer 9 about 8 years ago Framer module that allows to get JSON objects when querying with Spotify API
ViewController-for-Framer 416 over 5 years ago Module for Framer helps you create multi step user flows with pre-made transitions like "fade in", "zoom in" and "slide in"
Gridddle 53 over 7 years ago Grid module for FramerJS
SliderLibrary Framer library for creating sliders
StickyHeaders-for-Framer 107 about 7 years ago Module to enable sticky headers within Framer's Scroll Components
framer-view-stack 25 over 2 years ago Framer module for creating views that stack on top of each other
RemoteLayer 30 about 7 years ago The RemoteLayer module allows you to instantly generate an interactive Apple TV remote for your tvOS app prototypes
distribute-layers 87 over 3 years ago This package helps you position multiple Framer layers with ease
Framer-ValueLayer 63 over 8 years ago ValueLayer is a Layer subclass dedicated to helping you manage numbers in your prototypes, and animate between them
perspective-view 40 over 8 years ago Module for FramerJS to enable a perspective view of your prototype
Pair 39 almost 4 years ago Drag and Drop module for Framer
Cloudstitch Framer Module 15 almost 8 years ago Module lets you load data from Google Spreadsheets and Microsoft Excel directly into your Framer projects
framer-QueryInterface 27 over 6 years ago Module that allows Framer prototypes to read variables from and write variables to the last part of their URL (the query)
Framer StatusBarLayer 52 almost 7 years ago Module for generating accurate, customizable status bars for iOS app prototypes
Loading Placeholder 16 almost 5 years ago Module which instantly creates loading placeholder based on your layer style
lottie-framer 168 almost 7 years ago Framer module that uses AirBnb's Lottie-Web to render animations exported from After Effects (JSON files)
ControlPanelLayer 34 about 7 years ago Framer module for creating a developer panel to control aspects of the prototype from within the prototype
GradientHelper 21 over 7 years ago Module that simplifies the process of applying gradients to Framer layers and even enables animated gradients
FocusEngine 23 about 7 years ago Module for simulating the grid focus behavior found on Apple TV and Roku
MapboxLayer 20 about 7 years ago Module for creating powerful Mapbox maps in your prototypes
Framer Sheet 17 almost 7 years ago Import information from Google Sheets into Framer
FramerAudio 47 about 2 years ago — Module that allows you to design audio interfaces in Framer
Framer Slider 41 about 7 years ago Module that allows you to design sliders and then bring them to life, without losing customizability. Appearance and logic—separated
iOS-11-Framer 43 over 6 years ago iOS 11 Design System GUI for Framer
framer-Symbols 117 over 6 years ago Module to create symbols in Framer
framer-moreutils 31 over 6 years ago Expand Utils with some handy helper functions
framer keyboardEvents 10 almost 7 years ago Hassle-free keyboard bindings for Framer: No need to look up keyCodes; supports 100+ keys with minimal performance impact
Framer Joystick 15 about 6 years ago Module for Gamepad-driven UI prototypes
Framer Feedback 20 over 6 years ago Framer feedback module makes it easier for you to prototype with feedback messages
Framer-Bottom-Navigation 8 over 6 years ago Framer Module to add Android's Bottom Navigation to your project
Framer Device Rotator 1 over 6 years ago 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 10 about 6 years ago A module that allows you to easily manage keyboard input
Framer DesignComponents 31 over 6 years ago 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 2 over 6 years ago Module to initialize a status bar in a Framer application
Framer Android Picker 7 over 6 years ago An Android Picker Module
Yummy Framer Yummy provides custom layer functions such as LoadViews, LoadNextView, Fade & Move Layer
Framer Font Loader 30 over 5 years ago Painlessly, reliably load local and web fonts into Framer prototypes
Framer Form 107 over 5 years ago Give your Framer prototypes a third dimension
FramerMapboxJS 47 over 6 years ago Another module to integrate Mapbox maps on your Framer prototypes

Awesome Framer / UI Libraries
iOS 11 iPhone GUI 95 over 5 years ago Templates of GUI elements found in the public release of iOS 11
Framework 30 over 6 years ago A general-purpose component kit for Framer

Awesome Framer / 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

Awesome Framer / Other
framer-modules 332 almost 6 years ago Discover, install and save your favorite modules at one place
Framer Snippets 479 over 6 years ago Library of Framer snippets to help speed up workflow
Stitch 143 about 9 years ago Lightweight framework for adding interaction to your Framer prototypes directly from your Sketch designs
framer-bootstrap 34 over 1 year ago 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

Backlinks from these awesome lists:

More related projects: