Figma MCPで画像を書き出したら、親フレームで切れて背景色まで焼き込まれた。一時ページに複製して解決

Figma MCPで、デザインの中の画像を書き出しました。
出てきたのは、親フレームの範囲で切れた画像でした。
しかも、透過のはずの部分に、親の背景色が焼き込まれています。使えません。

🎥 この記事の内容は動画でも解説しています。

先に結論です。
自分の環境では、download_assets・get_screenshot・Plugin APIのexportAsyncの3つとも、同じ結果になりました。
解決は、書き出す部品を一時ページに複製して、ページの背景を透明にしてから書き出す方法です。

何が起きたか

3つのことが、同時に起きました。

書き出したかったのは、スマホ幅(390px)のフレームの中にある、横スクロール用の地図の画像で、この地図は、フレームの幅からはみ出す910px幅です。

書き出した画像は、次のようになりました。

• 地図が、親フレームの390px幅で切れていた
• 透過のはずだったタイトルの部分が、親フレームの背景色の紫でベタ塗りになっていた
• 空白の部分に、ページのキャンバスの色(#F5F5F5)まで描き込まれていた

3つの書き出し手段を、順に試した

原因を探りました。
自分がClaude Codeに頼んで、Figma MCPから次の3つを試してもらいました。

1. download_assets(アセットの書き出し)
2. get_screenshot(スクリーンショットの取得)
3. Plugin APIのexportAsync(ノードをレンダリングして書き出す)

3つとも、同じ結果です。
子のノードを親フレームの範囲で切り、親の背景色とページのキャンバスの色まで、画像の中に描き込んでいます。
手段を変えても、直りませんでした。
原因は、特定できていません。

直し方：一時ページに複製して、ページの背景を透明にする

効いたのは、この4手順です。

1. 書き出したいノード(今回は、地図とタイトル)を、一時的に作ったページに複製する
2. その一時ページの背景(backgrounds)を、不透明度0にする
3. 複製したノードを書き出す
4. 一時ページを削除する

複製した先には、親のフレームがありません。ページの背景も透明です。
実際にこの手順で書き出すと、親の背景色もキャンバスの色も入りませんでした。理由は、確かめていません。
はみ出していた910px幅の地図も、そのまま書き出せました。

この方法を使うときの注意2点

1つ目は、Figmaのファイルに書き込む操作を含むことです。
ページを作って消すので、実行する前に、自分が内容を見てからOKを出しました。

2つ目は、書き出した画像を、開いて確かめることです。
以前、白い枠の画像を、中身を見ずに「時刻表」と名前を付けたことがあります。開くと、実際は経路図でした。
書き出しの結果は、位置や大きさで推測せず、画像を開いて、背景色の混入と切れ、そして中身を確かめています。

試すときの確認ポイント

1. 書き出した画像は、背景色が入っていないか、はみ出し部分が切れていないかを、開いて確認する
2. はみ出す部品や透過が要る部品は、一時ページに複製して、ページの背景を透明にしてから書き出す
3. Figmaファイルに書き込む手段は、実行前に内容を確認してから許可する