Figmaの使い方

Figma Makeの使い方を、作る手順・直し方・公開まで解説し、使えるプランとAIクレジットの条件、使いすぎを防ぐ方法をまとめました。

Figmaの共有権限を、アクセスと権限の2つに分けて解説し、社外への共有やプロトタイプだけの共有、権限の引き継ぎ、有料プランの追加設定をまとめました。

Figmaでデザインシステムを作る方法を、バリアブル・スタイル・コンポーネント・ライブラリの役割と、作る手順、公開の条件までまとめました。

Figmaのオーバーレイで確認ダイアログを作る方法を解説。Open overlay、表示位置、背景、外側クリック、Close overlayの設定と、表示されないときの確認順を紹介します。

Figmaのバリアントを、ボタンの状態とサイズを切り替える例で解説。コンポーネントセットの作成、プロパティの設定、値の競合、文字やアイコンとの使い分けを確認できます。

Figmaでレスポンシブデザインを作る考え方を解説。Auto Layout、Hug・Fill・Fixed、文字量の変化、PCとスマホの構成変更をカードUIの例で確認します。

Figmaプロトタイプの画面遷移を設定する手順と実画面。トリガー・移動先・開始点、スマートアニメートの名前と階層、スクロール・オーバーレイ・共有条件を解説します。

FigmaオートレイアウトのHug・Fill・Fixedを親子で選び分ける方法。実測ボタンの文字変更と余白、カードの設定例、折り返し・グリッド、崩れたときの確認順を解説します。

ダウンロードした .fig は、Figmaのファイルブラウザから読み込みます。読み込む前に、ファイル形式、利用条件、更新日を確認しておくと、古い版や別用途のデータを取り違えずに作業を始められます。 この記事はFigma公式の手順と、2026年10月3日の配布素...

Figmaのデザインやプロトタイプを埋め込むときは、Notionに貼る共有URLと、Webサイトに貼るiframeコードを使い分けます。埋め込み先のページを閲覧できても、Figma側の共有設定を満たしているとは限りません。貼り付け後は、実際の閲覧者と同じ条件で確認...

Figma Sitesは、デザインしたWebページをFigmaから公開する製品です。Publishで公開用のURLを作り、更新後は再公開してWeb上の内容を反映します。Figma Designの共有リンクやプロトタイプとは、公開先と更新の扱いが異なります。 この記事では、公開条件、...

Figma Slidesには、PowerPointの.pptxを読み込み、編集した資料をPPTXまたはPDFで書き出す機能があります。ただし、フォント・動画・グラデーションなどがそのまま往復するとは限りません。編集を優先するのか、見た目の共有を優先するのかで出力設定を選...

FigmaからSVGを書き出すときは、文字の見た目を保つか、文字列を残すか、Web側で内部要素を操作するかを先に決めます。設定を選ぶだけで終えず、書き出したSVGを使用先で確認してください。 SVGを書き出す基本手順 書き出すフレームやレイヤーを選択します...

Figmaは.sketchファイルを読み込み、Figma Designファイルへ変換できます。アートボードはフレーム、シンボルはコンポーネントへ変換されますが、Sketchのスタイルは保持されません。ライブラリの公開と参照の接続も別途確認が必要です。 この記事は2026年...

Dev Modeは、Figmaのデザインを開発向けに確認する画面です。対象の部品を選び、寸法・色・書式・素材・変更点・注釈を確認して実装へ渡すために使います。表示されるコードを、アプリ全体の完成コードと混同しないようにしてください。 あなたはどっち？...

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

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

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

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

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

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

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

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

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