LiveDesktop

⚠️ The LiveDesktop component is experimental.

LiveDesktop is a self-contained component that mimicks a desktop experience. It gives you a sense of how your designs co-exist with other app windows.

Turning frames into “app windows”

Start by connecting frames to the LiveDesktop component and watch them appear as app windows that can be rearranged, resized and closed/opened.

Connect Frames and Components to LiveDesktop

App Names and Icons

Name your connected frames as common macOS apps and see their app icons appear in the Dock.

Changing the connected frame's name updates the icon

Included app icons

The following apps have an icon included in the kit. Naming your connected frame as any one of these will show the corresponding app icon.

  • Finder
  • Messages
  • Chrome
  • Safari
  • Slack
  • Dropbox
  • System Preferences
  • Photos
  • App Store
  • Facetime
  • Notes
  • Calendar
  • Maps
  • Sketch
  • Mail
  • Preview
  • Keynote
  • Quicktime
  • Framer X

The app name (derived from the name of the connected frame) is used throughout other parts of the LiveDesktop component, such as the Menu Bar and the Tooltip that is shown when hovering over the Dock icon.

App name in Menu Bar and Dock

Customizing the App Icon

If you have a design for your own app icon, here's how you can use it:

  1. Create a frame named App Icon at the root level of your connected frame.
  2. Edit the contents of the App Icon frame and see it appear in the Dock of the LiveDesktop component.
  3. Hide the App Icon frame in the Layers panel (and Canvas) if you like. It will still appear in the Dock.

Try connecting the Example App component and showing/hiding the App Icon frame to see how this works.

A special frame named App Icon Hiding the App Icon frame

Window interactions

App windows can be focused, dragged, resized, closed, and re-opened in the Preview window.

LiveDesktop Window Interactions

When designing your own custom app, add the WindowControls subcomponent to your connected frame to enable closing and re-opening interactions while it's connected to LiveDesktop.

WindowControls

Dock

The Dock comes with a few options in LiveDesktop:

  • Live — Dynamically shows a set of icons based on the frames connected to LiveDesktop.
  • Static — Shows a set of static icons for common macOS apps.
  • Hide — Hides the Dock.

Wallpaper

Customize the background by toggling between Photo and Color options.

Wallpaper Options Wallpaper Color

Image

Choose between a macOS Catalina image or a custom photo (including Unsplash)

Catalina