Figma API・プラグイン

Photopea（フォトピー）は、ブラウザで使える無料の画像編集ソフトです。PhotoshopのPSDをそのまま開いて編集でき、Figmaの.figファイルも開けます。Figmaのデザインを「PSDで納品してほしい」と言われたときや、受け取ったPSDをFigmaで使いたいときに便利...

FigmaとPSDを変換する方法として、ブラウザで使える画像編集ソフトのPhotopeaと、FigmaプラグインのPSD Porter for Figmaを比べました。Figma → PSDは、同じFigmaのデータを両方でPSDにし、Photoshopで開いた見た目をFigmaが描いた画像と比べています。PSD...

PSD Porter for Figmaは、FigmaのフレームをレイヤーのままPSDに書き出し、PSDをFigmaのフレームとして読み込むプラグインです。無料で使えます。変換はプラグインの中だけで行い、ファイルを外部に送信しません。 この記事では、変換できる要素、手順、変...

Figma for VS Codeは、VS Codeの中でデザインを開き、寸法・コード候補・アセット・コメントを確認する公式拡張機能です。利用には有料プランのFull席またはDev席が必要です。 AIエージェントをFigmaへ接続するMCPとは、設定も役割も異なります。 この記事...

Figmaのウィジェットは、Figma DesignやFigJamのキャンバスに配置して使う操作部品です。共同編集者が同じ表示と状態を共有するため、進捗の表示や投票などに使えます。ファイル内の処理を自動化するプラグインとは、表示場所と状態の管理方法が異なります...

自分で作ったFigmaプラグインは、Figmaのデスクトップアプリから申請して、Communityに公開できます。この記事では、実際にプラグイン「PSD Porter for Figma」をCommunityに申請したときの手順と、審査中・更新・データセキュリティの審査で分かったこと...

Tokens StudioはFigmaでデザイントークンを扱うプラグイン、Style DictionaryはJSONのトークンをCSSなどへ変換するツールです。Tokens Studioの形式を扱う場合は、sd-transformsを登録し、設定にtokens-studioのpreprocessorも指定します。 この記事ではGi...

FigmaのWebhooks V2は、コメントやファイル更新などのイベントを、指定したサーバーへHTTP POSTで通知する機能です。FILE_UPDATEは編集のたびに即時通知する機能ではなく、編集が止まってから30分以内に発生します。 コメント通知にはFILE_COMMENTを選びま...

Figmaのファイルに付いたコメントは、REST APIのGET /v1/files/:key/commentsで取得できます。レビュー内容を一覧化する場合は、コメント本文だけでなく、返信先のparent_idと解決日時を残すと、会話のつながりを確認しやすくなります。 この記事では、必...

Figma MCPサーバーは、AIクライアントへデザインの構造・画像・Variables・コンポーネント情報などを提供する仕組みです。最初はFigmaが推奨するリモート版を検討し、Figma上で選択中のレイヤーを参照したい場合はデスクトップ版を選びます。 リモート版で...

Figma Code Connectは、Figmaのコンポーネントとリポジトリ内の実装を対応付ける機能です。UI版はコードの場所を接続し、CLI版はプロパティに応じた実装例をDev ModeのInspectに表示できます。 UIで接続するだけで、実装スニペットがInspectに表示されるわ...

FigmaのVariablesは、Variables画面のExport mode／Export modesからJSONへ書き出せます。画面で書き出すJSONと、Plugin API・REST APIで取得した変数オブジェクトは同じ形式ではありません。 APIの取得結果をそのまま保存しても、DTCG形式のデザイントー...

Figmaのフレームやコンポーネントを画像として書き出すREST APIは、GET /v1/images/:keyです。複数のnode IDをidsへまとめて指定し、返ってきた画像URLから別途ダウンロードします。APIの応答自体は画像ファイルではありません。 この記事は2026年10月3日...

Figmaプラグインは、レイヤーの読み取りや変更をJavaScriptで行うプログラムです。TypeScriptで書いた処理はJavaScriptへコンパイルし、manifest.jsonに実行するファイルを指定します。画面を付ける場合は、UIと処理の間でメッセージを送受信します。 以下...

Figma REST APIでコンポーネントを取得したとき、childrenが空配列でも「削除済み」とは断定できません。空の有効なコンポーネント、取得深度不足、取得できないノードを分けて確認します。この記事では元データを残したまま確認候補を抽出します。 空・未...

Figmaのインスタンスに独自のレイヤー名を付けていると、参照元のコンポーネント名と異なることがあります。このプラグインは差分を一覧に出し、確認後にインスタンス側の名前を変更します。意図的な別名も差分になるため、検出したものをすべて誤りとは扱...

Figmaの個人アクセストークン（PAT）は、作成したユーザーの権限でREST APIを呼び出す認証情報です。ファイルの構造を取得する個人スクリプトなどに使います。取得後は、必要なスコープ、対象ファイルへのアクセス、有効期限をそれぞれ確認してください。 ...

Figmaのコンポーネントやインスタンスを一覧にするには、REST APIでファイルのノードを取得し、Google Apps Script（GAS）で行データへ変換します。名前、node ID、部品のキー、文字情報を並べれば、デザインの棚卸しに使えます。 最初は小さなファイルか...

開いているFigma DesignファイルのローカルスタイルをCSVにまとめます。カラー、テキスト、エフェクト、レイアウトグリッドを一覧化し、名前や定義を確認するためのプラグインです。ライブラリ全体やVariablesの書き出しとは対象が異なります。 出力する情...

同じ部品へ複数のインスタンスを差し替えるときは、置換先と置換対象を分けて登録します。このプラグインは登録したインスタンスにswapComponentを実行し、成功・失敗の件数を通知します。選択するノードが部品内部のレイヤーでも、最も近い親インスタンス...

ファイル内のコンポーネントをCSVへ出力する場合、出力処理だけでなく、検索自体の負荷も確認する必要があります。この例ではページを順に読み込み、レイヤーを200件単位で走査してUIへ進行状況を送ります。コンポーネントセット内のバリアントも1行ずつ出...

Figmaプラグインのメインコードと、showUIで開くHTML画面は、使えるAPIが異なります。ブラウザー用のコードをそのままメイン側へ貼ると、DOM操作や保存処理などが動かないことがあります。ここでは開発入門の次に確認する実装上の注意点を整理します。 メ...

Figmaプラグインで時間のかかる処理をする場合は、メインコードから完了件数をUIへ送り、HTMLのprogress要素で表示できます。進捗の表示と処理の分割を組み合わせ、利用者が状態を確認できるようにします。 この記事の処理は、100件を50msずつ待つ説明用の...

Figmaの情報を外部スクリプトから取得するならREST API、開いているファイルのレイヤーを作成・編集するならPlugin APIが基本です。画像の書き出しなど、両方でできる作業もあるため、実行場所と変更したい対象から選びます。 この記事はFigma公式ドキュメ...