All docs

Figma Plugin

Bidirectional design ↔ code sync. Convert Figma frames to UIXDocuments.

Overview

The @uix/figma-plugin provides bidirectional sync between Figma and UIX:

  • Figma → UIX — convert Figma frames to UIXDocuments
  • UIX → Figma — apply UIXDocument changes back to Figma

Figma to UIX conversion

typescript
import { figmaToUIX } from '@uix/figma-plugin';

const doc = figmaToUIX(figmaNode, { includeHidden: false });
// Returns a UIXDocument with accuracy tracking

The converter maps Figma node types to UIX types:

Figma TypeUIX Type
FRAMEFrame
TEXTText
RECTANGLEFrame
ELLIPSEFrame
GROUPFrame
COMPONENTComponent
INSTANCEComponent
VECTORImage
BOOLEAN_OPERATIONFrame

UIX to Figma export

typescript
import { uixToDesignData } from '@uix/figma-plugin';

const designData = uixToDesignData(document);
// Returns a DesignData envelope that Figma can consume

Real-time sync

The plugin includes a WebSocket client (UIXServerClient) that connects to the UIX sync server:

  • Push — send local changes to the server
  • Pull — receive server changes and apply to the Figma document
  • Session management — join/leave collaboration sessions
  • Auto-reconnect — handles network interruptions

Plugin UI

4 tabs in the Figma plugin interface:

  1. UIX Import — convert selected Figma frames to UIXDocuments
  2. Legacy Import — import React Native / Web design data
  3. Export — send UIXDocument to Figma
  4. Sync — real-time bidirectional sync with the server

Token resolution

Design tokens in the UIXDocument are resolved to literal values for Figma:

typescript
import { resolveColorForFigma } from '@uix/figma-plugin';

const color = resolveColorForFigma('{color.primary}', tokens);
// '#628B77'