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

<Meta title='@dxtmisha/en/# UI Figma/# Data Storage'/>

# Working with Storage

Figma provides two main mechanisms for saving data: local user storage and shared document storage. The library offers typed wrappers for both methods, providing convenient access and synchronization.

## Backend (Backend / plugin/code.ts)

On the plugin code side, it is necessary to initialize message listeners to synchronize data with the interface.

### Initialization
```typescript
import { setupStorage, setupClientStorage } from '@dxtmisha/figma-code'

// Activate listeners for both storage types
setupStorage()
setupClientStorage()
```

### Direct Usage
You can work with storage data directly in the backend code:

```typescript
import { FigmaStorage, FigmaClientStorage } from '@dxtmisha/figma-code'

// Shared document storage
const storage = FigmaStorage.getInstance<string>('project-theme')
storage.set('dark')

// Personal user storage
const client = FigmaClientStorage.getInstance<boolean>('show-onboarding')
await client.set(true)
```

## Interface (UI / Iframe)

In the plugin interface, data is accessible through reactive hooks that automatically synchronize with the backend.

### Reactive Usage (Vue)
```typescript
import { useFigmaStorage, useFigmaClientStorage } from '@dxtmisha/figma-ref'

// Synchronization with the document
const { item: theme } = useFigmaStorage('project-theme', 'light')

// Synchronization with personal user settings
const { item: isSeen } = useFigmaClientStorage('show-onboarding', false)

// When .value changes, data is automatically sent to Figma
theme.value = 'dark'
```
