OSS探訪
GitHubでログイン

Figma Plugin Samples

GitHubで見るプロジェクトサイト

Figma・FigJamのPlugin APIをTypeScriptの公式サンプルで学び、UI・Dev Mode・variables・codegenを試す

OSS規模スコア 206.9OSS健全度 33更新ペース 0 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
1,853
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/03/23
ページ内ナビ

概要

plugin-samplesはFigmaが公開するPlugin APIのサンプル集です。Figma・FigJamで動く小さなPluginを題材に、キャンバス操作、Plugin UI、メッセージ連携、Dev Mode、variables、parameters、codegen、Reactを使ったbundlingなどを実コードから確認できます。

特徴と向いている用途

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

主な特徴

UIあり・なしの小さなPluginからAPIの使い方を確認する

図形生成、画像処理、文書統計、テキスト検索などのサンプルが分かれており、code.tsと必要に応じたui.htmlからPlugin APIとUIの役割を追えます。

出典：[1]

FigJam・Dev Mode・variables・codegenの例を用途別に探せる

FigJam固有node、Dev Mode、variablesのimport/export、parameter入力、codegenなど、Plugin APIの用途別サンプルが同じリポジトリにまとめられています。

出典：[1]

TypeScriptとFigma typingsを使ってサンプルをcompileする

ルートの依存関係にはTypeScriptとFigma Plugin typingsが含まれ、各サンプルのtsconfig.jsonから型付きAPIを使ってコードをコンパイルできます。

出典：[1][2]

向いている用途

Figma Plugin開発を公式の最小コードから学びたい場合に向く

Plugin APIの概念をドキュメントだけでなく実際のmanifest・TypeScript・HTMLと対応付けたい開発者や、新しいAPIの利用例を探したいチームに適します。

出典：[1][4]

導入前の確認

サンプルは本番品質を保証するテンプレートではない

READMEは各サンプルを「AS IS」で提供し、利用者自身が安全性や用途への適合性を確認するよう明記しています。そのまま製品コードへコピーせず、権限・ネットワークアクセス・エラー処理・依存関係を個別にレビューしてください。

出典：[1]

ローカルPluginの実行確認にはFigma desktop appが必要

公式Plugin Quickstartはローカルファイルから開発・テストするためFigma desktop appを前提にしています。ブラウザだけでサンプルをcompileしても、Pluginとしての実行確認は完了しません。

出典：[4]

参考にした公式資料

  1. [1]Figma plugin-samples README snapshot(2026-10-04)
  2. [2]Figma plugin-samples package metadata(2026-10-04)
  3. [3]Figma plugin-samples MIT license(2026-10-04)
  4. [4]Figma Plugin Quickstart Guide(2026-10-04)
編集部からの補足

このリポジトリは完成済みPluginの雛形ではなく、APIごとの学習・検証サンプルとして見るのが適切です。必要な例を小さく取り込み、権限・ネットワークアクセス・依存関係を自分のPlugin要件に合わせて見直してください。

3ステップで試す

  1. 1

    確認済みcommitのサンプル集を取得する

    Release tagがないため、2026-10-04に確認したcommitへ固定します。

    git clone https://github.com/figma/plugin-samples.git && git -C plugin-samples checkout 03131bef561eb25ee2b704e3b39e40acc70330e0
  2. 2

    依存関係を導入してBar Chartサンプルをコンパイルする

    ルートのTypeScriptとFigma typingsを使い、READMEで例示されているBar Chartをビルドします。

    cd plugin-samples && npm install && npx tsc -p barchart/tsconfig.json
  3. 3

    Figma desktop appへmanifestを読み込む

    Figma desktop appでplugin-samples/barchart/manifest.jsonを選択し、開発用Pluginとして実行します。

    Plugins > Development > Import plugin from manifest...
公式READMEで確認

成長

成長の推移 · 直近30日

1,853 Stars

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

開発アクティビティ

直近90日・週次

Commit（直近30日）
0
Open PR
12

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

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

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

GitHub Topics

  • figma
  • figma-plugin
  • figma-widget
  • hacktoberfest
  • sample-code
Stars
1,853
Forks
351
Watchers
86
Open Issues
7
Contributors
25
所有者種別
Organization
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/03/23
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか？