Designful Launch editor

Shape Stroke Shadow

title: Shape Stroke Dash & Shadow Effects description: Control dashed strokes plus outer and inner shadow effects on shapes and frames. category: objects tags:

  • Objects
  • Shapes
  • Style
  • Effects

Overview

Use strokeDashArray to render dashed strokes. Figma-style shadows are stored on the object effects array, which supports both outer shadows (dropShadow) and inner shadows (innerShadow).

Dash arrays are applied when style.dash is not provided. Shadow effects render on closed shapes and on frame backgrounds.

Data Model

{
  effects: [
    {
      type: 'dropShadow',
      color: 'rgba(0, 0, 0, 0.28)',
      blur: 12,
      offsetX: 4,
      offsetY: 6,
      spread: 0,
      enabled: true,
      visible: true,
    },
    {
      type: 'innerShadow',
      color: '#0f172a',
      blur: 6,
      offsetX: 0,
      offsetY: 2,
      spread: 0,
      enabled: true,
      visible: true,
    },
  ],
}

drop-shadow and inner-shadow aliases are also accepted and are normalized to camelCase on object storage.

Access in the Editor

editor.updateObjectProperty(shapeId, 'style.stroke', '#111827')
editor.updateObjectProperty(shapeId, 'style.strokeWidth', 2)
editor.updateObjectProperty(shapeId, 'style.strokeDashArray', [6, 3])

editor.updateObjectProperty(shapeId, 'effects', [
  {
    type: 'dropShadow',
    color: 'rgba(0, 0, 0, 0.35)',
    blur: 12,
    offsetX: 4,
    offsetY: 6,
    spread: 0,
  },
  {
    type: 'innerShadow',
    color: '#0f172a',
    blur: 4,
    offsetX: 0,
    offsetY: 2,
    spread: 0,
  },
])

Notes

  • strokeDashArray is ignored if style.dash is already set.
  • style.shadowColor, style.shadowBlur, style.shadowOffset, and style.shadowOpacity still work as a legacy single outer-shadow fallback.
  • Object-level effects take precedence over legacy outer-shadow fields when a dropShadow effect is present.
  • Disabled, invisible, transparent, or zero-radius effects are skipped during rendering.