Figmaがブラウザなのにサクサクなのはなぜかをエンジニア目線で解説してみた

Figmaを使っていて「なんでブラウザアプリなのにこんなに速いんだろう」と思ったことはありませんか？

調べてみたら、けっこうおもしろい構成になっていました。

Figma = ブラウザ上の高速グラフィックスアプリ

Figmaの技術スタックをざっくり整理するとこうなります。

UI部分：JavaScript
描画エンジン：C++ → WebAssembly → GPU で高速実行
通信・データ管理：Node.js（バックエンド）

ポイントは「描画エンジン」の部分です。

なぜ速いのか

ブラウザアプリが重くなりがちな原因のひとつは、JavaScriptがシングルスレッドで動くことです。複雑な描画処理をJavaScriptだけでやろうとすると、どうしても限界があります。

FigmaはここにC++で書かれたエンジンをWebAssemblyにコンパイルして使っています。

WebAssemblyはブラウザ上でネイティブに近い速度で動くバイナリ形式のコードです。さらにGPUを使った描画（WebGL）と組み合わせることで、重いグラフィック処理をブラウザ上でもサクサク実行できるようになっています。

「なぜその技術を選んだのか」を知ると理解が深まる

「FigmaはJavaScriptで動いてる」という事実だけ見ると「え、それで速いの？」ってなりますよね。

でも「描画エンジンはC++→WebAssemblyで、GPUに渡している」という背景を知ると、「なるほど、そこは速い部分を別の技術で補ってるのか」と腑に落ちます。

技術選定って、こういう「どこをどの技術で解決するか」の組み合わせなんだなと改めて感じました。

コンテンツや実装を作るときも、「なぜこの技術を選ぶのか」という視点を持っておくと、説明力がぐっと上がるかもしれません。

関連記事

• プロWebデザイナーが語る「Figmaのレイヤー設計」とAIが変えるデザイナーの未来