Figma 操作・Tips
Figma 単体の操作術 — 一括変更・書き出し・日本語化・UI の整え方など。
21 件の記事
Figma オートレイアウト（Auto Layout）の使い方 — 縦・横・グリッドの 3 フロー、折り返し、Hug / Fill の設定
Figma オートレイアウト（Auto Layout）の使い方を、追加と解除、方向・間隔・余白・配置の基本設定、Hug contents / Fill container / Fixed と最小・最大幅、折り返し（Wrap）、2025 年に加わったグリッドフロー、Ignore auto layout（旧 Absolute position）、うまくいかないときの対処まで実用観点で整理します。
Figma のレイアウトグリッド（レイアウトガイド）の使い方 — 列・行・グリッドの設定と表示、Auto Layout との違い
Figma のレイアウトグリッド（2025 年に「レイアウトガイド」へ改名）の使い方を、Grid / Columns / Rows の 3 タイプの設定、表示/非表示ショートカット、スタイルとして再利用する方法、Auto Layout・Constraints との違い、XD から移行したファイルでの再設定まで実用観点で整理します。
Figma でコンポーネントを解除する方法 — インスタンスの切り離し・削除との違い
Figma でコンポーネントやインスタンスを解除（Detach instance）する手順を、標準機能で解説。右クリックやショートカットでマスターとのリンクを切り離す方法、よく混同される「削除」との違い、インスタンスの入れ替え・画像差し替え、解除後に再びコンポーネント化する方法まで。Adobe XD から移行したコンポーネントの整理にも役立ちます。
Figma で画像をベクター化する方法 — 自動トレース・SVG 書き出し・PNG→SVG の使い分け
Figma で画像をベクター化したいときの手順を、やりたいこと別に整理した実用ガイド。写真やロゴ PNG を編集可能なパスに変換する（自動トレース）、Figma 上のシェイプを SVG で書き出す、PNG を SVG にしたい、の 3 パターンを区別し、ラスター画像の自動トレースには Figma 標準機能では足りずプラグインや外部処理が要る理由を解説します。さらに XD から移行したベクター・パスを保ったまま扱う方法までまとめます。
Figma でマスクをかける方法 — クリッピングマスク・画像マスク・図形での切り抜き
Figma でマスクをかける手順を、やりたいこと別に整理した実用ガイド。図形で画像を切り抜く基本のマスクから、アルファ・ベクター・ルミナンスの 3 つのマスク種類の違い、テキストやグループをマスクにする方法、マスクの解除・編集、うまくいかないときの対処までまとめます。Illustrator や XD のクリッピングマスクとの対応、そして XD から移行したマスクが崩れるときの備えも解説します。
Figma でレイヤー名を一括変更する方法 — リネーム機能で連番・置換も
Figma でレイヤー名・フレーム名を一括変更する手順を、標準の Rename Layers 機能で解説。複数レイヤーをまとめてリネーム、名前の一部を検索置換（Match / Replace）、連番の付与、正規表現での並べ替えまで。XD から移行した自動生成された名前の整理にも役立ちます。
Figma でテキストを編集する方法 — 編集・検索と置換・一括変更
Figma でテキストを編集する基本から、フォント・サイズ・色の変更、標準機能の検索と置換（Find and replace）、複数テキストの一括変更、折り返しの調整までを用途別に整理した実用ガイド。XD から移行したテキストの注意点もまとめます。
Figma で図形を変形する方法 — 拡大縮小・回転・反転と自由変形
Figma で図形を変形する手順を用途別に整理した実用ガイド。標準でできる拡大縮小（Scale ツール）・回転・反転の操作と、Figma 標準にはない自由変形・歪み・遠近（台形）変形をプラグインで補う方法を解説。Illustrator や XD から移行した人がつまずきやすい点もまとめます。
Figma で画像を切り抜き・トリミングする方法 — Crop モードとマスクの使い分け
Figma で画像を切り抜き・トリミングする手順を、用途別に整理した実用ガイド。四角く切るだけなら Crop モード、円や任意の図形で切り抜くならマスク、フレームのはみ出しを隠すなら Clip content。背景の切り抜き（透過）にプラグインが要る理由、マスクの解除・編集、そして XD から移行した画像のマスクが崩れるときの対処までまとめます。
Figma で画像を背景透過する方法 — 背景削除・切り抜きにプラグインが必要な理由
Figma で画像を背景透過する手順を、やりたいこと別に整理した実用ガイド。透過 PNG をそのまま使う、画像全体を半透明にする（不透明度）、被写体だけ残して背景を消す（背景削除）の 3 パターンを区別し、被写体の輪郭での背景削除には Figma 標準機能では足りずプラグインが要る理由を解説します。さらに XD から移行した画像の透過・マスクが崩れるときの対処までまとめます。
Figma にフォントをインストール・ダウンロードして使う方法 — 文字サイズの変更まで
Figma で使うフォントのインストール・ダウンロード手順を整理した実用ガイド。ダウンロードしたフォントを OS にインストールして Figma に反映する手順、ブラウザ版で必要な Figma font installer、Google Fonts / Adobe Fonts の使い分け、そして文字サイズを効率よく変更する方法まで。XD から移行したファイルでフォントが崩れるときの対処も扱います。
Figma の CJK フォント運用ガイド — 中国語・日本語・韓国語を扱うときの注意点
Figma で CJK（中国語・日本語・韓国語）フォントを扱うための実用ガイド。Latin フォントとの違い、漢字統合（Han Unification）による字形の罠、Noto Sans CJK サブファミリの選び方、フォールバックと豆腐（□）、パフォーマンス、XD から CJK デザインを移行するときの注意点まで整理しました。
Figma で画像をまとめて書き出す方法 — ぼやけを防ぐ画質設定と一括エクスポート（PNG/SVG/PDF の使い分け）
Figma で複数の要素をまとめて書き出す手順と、書き出した画像がぼやける・画質が悪いときの原因と対処を実践的に解説。スケール設定・PNG/SVG/PDF/JPG の使い分け・XD から移行したファイルの書き出し注意点まで、Export でつまずくポイントを一気に解消します。
Figma に「アートボード」はない？ — XD 経験者のためのフレーム作成・サイズ変更・書き出しガイド
Figma で「アートボードの作り方」を探している XD・Illustrator 経験者向けのガイド。Figma の正式名称は Frame（フレーム）で、作成（F キー）・追加・サイズ変更・書き出しの手順、フレーム / セクション / グループの違い、XD のアートボードとの差まで整理。XD→Figma 移行でつまずきやすい用語のねじれを解消します。
Figma の UI を整える — サイドバー / メニュー / レイヤーパネルを非表示にしてキャンバスを広く使う
Figma のサイドバーやメニューを非表示にしてキャンバスを広く使う操作 Tips。左右パネルの表示・非表示、UI 全体の隠し方、File / Assets タブの切り替え、3 点リーダーの挙動、プレゼンモードでのフルスクリーン、Mac / Windows のショートカット差異まで、初〜中級ユーザー向けに整理。
Figma でテキストスタイルを一括変更する方法 — フォント・色だけの変更との違い、まとめて反映するための実践ガイド
Figma でテキストスタイルを一括変更する方法を、標準機能（Text Styles 編集 / Edit style / Select all using this style）とプラグインの両面から整理。フォント単独・色単独の変更との使い分け、XD 移行後の Character Styles 管理まで実用観点でまとめます。
Figma で色を一括変更する方法 — カラースタイル管理とプラグインの使い分け、XD 移行で詰まりやすい点まで
Figma で複数の色を一括変更する方法を、標準機能（Selection Colors / カラースタイル）とプラグインの両面から整理。標準機能の限界、ライト/ダークモード対応、XD 移行後のカラー混在問題まで実用観点でまとめます。
Figma でフォントを一括変更する方法 — 標準機能とプラグインの使い分け実践ガイド
Figma で大量のフォントをまとめて別のフォントに置き換えたい——そんなときの一括変更を最短手順で解説。まず標準機能（「同じフォントで選択」/ テキストスタイル）でどこまでできるかを押さえ、限界を超える場面でプラグインに切り替える判断軸を整理します。サイズの一括変更や、XD 移行後にフォントが混在してしまうケースの直し方まで実務目線でまとめました。
Figma でフォントが反映されない時の対処法 — 原因の切り分けと解決手順
Figma でフォントが反映されない / 表示されない時の対処法。デスクトップ版 / Web 版それぞれの原因を切り分け、Font Installer のインストール、フォント名の確認、共有プロジェクトでの対応まで、実際に試す順序で整理します。
Figma の日本語フォント完全ガイド — 追加・反映されない問題・XD 移行時の注意点
Figma で日本語フォントを使うための完全ガイド。ローカル / Google Fonts / Adobe Fonts の 3 つの経路の追加方法、反映されないときの対処法、XD から移行する際の注意点を、公式ドキュメントに即して整理しました。
Figma の日本語化 — 言語設定・メニュー日本語化・UI ローカライズ完全ガイド
Figma を日本語 UI で使うための言語設定変更手順、メニューやエディタが日本語化される範囲・されない範囲、つまずきやすいポイントまでを整理。これから Figma を日本語環境で使い始める方や、英語 UI が苦手な方向けの完全ガイド。