In-Place Engine

The primary user experience flaw in traditional design sync plugins is canvas clutter. Most plugins handle updates by uploading a new image file and pasting it beside the old image. On large product design boards, this destroys carefully organized flow layouts, breaks arrow connectors, wipes attached comment threads, and disrupts visual grid alignment.

SyncingBoard solves canvas clutter through two architectural innovations:

1. Non-destructive in-place payload swaps across both Miro and FigJam.
2. The Board as the Database: a stateless in-canvas metadata registry that enables true cross-board portability.

1. The In-Place Swap Architecture

Instead of deleting and recreating canvas items, SyncingBoard updates the underlying image data of existing whiteboard nodes, keeping their node IDs, coordinates (x, y), scales, and connector attachments completely undisturbed.

+------------------------------------+             +------------------------------------+
|  MIRO TARGET (MiroAdapter.ts)      |             |  FIGJAM TARGET (FigJamAdapter.ts)  |
|  - In-place Image URL payload swap |             |  - In-place IMAGE-fill node swap   |
|  - AppData + Visible Title Card    |             |  - Persistent pluginData + Name    |
+------------------------------------+             +------------------------------------+
                   \                                     /
                    \                                   /
                     v                                 v
            +---------------------------------------------------+
            |  CANVAS INTEGRITY PRESERVATION ENGINE             |
            |  - Preserves widget ID and board coordinates      |
            |  - Keeps connectors, stamps & comments anchored  |
            |  - Metadata persists across canvas copy-pasting   |
            +---------------------------------------------------+

2. The Innovation: The Board as the Database

Traditional SaaS integrations rely on a centralized cloud database (e.g., PostgreSQL) mapping MiroWidget_123 -> FigmaFrame_456. If the central database is unavailable, or if a user copies a widget to another board, the sync link breaks.

SyncingBoard eliminates external databases completely by turning the whiteboard canvas into a self-describing, stateless registry:

Target-Specific Metadata Strategies

Because Miro and FigJam handle canvas nodes differently, SyncingBoard applies tailored persistence mechanisms for each platform:

• In Miro (AppData + Visible Title Signatures): Miro image widgets display visible header title banners. SyncingBoard stores high-density JSON in widget.setMetadata('syncingboard', ...) and appends a durable signature to the visible title ([FigmaSync|fileKey|nodeId]). If cross-account copy-pasting strips custom metadata, the title signature survives, allowing SyncingBoard to immediately re-bind the live sync link.
• In FigJam (Persistent pluginData + Scene Graph Names): FigJam does not display floating title banners on images. Instead, FigJam’s engine natively clones node.setPluginData() when rectangles are copied and pasted across boards within the plugin namespace. SyncingBoard writes structured connection metadata directly to pluginData while tagging the internal scene node name (node.name), maintaining full copy-paste portability without adding visual clutter to the whiteboard.

+-----------------------------------------------------------------------------+
| COPY-PASTE PORTABILITY SUPERPOWER                                           |
| 1. Designer copies synced screen from "Board A (Discovery)"                 |
| 2. Designer pastes screen into "Board B (Sprint Planning)"                  |
| 3. SyncingBoard on Board B reads canvas metadata & re-syncs with zero setup |
+-----------------------------------------------------------------------------+

3. Target Implementation Mechanics

Miro: Web SDK v2 Image URL Swaps

Inside Miro, MiroAdapter.ts executes non-destructive swaps by updating the widget’s url property:

// In-place metadata swap in MiroAdapter.ts
async function syncMiroInPlace(miroImageItem: ImageItem, newPayloadUrl: string) {
  // 1. Snapshot original canvas bounds and rotation
  const snapshot = {
    x: miroImageItem.x,
    y: miroImageItem.y,
    width: miroImageItem.width,
    height: miroImageItem.height,
    rotation: miroImageItem.rotation
  };
 
  // 2. Perform non-destructive URL payload swap
  miroImageItem.url = newPayloadUrl;
  await miroImageItem.sync();
 
  // 3. Restore exact canvas bounds & apply aspect ratio scale
  await restoreGeometryBounds(miroImageItem, snapshot);
}

FigJam: Plugin API IMAGE-Fill Swaps

Inside FigJam, FigJamAdapter.ts locates tracked rectangle nodes and executes non-destructive swaps by rewriting the node’s fills array:

// In-place fill swap in FigJamAdapter.ts
async function syncFigJamInPlace(rectangleNode: RectangleNode, imageBuffer: Uint8Array) {
  // 1. Create image hash in Figma/FigJam memory
  const image = figma.createImage(imageBuffer);
  
  // 2. Swap fill in-place without altering node identity or position
  rectangleNode.fills = [{
    type: 'IMAGE',
    scaleMode: 'FIT',
    imageHash: image.hash
  }];
  
  // 3. Update plugin metadata timestamp
  rectangleNode.setPluginData('syncingboard_last_synced', Date.now().toString());
}

4. Operational Spectrum: Adopt, Import & Batch Sync

SyncingBoard provides three flexible operational modes across both Miro and FigJam:

5. Preserving Board Integrity & Geometry

Swapping vector SVGs or high-resolution PNGs into existing whiteboard widgets can alter element aspect ratios.

SyncingBoard implements a geometry preservation engine in MiroAdapter.ts and FigJamAdapter.ts that snapshots original widget bounds, applies the updated image payload, and rescales the widget container to maintain exact spatial alignment and grid layout bounds across re-syncs.

Continue exploring: Sources & Whiteboard Targets or return to SyncingBoard Overview.