import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/en/figma/Classes/FigmaUiMessenger - Frontend Messenger'/>

# FigmaUiMessenger Class

Messenger for the Figma UI side (frontend). It handles sending messages to the Figma plugin and listening for messages from the plugin using the browser's `postMessage` API.

## Initialization

Extends `FigmaPostAbstract`.

```typescript
import { FigmaUiMessenger } from '@dxtmisha/figma'

const messenger = new FigmaUiMessenger()
  .make()
  .add('plugin-update', (data) => console.log('Plugin:', data))
```

## Public Methods

### `make`

Initializes the message listener using the `window` message event. Should be called once to start receiving messages from the plugin (backend).

**Returns:** `this`

```javascript
messenger.make()
```

### `add`

Registers a listener for a specific message type coming from the plugin (backend).

**Parameters:**
- `type: string` — Unique identifier for the message type to listen for.
- `callback: (message: Message) => void` — function to execute when a matching message arrives from the plugin.

**Returns:** `this`

```javascript
messenger.add('selection-changed', (data) => {
  renderSidebar(data.nodes)
})
```

### `post`

Sends a message to the Figma plugin backend.

**Parameters:**
- `type: string` — The identifier of the message (type).
- `message: Message` — (Optional) Data payload to send to the plugin.

**Returns:** `void`

```javascript
messenger.post('create-rectangles', { count: 5, color: '#FF0000' })
```
