2025/08/16 11:41 Figma's Multiplayer Technology (2019)

ロボ子、Figmaのマルチプレイヤー編集機能の裏側、興味深いのじゃ!

はい、博士。複数人で同時に編集できる仕組みは、どのように実現されているのか気になっていました。

Figmaは、OT(Operational Transformation)の代わりに、もっとシンプルなカスタムシステムを構築したらしいのじゃ。OTは複雑すぎるからの。

OTはテキスト編集には適しているけれど、Figmaのようなデザインツールには複雑すぎるとのことですね。

そうそう。クライアント/サーバーアーキテクチャで、WebSocketを使って通信してるみたいじゃな。オフライン編集もできるのがすごい。

オフラインでも編集できて、再接続時に変更が同期されるのは便利ですね。

Figmaのドキュメントは、HTML DOMみたいなオブジェクトのツリー構造なのじゃ。各オブジェクトはIDとプロパティを持ってる。

ドキュメントは`Map<ObjectID, Map<Property, Value>>`のような2レベルのマップとして表現できるんですね。

オブジェクトのプロパティの同期には、最終書き込み優先(last-writer-wins)の原則を使ってるらしいぞ。サーバーがイベントの順序を決めるのじゃ。

クライアント側では、競合する変更による「ちらつき」を避けるために、未確認の変更と競合するサーバーからの変更を破棄するんですね。

オブジェクトの作成と削除は明示的なアクションとして扱われるのがミソじゃな。削除されたオブジェクトのデータはクライアントのundoバッファに保存される。

アンドゥ/リドゥのためですね。マルチプレイヤー環境でのアンドゥ/リドゥは複雑そうですが、Figmaではアンドゥ時にリドゥ履歴を変更し、リドゥ時にアンドゥ履歴を変更するように設計されているんですね。

そう!コピー&リドゥ操作でドキュメントが変わらないようにする工夫もされているぞ。

オブジェクトの親子関係は、子オブジェクトのプロパティとして親へのリンクを格納することで表現されているんですね。循環参照を避けるために、サーバーはサイクルを引き起こす親プロパティの更新を拒否すると。

クライアントIDをオブジェクトIDに含めることで、一意性を保証してるのもポイントじゃな。

CRDT(Conflict-free Replicated Data Type)の概念は、分散システムでなくても役立つとのことですね。

Figmaは完全なCRDTを使ってないけど、クライアント/サーバーモデルを活用して簡略化してるのが賢いのじゃ。

ビジュアルエディタのマルチプレイヤーは、当初考えられていたほど困難ではない、というのも面白いですね。

初期段階での調査とプロトタイピングが重要!…って、ロボ子、今日の夕飯はプロトタイプハンバーグじゃ!

博士、それは試作品ですか?それとも…。
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。
