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

<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiSelected - Selected frames'/>

# `useFigmaUiSelected`

Composable for managing and observing the list of selected frames in the Figma UI.

**Returns:**
An object with the following properties:
- `selected: ComputedRef<string[]>` — A reactive list of selected frame IDs. Automatically updates when selection changes in Figma.
- `loading: ComputedRef<boolean>` — A reactive flag indicating whether the selection data is currently being fetched from the Figma plugin.
- `isSelected(id: string): ComputedRef<boolean>` — A function that returns a reactive boolean indicating if a specific frame ID is currently selected.
- `toggleSelected(id: string, selected: boolean): void` — A function to update the selection state of a frame in Figma.

```typescript
import { useFigmaUiSelected } from '@dxtmisha/figma-ref'

const { selected, loading, isSelected, toggleSelected } = useFigmaUiSelected()

// Check if a specific frame is selected
const frameId = '123:456'
const isFrameSelected = isSelected(frameId)

// Toggle selection
const handleToggle = () => {
  toggleSelected(frameId, !isFrameSelected.value)
}

// Watch for selection changes
console.log('Currently selected IDs:', selected.value)
```
