Figmaは、「ブラウザの中にブラウザを作る」ような、型破りなスタックで構築されている

from React at 60fps: improving scrolling comments in Figma

Before we dive into performance, it’s important to understand a bit about Figma’s technology. Figma is built on an unconventional stack—like our CTO Evan shared, we essentially made “a browser inside a browser.” Our design editor is powered by WebGL and WebAssembly, with some of the user interface implemented in Typescript and React. Unlike most static interfaces built in React, comments are dynamic, and they can pan and zoom as part of the canvas. As you scroll around the canvas, we anchor your comment to something we call a comment pin, which ensures that your feedback stays exactly where you want it.

パフォーマンスの話をする前に、Figma の技術について少し理解しておくことが重要です。Figmaは、CTOのエヴァンが話していたように、基本的に「ブラウザの中にブラウザを作る」ような、型破りなスタックで構築されています。私たちのデザイン・エディターは、WebGLとWebAssemblyで駆動し、ユーザー・インターフェースの一部はTypescriptとReactで実装されています。Reactで構築された多くの静的なインターフェースとは異なり、コメントは動的で、キャンバスの一部としてパンやズームを行うことができます。キャンバスをスクロールすると、コメントがコメントピンと呼ばれるものに固定され、フィードバックが必要な場所に正確に留まるようになります。