Store Packages That Kickstart Projects
These powerful and customizable Framer X components could be the foundation of your next design.
It’s been a jam-packed year for Framer X, with tons of new features being released. One of the most notable is Playground, a creative coding environment, API, and animation library built specifically for designers.
Since we launched Framer X in September 2018, there’s one aspect of the tool that remains completely unique in the design space—the Framer X Store. This is a place where designers, developers, and anyone who uses the tool can share their work as downloadable packages. These can range from static UI elements to fully interactive code components.
As a product specialist at Framer, I’m often asked: “Which packages should I use?”
After using Framer X almost every day, I’ve come across lots of extremely valuable packages. Here I’ve curated a list of them that serve specific purposes and can act as foundational elements for your next design, helping you to get your prototypes out the door faster.
Stateful Custom Button
This package is one of my favorites. It adds a ton of functionality to Framer X projects without the need for any code. If you’re looking to design a button, but don’t want to add React code to make it interactive, this is the package for you. Stateful Custom Button allows you to design various button states on the canvas using built-in tools like Frames.
You can design normal, focused, hover, active, and disabled states, and then connect them all together using this package. Stateful Custom Button takes care of the rest.
Pagination
The Page Tool is native to Framer X. This package builds on the functionality of that tool by allowing you to draw a page area, which you can then hook up to things on the canvas. There are plenty of examples of what you can do with the page tool, but these work only when you “swipe”, or do a swiping motion with your prototype.
Pagination works in a similar way to the page tool, except that transitions happen with clicks rather than swipes, and it allows you to customize things like the arrow icons that come with the package. This is another great package for those looking to add more functionality to their prototypes without typing any code.
Tabs
If you’re looking for a way to navigate between tabs, this is the package for you. Everything is already set up in the tabs package, and all you need to do is hook it up to the content you want to see.
With a bunch of ways to customize the appearance, such as color and the number of tabs, this package is great for quickly stringing together a tab navigation.
Sticky Headers
Sticky Headers is a great package if you’re looking to create something similar to the iOS micro-interaction that happens when you scroll through the Photos app. It’s easy to set up and comes with all the documentation you need when you download it from the Store.
Responsive Layout
Steve Ruiz’s Responsive Layout component is great for a few different things. The first, of course, is that it enables you to lay out screens and see how they would look at different screen sizes. This is especially great if you need to quickly mock something up that will live on both mobile and desktop.
Another great use case for this is designing navigation bars. You can easily check how the navigation bar will look at the width of a phone as well as a computer, and then use the component to link them together and take care of the responsiveness.
Bottom Sheet
If you need an interactive bottom sheet like you would find in Google Maps, you can use this package right out of the box.
Bottom Sheet allows you to add an interactive frame to the bottom of your prototypes that will slide up when you interact with it. There are two components in this package: One for normal frames and another that works with scrollable content. Use the latter if you want to be able to swipe between cards, for example.
Input
One of the best things about Framer X is the ability to add HTML, CSS, and JavaScript to your project to really customize the prototypes you make. We have found that inputs that users can actually interact with, in a login flow for example, have been popular with our community.
If you don’t want to do this through code, Benjamin den Boer has a great input component that works right out of the box and has lots of customizable options.
Router
A common question I get from prototypers is: "How do I create a static header and footer with transition-able pages in between?". This is very common in mobile prototypes and is exactly what the Router component can do for you.
You can add Router to your project and drag it into the frame you’re interested in previewing. From here, all you have to do is attach all your screens, and use overrides so that the prototype can navigate through them. The docs, which are included in the package description, give a lot of good insight on how to set this up.
Magic Move
Magic Move has been a Framer X fan favorite ever since the first version came out. With the new Animation library now baked in to Framer X, the package creator, Gusso, has revamped and refined what it can do. If you’re looking to add animations and micro-interactions without touching code, this is exactly what you need.
All you have to do is create two different states and connect them to Magic Move. From there, it will take care of transitions and animations between the two.
Framer Sunbeam
For anyone looking to create prototypes for non-traditional devices, such as Smart TVs and HUDs, you’re probably familiar with the struggle of making prototypes controlled by something like a remote or keyboard.
Framer Sunbeam is a package designed specifically for this problem. You can download this package and use it to hook your prototype up to a whole range of controllers. Console and TV Prototypes have never been easier.
With new packages arriving in the Store every day, we’re constantly impressed by what our users are creating. From simple buttons to fully interactive 3D maps, there are so many packages out there to help you with your next project.
Read more on components in Framer X:
Bring your best ideas to life
Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.
