Desktop Kit

Dropbox Design

Open in Framer X

Desktop Kit by Dropbox

Over 100 macOS UI components ranging from buttons and push notifications to fully working applications. This kit gives you the building blocks to design incredible desktop experiences.

Introducing LiveKit

A set of pre-built interactive components for use throughout your prototypes to mimic a desktop environment.

Finder

Use placeholder content or pull in live data from your Dropbox account. You can navigate within folders and even change the size of the content grid. Toggle between showing icons or thumbnails for images, videos and PDF files.

All folder and file icons are provided as Design Components to make it easy to create your own layouts.

Browser

Choose between Safari or Chrome to render any design. Enable “Live Site” mode to render a real website for a given URL. Currently, cross-domain URLs (like Google.com) aren’t supported.

LiveDesktop (Experimental)

Connect frames to the LiveDesktop Component and see them come to life as app windows that can be rearranged, resized and closed/opened.

Name your connected frames as common macOS apps (Finder, Chrome, Messages, etc.) and see their icons show up in the Dock. Use your own app icon by including a hidden frame labeled “App Icon” inside your connected frames.

The LiveDesktop Component also includes different wallpaper and background color options. Try setting “Canvas — Responsive” while in Preview for best results.

Design Components

Dozens of design components for app icons, buttons, alerts, push notifications, the macOS Dock and Menu Bar, and even an example Messages application.

Release Notes

11/21/2019

  • FIXED: Icons for Finder and LiveDesktop now show up properly

11/13/2019

  • NEW: An improved Finder Component
  • FIXED: Connecting frames to LiveDesktop shows proper App Icons

11/05/2019

  • NEW: An interactive Dock for the LiveDesktop Component
  • NEW: App windows in LiveDesktop can be “closed” by clicking on the red close button
  • FIXED: Components are re-organized to improve their discovery
  • FIXED: App windows now stack properly
  • FIXED: Performance improvements

10/21/2019

  • NEW: App windows can be resized in LiveDesktop
  • FIXED: Performance improvements

10/18/2019

  • NEW: A new experimental LiveDesktop component for mimicking draggable windows on desktop.
  • NEW: Improved rendering of content connected to the Browser component.
  • NEW: Improved organization of components.
  • FIXED: Bug fixes for Browser and FinderGrid components.

10/04/2019

  • NEW: A WebView component for rendering live websites. Currently only supports urls that don’t have cross-domain restrictions.
  • NEW: The Browser component now includes a “Live Site” toggle for rendering the inputted URL.

9/30/2019

  • NEW: Caching is now an option when using Dropbox data in Finder. Great for speeding up navigation within Dropbox folders.
  • NEW: Show thumbnails for Dropbox files in the FinderGrid component. Currently supports image, video and PDF files.
  • FIXED: Favicons now render correctly in the Browser component.

8/15/2019

  • FIXED: Menu Bar Icons render properly.
  • FIXED: Menu Bar adapts to Preview window width.
  • FIXED: Dock Icons now render.
  • FIXED: Popup menus now render.
  • FIXED: Finder component now renders folder icons properly.

9/20/2018

  • Launched
Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree