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.
App Names and Icons
Name your connected frames as common macOS apps and see their app icons appear in the Dock.
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.
Customizing the App Icon
If you have a design for your own app icon, here's how you can use it:
- Create a frame named App Icon at the root level of your connected frame.
- Edit the contents of the App Icon frame and see it appear in the Dock of the LiveDesktop component.
- 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.
Window interactions
App windows can be focused, dragged, resized, closed, and re-opened in the Preview window.
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.
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.
Image
Choose between a macOS Catalina image or a custom photo (including Unsplash)