Featured Framer X Packages: December
Welcome to the monthly roundup of our favorite, most popular and just downright useful packages available for download in the Framer X Store.
Design is changing rapidly. Today, it’s less about fussing over pixel-perfect designs and more about defining end-to-end experiences. In Framer X, we give you access to thousands of premade components that can vastly speed up your workflow. Browse the in-app Store and find various components ranging from UI elements and icon packs to media players and live maps. Every month, we aim to highlight our favorite Framer X component packages, from the most popular to the downright useful.
In December, we’re featuring a package that allows you to inspect (and learn from) other components, one that lets you effortlessly build dynamic grids, a time-based component, and more.
Nate Moore’s handy component lets you insert text directly from markdown files. Both
.markdown files are supported. All you have to do is add the component to your design and link it to a pre-existing file. Then, select one of the existing CSS themes that comes with the component or create your own by selecting ‘custom’ from the theme dropdown.
An example of how markdown is converted to html
Designing for the web in Framer X? Framer lead product designer Benjamin den Boer shares a component that makes it easy to create and tailor focus states and password options to your designs. Plus, it comes with pre-built multi-line text area support. Install and use this component to create a realistic login experience for your next project.
An example of a form you can build with the input package.
Many apps require time-based functionality, from fitness and meditation apps to those focused on productivity. This stopwatch component by Adrian Payne comes in a default 00:00:00 format and gives you lots of configuration options. Customize colors, text, buttons, default button visibility, and more.
An example of a stopwatch you can build with the stopwatch package.
FrameSpy is your secret weapon for digging into code components. Here’s how it works: every component you design in Framer X is rendered in React and editing your designs will also alter the code. FrameSpy flips this process on its head by connecting to each frame and displaying the code used to render it. Make a change to your design to see it automatically reflected in the code. If you enjoy learning by doing, this component could be your ticket to mastering code components. Steve Ruiz shares why he was inspired to make this component:
“If I want to learn how something works, or even show it to someone else, it's great to be able to take the hood off and see how it fits together.”
An example of code you get when sing FrameSpy on an element .
Get Colors from Images
This component by Ismael Martinez allows you to extract colors from a selected image to form a color profile. Once a profile has been selected, the colors within it are given a score based on saturation, luminance, and population. The winning color is the one that emerges with the top score, allowing you to make easy decisions when defining the most eye-catching overlay or gradient for your design.
An example showing which colors are extracted from an image.
The Fluid Grid package allows you to easily set up image grids in Framer X. Drag and drop a selection of images onto a new frame and connect that to the Fluid Grid component. It auto-organizes the images in a random but aligned order to fit the space in your selection. You can then dynamically adjust the grid and tailor it to your design. Component-maker Dmytro Izotov says:
“Filling the grid is as easy as dropping the images into Framer X. Property controls allow you to easily change image size, gap, and corner radius.”
An example showing how you can connect this component to multiple images.
Try out all of these packages and more by downloading our 14 day trial now.