570 lines
27 KiB
HTML
570 lines
27 KiB
HTML
<h1 id="awesome-framer-awesome">Awesome Framer <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p><a
|
||
href="https://framer.com/"><img src="logo.png" align="right" width="75"></a></p>
|
||
<blockquote>
|
||
<p>A curated list of <a href="http://framer.com">Framer</a> prototyping
|
||
tool articles, resources, tutorials and other related things.</p>
|
||
</blockquote>
|
||
<p><a href="http://framer.com">Framer</a> 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.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#general">General</a></li>
|
||
<li><a href="#articles">Articles</a></li>
|
||
<li><a href="#videos">Videos</a></li>
|
||
<li><a href="#tutorials">Tutorials</a></li>
|
||
<li><a href="#video-courses">Video Course</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#examples">Examples</a></li>
|
||
<li><a href="#modules">Modules</a></li>
|
||
<li><a href="#ui-libraries">UI Libraries</a></li>
|
||
<li><a href="#sites">Sites</a></li>
|
||
<li><a href="#other">Other</a></li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="general">General</h2>
|
||
<ul>
|
||
<li><a href="http://framer.com">Official Site</a></li>
|
||
<li><a href="http://framer.com/examples">Official Examples</a></li>
|
||
<li><a href="http://framer.com/docs">Documentation</a></li>
|
||
<li><a href="https://www.facebook.com/groups/framerjs/">Facebook
|
||
Group</a></li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://medium.com/road-to-infinity/designer-coder-and-not-the-other-way-around-4288098986e1#.a1ks034fn">Designer
|
||
/ coder, and not the other way around</a> - Paul Cotton talks how he
|
||
started using Framer.</li>
|
||
<li><a
|
||
href="https://medium.com/@drocarmo/why-framer-js-matters-93eb1206e606#.846k6rca6">Why
|
||
Framer.js Matters</a> - Pedro Carmo on why Framer is a tool designers
|
||
should start using.</li>
|
||
</ul>
|
||
<h2 id="videos">Videos</h2>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=mqk9Fw8FKLY">Stripe Speaker
|
||
Series: Designing with Framer</a> - 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.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=gX0n4JUl18g">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.</li>
|
||
</ul>
|
||
<h2 id="tutorials">Tutorials</h2>
|
||
<ul>
|
||
<li><a href="http://framerjs.com/learn/basics">Framer.js Official
|
||
Basics</a> - The place to start prototyping with Framer.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PL9p5auxyrweMB6JVO24jFvW4NZufHacjz">Framer
|
||
Video Tutorials</a> - Video tutorials provided directly from Framer
|
||
team.</li>
|
||
<li><a
|
||
href="https://medium.com/@designforhuman/new-to-framer-just-3-things-to-get-you-started-47397f27c71e#.uk7q8mqts">New
|
||
to Framer? Just 3 Things to Get You Started</a> - David Lee’s guide to
|
||
get started.</li>
|
||
<li><a
|
||
href="https://medium.com/@sean_mateer/framer-js-for-people-who-think-things-like-framer-js-are-weird-and-hard-add2068c8114#.epx95tg0t">Framer.js
|
||
for people who think things like Framer.js are weird and hard</a> - Sean
|
||
Mateer makes weird and hard things look easy.</li>
|
||
<li><a href="http://humaan.com/prototyping-with-framer/">Prototyping
|
||
& Working with Framer</a> - Simple guide to getting started by Dan
|
||
Moore.</li>
|
||
<li><a
|
||
href="http://blog.tackmobile.com/article/prototyping-framer-js/">Prototyping
|
||
with Framer.js</a> - Framer basics by Tackmobile team.</li>
|
||
<li><a
|
||
href="http://www.cutandfold.co/blog/2015/9/7/making-you-first-framer-prototype">Getting
|
||
Started with Framer</a> - Very basic Framer starting guide by Andrew
|
||
Nalband.</li>
|
||
<li><a
|
||
href="http://www.cutandfold.co/blog/2015/9/8/building-your-first-prototype">Building
|
||
Your First Prototype</a> - Second guide by Andrew Nalband, where you
|
||
start building real prototype from Sketch file.</li>
|
||
<li><a
|
||
href="https://medium.com/@kennycheny/creating-your-first-prototype-with-framer-c39221da7668#.3jcem1x61">Creating
|
||
Your First Prototype with Framer</a> - Animation tutorial by Kenny
|
||
Chen.</li>
|
||
<li><a href="http://codepen.io/collection/nRzzaZ/">Framer.js
|
||
Workshop</a> - Collection of Framer examples by <a
|
||
href="https://twitter.com/stakelon">Jay Stakelon</a>.</li>
|
||
<li><a
|
||
href="https://web.archive.org/web/20160304015511/https://blog.grandcentrix.net/motion-is-emotion/">Motion
|
||
is Emotion: Prototyping Microinteractions for Apple Watch with Framer
|
||
Studio</a> - Apple Watch temperature gauge prototype tutorial.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=qFUXxqzZytU">Periscope
|
||
Heart Animation Demo at the Seattle FramerJS Meetup</a> - Presentation
|
||
by <a href="https://twitter.com/jordandobson">Jordan Dobson</a> on how
|
||
to create Periscope heart animation with Framer.</li>
|
||
<li><a
|
||
href="https://medium.com/facebook-design/using-parse-to-power-up-your-framer-prototypes-88cb87009d00#.8noe6r2wb">Using
|
||
Parse to power up your Framer prototypes</a> - Using Framer with real
|
||
data Part 1 by George Kedenburg III.</li>
|
||
<li><a
|
||
href="https://medium.com/facebook-design/give-your-framer-prototypes-a-better-memory-212b26e0f934#.6ws4983e7">Give
|
||
your Framer prototypes a better memory</a> - Using Framer with real data
|
||
Part 2 by George Kedenburg III.</li>
|
||
<li><a
|
||
href="https://medium.com/framer-prototyping/working-with-svg-paths-in-framer-43d3c2d08adc">Working
|
||
with SVG Paths in Framer</a> - Starting point for SVG Paths in Framer by
|
||
Josh Puckett.</li>
|
||
<li><a
|
||
href="http://martenbjork.com/2016/05/managing-styles-and-css-in-framer/">Managing
|
||
Styles and CSS in Framer</a> - Mårten Björk on styles management in
|
||
Framer.</li>
|
||
<li><a
|
||
href="https://medium.com/bpxl-craft/developing-a-framer-module-dbf6a7d6ffc9#.ju0gck7hd">Developing
|
||
a Framer Module</a> - John Marstall teaches how to create a Framer
|
||
Module.</li>
|
||
<li><a
|
||
href="https://uxdesign.cc/vr-based-viewmaster-in-framer-js-72858df6570f#.r8ylyzbks">Prototyping
|
||
for Virtual Reality using Framer JS</a> - Excerpts of some interaction
|
||
considerations Keyur Jain learned of while prototyping for a Virtual
|
||
Reality experience in Framer.</li>
|
||
<li><a
|
||
href="https://medium.com/framer-prototyping/prototyping-speech-recognition-in-framer-js-9cbbbd01757#.dkwuowqwy">Prototyping
|
||
Speech Recognition in Framer.js</a> - Brian Bailey gives a breaf
|
||
introduction to speach recognition prototyping in Framer.</li>
|
||
<li><a
|
||
href="https://www.mapbox.com/blog/power-framer-prototype-with-mapbox/">Power
|
||
your Framer prototypes with real location data</a> - Maya Gao on Framer
|
||
prototypes with real location data using Mapbox API.</li>
|
||
<li><a
|
||
href="https://framer.com/blog/posts/how-to-create-high-quality-gifs">How
|
||
to Create High‑Quality GIFs</a> - How to Create High‑Quality GIFs, our
|
||
guide to making amazing GIFs with some of our favorite tools: ScreenFlow
|
||
and Claquette.</li>
|
||
</ul>
|
||
<h2 id="video-courses">Video Courses</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.skillshare.com/classes/design/Mobile-App-Prototyping-Designing-Custom-Interactions/382444545">Mobile
|
||
App Prototyping: Designing Custom Interactions</a> - 50-minute
|
||
Skillshare class on how to use mobile app prototyping to communicate
|
||
your ideas and execute your vision by <a
|
||
href="https://twitter.com/nlevin">Noah Levin</a>.</li>
|
||
<li><a
|
||
href="https://www.udemy.com/framerjs-prototyping-design-interaction-animation/?couponCode=FRAMER">Framerjs:
|
||
Innovative prototyping and design with interaction</a> - 54 parts, 6
|
||
hours course by <a href="https://twitter.com/ajimix">Adria
|
||
Jimenez</a>.</li>
|
||
<li><a
|
||
href="http://www.sketchcasts.net/episodes/prototyping-with-framer-part-1">Prototyping
|
||
with Framer</a> - Three-part prototyping course by <a
|
||
href="https://twitter.com/rafahari">Rafael Conde</a>.</li>
|
||
<li><a href="https://player.oreilly.com/videos/9781771374620">Rapid
|
||
Prototyping with Framer</a> - 5-hour long prototyping course by <a
|
||
href="https://twitter.com/kennycheny">Kenny Chen</a>.</li>
|
||
<li><a
|
||
href="https://generalassemb.ly/education/prototyping-with-framerjs">Prototyping
|
||
With Framer.js</a> - On-location course instructed by <a
|
||
href="https://twitter.com/stakelon">Jay Stakelon</a>, <a
|
||
href="https://twitter.com/nlevin">Noah Levin</a> and <a
|
||
href="https://twitter.com/gem_ray">Cemre Güngör</a>.</li>
|
||
<li><a
|
||
href="https://www.pluralsight.com/courses/ui-prototyping-framer-js">UI
|
||
Prototyping with Framer.js</a> - Almost 5 hours long course by <a
|
||
href="https://twitter.com/stakelon">Jay Stakelon</a>.</li>
|
||
<li><a href="http://www.framercasts.com/">Framercasts</a> - Advance your
|
||
Framer knowledge with real world examples produced by <a
|
||
href="https://twitter.com/failsafedesign">Mike Johnson</a>.</li>
|
||
<li><a
|
||
href="https://www.lynda.com/FramerJS-tutorials/UX-Design-Tools-Framer/562923-2.html">Framer
|
||
for UX Design</a> - Emmanuel Henri shows both how to use non-coding
|
||
Framer tools and how the usage of programming fits into the UX design
|
||
process.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLWlUJU11tp4f41p4dzizVkjjTQ38kA0wG">Framer
|
||
Crash Course</a> - Crash course learning the basics of design and code
|
||
on Framer.</li>
|
||
<li><a href="https://designers.how/topics/framer">designers.how Framer
|
||
Courses</a> - List of basic and more advanced Framer courses.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLIZVb6Yuw91yGUNbSNEHvWWHkdol6SJUW">Framer
|
||
Studio for Beginners: A Comprehensive Guide</a> - Series of videos that
|
||
walk you through designing and coding in Framer using hands-on projects
|
||
by <a href="https://twitter.com/cordova">Cordova Putra</a></li>
|
||
</ul>
|
||
<h2 id="books">Books</h2>
|
||
<ul>
|
||
<li><a href="http://coffeescript-for-framerjs.com">CoffeeScript for
|
||
Framer</a> by <a href="https://twitter.com/tessthornton">Tessa
|
||
Thornton</a></li>
|
||
<li><a href="https://framerbook.com">The Framer book</a> by <a
|
||
href="https://twitter.com/cptv8">Tes Mat</a></li>
|
||
</ul>
|
||
<h2 id="examples">Examples</h2>
|
||
<ul>
|
||
<li><a
|
||
href="http://thatedchao.com/published/2014/10/27/framer.html">Framer
|
||
Experiments by Ed Chao</a> - Several awesome examples with download
|
||
links from designer at Dropbox.</li>
|
||
<li><a href="http://share.framerjs.com/ft0uwf1jweid/">HSL Color
|
||
Picker</a> - HSL Color Picker by Framer team.</li>
|
||
<li><a href="http://share.framerjs.com/mraze47eux9w/">iOS Toggle</a> -
|
||
iOS Toggle using Color class by <a
|
||
href="https://twitter.com/jornvandijk">Jorn van Dijk</a>.</li>
|
||
</ul>
|
||
<h2 id="modules">Modules</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/peteschaffner/framer-googlefonts">framer-googlefonts</a>
|
||
- Google Fonts loader module for your Framer prototypes.</li>
|
||
<li><a
|
||
href="https://github.com/petterheterjag/tabBarModule">tabBarModule</a> -
|
||
Module for Framer that replicates the iOS tab bar.</li>
|
||
<li><a
|
||
href="https://github.com/isaacw/framer-animation-collections">framer-animation-collections</a>
|
||
- Framer classes for managing large sets of animations.</li>
|
||
<li><a
|
||
href="https://github.com/leinerud/framer.iosnotification">framer.iosnotification</a>
|
||
- Framer module that mimics an iOS notification.</li>
|
||
<li><a href="https://github.com/nilshoenson/Framer-Grid">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.</li>
|
||
<li><a
|
||
href="https://github.com/facebook/shortcuts-for-framer">shortcuts-for-framer</a>
|
||
- Collection of useful functions to make mobile prototyping with Framer
|
||
easier.</li>
|
||
<li><a
|
||
href="https://github.com/cupofjoakim/framer.placehold">framer.placehold</a>
|
||
- This is a module for framer that provides a library of different image
|
||
placeholder services.</li>
|
||
<li><a
|
||
href="https://github.com/jchavarri/FramerNavigationComponent">FramerNavigationComponent</a>
|
||
- Reusable and customizable navigation component for Framer, based on
|
||
iOS.</li>
|
||
<li><a
|
||
href="https://github.com/offirg75/framer.RippleTransition">RippleTransition.framer</a>
|
||
- Framer Module for a Material design like ripple transition.</li>
|
||
<li><a
|
||
href="https://github.com/peteschaffner/framer-icon">framer-icon</a> -
|
||
Framer dynamically tinted icons based off of a template image.</li>
|
||
<li><a
|
||
href="https://github.com/cupofjoakim/framer.makeGradient">framer.makeGradient</a>
|
||
- Module for Framer that makes it easy to create static linear/radial
|
||
gradients. Want them to animate? I welcome pull requests.</li>
|
||
<li><a
|
||
href="https://github.com/ajimix/WatchKit-Framer">WatchKit-Framer</a> -
|
||
Apple Watch Kit module for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/benjaminnathan/Framer-AudioPlayer">Framer-AudioPlayer</a>
|
||
- AudioPlayer Module for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/stakes/Framer-VideoPlayer">Framer-VideoPlayer</a>
|
||
- Video player module for Framer Studio and Framer.</li>
|
||
<li><a
|
||
href="https://github.com/RayPS/Framer-Module-ShakeEvent">Framer-Module-ShakeEvent</a>
|
||
- ShakeEvent Module for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/RayPS/Framer-Module-UISound/">Framer-Module-UISound</a>
|
||
- UISound Module for Framer.</li>
|
||
<li><a href="https://github.com/ktcy/CameraLayer">CameraLayer</a> -
|
||
Framer layer displaying camera image.</li>
|
||
<li><a
|
||
href="https://github.com/supsupmo/ios-keyboard-for-framer">ios-keyboard-for-framer</a>
|
||
- iOS Keyboard module for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/awt2542/textLayer-for-Framer">textLayer-for-Framer</a>
|
||
- Framer module that simplifies the process of adding text to your
|
||
prototypes.</li>
|
||
<li><a href="https://github.com/joshmtucker/Kinetics">Kinetics</a> -
|
||
Test spring animations on any layer in your Framer Studio project
|
||
without having to reload.</li>
|
||
<li><a
|
||
href="https://github.com/aboutjax/framer-flip-card-module">framer-flip-card-module</a>
|
||
- Framer module to quickly create a flip card effect with two image
|
||
layers.</li>
|
||
<li><a href="https://github.com/ajimix/Input-Framer">Input-Framer</a> -
|
||
Framer module to easily turn your designs inputs into real inputs.</li>
|
||
<li><a
|
||
href="https://github.com/72/StickyHeaders-for-Framer">StickyHeaders-for-Framer</a>
|
||
- Module to create scroll components with sticky stamps in Framer.</li>
|
||
<li><a
|
||
href="https://github.com/joshmtucker/OrientationEvents">OrientationEvents</a>
|
||
- Module for Framer to handle device orientation events.</li>
|
||
<li><a href="https://github.com/joshmtucker/ScaleFrame">ScaleFrame</a> -
|
||
Module for Framer to calculate properties of a scaled layer using its
|
||
new dimensions.</li>
|
||
<li><a
|
||
href="https://github.com/peteschaffner/framer-label">framer-label</a> -
|
||
Label module with multi-line truncation support for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/aboutjax/framer-equally-rotate-images">framer-equally-rotate-images</a>
|
||
- Give this module an array of images, and it will rotate them equally
|
||
around in a circular path.</li>
|
||
<li><a
|
||
href="https://github.com/nickmangos/framer-colour-transition">framer-colour-transition</a>
|
||
- Framer module that transitions the background colour of a layer.</li>
|
||
<li><a
|
||
href="https://github.com/peteschaffner/framer-webview">framer-webview</a>
|
||
- Web view module for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/peteschaffner/framer-uistatusbar">framer-uistatusbar</a>
|
||
- iOS status bar module for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/karlerikjonatan/framer.module.ajax">framer.module.ajax</a>
|
||
- Ajax module for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/karlerikjonatan/framer.module.fill">framer.module.fill</a>
|
||
- Fill module for Framer.</li>
|
||
<li><a href="https://github.com/joshmtucker/SpeechSynth">SpeechSynth</a>
|
||
- Framer module for Web SpeechSynthesis.</li>
|
||
<li><a
|
||
href="https://github.com/awt2542/Comment-for-Framer">Comment-for-Framer</a>
|
||
- Framer module for making comments in your prototypes.</li>
|
||
<li><a
|
||
href="https://github.com/chriscamargo/framer-viewNavigationController">framer-viewNavigationController</a>
|
||
- Simple controller for FramerJS that allows you to transition between
|
||
views with just a couple lines of code.</li>
|
||
<li><a
|
||
href="https://github.com/awt2542/Layers-for-Framer">Layers-for-Framer</a>
|
||
- Framer module that makes it easier to find layers in your
|
||
project.</li>
|
||
<li><a
|
||
href="https://github.com/jonahvsweb/Framer-Highlightr">Framer-Highlightr</a>
|
||
- Custom Framer module that shows hotspots over clickable layers in your
|
||
prototype.</li>
|
||
<li><a
|
||
href="https://github.com/joshpuckett/FramerModules/tree/master/SVGLayer">SVGLayer</a>
|
||
- Module and corresponding Sketch plugin that make it trivial to work
|
||
with SVG Paths in Framer.</li>
|
||
<li><a href="https://github.com/jonastreub/VRComponent">VRComponent</a>
|
||
- Virtual reality component for Framer.</li>
|
||
<li><a href="http://jrdn.io/dO4r">3D Touch Module</a> - Module for iOS
|
||
3D Touch support by <a href="https://twitter.com/jordandobson">Jordan
|
||
Dobson</a>.</li>
|
||
<li><a
|
||
href="https://github.com/imaaronjames/Simple-Android-Ripple">Simple
|
||
Android Ripple</a> - Framer module for adding touch ripple animations to
|
||
any layer.</li>
|
||
<li><a
|
||
href="https://github.com/imaaronjames/Simple-Android-Keyboards">Simple
|
||
Android Keyboards</a> - Easily add a static Android Keyboard to your
|
||
Framer Studio project with just one line of code.</li>
|
||
<li><a
|
||
href="https://github.com/imaaronjames/Simple-Android-Toast">Simple
|
||
Android Toast</a> - Use this module to easily add Android toasts to your
|
||
Framer Studio projects.</li>
|
||
<li><a
|
||
href="https://github.com/imaaronjames/Simple-Android-Snackbar">Simple
|
||
Android Snackbar</a> - Framer module for adding Android Material Design
|
||
Snackbars to your project.</li>
|
||
<li><a href="https://github.com/vladimirshlygin/framer-path">Framer
|
||
Path</a> - Create custom SVG shapes and animate each point
|
||
individually.</li>
|
||
<li><a href="https://github.com/k-vyn/framer-material-kit">Material Kit
|
||
for FramerJS</a> - Make prototyping with Material Design fast and easy
|
||
without compromising the quality or customization.</li>
|
||
<li><a href="https://github.com/k-vyn/framer-ios-kit">iOS Kit for
|
||
FramerJS</a> - Make prototyping for iOS fast and easy without
|
||
compromising the quality or customization.</li>
|
||
<li><a
|
||
href="https://github.com/marckrenn/framer-Firebase">framer-Firebase</a>
|
||
- The Firebase module allows your Framer prototype to load, save and
|
||
sync data effortlessly between multiple sessions and devices.</li>
|
||
<li><a
|
||
href="https://github.com/mamezito/spotifyApiFramer">spotifyApiFramer</a>
|
||
- Framer module that allows to get JSON objects when querying with
|
||
Spotify API.</li>
|
||
<li><a
|
||
href="https://github.com/awt2542/ViewController-for-Framer">ViewController-for-Framer</a>
|
||
- Module for Framer helps you create multi step user flows with pre-made
|
||
transitions like “fade in”, “zoom in” and “slide in”.</li>
|
||
<li><a href="https://github.com/Volorf/Gridddle">Gridddle</a> - Grid
|
||
module for FramerJS.</li>
|
||
<li><a
|
||
href="https://github.com/floludwig/SliderLibrary">SliderLibrary</a> -
|
||
Framer library for creating sliders.</li>
|
||
<li><a
|
||
href="https://github.com/72/StickyHeaders-for-Framer">StickyHeaders-for-Framer</a>
|
||
- Module to enable sticky headers within Framer’s Scroll
|
||
Components.</li>
|
||
<li><a
|
||
href="https://github.com/alandickinson/framer-view-stack">framer-view-stack</a>
|
||
- Framer module for creating views that stack on top of each other.</li>
|
||
<li><a href="https://github.com/bpxl-labs/RemoteLayer">RemoteLayer</a> -
|
||
The RemoteLayer module allows you to instantly generate an interactive
|
||
Apple TV remote for your tvOS app prototypes.</li>
|
||
<li><a
|
||
href="https://github.com/martenbjork/distribute-layers">distribute-layers</a>
|
||
- This package helps you position multiple Framer layers with ease.</li>
|
||
<li><a
|
||
href="https://github.com/tjphilli/Framer-ValueLayer">Framer-ValueLayer</a>
|
||
- ValueLayer is a Layer subclass dedicated to helping you manage numbers
|
||
in your prototypes, and animate between them.</li>
|
||
<li><a
|
||
href="https://github.com/mrrocks/perspective-view">perspective-view</a>
|
||
- Module for FramerJS to enable a perspective view of your
|
||
prototype.</li>
|
||
<li><a href="https://github.com/IanBellomy/Pair">Pair</a> - Drag and
|
||
Drop module for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/cloudstitch/framer.module.cloudstitch">Cloudstitch
|
||
Framer Module</a> - Module lets you load data from Google Spreadsheets
|
||
and Microsoft Excel directly into your Framer projects.</li>
|
||
<li><a
|
||
href="https://github.com/marckrenn/framer-QueryInterface">framer-QueryInterface</a>
|
||
- Module that allows Framer prototypes to read variables from and write
|
||
variables to the last part of their URL (the query).</li>
|
||
<li><a href="https://github.com/bpxl-labs/StatusBarLayer">Framer
|
||
StatusBarLayer</a> - Module for generating accurate, customizable status
|
||
bars for iOS app prototypes.</li>
|
||
<li><a
|
||
href="https://github.com/zehfernandes/framer-loadingplaceholder">Loading
|
||
Placeholder</a> - Module which instantly creates loading placeholder
|
||
based on your layer style.</li>
|
||
<li><a href="https://github.com/72/lottie-framer">lottie-framer</a> -
|
||
Framer module that uses AirBnb’s Lottie-Web to render animations
|
||
exported from After Effects (JSON files).</li>
|
||
<li><a
|
||
href="https://github.com/bpxl-labs/ControlPanelLayer">ControlPanelLayer</a>
|
||
- Framer module for creating a developer panel to control aspects of the
|
||
prototype from within the prototype.</li>
|
||
<li><a
|
||
href="https://github.com/bpxl-labs/GradientHelper">GradientHelper</a> -
|
||
Module that simplifies the process of applying gradients to Framer
|
||
layers and even enables animated gradients.</li>
|
||
<li><a href="https://github.com/bpxl-labs/FocusEngine">FocusEngine</a> -
|
||
Module for simulating the grid focus behavior found on Apple TV and
|
||
Roku.</li>
|
||
<li><a href="https://github.com/bpxl-labs/MapboxLayer">MapboxLayer</a> -
|
||
Module for creating powerful Mapbox maps in your prototypes.</li>
|
||
<li><a href="https://github.com/andrewliebchen/framer-sheet">Framer
|
||
Sheet</a> - Import information from Google Sheets into Framer.</li>
|
||
<li><a
|
||
href="https://github.com/benjamindenboer/FramerAudio">FramerAudio</a> —
|
||
Module that allows you to design audio interfaces in Framer.</li>
|
||
<li><a href="https://github.com/benjamindenboer/FramerSlider">Framer
|
||
Slider</a> - Module that allows you to design sliders and then bring
|
||
them to life, without losing customizability. Appearance and
|
||
logic—separated.</li>
|
||
<li><a
|
||
href="https://github.com/brentcas/iOS-11-Framer">iOS-11-Framer</a> - iOS
|
||
11 Design System GUI for Framer.</li>
|
||
<li><a
|
||
href="https://github.com/der-lukas/framer-Symbols">framer-Symbols</a> -
|
||
Module to create symbols in Framer.</li>
|
||
<li><a
|
||
href="https://github.com/steveruizok/framer-moreutils">framer-moreutils</a>
|
||
- Expand Utils with some handy helper functions.</li>
|
||
<li><a href="https://github.com/marckrenn/framer-keyboardEvents">framer
|
||
keyboardEvents</a> - Hassle-free keyboard bindings for Framer: No need
|
||
to look up keyCodes; supports 100+ keys with minimal performance
|
||
impact.</li>
|
||
<li><a href="https://github.com/emilwidlund/framer-joystick">Framer
|
||
Joystick</a> - Module for Gamepad-driven UI prototypes.</li>
|
||
<li><a href="https://github.com/aboutjax/Framer-Feedback">Framer
|
||
Feedback</a> - Framer feedback module makes it easier for you to
|
||
prototype with feedback messages.</li>
|
||
<li><a
|
||
href="https://github.com/johnmpsherwin/Framer-Bottom-Navigation">Framer-Bottom-Navigation</a>
|
||
- Framer Module to add Android’s Bottom Navigation to your project.</li>
|
||
<li><a href="https://github.com/josephxbrick/DeviceRotator">Framer
|
||
Device Rotator</a> - 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).</li>
|
||
<li><a
|
||
href="https://github.com/Skinny-Malinky/Keyboard-Input-for-Framer">Keyboard
|
||
Input for Framer</a> - A module that allows you to easily manage
|
||
keyboard input.</li>
|
||
<li><a
|
||
href="https://github.com/sebcglbailey/framer-DesignComponents">Framer
|
||
DesignComponents</a> - Module for converting your designs in design mode
|
||
into full scalable classes in code, without a single line of code!.</li>
|
||
<li><a href="https://github.com/raulibanez/framer-audio">Framer Web
|
||
Audio API Module</a> - A Framer module that provides better audio
|
||
support for your Framer projects.</li>
|
||
<li><a href="https://github.com/walnuttea/statusBar-module">Framer
|
||
Status Bar Module</a> - Module to initialize a status bar in a Framer
|
||
application.</li>
|
||
<li><a
|
||
href="https://github.com/johnmpsherwin/Framer-Android-Picker">Framer
|
||
Android Picker</a> - An Android Picker Module.</li>
|
||
<li><a href="https://github.com/janwagner/yummyFramer">Yummy Framer</a>
|
||
- Yummy provides custom layer functions such as LoadViews, LoadNextView,
|
||
Fade & Move Layer.<br />
|
||
</li>
|
||
<li><a href="https://github.com/steveruizok/fontloader">Framer Font
|
||
Loader</a> - Painlessly, reliably load local and web fonts into Framer
|
||
prototypes.</li>
|
||
<li><a href="https://github.com/emilwidlund/framer-form">Framer Form</a>
|
||
- Give your Framer prototypes a third dimension.</li>
|
||
<li><a
|
||
href="https://github.com/NocheVolta/FramerMapboxJS">FramerMapboxJS</a> -
|
||
Another module to integrate Mapbox maps on your Framer prototypes.</li>
|
||
</ul>
|
||
<h2 id="ui-libraries">UI Libraries</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/facebookincubator/ios-11-gui-for-framer">iOS 11
|
||
iPhone GUI</a> - Templates of GUI elements found in the public release
|
||
of iOS 11.</li>
|
||
<li><a href="https://github.com/steveruizok/framework">Framework</a> - A
|
||
general-purpose component kit for Framer.</li>
|
||
</ul>
|
||
<h2 id="sites">Sites</h2>
|
||
<ul>
|
||
<li><a href="http://www.prototypingwithframer.com">Prototyping With
|
||
Framer</a> - Blog by Kenny Chen with lots of great examples,
|
||
tutorials.</li>
|
||
<li><a href="http://framerco.de">Framer Code</a> - Collection of Framer
|
||
modules, code examples, snippets and tips.</li>
|
||
</ul>
|
||
<h2 id="other">Other</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/kysely/framer-modules">framer-modules</a> -
|
||
Discover, install and save your favorite modules at one place.</li>
|
||
<li><a
|
||
href="https://github.com/robotdestroy/Framer-Snippets-Library">Framer
|
||
Snippets</a> - Library of Framer snippets to help speed up
|
||
workflow.</li>
|
||
<li><a href="https://github.com/mattsjohnston/stitch">Stitch</a> -
|
||
Lightweight framework for adding interaction to your Framer prototypes
|
||
directly from your Sketch designs.</li>
|
||
<li><a
|
||
href="https://github.com/alexchantastic/framer-bootstrap">framer-bootstrap</a>
|
||
- Use Framer Library in your preferred editor and environment.</li>
|
||
<li><a href="https://framer.com/fiber/">Fiber</a> - A free interactive
|
||
UI kit with 15 screens.</li>
|
||
<li><a href="https://framer.com/voyage/">Voyage</a> - A free
|
||
travel-themed UI kit that’s fully interactive and made for Framer.</li>
|
||
<li><a
|
||
href="https://framer.com/assets/static/downloads/kits/ios-kit.zip">iOS
|
||
Kit</a> - Readymade elements for starting your next iOS app. Direct
|
||
link.</li>
|
||
<li><a
|
||
href="https://framer.com/assets/static/downloads/kits/android-kit.zip">Android
|
||
Kit</a> - Material Design elements for your next Android app. Direct
|
||
link.</li>
|
||
<li><a
|
||
href="https://framer.com/assets/static/downloads/kits/web-kit.zip">Web
|
||
Kit</a> - All the elements you’ll need to start your next web project.
|
||
Direct link.</li>
|
||
<li><a
|
||
href="https://framer.com/assets/static/downloads/kits/wireframe-kit.zip">Wireframe
|
||
Kit</a> - Basic wireframe elements to blueprint your next big project.
|
||
Direct link.</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="license">License</h2>
|
||
<figure>
|
||
<img
|
||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||
alt="CC0" />
|
||
<figcaption aria-hidden="true">CC0</figcaption>
|
||
</figure>
|
||
<p><a href="https://github.com/podo/awesome-framer">framer.md
|
||
Github</a></p>
|