User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Framer

A curated list of awesome things related to Framer prototyping tool

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Nov. 30, 2020, 6:05 a.m.

Thank you podo & contributors
View Topic on GitHub:
podo/awesome-framer

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

General

Articles

Pedro Carmo on why Framer is a tool designers should start using.

Videos

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.

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.

Tutorials

The place to start prototyping with Framer.

Video tutorials provided directly from Framer team.

Very basic Framer starting guide by Andrew Nalband.

Second guide by Andrew Nalband, where you start building real prototype from Sketch file.

Using Framer with real data Part 1 by George Kedenburg III.

Using Framer with real data Part 2 by George Kedenburg III.

Starting point for SVG Paths in Framer by Josh Puckett.

John Marstall teaches how to create a Framer Module.

Excerpts of some interaction considerations Keyur Jain learned of while prototyping for a Virtual Reality experience in Framer.

Brian Bailey gives a breaf introduction to speach recognition prototyping in Framer.

Maya Gao on Framer prototypes with real location data using Mapbox API.

How to Create High‑Quality GIFs, our guide to making amazing GIFs with some of our favorite tools: ScreenFlow and Claquette.

Video Courses

50-minute Skillshare class on how to use mobile app prototyping to communicate your ideas and execute your vision by Noah Levin.

Advance your Framer knowledge with real world examples produced by Mike Johnson.

Emmanuel Henri shows both how to use non-coding Framer tools and how the usage of programming fits into the UX design process.

Crash course learning the basics of design and code on Framer.

List of basic and more advanced Framer courses.

Series of videos that walk you through designing and coding in Framer using hands-on projects by Cordova Putra

Books

Examples

Several awesome examples with download links from designer at Dropbox.

Modules

Google Fonts loader for Framer.js

62
3
5y 4m
n/a

A module for Framer that replicates the iOS tab bar.

95
4
4y 10m
MIT

Framer.js classes for managing large sets of animations

65
6
5y 90d
MIT

A framer module that mimics an iOS notification.

22
0
5y 8m
n/a

A flexible Framer Module that creates a grid overlay on top of your prototype.

24
0
4y 78d
MIT

A collection of useful functions to make mobile prototyping with Framer easier.

416
47
2y 8m
n/a

A framer module that provides a library of different image placeholder services.

10
1
5y 8m
n/a

Reusable and customizable navigation component for Framer, based on iOS

28
2
5y 93d
MIT

Framer JS Module for a Material design like ripple transition

4
0
4y 10m
n/a

Framer.js dynamically tinted icons based off of a template image.

28
0
5y 4m
n/a

This is a module for framer.js that makes it easy to create static linear/radial gradients. Want them to animate? I welcome pull requests.

21
0
5y 8m
n/a

Apple Watch Kit for Framer JS

55
2
5y 7m
MIT

AudioPlayer Module for Framer. See the new, Design-compatible Audio module here: https://github.com/benjamindenboer/FramerAudio

147
16
4y 77d
MIT

A video player module for Framer Studio and Framer.js.

74
9
5y 50d
MIT

Shake event for your prototype.

62
4
3y 107d
n/a

UISound Module for FramerJS

32
2
3y 107d
n/a

Framer layer displaying image from a camera device

85
6
1y 109d
n/a

Because sometimes we all need to simulate typing in our framer prototypes.

31
1
5y 89d
MIT

Framer.js module that simplifies the process of adding text to your prototypes.

259
23
1y 7m
n/a

Layer animator for Framer

29
1
5y 100d
n/a

A framer module to quickly create a flip card effect with two image layers

96
6
4y 6m
n/a

Framer module to add inputs to your prototypes and easily turn your designs inputs into real inputs

342
34
1y 11m
MIT

A module to create scroll components with sticky headers in Framer.

108
10
3y 95d
n/a

Module for Framer Studio to handle device orientation events.

104
14
4y 4m
n/a

Module for Framer Studio to calculate properties of a scaled layer using its new dimensions.

8
1
5y 8m
n/a

Label module with multi-line truncation support for Framer.js.

11
0
5y 4m
n/a

Give this module an array of images, and it will rotate them equally around in a circular path

37
4
5y 19d
n/a

A framer module that transitions the background colour of a layer.

10
0
5y 104d
n/a

Web view module for Framer.js

24
2
5y 6m
n/a

iOS status bar module for Framer.js

2
0
5y 5m
n/a

An Ajax module for Framer

21
1
5y 35d
MIT

A fill module for Framer

6
0
5y 90d
MIT

Framer module for Web SpeechSynthesis

12
0
5y 100d
n/a

Framer.js module for making comments in your prototypes

18
0
12m
n/a

A simple controller for FramerJS that allows you to transition between views with just a couple lines of code.

220
19
4y 41d
MIT

Framer.js module that makes it easier to find layers in your project

37
1
1y 4m
n/a

A custom Framer.js module that shows hotspots over clickable layers in your prototype.

27
3
5y 89d
MIT

Modules that extend Framer.js

173
15
2y 33d
GPL-2.0

A virtual reality component for Framer.

182
10
3y 4m
MIT

A Framer Studio module for adding Android Material Design Touch Ripples to any layer

31
5
4y 6m
n/a

Easily add Android keyboards to your Framer Studio projects with just one line of code. Keyboards include default, numbers, symbols, dialpad, and voice.

8
0
4y 7m
n/a

Use this module to easily add Android toasts to your Framer JS projects.

3
1
4y 7m
n/a

A Framer Studio module for adding Android Material Design Snackbars to your project

3
1
4y 7m
n/a

Create custom svg shapes and animate each point individually in Framer JS.

148
17
4y 6m
n/a
268
25
3y 32d
MIT
534
45
3y 9m
MIT

The Firebase module allows your Framer prototype to load, save and sync data effortlessly between multiple sessions and devices.

232
17
2y 7m
MIT

Multi step user flows in Framer.js

426
37
1y 4m
n/a

Grid module for FramerJS

53
1
3y 8m
n/a

A Framer module for creating views that stack on top of each other.

24
1
4y 43d
MIT

A Framer module to generate an interactive Apple TV remote for tvOS app prototypes.

29
1
3y 44d
MIT

Distribute an array of layers in Framer.js

89
2
3y 5m
MIT

Framer Layer subclass for when you need to do stuff with numbers

63
2
4y 4m
n/a

Module for FramerJS to enable a perspective view of your prototype.

40
2
4y 7m
n/a

A Drag and Drop module for Framer CLASSIC.

39
4
2y 4m
n/a

Allows Framer prototypes to read variables from and write variables to the last part of their URL, the query.

28
1
2y 7m
MIT

A Framer module for generating accurate, customizable status bars for iOS app prototypes.

53
4
3y 44d
MIT

Instantly creates Loading placeholder based on your layer style.

16
0
9m
n/a

A Framer module that uses AirBnb's Lottie-Web to render animations exported from After Effects (JSON files)

167
6
3y 16d
n/a

A Framer module for creating a developer panel to control aspects of the prototype from within the prototype.

33
1
3y 44d
MIT

A Framer module for applying gradients to layers and animating them.

21
1
3y 4m
MIT

A Framer module for simulating the grid focus behavior found on Apple TV and Roku.

22
4
3y 44d
MIT

A Framer module for creating powerful Mapbox maps in your prototypes.

19
0
3y 29d
MIT

Import information from Google Sheets into Framer

17
0
2y 11m
n/a

Design with Audio in Framer (https://framer.com).

46
2
3y 28d
n/a

Design with Sliders in Framer. (https://framer.com)

42
0
3y 20d
n/a

iOS 11 Design System GUI for Framer

43
2
2y 8m
n/a

Create symbols in Framer

118
3
2y 4m
MIT

Expand Utils with some handy helper functions.

31
4
2y 4m
n/a

Hassle-free keyboard bindings for Framer: No need to look up keyCodes; supports 100+ keys with minimal performance impact.

10
0
2y 10m
MIT

A Framer module for Gamepad-driven UI prototypes.

15
0
2y 44d
n/a

A Framer feedback module for faster prototyping

20
0
2y 8m
n/a

Framer Module to add Android's Bottom Navigation to your project

8
2
2y 6m
n/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)

1
0
2y 7m
MIT

A module for Framer that allows you to easily manage keyboard input.

10
0
2y 39d
MIT

A module for converting your designs in design mode into full scalable classes in code, without a single line of code!

30
3
2y 8m
n/a

Framer Web Audio API Module

6
0
2y 8m
Unlicense

Module to initialize a status bar in a Framer application.

2
0
2y 8m
MIT

Android Picker Module

7
0
2y 8m
n/a

Framer JS Module Library Functions

2
0
3y 2d
n/a

Painlessly, reliably load local and web fonts into Framer prototypes.

30
0
1y 8m
n/a

Give your Framer-prototypes a third dimension

105
9
2y 4m
MIT

Simplest way to integrate Mapbox maps on your Framer prototypes.

45
8
2y 6m
n/a

Module for iOS 3D Touch support by Jordan Dobson.

UI Libraries

Components that make it easy for designers to quickly prototype native-feeling iOS 11 interactions in Framer

97
10
2y 9m
n/a

A general-purpose component kit for Framer.

30
5
2y 5m
n/a

Sites

Blog by Kenny Chen with lots of great examples, tutorials.

Collection of Framer modules, code examples, snippets and tips.

Other

Discover, install and save your favorite modules at one place

338
25
1y 11m
MIT

A library of Framer snippets to help speed up your workflow

491
29
2y 6m
n/a

Prototype in Framer without coding

144
1
5y 20d
n/a

Kickstart your Framer Library prototype development.

31
4
2y 4m
n/a

A free interactive UI kit with 15 screens.

A free travel-themed UI kit that’s fully interactive and made for Framer.

Readymade elements for starting your next iOS app. Direct link.

Material Design elements for your next Android app. Direct link.

All the elements you’ll need to start your next web project. Direct link.

Basic wireframe elements to blueprint your next big project. Direct link.