How Figma’s multiplayer technology works (2019)(figma.com)
figma.com
How Figma’s multiplayer technology works (2019)
https://www.figma.com/blog/how-figmas-multiplayer-technology-works/
62 comments
Just to say if you're interested in this kind of tech and are in the Bay Area, Sync Conf [0] just announced [1] its initial speaker lineup today and Arushi Bandi from Figma is one of the speakers.
[0]: https://syncconf.dev [1]: https://x.com/sync_conf/status/1957818840777122293
[0]: https://syncconf.dev [1]: https://x.com/sync_conf/status/1957818840777122293
This is still a hard problem today. Some hard tech was built for this. I'm excited for a world where this is more accessible and less hardcore than something like CRDTs (in terms of accessibility).
How have others noticed the world shifting in the past 6 years?
How have others noticed the world shifting in the past 6 years?
There are now a few sync engines that tackle this problem. Rocicorp Zero, Electric SQL, and one or two others. By no means a crowded space, but there are options now.
edit: links
edit: links
https://zero.rocicorp.dev/
https://electric-sql.com/Have you had a chance to use either of these yet? Electric looks like an obvious mature choice — curious if you think Zero's approach is compelling enough to be worth trying in alpha
Haven't used either of them. I met the guy behind Zero and he's super smart. He had been working on Replicache for a long time before he started this thing.
That being said, I haven't tried them, so can't really give an educated opinion. But I feel pretty confident in the domain expertise on the Zero team.
That being said, I haven't tried them, so can't really give an educated opinion. But I feel pretty confident in the domain expertise on the Zero team.
All the fundamentals have existed for at least 26 years. So, no, not really.
It's also really weird to use video game terminology and ignore the fact that all of the approaches used in this article have in fact, been done by major game engines, are readily documented in game development circles, etc.
It reads like an undergrad discovering game development for the first time. None of this is novel. It wasn't even novel for a web or desktop application to use.
It's also really weird to use video game terminology and ignore the fact that all of the approaches used in this article have in fact, been done by major game engines, are readily documented in game development circles, etc.
It reads like an undergrad discovering game development for the first time. None of this is novel. It wasn't even novel for a web or desktop application to use.
I also found it weird. They're basically doing what multiplayer games do but for a web app. Not the typical way you'd build your web backend but nothing actually new... not even using CRDTs, just inspired by them.
Yeah, if anything it’s obvious how you’d implement multiplayer for web apps.
By using multiplayer architecture…
And all their talk about state reconciliation? That’s just server authority…
By using multiplayer architecture…
And all their talk about state reconciliation? That’s just server authority…
Can you say more about which prior art you think overlaps here? We have a similar use case to Figma and are implementing a similar solution. I'm not particularly concerned whether the path we're following is novel but I am particularly concerned with whether there are gotchas along it that we should be watching out for, so if there are more mature solutions, we'd be interested.
Read QuakeWorld 1999, client-server prediction, Counter-Strike: Source lag compensation.
See also, “reconciliation.”
Also, debatably the article hints towards an incorrect implementation because they specifically mention sending events instead of user input.
By design, if you do this, you can create events that are supposed to eventually stop, but the user may drop packets and disconnect all the while you were processing an event that was never supposed to occur.
If you poll user input and experience loss, there’s no event to misfire.
This behavior manifests itself in games as a player that continues to walk forward despite having lost their connection to a server and is a indicator that a multiplayer server was implemented incorrectly.
See also, “reconciliation.”
Also, debatably the article hints towards an incorrect implementation because they specifically mention sending events instead of user input.
By design, if you do this, you can create events that are supposed to eventually stop, but the user may drop packets and disconnect all the while you were processing an event that was never supposed to occur.
If you poll user input and experience loss, there’s no event to misfire.
This behavior manifests itself in games as a player that continues to walk forward despite having lost their connection to a server and is a indicator that a multiplayer server was implemented incorrectly.
Multiplayer video games are the big one. There's no reason why you couldn't apply the same kind of synchronization to a web app. You'll just need to decide on an approach because not all games do it the same way. Most likely you'd want rollback netcode.
Indeed, Replicache works this way, using server reconciliation (one part of client-side prediction): https://doc.replicache.dev/concepts/how-it-works
[deleted]
I know Liveblocks.io has been making this very easy and accessible over the last few years. They recently introduced AI, and are promoting that of course, but as I understand it multiplayer collaboration (https://liveblocks.io/multiplayer-editing) is their meat and potatoes.
Not affiliated with Liveblocks, just aware of its existence.
Not affiliated with Liveblocks, just aware of its existence.
I work at Liveblocks—yes! Our founders were inspired by Figma and wanted to make it possible for others to build apps like this more easily. We provide our own sync engine, Storage, which is aimed at this use case.
Sharedb/racer solved this like 10yrs ago. You get synchronized snapshots, conflict resolition, diffs, change tracking..
There were some additional posts regarding the topic by same guy.
https://hachyderm.io/@evanw
Innovators like him, are very rare.
Innovators like him, are very rare.
Elixir's Phoenix LiveView + PubSub covers a lot of these bases out of the box.
PubSub and LiveView do go a long way. However, broadcast isn't sync and LiveView isn't appropriate for all applications.
Phoenix recently added Phoenix.Sync [0], a sync engine library explicitly designed [1] to address this. In combination with a front-end library like TanStack DB [2] it goes much further towards giving you a Figma/Linear-style sync engine out of the box [3].
[0] https://hexdocs.pm/phoenix_sync [1] https://www.youtube.com/watch?v=4IWShnVuRCg [2] https://electric-sql.com/blog/2025/07/29/local-first-sync-wi... [3] https://electric-sql.com/demos/burn
Disclaimer: Electric founder. Linking to my own talk / post / demo.
Phoenix recently added Phoenix.Sync [0], a sync engine library explicitly designed [1] to address this. In combination with a front-end library like TanStack DB [2] it goes much further towards giving you a Figma/Linear-style sync engine out of the box [3].
[0] https://hexdocs.pm/phoenix_sync [1] https://www.youtube.com/watch?v=4IWShnVuRCg [2] https://electric-sql.com/blog/2025/07/29/local-first-sync-wi... [3] https://electric-sql.com/demos/burn
Disclaimer: Electric founder. Linking to my own talk / post / demo.
A sync engine plus the always online nature of LiveView feels at odds with offline-first (which is often associated with sync engines). I wish LiveView had a better offline story.
[deleted]
Discussed at the time:
How Figma's Multiplayer Technology Works - https://news.ycombinator.com/item?id=21378858 - Oct 2019 (63 comments)
How Figma's Multiplayer Technology Works - https://news.ycombinator.com/item?id=21378858 - Oct 2019 (63 comments)
https://github.com/croquet/croquet makes all of this dead simple, without the need for any backend code/servers/databases/CRDTs &etc
https://multisynq.io if you want a worldwide reflector network.
https://multisynq.io if you want a worldwide reflector network.
If they don’t use CRDTs what will they put on their resume?
Doesn’t Google docs and MS 365 have very similar tech?
Yes and MSFT sells it on Azure as Signal iirc
Microsoft has multiple variants on Azure.
Web PubSub[0] is a low level, scalable web sockets backend.
SignalR[1] is a higher level tool on top of web sockets that has support for some higher level abstractions like groups.
Fluid Relay[2] is probably the one closest to this tech that any team could take "off the shelf" to achieve similar features using their open source Fluid Framework[3] client. My understanding is Fluid Relay powers some of Microsoft's own collaborative products. Not sure if other direct users of this service.
[0] https://azure.microsoft.com/en-us/products/web-pubsub
[1] https://azure.microsoft.com/en-us/products/signalr-service
[2] https://azure.microsoft.com/en-us/products/fluid-relay
[3] https://fluidframework.com/
Web PubSub[0] is a low level, scalable web sockets backend.
SignalR[1] is a higher level tool on top of web sockets that has support for some higher level abstractions like groups.
Fluid Relay[2] is probably the one closest to this tech that any team could take "off the shelf" to achieve similar features using their open source Fluid Framework[3] client. My understanding is Fluid Relay powers some of Microsoft's own collaborative products. Not sure if other direct users of this service.
[0] https://azure.microsoft.com/en-us/products/web-pubsub
[1] https://azure.microsoft.com/en-us/products/signalr-service
[2] https://azure.microsoft.com/en-us/products/fluid-relay
[3] https://fluidframework.com/
Genuinely curious, do a lot of people use these multiplayer features? I always thought of design as (mostly) a solo endeavour
We'll often do design reviews in figma, that usually means a few people looking at the same doc and potentially a few people making tweaks at the same time. Usually in separate bits of the doc at the same time.
Demos
Interesting article, but why does it randomly switch from dark to light mode once you scroll past a certain point?
It changes when I scroll to the animations.
My guess is they implemented dark mode, then discovered some legacy posts have videos with transparent backgrounds. As a quick fix, they decided to disable dark mode anytime someone scrolls down to a video.
Seems like one of those compromises to solve an 11th-hour bug.
My guess is they implemented dark mode, then discovered some legacy posts have videos with transparent backgrounds. As a quick fix, they decided to disable dark mode anytime someone scrolls down to a video.
Seems like one of those compromises to solve an 11th-hour bug.
The contents of this article are pretty old, but the static website's design has been revamped (I believe several times) since then. My guess it that the two may have just fallen out of sync in such a way that this particular oddity manifests.
The videos have white backgrounds, maybe it's to match that and keep the page cleaner.
Haha getting flashbanged halfway through
Because it's cool
...and why does the switch point have a small hysteresis?
Evan Wallace basically said screw it, I'm writing a custom WebGL renderer and multiplayer protocol, when everyone else was slapping together existing libraries. Most of us would have built a janky Electron app and called it a day. Instead they went nuclear on performance because that WAS their product differentiation.
Curious why you copy/paste your previous comments verbatim[1]. I was reading it and could have sworn I have read that exact comment before and was thinking it's dejavu.
[1] https://news.ycombinator.com/item?id=44438131
[1] https://news.ycombinator.com/item?id=44438131
Haha, I had the exact same feeling, like I had read the same comment before. Glad to know I’m not losing my mind :)
figma balls
[deleted]
[deleted]
[deleted]
[deleted]
Why is their CTO suspended on Twitter https://x.com/evanwallace ?
What happened? Is there a story behind this?
IIRC there was a period of time where you could get suspended for trivial things like mentioning twitter
Figma was born out of founder’s need to find a proof of concept test case for real-time collaboration JavaScript engine they created. They stumbled on this idea. Back then everyone used Sketch and wanted better prototyping and interaction design, and Figma appeared with its real time collaboration as major point which you used once just to try and never again.
Figma is one of the worst evils of corporate capitalism. The design oriented development is long ceases, mainly focusing on making new useless products because they need growth for shareholders. Considered a leader in UIUX design software while its own UIUX is abysmal, full of amateur level mistakes, inconsistencies and bad patterns. We have now a generation of designers that take Figma’s UX as an example to learn from and implement in their designs.
Figma is one of the worst evils of corporate capitalism. The design oriented development is long ceases, mainly focusing on making new useless products because they need growth for shareholders. Considered a leader in UIUX design software while its own UIUX is abysmal, full of amateur level mistakes, inconsistencies and bad patterns. We have now a generation of designers that take Figma’s UX as an example to learn from and implement in their designs.
> Figma was born out of founder’s need to find a proof of concept test case for real-time collaboration JavaScript engine they created. They stumbled on this idea.
citation needed?
The article discusses adding collaboration to an existing application, the opposite of what this comment asserts.
citation needed?
The article discusses adding collaboration to an existing application, the opposite of what this comment asserts.
I think player is a misnomer here. Multiuser editing would be better.
Also websockets are complicated. So are WebRTC or HTTP/2+ solutions.
HTTP/1.1 Comet-Stream is still the silver bullet even when ISPs try to block them, it's the protocol that goes through best (99.6% in 2022)
I'm considering doing a multi-socket solution: 80 (HTTP Comet-Stream) and 3724 (Binary TCP because WoW).
https://multiplayeronlinestandard.com
Also websockets are complicated. So are WebRTC or HTTP/2+ solutions.
HTTP/1.1 Comet-Stream is still the silver bullet even when ISPs try to block them, it's the protocol that goes through best (99.6% in 2022)
I'm considering doing a multi-socket solution: 80 (HTTP Comet-Stream) and 3724 (Binary TCP because WoW).
https://multiplayeronlinestandard.com
They've likened their product to a game engine, so multiplayer seems appropriate.
1. https://www.youtube.com/watch?v=WxK11RsLqp4&t=2169s
2. https://linear.app/now/scaling-the-linear-sync-engine
Also see this overview of related tech here:
3. https://gist.github.com/pesterhazy/3e039677f2e314cb77ffe3497...
And c.f. automerge from ink & switch:
4.https://automerge.org/blog/