Figmaにおけるレイアウトグリッド、行、列：デザインの構造化

グリッドの追加

フレームを選択し、デザインパネルのレイアウトグリッドセクションでプラスアイコンをクリックしてグリッドを追加。デフォルトでは、グリッドは10ピクセルの均一グリッドに設定。

グリッド設定のカスタマイズ

• グリッドタイプ：カラム、行、またはグリッドから選択；
• カウント／数：カラムまたは行の数を調整；
• 外観：色や不透明度を変更；
• タイプ設定：カラムをストレッチ、または左寄せ・中央寄せ・右寄せに設定；
• マージンとガター：フレーム端（マージン）やカラム／行間（ガター）の間隔を定義。

詳細オプション

• プラスアイコンを再度クリックして、1つのフレームに複数のグリッドを追加可能。
• 設定パネルやマイナスアイコンでグリッドの編集や削除が可能。
• 四つの点のアイコンからプリセットグリッドスタイルを適用、またはチームライブラリからグリッドをインポート。

Figmaでのルーラーとガイドの使用

ルーラーの有効化

ルーラーは表示 > ルーラーまたはショートカットShift + Rでアクセス可能。フレームの上部と左側に表示され、単位はピクセル。

ガイドの追加

ルーラーからドラッグしてガイドを作成し、整列のために配置。ガイドはルーラーに戻すことで削除可能。

ベストプラクティス

グリッドとガイドを組み合わせて精度を高め、整理されたレイアウトを維持。整った整列はデザインの明瞭さを高め、ユーザー体験を向上。