Skip to main content
The Appearance Panel
Updated over 7 months ago

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.

Did this answer your question?