rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jonas Zeunert
2025-07-18 23:13:11 +02:00
parent c9485bf576
commit 652812eed0
2354 changed files with 1266414 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

569
html/framer.md2.html Normal file
View File

@@ -0,0 +1,569 @@
<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&amp;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
&amp; 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 &amp; 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>