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

グリッドの追加

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

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

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

詳細オプション

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

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

ルーラーの有効化

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

ガイドの追加

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

ベストプラクティス

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