Figmaの画面レイアウトや配置に関する機能のまとめ

FigmaでUIや画面のレイアウトを設計する際に便利な機能やテクニックのまとめです。

• 基本的なレイアウト機能

  • オートレイアウトの使い方

  • オートレイアウト内の自動折り返し

• プロトタイプのプレビューに関するレイアウト

  • プロトタイプ内でのスクロール制御

  • プロトタイプで表示するモックアップの設定

• テキストに関するレイアウト機能

  • テキストの省略表示

  • テキスト内のアイコン表示

• その他の設定やテクニック

  • ガイド・ルーラーの表示

  • デフォルトで入力される数値の変更

  • Figmaのファイル一覧で表示されるサムネイルの設定

基本的なレイアウト機能

オートレイアウトの使い方

Figmaのオートレイアウトの基本的な使い方

今回は、Figmaを代表する機能のひとつである「オートレイアウト（Auto layout）」の基本的な使い方を、シンプルな画面レイアウトを実際に作りながら紹介します。また、この記事内で作成した画面レイアウトのサンプルファイルを公開・配布していますので、自由にご利用ください。 ... 続きを読む

オートレイアウト内の自動折り返し

Figmaのオートレイアウトで折り返しできる「Wrap」の使い方

今回はFigmaのオートレイアウト（Auto layout）の機能のひとつである折り返し（Wrap）の使い方を紹介します。これにより、アプリケーションなどの画面レイアウトで横幅が成り行きで決まる場合に自動で折り返しされるようになるため、レスポンシブ対応などで便利です。 ... 続きを読む

プロトタイプのプレビューに関するレイアウト

プロトタイプ内でのスクロール制御

Figmaのプロトタイプのスクロール制御に関する設定

今回はFigmaでプロトタイプを作成するときのスクロールに制御に関する設定を紹介します。縦方向のスクロールだけでなく、横方向や画面の中の一部分のみスクロールさせたい場合などの参考になればと思います。 ... 続きを読む

プロトタイプで表示するモックアップの設定

Figmaでモックアップ付きのプロトタイプを作成する方法

今回はFigmaでプロトタイプを作成する際に、プレビューで各種端末のモックアップを表示する方法を紹介します。各種デバイスで表示される際のイメージを確認したり、解像度ごとのUIの見え方の確認などに役立ちます。 ... 続きを読む

テキストに関するレイアウト機能

テキストの省略表示

Figmaでテキストを行数で自動的に省略表示（…）する方法

今回は、Figmaのテキストを幅や任意の行数で省略表示（…）することができる「テキストの省略（Turncate text）」の使い方の紹介です。コレクションのリスト表示やカードビューなどで、規定のサイズに対してテキストの表示量を制御したい場合に便利です。 ... 続きを読む

テキスト内のアイコン表示

Figmaでテキスト内にアイコンを挿入する方法

今回は、Figmaのテキスト・オブジェクト内で「Font Awesome 6 Free」のアイコンを挿入する方法を紹介します。画面のリード文のテキストリンクなどにアイコンを添付したい場合などに利用でき、フォントと同じようにスタイルを適用できます。 ... 続きを読む

その他の設定やテクニック

ガイド・ルーラーの表示

Figmaでグリッドやガイド（ルーラー）を表示・非表示する方法

今回はFigmaでルーラー（定規）やグリッド（升目）を表示・非表示したり、アウトライン表示などの見た目を切り替える方法を紹介します。ガイドを作成したい場合や、誤ってショートカットキーを押してしまって元に戻したい時などの参考になればと思います。 ... 続きを読む

デフォルトで入力される数値の変更

FigmaのPaddingやカーソル移動のデフォルト値を設定する方法

今回はFigmaでオブジェクトをカーソル移動するときや、Auto layout使用時にPaddingに設定される値（10px）などの初期値を変更する方法を紹介します。デザインシステムなどを利用していて4や8の倍数を基準にしたい場合などにおすすめです。 ... 続きを読む

Figmaのファイル一覧で表示されるサムネイルの設定

Figmaのファイルのサムネイルを設定・解除する方法

今回はFigmaやFigJamのカードビューのファイル一覧で表示されるサムネイルを設定する方法を紹介します。デフォルトではファイル内の描画領域がプレビュー表示されますが、統一したフォーマットでサムネイル設定することで目的のファイルを見つけやすくなるのでおすすめです。 ... 続きを読む