Interactive Components From Top Design TeamsInteractive Components From Top Design Teams

Get component packages created for the Framer community by design teams at Facebook, Dropbox, Twitter, and more.

avatar

Ashanya Indralingam

September 27, 2018

The recent push for more realistic digital experiences has many designers worried that they’ll need to learn how to code. Well, the Framer X Store is our way of democratizing design. Powered by a passionate and supportive community, the in-app Store is full of ready-to-use visual and interactive components bundled into themed packages. Just drag them into your designs and create high-fidelity interactions without using code.

This is an especially great entry point into interaction design for visual designers who are new to code.

We’ve also worked with a handful of companies to curate thoughtfully branded and utility themed packages. Whether you design maps for the Web, spin up mobile Android experiences or dream in Apple Watch notifications, you’ll find a package to help get you started. Learn more about our launch partner components, handcrafted for the Framer X Store by the design teams behind some of the best products in the world.

Dropbox Desktop Kit

Designing for macOS has never been easier with Dropbox’s Desktop Kit, which includes over 100 design and code components ranging from buttons and push notifications to working applications.

Get the Dropbox Desktop package

Listen to Zach Johnston, product designer on the Dropbox Design Systems team, as he explains a little more about what went into this package:

Twitter UI

This robust design and code package by the Twitter Design team contains everything from buttons, a notifications panel, QR code generator, Twemoji picker, and more. Whether you’re mocking up a flow that utilizes a Twitter share or just need a notification panel, download this package to get top-notch UI elements.

Get the Twitter UI package

Lottie

This official Lottie component by the Airbnb Design team allows anyone to render After Effects animations in real time. Drag this component into your design, paste the URL of any .json file into the properties panel, and watch your animations magically appear on the canvas. Pro tip: Find ready-to-use Lottie .json files at lottiefiles.com.

Get the Airbnb Lottie package

Material Design

The official Google Material Design Kit is now available in the Framer X Store. Get visual and interactive Android UI elements like buttons, cards, icons, sliders, and more to easily add to your next project.

Get the Material Design package

Mapbox

Drag and drop an interactive map into your design, change the latitude and longtitude to customize to your ideal location, and use live data—all thanks to this component by the Mapbox team.

Get the Mapbox package

Listen to Amy Lee Walton, Designer Engagement & Experience Lead at Mapbox, as she explains more about the level of customization available in this component:

Facebook Login

Design high-fidelity Facebook login flows using this official package, created by the Facebook Design team. Get fully responsive and interactive iOS and Android login flows, as well as customizable buttons with various properties.

Get the Facebook Login package

There are hundreds more interactive and visual packages in the Framer X Store. From Deezer’s customizable player to the Unsplash image generator, Android Home UI from the Google Design team and Snapchat’s Bitmoji flows, we’re confident you’ll find everything you need to get started on your next interactive design in Framer X.

Want access to the Framer X Store? Download our free 14-day trial now.

Like this article? Spread the word.

Sign up for our newsletter

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