Interactive Components From Top Design Teams

Interactive Components From The World’s Best Design Teams

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

asha

Ashanya Indralingam

September 27, 2018

banner

T he 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 ›

Twitter UI

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

Zach Johnston , Dropbox

01:03
Zach

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 ›

Twitter UI

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. Protip: Find ready-to-use Lottie .json files at lottiefiles.com.

Get the Airbnb Lottie package ›

screenflow recording

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 plug and play into your next project.

Get the Material Design package ›

screenflow recording

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 ›

screenflow recording

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

Amy Lee Walton , Mapbox

03:53
Amy Lee

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 logins flows as well as customizable buttons with various properties.

Get the Facebook Login package ›

screenflow recording

There’s 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.


Get access to the Framer X Store, download our 14 day trial now.

Like this article? Spread the word.

Want more design articles?

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

The Official Loupe 2018 Recap

Read more ›

Featured Framer X Packages: October

Read more ›

Framer X Is Here

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 ›

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.