Figma Sync

Figma Sync Patterns — Memoire Connect Skill

Orchestrates reliable bidirectional sync between Figma and the local codebase through the Memoire bridge.

Sync Modes

1. Pull Sync (Figma to Code)

Trigger: memi pull, document-changed event, or manual

Pipeline:

Copy code
Figma Plugin
  -> getVariables + getComponents + getStyles (parallel)
  -> Parse raw data to DesignSystem
  -> Diff against existing registry
  -> Update changed tokens/components only
  -> Auto-spec new components
  -> Regenerate affected specs

Incremental strategy:

• Compare token values by name + collection — only update changed
• Compare components by figmaNodeId — detect added/removed/modified
• Track lastSync timestamp to skip unchanged files

2. Push Sync (Code to Figma)

Trigger: memi sync --push, agent canvas operations

Pipeline:

Copy code
Local Specs + Tokens
  -> Diff against Figma state
  -> Generate Figma Plugin API calls
  -> Execute via bridge
  -> Self-heal (screenshot + verify)
  -> Update Code Connect mappings

Safety rules:

• Never overwrite Figma components that have been modified since last pull
• Prompt user if Figma-side changes detected since last sync
• Use figma.currentPage.findOne() to target specific nodes, not blind creation

3. Bidirectional Merge

When both sides have changes:

Change Detection

Token Diffing

typescriptCopy code
interface TokenDiff {
  added: DesignToken[];
  removed: DesignToken[];
  modified: { before: DesignToken; after: DesignToken }[];
  unchanged: number;
}

Compare by: name + collection as composite key. Modified = same key but different values object (deep equal).

Component Diffing

typescriptCopy code
interface ComponentDiff {
  added: DesignComponent[];
  removed: DesignComponent[];
  modified: { before: DesignComponent; after: DesignComponent; changes: string[] }[];
}

Compare by: figmaNodeId as primary key, name as fallback. Track changes: name, description, variants, properties.

Multi-File Orchestration

When syncing across multiple Figma files:

1. Enumerate files: Each connected plugin reports its fileKey
2. Parallel pull: Pull from all connected plugins simultaneously
3. Namespace tokens: Prefix with file name to avoid collisions
4. Merge design systems: Combine into single registry with source tracking
5. Conflict resolution: Same-name tokens from different files prompt user

Event-Driven Sync

The Memoire bridge emits these sync-relevant events:

Operator Console

Widget V2 exposes the bridge as an operator console:

• Jobs shows sync, capture, inspect, and healer activity as tracked job state
• Selection shows current node IDs, styles, variants, and layout facts
• System shows bridge status, ports, latency, reconnect state, and buffered changes
• agent-status surfaces on-canvas task visibility from the orchestrator
• connection-state, job-status, sync-result, and healer state are better sources of truth than raw bridge logs

Debounce Strategy

• document-changed: 3 second debounce — batch rapid edits
• Multiple changes within window: single pull covers all
• Ignore events while a pull is already in progress
• Queue one follow-up pull if changes arrive during active pull

Error Recovery

Best Practices

• Always pull before push — ensure local state is current
• Log every sync with timestamp, direction, and counts
• Keep sync operations idempotent — safe to retry
• Never modify Figma pages the user is actively editing (check selection first)
• Preserve user's undo stack — batch Figma operations into single undo group