Figma MCPでカスタムフォントが使えるようになったので、バナー作成を試してみた
はじめに
Figmaの公式ブログで、Figma MCPの活用事例や新機能が紹介されていました。
- Figma Slidesでデッキを作成・更新する
- ライブデータからFigJamボードを生成する
- Figma Makeでデザインをコードとキャンバスの間で行き来させる
- Figmaエージェントと作業を分担する
あわせて、アップロードしたカスタムフォントへの対応や、画像を書き出すdownload_assetsといった新機能も紹介されており、本記事では、Claude Codeに接続したFigma MCPで、カスタムフォントを使ってバナーを作り、download_assetsでPNGとSVGに書き出すまでの手順をまとめます。
今回扱う新機能
今回は以下の2点を試していきます。
- カスタムフォント対応: Figmaアカウントにアップロードしたフォントを、MCPやエージェントから指定して使う。
- 画像書き出し（
download_assets）: 指定したノードを PNG / JPG / SVG / PDFで書き出せる。
これまでFigma MCPが使えるフォントは、Figmaの標準フォントライブラリに限られていました。今回の更新でアカウントにアップロードしたフォントも指定できるようになっています。
なお、これまで通りMacにインストール済みのフォントや Adobe Fontsでアクティベートしたフォントは、MCPからは見えません。
download_assetsは、get_screenshotがノードの見た目をプレビューとして返すのに対し、書き出した画像ファイル（と、ノード内に含まれる元画像）を返します。書き出しフォーマットや倍率も指定できます。
カスタムフォントを登録する
カスタムフォントをFigmaにアップロードします。これはどのプランでもアカウント設定から登録可能です。
フォントをアップロードする
Figmaのファイルブラウザで、右上のアバターからSettingsを開き、Accountタブの「Your uploaded fonts」にフォントファイルを追加します。
アップロード時に、そのフォントの権利関係を確認するポップアップが出るので、ライセンスがOKならチェックを入れアップロードします。今回はOFL（SIL Open Font License）の Mona Sansを使っています。
アップロードが完了すると、自分が追加したフォントが表示されているのを確認できます。
MCPから見えるか確認する
アップロードしたフォントがMCPから見えるかは、Plugin APIの listAvailableFontsAsync() で確認できます。Claude CodeからFigma MCPのuse_figma経由で、以下のコードを実行します。
const fonts = await figma.listAvailableFontsAsync();
const mona = fonts.filter(f => f.fontName.family.includes('Mona Sans'));
return mona.map(f => `${f.fontName.family} / ${f.fontName.style}`);
Mona Sansの場合、次のように全ウェイトが返ってきました。
Mona Sans / Black
Mona Sans / Bold
Mona Sans / ExtraBold
Mona Sans / ExtraLight
Mona Sans / Light
Mona Sans / Medium
Mona Sans / Regular
Mona Sans / SemiBold
ここに表示されているのを確認できれば、あとはバナー作成のときにそのまま指定して使用できます。
追加したフォントでバナーを作成する
フォントが使えることを確認できたので、バナーを作っていきます。今回はOGPを想定した1200×630のフレームに、見出しはMona Sans、日本語はNoto Sans JPを使用しています。
Claude Codeで以下を指定します。
アップロードした Mona Sansを見出しに、日本語はNoto Sans JPを使って、1200×630 のOGP風バナーを作って
以下が出力されたバナーです。見出しにMona SansのBlack、その下にNoto Sans JPが使われています。
download_assetsで書き出す
作ったバナーを download_assetsで書き出します。
欲しいフォーマットと倍率、保存先を伝えれば、そのディレクトリに書き出してくれます。今回はPNGとSVGの両方を書き出しました。
先ほどにつづけて以下のように指定します。
このバナーを PNG（2倍）と SVG で ~/Desktop に書き出して
PNGは倍率2倍を指定したので、1200×630の2倍にあたる2400×1260で書き出されました。
パラメータは次のとおりです。
| パラメータ | 内容 | 今回の指定 |
|---|---|---|
fileKey |
対象ファイルのキー | バナーを作ったファイル |
nodeId |
書き出すノードの ID | バナーのフレーム |
defaultFormat |
書き出しフォーマット | png / svg |
defaultScale |
書き出し倍率 | 2（PNG のとき） |
まとめ
Figma MCPのカスタムフォント対応で、これまでFigmaの標準フォントしか使えなかったところが、使いたいフォントを事前にアップロードしておけば、MCPやエージェントからそのフォントを指定して使えるようになりました。
またdownload_assetsを使えば、作ったデザインをPNG / SVGなどで書き出すことができます。
この二つを組み合わせると、Figmaを開かずにAIエージェントへ指示するだけで、デザインの作成から書き出しまでを一続きにできます。日常的なバナーやOGP画像の作成のような、繰り返し発生する作業の効率化や自動化もやりやすくなりそうです。
