Adding Hover States

Overview

Any component can take an optional hoverStyle property that takes on property overrides. These overrides will be applied when a user hovers over a parent hover target.

The hoverStyle prop accepts the type of HoverStyle and the only properties that can be overridden by it are:

• fill
• stroke
• opacity

A valid hover target is currently defined as any component that has an onClick or onTextEditEnd event handler on it.

When hovering over a hover target the hoverStyle of the target and all of its children recursively are applied, unless they are in a hover target that isn't currently hovered.

Example

In the below example hovering over the button will make the containing AutoLayout black and the nested Text inside of it white.

Adding hover styles to a button

const { widget } = figma
const { useSyncedState, AutoLayout, Text } = widget

function Widget() {
  const [count, setCount] = useSyncedState('count', 0)

  return (
    <AutoLayout
      verticalAlignItems={'center'}
      spacing={8}
      padding={16}
      cornerRadius={8}
      fill={'#FFFFFF'}
      stroke={'#E6E6E6'}
      onClick={() => setCount(count + 1)}
      hoverStyle={{
        fill: '#000000',
      }}
    >
      <Text
        fill="#000000"
        hoverStyle={{
          fill: '#FFFFFF',
        }}
      >
        Count: {String(count)}
      </Text>
    </AutoLayout>
  )
}

widget.register(Widget)

Here is a gif of it in action: