新着記事

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

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

Figmaの標準インポートに.xdと.aiは含まれていません。Illustratorから編集可能なベクターを移す場合はSVG、見た目を1枚の画像として残す場合はPNG・JPGを使います。PDFは、Figmaの標準インポートでそのまま編集できる形式として案内しません。 この記事は...

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からPNG・JPGを2倍の寸法で書き出すには、対象のレイヤーやフレームを選び、Exportのスケールに 2x を指定します。幅300px・高さ200pxの範囲なら、計算上の出力寸法は600×400pxです。 表示したい大きさと、書き出す画像のピクセル数を分けて考えると...

Figmaの変数（バリアブル）でモードを切り替えられない場合は、モードの作成条件、対象プロパティへの適用、親子の指定、ライブラリの更新を分けて確認します。モードを選べるのに見た目が変わらないときは、プランの確認だけで終えず、参照先と値を調べて...

Figmaの更新を追うときは、まず自分が使う機能の変更を確認します。2026年9月にはAuto layoutの縦方向Wrap、MotionのLottie出力、色のVariablesの不透明度などが更新されています。 このページは、2026年10月3日に確認した公式リリースノートと配信データ...

Figma Designを初めて使う場合は、フレームを作り、文字と図形を置き、余白を調整し、画像として書き出す順に進めると、ひとつの画面を作る操作を確認できます。共通部品や複数画面の管理は、その後に学びます。 このページでは、初めての画面制作、素材の...

Figmaの作業効率を上げる周辺機器を優先度順に解説。PCに予算をかけない代わりに効くモニターの広さ、ノートPC中心ならドッキングステーション、スクロールが多いFigmaで効くマウス、お金をかけずにできる改善まで。

Figma用PCの選び方を解説。ブラウザ上で動くため高価なPCが不要な理由、メモリ16GBで足りる根拠、重いときの原因はファイルサイズやタブの開きすぎであること、デスクトップ版の利点まで。

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

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

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

Figma for Educationは、対象の学生・教育者が認証を受けて利用する無料の教育向け制度です。申請経路は学校種別で異なります。高校・高等教育は学校発行メールで申請し、ブートキャンプは講座管理者による認証を受けます。 以下は2026年10月3日に確認した...

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

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

Figmaのライブラリを修正したのに画面が変わらない場合は、共有元の公開、利用先の更新受け入れ、インスタンスの参照先と上書きを順に確認します。ライブラリを入れ子にしたことだけで、不具合が起きたとは判断できません。 どこまで更新が届いているか確...

Figmaのオーバーライドは、メインコンポーネントとの関係を保ったまま、インスタンスごとに文字や色などを変える操作です。共通部品の構造を使い、ボタンのラベルだけを「保存」「送信」に変えるような場面で使います。 この記事では、画面上の上書きとリ...

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

配置済みのボタンやアイコンを別の部品へ変えるときは、Figmaのインスタンスの入れ替え（Instance swap）を使います。ファイル全体のライブラリ移行や、同じ部品の更新受け入れとは異なる操作です。 目的に合う操作を選ぶ 目的選ぶ操作配置済みの部品を別...

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

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