Figmaプラグインを開発していると、時間のかかる処理（大量ノードのスキャンやCSV書き出しなど）では進捗状況を表示したくなります。
この記事では、Figmaプラグインでプログレスバーを実装する方法を解説します。
目次
Figmaプラグインのプログレスバーの実装方法
基本的には既存コードの reportProgress → figma.ui.postMessage → UI 側 window.onmessage という流れで、%を更新しています。
code.ts
今回はサンプルとして 100 件のダミー処理を 50ms 間隔で進める例を載せます。
figma.showUI(__html__, { width: 400, height: 200 });
figma.ui.onmessage = async (msg) => {
if (msg.type === "start-task") {
const total = 100;
for (let i = 1; i <= total; i++) {
// ダミーの重い処理（50ms待機）
await new Promise((resolve) => setTimeout(resolve, 50));
// 進捗を送信（%計算）
const percent = Math.floor((i / total) * 100);
figma.ui.postMessage({ type: "progress", percent });
}
// 完了通知
figma.ui.postMessage({ type: "done" });
}
};ui.html
<progress> はネイティブの進捗バー。value と max（ここでは100）を組み合わせて表示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body { font-family: sans-serif; padding: 16px; }
#progress { width: 100%; height: 20px; display: none; }
#status { margin-top: 8px; font-size: 12px; color: #666; }
button { width: 100%; padding: 8px 16px; }
</style>
</head>
<body>
<button id="startBtn">処理開始</button>
<progress id="progress" value="0" max="100"></progress>
<div id="status">待機中</div>
<script>
const progressBar = document.getElementById('progress');
const status = document.getElementById('status');
document.getElementById('startBtn').addEventListener('click', () => {
progressBar.style.display = 'block';
progressBar.value = 0;
status.textContent = '処理を開始しました...';
parent.postMessage({ pluginMessage: { type: 'start-task' } }, '*');
});
window.onmessage = (event) => {
const msg = event.data.pluginMessage;
if (!msg) return;
if (msg.type === 'progress') {
progressBar.value = msg.percent;
status.textContent = `処理中... ${msg.percent}%`;
} else if (msg.type === 'done') {
status.textContent = '完了しました！';
progressBar.style.display = 'none';
}
};
</script>
</body>
</html>manifest.json
登録時に使います。
{
"name": "プログレスバー付き処理サンプル",
"id": "progress-bar-sample",
"api": "1.0.0",
"main": "code.ts",
"ui": "ui.html",
"editorType": ["figma"],
"relaunchButtons": [],
}
まとめ
- Figmaプラグインで時間のかかる処理にはプログレスバーを付けるとUXが向上する
figma.ui.postMessageと<progress>要素を組み合わせれば簡単に実装可能
この方法を使えば、大規模なスキャン処理やCSV出力でも、ユーザーに分かりやすい進捗表示が可能になります。