The Appearance Panel is where you will adjust the appearance of your object, including its color, corner radius, opacity, border, shadows, and materials. In iOS, the Appearance Panel is one tab in the bottom tab bar, whereas in macOS, the Appearance Panel is floating on the right side of the screen.
BG Color
The Background (BG) Color property adds a fill color to the selected object. You can use your project’s Color and Gradient styles or create a new non-style color that will live in the Used Color Panel.
For elements like images or videos, the optional selected BG Color will be what a user sees as the image or video asset loads.
Opacity
You can adjust the object’s transparency using the Opacity property. The value will always be represented as a percentage on a scale from 0% to 100%.
Corner Radius
The Corner Radius property adjusts the curvature of an object’s corners, softening or hardening them.
The Corner Radius slider uses Corner Radius styles, but you can also type in a custom corner radius. You can change all corners together, or you can adjust each corner radii separately. To edit the values individually, tap/click on the right side of the Corner Radius property and a pop-up will appear.
In the same pop-up, you can turn on the Continuous Corners property to make your object a “squircle” shape. You can also do this by right-clicking on the corner in the canvas.
Blend Modes
The Blend Mode property lets you edit the appearance of overlapping objects using 20 different options. Apply a blend mode to the top object to experiment with color, contrast, and more!
Darken blend mode emphasizes the darkest parts of each overlapping image
Multiply blend mode also emphasizes the darkest parts of each overlapping image, but midrange color values from both images are mixed together more evenly
Color Burn blend mode intensifies the dark areas in each image. The order of layers matters here
Linear Burn blend mode is similar to Multiply blend mode except darker overlapping midrange color values are intensified
Lighten blend mode emphasizes the lightest parts of each overlapping image
Screen emphasizes the lightest parts of each overlapping image, but midrange color values of both images are mixed together more evenly
Color Dodge blend mode preserves white color in either the foreground or background image and makes black colors in the foreground transparent
Linear Dodge blend mode is similar to Screen blend mode except overlapping, lighter midrange color values become intensified
Overlay blend mode causes white and black colors in the foreground to become translucent and interact with the color values of the background, intensifying contrast
Soft Light blend mode makes whites and blacks in the foreground translucent while still interacting with the background's color
Hard Light blend mode causes white and black colors in the foreground image to block the background image
Pin Light blend mode is similar to the Hard Light blend mode except overlapping midrange color values are mixed together differently based on their color values
Difference blend mode is similar to the Subtract blend mode except severely darkened areas are colorized differently
Exclusion blend mode is similar to the Difference blend mode except the resulting image is lighter
Subtract blend mode darkens all overlapping colors, with white colors creating a negative effect
Divide blend mode inverts colors
Hue blend mode adds a hue of the BG color to the lighter areas
Saturation blend mode increased the saturation of overlapped colors based on the vibrancy of the BG color
Color blend mode blends the selected BG color with the other object
Luminosity blend mode reduces the saturation of the overlapped colors
Blend Mode and Compositing cannot exist at the same time.
Compositing
The Compositing property also lets you edit the appearance of overlapping objects by emphasizing or blocking overlapping content using six different options.
Maximum compositing computes the maximum value, by color component, of two input objects and creates an output object using the maximum values.
Minimum compositing computes the minimum value, by color component, of two input objects and creates an output object using the minimum values.
Multiply compositing multiplies the color component of two input objects and creates an output object using the multiplied values. This filter is typically used to add a spotlight or similar lighting effect to an object.
Overlap compositing places the source object over the background object, then uses the luminance of the background object to determine what to show. The composite shows the background object and only those portions of the source object that are over visible parts of the background.
Intersect compositing uses the second object to define what to leave in the source object, effectively cropping the object.
Subtract compositing uses the second object to define what to take out of the first object.
Material
The Material property adds layers between the background content and the foreground content, allowing you to see some of the content behind the object through a blurred material.
You can use Apple's system materials and vibrancy. Read more in our full article about materials.
Border
Adding a border via the Border property will open a pop-up where you can adjust properties related to the border.
Fill Color: The border color (black by default)
Border Width: The border’s thickness, in points
Dash Size & Gap: For a dashed border, you’ll use the Dash Size & Dash Gap properties together. Choose the length of each dash and the length of the gap between each dash, in points
Opacity: The opacity from 0% to 100%
Shadow
Adding a shadow via the Shadow property will open a pop-up where you can adjust properties related to the shadow.
Type: Inner or outer (drop) shadow
Offset X & Y: The shadow’s placement relative to the object
Blur: Lower numbers will blur the shadow less, and higher numbers will blur the shadow more
Spread: How far the shadow will spread from the object, in points
Opacity: The opacity from 0% to 100%
Color: The shadow color (black by default)
UI Appearance
For native elements, the UI Appearance will be enabled, letting you choose between dark mode, light mode, or auto, which inherits the system's default mode.