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