Featured Framer X Packages: December

Framer X Featured Components

Welcome to the monthly roundup of our favorite, most popular and just downright useful packages available for download in the Framer X Store.

callum

Callum Sweeney

December 20, 2018

banner

D esign 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.

Markdown

Nate Moore’s handy component lets you insert text directly from markdown files. Both .md and .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.

Get the Markdown package ›

Markdown

Input

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.

Get the Input package ›

Input

Stopwatch

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.

Get the Stopwatch package ›

Stopwatch

FrameSpy

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.”

Get the FrameSpy package ›

FrameSpy

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.

Get the Get Colors from Images package ›

Get Colors from Images

Fluid Grid

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.”

Get the Fluid Grid package ›

Fluid Grid

Try out all of these packages and more by downloading our 14 day trial now.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.

Popmotion Joins Framer

Read more ›

5 Ways Facebook Scales Their Design System

Read more ›

Design Systems in Framer X

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free › Learn about teams ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.