SyncingBoard

Illustrations by Storyset

I value collaboration a lot. I don’t hide the fact that I love Miro - I’ve been using it since back when it was called RealtimeBoard. Having an online whiteboard where you can share ideas, map out user flows, and collaborate in real time, no matter where team members are located, was and still is a game changer for me.

This is especially true when working in a global organization spread around the world, developing products for different regions. I can share design decisions, flows, and documentation with my team and stakeholders, and everyone can give feedback asynchronously. My favorite feature is Miro’s TalkTrack, which lets me record a walkthrough of my board and share it without fighting timezone differences.

And if you, like me, use Miro to present design decisions made in Figma or Penpot, you already know the constant friction of keeping boards up to date. You and your team spend hours arranging flows, organizing screenshots, and building documentation. Then a design iteration happens in Figma, and you have to go back to Miro, delete old screenshots, re-upload everything, and re-arrange the whole board manually.

I’ve been looking for a clean solution to that pain point for a long time. Once AI broke my limiter, I finally built it.

The Solution: SyncingBoard

I orchestrated SyncingBoard - a stateless, open-source integration tool that lets product and design teams sync design screens from Figma and Penpot directly into Miro boards as flat images.

Instead of cluttering whiteboards with duplicate uploads or heavy live embeds that slow down your browser, SyncingBoard performs in-place image updates. Your screens update right inside their existing frames on the Miro canvas - keeping your board clean, fast, and organized without breaking your layout.

You can adopt old images, import new images, and sync existing images, in different scales, in PNG or SVG. You can import any frame via its URL or detect the selection via Figma/Penpot companion plugin. You can batch sync multiple different images (Community tier supports up to 3 frames per batch to protect backend rate limits) updating a single instance or all instances on the entire board.

Currently SyncingBoard supports Miro and FigJam as targets, and Figma and Penpot as sources. I’m actively building new capabilities - check out the public roadmap  to see what’s coming next.

And the best part is SyncingBoard runs for free under free-tier accounts, and you can deploy it yourself since it is an open-source  project.

Quick Start

Getting started takes less than two minutes:

• Miro: Install the Miro app directly via this Miro App Install Link  (pending official marketplace listing).
• Figma & FigJam: Install the companion from the Figma Community .
• Penpot: Search for SyncingBoard in Penpot Hub , or use the manifest URL directly:

https://www.syncingboard.com/penpot-manifest.json

Under the Hood: How a Sync Works

To make SyncingBoard fast, reliable, and privacy-first, I built it around a stateless, serverless relay architecture that handles design assets without cluttering your board or storing your private files.

What Does “Stateless” Mean?

Being stateless means SyncingBoard acts purely as a temporary bridge rather than a data warehouse. Your design screens, tokens, and credentials pass through the sync relay in real time to update Miro, but nothing is ever saved, cached, or stored on a database server. Once the sync finishes, zero trace or residual data is left behind.

The Sync Lifecycle

Instead of dumping files into a database or pasting duplicate images across your whiteboard, SyncingBoard executes a clean, three-step lifecycle whenever you update a design:

1. Pairing & Handshake: When you trigger a sync from Miro or FigJam, SyncingBoard creates an instant session handshake to pull the latest design screens directly from your Figma or Penpot source.
2. In-Place Target Matching: The engine scans your Miro board for existing frames by reading a lightweight tag stored inside native Miro item metadata.
3. Image Payload Swap: If a match is found, SyncingBoard updates the image URL directly inside the existing Miro widget. Because the widget itself never moves or recreates, your board coordinates, layout alignment, and attached Miro comment threads stay 100% intact.

The Stack: Vercel + Ably + Upstash

To keep the system stateless, fast, and serverless, SyncingBoard is powered by three core infrastructure pieces working in tandem:

• Vercel (Serverless Compute): Handles OAuth authentication, token rotation, and Figma API batch rendering on demand using Next.js API routes that scale to zero when idle.
• Ably (Real-time WebSockets): Manages low-latency cross-tab communication between your design tool and Miro, delivering instant live updates without slow HTTP polling.
• Upstash (Serverless Redis): Manages transient pairing keys and short-lived session tokens with strict 5-minute expiration limits (TTLs), ensuring data flows through in real time without being written to a permanent database.

Built Under the Studio of Two

SyncingBoard is more than just a workflow utility - it is a working proof of my Studio of Two methodology.

In the past, building a cross-platform sync engine with multi-service OAuth, real-time WebSocket relays, and design tool SDKs would have taken weeks of dedicated backend engineering. By pairing human intent and design architecture with AI developer agents, I went from initial concept to a shipped, open-source product in record time.

It is fascinating to see how AI lets us build real software to solve our own daily friction points. When AI breaks your limiter, design leaders can move from identifying workflow friction to shipping production tools that solve it.

Read more about human-agent co-creation in The Studio of Two Methodology.