6 Framer Modules for Building Better Prototypes
Framer Studio offers loads of functionality for creating beautiful prototypes, but its capabilities can be extended even further with modules. Over the last year, Staff Designer John Marstall and Front-end Engineer Brandon Pierce created multiple Framer modules to help them solve some recurring problems they faced while building their own prototypes.
We’re proud to open source each custom module that we’ve built. Read about them below, download them on GitHub, and help us make them even better.
Framer Modules
Gradient Helper
Apply gradients to Framer layers and animate them with ease using this Gradient Helper module.
Link: https://github.com/bpxl-labs/GradientHelper
RemoteLayer
For those of you creating app prototypes for Apple TV, quickly generate an interactive Apple TV remote with RemoteLayer. You can customize things like styling and animation, and all of the buttons can be configured to perform your own supplied actions.
Link: https://github.com/bpxl-labs/RemoteLayer
FocusEngine
Simulating the grid focus behavior found on streaming media devices like Apple TV and Roku can be tricky. The FocusEngine module simplifies the process. Use it with our RemoteLayer module to direct the focus around your prototype’s canvas.
Link: https://github.com/bpxl-labs/FocusEngine
StatusBarLayer
If you work on iOS app prototypes often, you’ve probably wanted to add a status bar. This module generates accurate, customizable status bars and mimics iOS orientation-switch behavior according to device type. You can also simulate events that affect the status bar, such as incoming calls.
Link: https://github.com/bpxl-labs/StatusBarLayer
ControlPanelLayer
The ControlPanelLayer module helps you create a developer panel to control aspects of your prototype within the prototype itself.
Link: https://github.com/bpxl-labs/ControlPanelLayer
MapboxLayer
With the MapboxLayer module, you can implement powerful Mapbox maps into your prototypes. It lets you control the Framer layer that holds the map and the map itself using the Mapbox GL JS API.
For more information on prototyping with Framer, check out Marstall’s guide on building your own Framer modules and designing responsive layouts for multi-device prototypes.
Are there Framer modules and resources that you’ve found particularly helpful or any that you wish existed? Let us know in the comments or on Twitter.
For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.
Black Pixel is a creative digital products agency. Learn more at blackpixel.com.
