Figmaの知識

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 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操作や保存処理などが動かないことがあります。ここでは開発入門の次に確認する実装上の注意点を整理します。 メ...

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

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

Figmaの外部スタイル参照を調べるには、適用されたstyle IDからスタイルを取得し、remoteがtrueか確認します。参照が見つかるレイヤーをCSVに並べれば、ライブラリの整理前に利用箇所を確認できます。 以下は読み取り用のプラグイン例です。現在のページと...

FigmaのノードIDを指定すると、対象のレイヤーを探して選択できます。このプラグインは現在の選択からIDを取得し、複数行のIDを受け取って同じページのレイヤーを選びます。別ページのIDや取得できないIDはスキップとして数えます。 ノードIDの表記と入力 ...

複数のFigmaレイヤーへのリンクをまとめる場合、ファイルキーとノードIDからURLを作れます。この自作プラグインは選択中のレイヤーの名前とURLをタブ区切りで表示し、一覧へコピーするためのものです。URLを生成しても、閲覧権限が追加されるわけではあり...

Figmaでデザインを共通化するときは、部品の構造、見た目の設定、単独の値、別ファイルへの共有を分けて考えます。ボタン全体にはコンポーネント、見出しの書式にはスタイル、色や余白の値にはVariablesを使います。ライブラリは、それらの共通設定や部品...

Figma Designでは、フレームに文字と図形を配置して画面を作ります。最初は1枚の画面を作り、同じ部品を増やし、画像を書き出すところまで進めると、どの機能を何のために使うか確認できます。 以下はFigma公式の案内に基づく操作ガイドです。右側の設定項...

Figmaのコメントを一時的に隠すには、Shift + Cを押します。もう一度押すと表示に戻ります。コメントの投稿や返信は残るため、デザインだけを見たいときに使えます。 対応済みのスレッドを整理する場合はResolve（解決）を使います。削除は復元できないの...