Effect
Figma has four types of effects:
They can be grouped into three categories of properties: DropShadowEffect, InnerShadowEffect, and BlurEffect. The Effect type is then one of the three:
type Effect = DropShadowEffect | InnerShadowEffect | BlurEffect
DropShadowEffect
type: 'DROP_SHADOW' [readonly]
The string literal representing the type of effect this is. Always check the type before reading other properties.
color: RGBA [readonly]
The color of the shadow, including its opacity.
offset: Vector [readonly]
The offset of the shadow relative to its object. Use this property to simulate the direction of the light.
radius: number [readonly]
The blur radius of the shadow. Must be >= 0. A lower radius creates a sharper shadow.
spread?: number [readonly]
The distance by which to expand (or contract) the shadow. For drop shadows, a positive spread value creates a shadow larger than the node, whereas a negative value creates a shadow smaller than the node. For inner shadows, a positive spread value contracts the shadow. spread values are only accepted on rectangles and ellipses, or on frames, components, and instances with visible fill paints and clipsContent enabled. When left unspecified, the default value is 0.
visible: boolean [readonly]
Whether this shadow is visible.
blendMode: BlendMode [readonly]
Determines how the color of this shadow blends with the colors underneath it. The typical default value is "NORMAL".
showShadowBehindNode?: boolean [readonly]
Whether the drop shadow should show behind translucent or transparent pixels within the node's geometry. Defaults to false.
InnerShadowEffect
type: 'INNER_SHADOW' [readonly]
The string literal representing the type of effect this is. Always check the type before reading other properties.
color: RGBA [readonly]
The color of the shadow, including its opacity.
offset: Vector [readonly]
The offset of the shadow relative to its object. Use this property to simulate the direction of the light.
radius: number [readonly]
The blur radius of the shadow. Must be >= 0. A lower radius creates a sharper shadow.
spread?: number [readonly]
The distance by which to expand (or contract) the shadow. For drop shadows, a positive spread value creates a shadow larger than the node, whereas a negative value creates a shadow smaller than the node. For inner shadows, a positive spread value contracts the shadow. spread values are only accepted on rectangles and ellipses, or on frames, components, and instances with visible fill paints and clipsContent enabled. When left unspecified, the default value is 0.
visible: boolean [readonly]
Whether this shadow is visible.
blendMode: BlendMode [readonly]
Determines how the color of this shadow blends with the colors underneath it. The typical default value is "NORMAL".
BlurEffect
type: 'LAYER_BLUR' | 'BACKGROUND_BLUR' [readonly]
The string literal representing the type of effect this is. Always check the type before reading other properties.
radius: number [readonly]
The blur radius of the shadow. Must be >= 0. A lower radius creates a sharper shadow.
visible: boolean [readonly]
Whether this shadow is visible.