Figmaの知識

PSDをFigmaへ移す場合、1枚の画像として配置する方法と、プラグインでレイヤーを変換する方法があります。psd.to.designは第三者の変換プラグインです。Figmaの標準インポートにPSDが含まれるわけではありません。 この記事は2025年5月に掲載したsample.ps...

Figmaのバリアブルは、色や数値などを名前付きで保存し、複数のレイヤーへ適用する機能です。たとえばボタンの色を同じバリアブルへ関連付けると、元の値を変更してまとめて更新できます。 この記事では、ファイル内で管理するローカルバリアブルの作成、...

Figmaのスタイルは、文字・色・効果などの設定を名前付きで再利用する機能です。たとえば見出しのフォント、サイズ、行間をテキストスタイルにすると、複数の見出しを同じ設定で管理できます。スタイルの定義を編集すると、そのスタイルを適用したレイヤー...

Figmaで文字や線を含めてオブジェクト全体を比例拡大するには、KでScale（スケール）ツールに切り替えます。画面上で大きく見たいだけならズーム、フレームの幅・高さを変更したいならリサイズを使います。 目的操作変わるもの見やすい表示倍率にするズー...

Figma Designのファイル一覧に表示するサムネイルは、ファイル内のフレームを右クリックしてSet as thumbnail（サムネイルとして設定）を選ぶと指定できます。公式推奨の作成サイズは1920×1080、比率は16:9です。 これはカバー用フレームの寸法です。ファ...

Figmaのセクションは、同じキャンバスにある複数の画面やコンポーネントを、名前付きの範囲にまとめる機能です。Shift + Sで作成できます。たとえば「購入フロー」にカート・入力・完了画面をまとめると、関係する画面を同じ場所で確認できます。 セクショ...

Figmaで文字を打ち替えられない場合と、文字サイズの設定を変えられない場合は、確認する原因が異なります。編集権限 → テキストの選択 → 欠落フォント → スタイルや変数の参照の順で確認してください。テキストスタイルの解除は、書式を個別に変更するた...

Figmaで文字が見えていても、そのフォントで文字を編集できるとは限りません。「欠落しているフォント」が出たら、フォント名・スタイル・バージョン、ブラウザーと補助サービスの接続を確認します。元の見た目を保つ必要がある場合は、先に環境を揃え、代...

Figmaのアセットは、コンポーネントを探して画面へ配置する入口です。コンポーネントの元をメインコンポーネント、そこから配置した部品をインスタンスと呼びます。同じボタンを複数の場所で使う場合、元の形を共通化しながら、配置先ごとに文言などを変え...

Figma Designのページは、1つのファイル内にあるキャンバスを切り替える機能です。ワイヤー・デザイン・コンポーネントのように用途ごとの作業場所を用意できます。閲覧権限でページを見られますが、追加や管理には編集権限が必要です。 ページを分ける場...

8の倍数は、8に整数を掛けた数です。正の値は8、16、24、32、40、48、56、64…と8ずつ増えます。この一覧は、UIの余白や寸法を8刻みで選ぶときにも使えます。 数学では0や負の値も8の倍数です。以下の早見表は、寸法確認向けに正の値8〜2000を掲載していま...