Figma Widget Samplesとは？公式Widget APIサンプル集

ページ内ナビ

概要

Figma Widget SamplesはFigma公式のWidget APIサンプル集です。Reactに近い宣言的な書き方でWidgetを描画し、同期状態、property menu、ユーザー情報、複数人での更新、iframe UIとの通信、document changeなどを小さなサンプルから確認できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-04

主な特徴

宣言的なcomponent APIでcanvas上のWidgetを組み立てる

WidgetはFigma・FigJam上のnodeとして表示され、FrameやTextなどのcomponentとevent handlerを組み合わせてUIと操作を定義します。Reactのコンポーネントモデルに近い構成を小さなサンプルで確認できます。

出典：[1][3]

同期状態と複数人編集の実装例を確認する

CounterではuseSyncedState、TableやMultiplayer CounterではuseSyncedMapを使い、複数人が同じWidgetを操作する場合の状態共有を例示しています。

出典：[1]

property menu・user情報・iframe UI・document changeまで用途別に試す

property menu、figma.currentUser、active users、UIとのmessage連携、document change listenerなど、Widget APIの異なる機能をサンプルごとに分けて確認できます。

出典：[1]

向いている用途

Widget APIを公式の最小コードから理解したい開発者に向く

FigmaやFigJam向けWidgetを作り始めるときに、manifest、TypeScript/JSX、同期状態、build構成を実際のサンプルと対応付けて学びたい場合に適します。

出典：[2][3]

導入前の確認

サンプルは古いsnapshotなので現在のWidget API docsと照合する

このリポジトリの確認済み最新commitは2022年のものです。現在のWidget APIには追加・変更があるため、サンプルをそのまま起点にせず、Figmaの現行developer docsと最新typingsも確認してください。

出典：[1][3]

開発用Widgetの実行にはFigma desktop appからmanifestを読み込む

サンプルをビルドしただけではWidgetの動作確認は完了しません。Figma desktop appのDevelopment menuからmanifestを読み込み、実際のFigmaまたはFigJamファイル上で操作を確認します。

出典：[2][3]

参考にした公式資料

[1]Figma Widget Samples README snapshot(2026-10-04)
[2]Widget Counter getting started(2026-10-04)
[3]Figma Widget API documentation(2026-10-04)

編集部からの補足

このリポジトリはAPI学習用の公式サンプルとして有用ですが、確認済み最新commitは2022年です。現在のWidget APIを実装するときは、サンプルの構成を参考にしつつ現行developer docsとtypingsを正本として確認してください。

3ステップで試す

1
確認済みcommitのWidgetサンプル集を取得する
Release tagがないため、確認済みの最新commitへ固定します。
git clone https://github.com/figma/widget-samples.git && git -C widget-samples checkout 881d9524b8d3413539ebd839218667249f15370f
2
Counterサンプルの依存関係を導入してビルドする
dist/code.jsを生成し、manifestから読み込める状態にします。
cd widget-samples/WidgetCounter && npm ci && npm run build
3
Figma desktop appへWidgetを読み込む
widget-samples/WidgetCounter/manifest.jsonを選択し、FigmaまたはFigJam上でCounter Widgetを実行します。
Widgets > Development > Import widget from manifest

公式READMEで確認

成長

成長の推移 · 直近30日

141 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 2

開発アクティビティを蓄積中です。

Built with

TypeScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

Stars: 141
Forks: 50
Watchers: 64
Open Issues: 5
Contributors: 4
所有者種別: Organization
主要言語: TypeScript
リポジトリ最終更新: 2024/02/27