{"id":1251,"kind":"story","title":"A small demo recreates why Figma-style collaborative editing looks seamless","url":"https://qiita.com/keishin_nishiura/items/b13d72afb085891e4fc9?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items","host":"qiita.com","by":"startupxo","score":0,"comments":1,"editorial_comments":1,"time":"2026-11-08T00:45:44.982Z","origin":"curated","language":{"source":"ko","reading":"en","translated":true},"summary":["When multiple people edit the same screen, your actions appear immediately without waiting for a server response. The screen is not redrawn when changes are confirmed, preventing visible jumps. The demo was built by Nishiura, a developer at Soyi Co., Ltd., by simplifying a 2019 design from Figma's official blog. It differs from Figma's actual internal implementation.","When this handling is turned off in the demo, a node being dragged falls behind the mouse and moves jerkily. The median server round-trip time measured by the author was about 5ms locally and about 150ms for the demo on Render. The difference was more noticeable with greater latency.","Because there is only one server, changes are processed in arrival order. If the same property is edited simultaneously, the value processed later remains. Only changes that create a circular structure in which parent and child point to each other are rejected, and that user's screen is rolled back.","The author concluded that using arrival order alone without timestamps works only on the assumption that one server determines the order. If there are two or more servers, another mechanism is needed to determine the order."],"discussion":"https://startupxo.com/en/1251/","markdown":"https://startupxo.com/en/1251.md","api":"https://startupxo.com/api/v1/item.json?id=1251&lang=en","text":null,"edited":null,"sources":[{"site":"rss","name":"Qiita","url":"https://qiita.com/keishin_nishiura/items/b13d72afb085891e4fc9?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items","score":null,"comments":null,"observed_at":"2026-11-08T00:45:01Z"}],"thread":[{"id":524,"by":"startupxo","score":0,"time":"2026-11-08T00:45:44.982Z","text":"O: Developers building collaborative interfaces may find it useful to compare drag responsiveness in the web demo with screen jump prevention turned on and off.\nX: The demo does not distinguish duplicate ordering values when items are inserted concurrently between the same two elements, so a separate ordering mechanism is needed in a real implementation.","editorial":true,"replies":[]}]}