Feature Spec Panel: Appearance

Overview

• The "Appearance" is a part of the "Properties" column. When the "Properties" panel is expanded, the "Appearance" panel is visible and is either collapsed or expanded as a section.

• If a layer is selected, the "Appearance" panel section succeeds the "Transform" panel, and is the second section in the "Properties" column. If no layer is selected, the "Appearance" panel is not visible at all, including the header.

Canvas Interactions

• Changes made to attributes should be reflected on canvas.

Modifiers

• Shift + arrow up/down: in Stroke field this will increment/decrement by 5, in Radius field this will increment/decrement by 10.

Panel Interactions

• If "Appearance" section header is double clicked, it should change to the opposite state. If expanded + double click, then the section will collapse and only the header "Appearance" is visible. If collapsed + double click, then the section will expand. When the section is expanded, all the properties of the selected layer will show.

• In the "Appearance" header there are two icons denoting copy and paste. In both the collapsed and expanded states of the "Appearance" section, these icons are visible.

  • Clicking the "copy" icon will copy all the styles of the selected layer. The "paste" icon will be in the active state any time there are styles to be pasted. The pasted styles will be fill color, fill blend mode, fill opacity, stroke color, stroke thickness, stroke position, radius (if the target layer has this property). The visibility toggled states for stroke and fill will not be copied.
  • Hovering over the "copy" and "paste" icons triggers a tooltip.

• When the Toggle Fill/Toggle Stroke icon is clicked, it should change to the opposite state. If toggled on, the icon is in the active/visible state. If toggled off, the icon is in the inactive/hidden state. In both cases, all the inputs for that property are still editable.

• When a rectangle layer is selected, the contextual properties visible in the panel are:

  • Fill color swatch, fill blend mode, fill opacity, fill toggle
  • Stroke color swatch, stroke thickness, stroke positioning (outside/center/inside), stroke toggle
  • Radius input and radius slider (unless it has been rotated)

• When an ellipse layer or shape layer (product from the pen tool) is selected, the contextual properties visible in the panel are:

  • Fill color swatch, fill blend mode, fill opacity, fill toggle
  • Stroke color swatch, stroke thickness, stroke positioning (outside/center/inside), stroke toggle

• When a text layer, the contextual properties visible in the panel are:

  • Set Text Color, blend mode, opacity, Typeface, size, font weight, alignment icons (4), Letter Spacing, Line Spacing.

• When a group, artboard, pixel layer or smart object is selected, the contextual properties visible in the panel are:

  • Fill color swatch should be disabled, blend mode (Pass Through for group and artboard layers), opacity.

• See Color Picker for applying fill and stroke.