shortcuts-for-framer
A collection of useful functions to simplify mobile prototyping with Framer.
What is shortcuts-for-framer?
Shortcuts for Framer is a library that provides a collection of helper functions to simplify mobile prototyping in Framer. It adds intuitive animation methods, event handling shortcuts, and layer utilities to reduce boilerplate code and speed up the prototyping process. It solves the problem of repetitive coding tasks when creating interactive mobile prototypes.
Designers and developers using Framer for mobile prototyping who want to streamline their workflow and reduce repetitive code.
Developers choose Shortcuts for Framer because it provides jQuery-like syntax for animations and events, automates layer initialization, and includes ready-made animation functions for common mobile interactions, saving time and effort.
Overview
A collection of useful functions to make mobile prototyping with Framer easier.
Use Cases
Best For
- Quickly animating mobile screen transitions with slide and fade effects
- Simplifying event handling for tap and hover interactions in prototypes
- Reducing boilerplate code when working with imported PSD or Sketch layers
- Creating interactive mobile prototypes with minimal coding effort
- Streamlining Framer workflows for designers and developers
- Prototyping mobile app flows with pre-built animation shortcuts
Not Ideal For
- Projects using Framer X or newer versions, as it's specifically designed for Framer 3
- Prototypes requiring low-level control over animation timing or custom event logic beyond the provided shortcuts
- Production application development, since it's optimized for rapid prototyping and may add unnecessary abstraction
- Teams minimizing external dependencies, as it requires manual setup and adds a module to the project
Pros & Cons
Pros
Automatically creates global JavaScript variables from imported PSD/Sketch layers via initialize(), simplifying referencing from PSD['My Layer'] to My_Layer as per the README.
Provides shorthand methods like slideFromLeft and fadeIn that reduce boilerplate code for common mobile animations, speeding up prototyping workflows.
Replaces verbose event listeners with methods like tap and hover, and auto-binds hover/tap states for UI elements with specific naming conventions.
Includes getChild and getChildren functions for easier traversal of layer structures, helping manage complex prototypes.
Cons
The library is tied to Framer 3, which is outdated; Framer has evolved, and compatibility with newer versions like Framer X isn't supported, limiting modern use.
Requires downloading and placing shortcuts.coffee in the modules folder, adding an extra step compared to built-in Framer features or package managers.
Layer names that are reserved JavaScript keywords can cause issues, as noted in the README, requiring careful naming to avoid errors.
Frequently Asked Questions
Related Projects
iOS Kit for FramerJSiOS Kit for FramerJS is a comprehensive prototyping toolkit designed to accelerate the creation of high-fidelity iOS app prototypes. It provides a full suite of native iOS UI components and a dynamic layout engine, enabling designers and developers to build realistic, responsive prototypes quickly. ## Key Features - **Native iOS Components** — Pre-built, customizable UI elements like alerts, banners, buttons, keyboards, navigation bars, and tab bars that mimic iOS behavior. - **Dynamic Layout Engine** — A constraint-based layout system that uses points instead of pixels, ensuring prototypes scale correctly across different iOS devices. - **Sketch Integration** — Automatically converts Sketch layers into iOS Kit components with proper constraints, streamlining the design-to-prototype workflow. - **Real Device Override** — Adjusts the prototype frame to match the actual device screen size when viewed on real hardware, eliminating white space. - **Supporting Utilities** — Helper functions for tasks like color conversion, time formatting, SVG manipulation, and text layer updates. ## Philosophy The project emphasizes speed and quality, allowing users to focus on unique interactions by handling the intricacies of native iOS styling and responsive behavior.
ViewController-for-FramerMulti step user flows in Framer.js
Input-FramerFramer module to add inputs to your prototypes and easily turn your designs inputs into real inputs
Material Kit for FramerJSMaterial Design Kit for FramerJS is a comprehensive module that brings Google's Material Design system into the Framer prototyping environment. It enables designers and developers to create high-fidelity, interactive prototypes that look and feel like native Android applications, significantly speeding up the design process while maintaining design system consistency. ## Key Features - **Dynamic Layout Engine** — A robust constraint-based layout system that uses density-independent pixels (dp) for consistent positioning across different device screens and orientations. - **Material Component Library** — Pre-built, customizable Material Design components including App Bars, Buttons, Dialogs, Snackbars, Banners, and Navigation elements that behave like native Framer layers. - **Material Design Resources** — Built-in access to the full Material Design color palette and icon library for easy styling and theming. - **Real Device Override** — Automatically adapts prototypes to match the actual device screen size when viewed in full-screen browsers, eliminating white space. - **Supporting Utilities** — Helper functions for tasks like ink ripple effects, time formatting, SVG manipulation, and automatic text color contrast calculation. ## Philosophy The kit is designed to make implementing Material Design components feel native to Framer's workflow, allowing creators to focus on unique interactions rather than rebuilding foundational UI elements from scratch.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.