はじめに

みなさんは、Figma Buzz 使っていますか？

2025年のConfigで発表されたBuzzですが、Qiitaの中では、Qiita ConferenceやQiita Advent CalendarのクリエイティブにFigma Buzzを使ってます。

テンプレートからテキスト変更するだけの画像作成などが楽になるFigma Buzzですが、実はPluginを作れるのを知っていますか？

Figma Buzzは、2025年の10月にPluginが作れるようになり、Figma DesignやFigjamのように開発をすることができます。
ただ、Figma BuzzのPluginは、ほかのプラグインと比べて、「できること」「できないこと」があります。

そのため、記事では、Figma BuzzのPluginの特徴や作り方などを紹介しようと思います。

Buzzのプラグインと他のプラグインの違い

⚪︎ プラグインの表示形式

Figma Buzzは、プラグインを表示する位置が特徴的です。
以下の画像のように左サイドバーで固定されている形式とポップアップで表示する形式があります。

左サイドバー	ポップアップ

上記のように、表示形式が2パターンあるため、下記の2点に注意して、Pluginを作成する必要があります。

Pluginのiframe内でレスポンシブ対応すること
コンテンツは、縦方向にデザインし、スクロールできるようにすること

⚪︎ Figma BuzzのView

Figma BuzzのViewには、Asset viewとGrid viewがあります。
以下の画像のようにAsset viewでは、一つのアセットにフォーカスした表示になり、Grid viewでは、2次元レイアウトで、複数のアセットを表示することができます。

Asset view	Grid view

Viewの状態を取得する

PluginでViewの状態を取得する場合は、次のコードで取得できます。

code.ts

const currentView = figma.viewport.canvasView 
//'grid' | 'single-asset'

Viewの状態を変更する

PluginからViewの状態を変更する場合は、次のコードで変更できます。

code.ts

// Asset view にしたい場合
figma.viewport.canvasView = 'single-asset'

// Grid view　にしたい場合
figma.viewport.canvasView = 'grid'

Viewが変わった時のイベントを取得する

PluginでViewが変わったことを取得するイベントは、次のコードになります。

code.ts

figma.on('canvasviewchange', (event) => {
  // 処理を記述する
})

⚪︎ キャンバスの操作

`figma.getCanvasGrid()`

現在のキャンバスを2次元配列として取得したい場合は、figma.getCanvasGrid()を使います。

const grid = figma.getCanvasGrid()

`figma.setCanvasGrid(grid)`

キャンバスの2次元レイアウトをセットしたい場合は、setCanvasGrid(grid) を使います。
引数のgridはセットしたい2次元配列を示しています。

const grid = figma.getCanvasGrid()
figma.setCanvasGrid(grid)

`figma.createCanvasRow(index?)`

キャンバスの２次元レイアウトに新しい行を追加したい場合は、figma.createCanvasRow(index?)を使います。
引数のindexは追加したい行の位置を示しています。

figma.createCanvasRow(1)

`figma.moveNodesToCoord(nodeId[], row?, column?)`

特定ノードを特定のグリッド位置に移動したい場合は、figma.moveNodesToCoord(nodeId[], row?, column?) を使います。
引数には、移動したいノードのIDと、移動したい位置を渡します。

const focusedNode = figma.currentPage.focusedNode // フォーカスしているノードを取得
figma.moveNodesToCoord([focusedNode.id], 1 ,1 ) // 2行目2番目にノードを移動

⚪︎ Asset Viewでフォーカスしているノード

フォーカスしているノードを取得する

Asset Viewでフォーカスしているノードを取得する場合は、以下のコードで取得できます。

code.ts

const focusedNode = figma.currentPage.focusedNode

フォーカスしているノードを変更する

Asset Viewでフォーカスしているノードを変更する場合は、以下のコードで変更できます。

code.ts

figma.currentPage.focusedNode = someNode

Buzz固有の操作

新しいフレームを作成する

新しいフレームを作成したい場合は、以下のコードから作成できます。

code.ts

// frameを作成する
const frame = figma.buzz.createFrame(0, 0) // row 0, column 0

// Asset typeを設定する
figma.buzz.setBuzzAssetTypeForNode(frame, 'INSTAGRAM_STORY')

Asset Typeを取得する

frameのAsset Typeを取得したい場合は、以下のコードから作成することができます。

code.ts

const assetType = figma.buzz.getBuzzAssetTypeForNode(frame)

frameのコンテンツを取得する

frameのコンテンツを取得したい場合は、以下のコードから取得することができます。

code.ts

// テキスト要素を取得したい時
const textFields = figma.buzz.getTextContent(frame)

// メディア要素を取得したい時
const mediaFields = figma.buzz.getMediaContent(frame)

フレームの大きさを変更したい時

フレームの大きさを変更したい時は、以下のコードから取得することができます。

code.ts

figma.buzz.smartResize(frame, 1080, 1080)

ベストプラクティス

ノードの追加について

キャンバスに追加されるノードは、必ずグリッドに追加される必要があります。

ノードを複製した場合など、そのノードをキャンバス内の適切な位置に移動させてください

code.ts

const cloned = node.clone();

if (figma.editorType === 'buzz') {
  figma.moveNodesToCoord([cloned.id], row, col);
}

画像の挿入について

フレームに画像を挿入する際は、トップレベルのフレームに直接画像ファイルを設定しないでください。

画像を挿入したい場合は、画像ファイルを設定した長方形のノードを作成し、それをトップレベルのフレームの子要素として挿入してください。

code.ts


const buzzAsset = figma.currentPage.selection[0];

const rectangleNode = figma.createRectangle();

const image = figma.createImage(imageBytes); // your image data as Uint8Array
rectangleNode.fills = [{
  type: 'IMAGE',
  imageHash: image.hash,
  scaleMode: 'FILL'
}];

rectangleNode.resize(400, 300);
buzzAsset.appendChild(rectangleNode);

セットアップ方法

こちらの内容を参考に、プラグインをセットアップしてください。

Figma Design の Pluginとの差分は、manifest.jsonのeditorTypeにbuzzを追加するだけです。

manifest.json

{
  ...
  "editorType": [
    "buzz"
  ],
  ...
}

まとめ

この記事では、Figma BuzzのPluginのの特徴や作り方などを紹介しました。

この記事を参考にFigma Buzz のプラグインを作ってみてください。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。