Awesome Framer
A curated list of Framer prototyping tool articles, resources, tutorials and other related things.
Framer 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.
Contents
General
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.
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.
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 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.