Official Site

Official Examples

Documentation

Facebook Group

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.

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.

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 Jay Stakelon.

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 Jordan Dobson 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.

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 Noah Levin.

Framerjs: Innovative prototyping and design with interaction

54 parts, 6 hours course by Adria Jimenez.

Prototyping with Framer

Three-part prototyping course by Rafael Conde.

Rapid Prototyping with Framer

5-hour long prototyping course by Kenny Chen.

Prototyping With Framer.js

On-location course instructed by Jay Stakelon, Noah Levin and Cemre Güngör.

UI Prototyping with Framer.js

Almost 5 hours long course by Jay Stakelon.

Framercasts

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

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 Cordova Putra

CoffeeScript for Framer

by Tessa Thornton

The Framer book

by Tes Mat

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 Jorn van Dijk.

framer-googlefonts

Google Fonts loader module for your Framer prototypes.

tabBarModule

Module for Framer that replicates the iOS tab bar.

framer-animation-collections

Framer classes for managing large sets of animations.

framer.iosnotification

Framer module that mimics an iOS notification.

Framer-Grid

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

Collection of useful functions to make mobile prototyping with Framer easier.

framer.placehold

This is a module for framer that provides a library of different image placeholder services.

FramerNavigationComponent

Reusable and customizable navigation component for Framer, based on iOS.

RippleTransition.framer

Framer Module for a Material design like ripple transition.

framer-icon

Framer dynamically tinted icons based off of a template image.

framer.makeGradient

Module for Framer that makes it easy to create static linear/radial gradients. Want them to animate? I welcome pull requests.

WatchKit-Framer

Apple Watch Kit module for Framer.

Framer-AudioPlayer

AudioPlayer Module for Framer.

Framer-VideoPlayer

Video player module for Framer Studio and Framer.

Framer-Module-ShakeEvent

ShakeEvent Module for Framer.

Framer-Module-UISound

UISound Module for Framer.

CameraLayer

Framer layer displaying camera image.

ios-keyboard-for-framer

iOS Keyboard module for Framer.

textLayer-for-Framer

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

Kinetics

Test spring animations on any layer in your Framer Studio project without having to reload.

framer-flip-card-module

Framer module to quickly create a flip card effect with two image layers.

Input-Framer

Framer module to easily turn your designs inputs into real inputs.

StickyHeaders-for-Framer

Module to create scroll components with sticky stamps in Framer.

OrientationEvents

Module for Framer to handle device orientation events.

ScaleFrame

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

framer-label

Label module with multi-line truncation support for Framer.

framer-equally-rotate-images

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

framer-colour-transition

Framer module that transitions the background colour of a layer.

framer-webview

Web view module for Framer.

framer-uistatusbar

iOS status bar module for Framer.

framer.module.ajax

Ajax module for Framer.

framer.module.fill

Fill module for Framer.

SpeechSynth

Framer module for Web SpeechSynthesis.

Comment-for-Framer

Framer module for making comments in your prototypes.

framer-viewNavigationController

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

Layers-for-Framer

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

Framer-Highlightr

Custom Framer module that shows hotspots over clickable layers in your prototype.

SVGLayer

Module and corresponding Sketch plugin that make it trivial to work with SVG Paths in Framer.

VRComponent

Virtual reality component for Framer.

3D Touch Module

Module for iOS 3D Touch support by Jordan Dobson.

Simple Android Ripple

Framer module for adding touch ripple animations to any layer.

Simple Android Keyboards

Easily add a static Android Keyboard to your Framer Studio project with just one line of code.

Simple Android Toast

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

Simple Android Snackbar

Framer module for adding Android Material Design Snackbars to your project.

Framer Path

Create custom SVG shapes and animate each point individually.

Material Kit for FramerJS

Make prototyping with Material Design fast and easy without compromising the quality or customization.

iOS Kit for FramerJS

Make prototyping for iOS fast and easy without compromising the quality or customization.

framer-Firebase

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

spotifyApiFramer

Framer module that allows to get JSON objects when querying with Spotify API.

ViewController-for-Framer

Module for Framer helps you create multi step user flows with pre-made transitions like "fade in", "zoom in" and "slide in".

Gridddle

Grid module for FramerJS.

SliderLibrary

Framer library for creating sliders.

framer-view-stack

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

RemoteLayer

The RemoteLayer module allows you to instantly generate an interactive Apple TV remote for your tvOS app prototypes.

distribute-layers

This package helps you position multiple Framer layers with ease.

Framer-ValueLayer

ValueLayer is a Layer subclass dedicated to helping you manage numbers in your prototypes, and animate between them.

perspective-view

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

Pair

Drag and Drop module for Framer.

Cloudstitch Framer Module

Module lets you load data from Google Spreadsheets and Microsoft Excel directly into your Framer projects.

framer-QueryInterface

Module that allows Framer prototypes to read variables from and write variables to the last part of their URL (the query).

Framer StatusBarLayer

Module for generating accurate, customizable status bars for iOS app prototypes.

Loading Placeholder

Module which instantly creates loading placeholder based on your layer style.

lottie-framer

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

ControlPanelLayer

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

GradientHelper

Module that simplifies the process of applying gradients to Framer layers and even enables animated gradients.

FocusEngine

Module for simulating the grid focus behavior found on Apple TV and Roku.

MapboxLayer

Module for creating powerful Mapbox maps in your prototypes.

Framer Sheet

Import information from Google Sheets into Framer.

FramerAudio

Module that allows you to design audio interfaces in Framer.

Framer Slider

Module that allows you to design sliders and then bring them to life, without losing customizability. Appearance and logic—separated.

iOS-11-Framer

iOS 11 Design System GUI for Framer.

framer-Symbols

Module to create symbols in Framer.

framer-moreutils

Expand Utils with some handy helper functions.

framer keyboardEvents

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

Framer Joystick

Module for Gamepad-driven UI prototypes.

Framer Feedback

Framer feedback module makes it easier for you to prototype with feedback messages.

Framer-Bottom-Navigation

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

Framer Device Rotator

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

A module that allows you to easily manage keyboard input.

Framer DesignComponents

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

Module to initialize a status bar in a Framer application.

Framer Android Picker

An Android Picker Module.

Yummy Framer

Yummy provides custom layer functions such as LoadViews, LoadNextView, Fade & Move Layer.

Framer Font Loader

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

Framer Form

Give your Framer prototypes a third dimension.

FramerMapboxJS

Another module to integrate Mapbox maps on your Framer prototypes.

iOS 11 iPhone GUI

Templates of GUI elements found in the public release of iOS 11.

Framework

A general-purpose component kit for Framer.

Prototyping With Framer

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

Framer Code

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

framer-modules

Discover, install and save your favorite modules at one place.

Framer Snippets

Library of Framer snippets to help speed up workflow.

Stitch

Lightweight framework for adding interaction to your Framer prototypes directly from your Sketch designs.

framer-bootstrap

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.

AllFramer

Discover the curated list of Framer templates, components, blocks, plugins, and more with a blazing-fast search & filter experience!