【figma】オートレイアウトのグリッド機能を使ってみる

Figmaと仲良くしたい。urairnです。

2025年Figma Configで、Figmaの新機能、オートレイアウトの「グリッド」機能が発表されたそうですね！
どんな感じなのだろうと気になっていたので、今回は練習と機能の紹介を兼ねて実際に触ってみようかなと思います。

※オートレイアウトのグリッドフローは現在オープンベータ版なので、ベータ期間中に機能の変更がされる可能性があるそうです。

はじめに

figmaには「オートレイアウト」と呼ばれる、テキストや画像などの要素を自動で並べてくれる機能があるのですが、新しいグリッド機能は、従来のオートレイアウトに加わる形で導入されました。

従来のオートレイアウトは、1方向（縦方向or横方向）に並べることができる形でしたが、新しい「グリッド」機能は縦方向×横方向に対応しているそうです！そのため、1つの要素がセル（マス）を跨ぐ形で並べることも可能になったのだとか。

では実際に使ってみます！

フレームを作成

まずは適当にフレームを作成します。
今回は、グリッド機能を使って5月のカレンダーを作ってみようかなと思います！
（ここでは1200×1600pxで作ってみました。）

グリッドを設定

フレームを選択した状態で右側のパネルを見ると「レイアウト」という項目が表示されます。
その中にある「フロー」の一番右を選びます。これが今回追加されたグリッド機能です！

オートレイアウトの「グリッド」という部分をクリックすると、好きなグリッド数でフレームを分割することができます。（視覚的に分割されるだけなので、フレーム自体が分割されるわけではないです。）

3×3にしてみると、列と行が等間隔に3つに分割されます。

「間隔」の数値を変えると、各行や列のセルの間の余白が調整できます。

「パディング」の数値を変えると、上下左右の余白を調整することができます。

私はグリッドを7×12、列の間隔を15、行の間隔を10、パディングを110に設定してみました。

今はグリッドが等間隔に分割されているのですが、列や行はそれぞれ自由に調整が可能です。

フレームを選択した状態でマウスを乗せると、フレーム外に水色の丸が現れます。この丸をクリックすると、「Auto」と表示されるので、任意の数値を入れると特定の列幅だけ狭く、特定の行幅だけ広く、などの調整ができます。

調整して、こんな感じに。

要素を配置する

並べたい要素を用意します。（画像はunsplushからお借りしました。）

各要素どのマスに入れるかというと…こんなイメージです。

まずは曜日のテキストを入れてみます。
入れたい場所にドラッグ＆ドロップするだけで、セルの位置と大きさに合わせてピッタリ配置されます。
どのように配置するかによって、サイズや配置も調整します。

同じ要領で全ての曜日と日付を入れて、こんな感じに。

次は年月を入れるのですが…「2025」と「05」は同じセルに入れたい…
そんな時は、グリッド内でさらに「オートレイアウト」を追加すると実現可能です！

「05」を入れたい場所にドラック＆ドロップし、右クリックで「オートレイアウトを追加」を選択します。
「2025」と「05」を縦に並べたいので、「垂直」を選んで、同じセルに2025を持っていくと、2行で表示できました！
間隔やサイズも調整すると、綺麗に入ります！

次に画像を入れてみます。サイズを調整すれば複数のグリッドを跨いで配置できます！

思い思いの場所に配置して、オリジナルカレンダーの完成です。
スケジュール表に予定を入れるような感じで、イメージ画像を入れてみました。

左が完成図。右がグリッドはこんな感じだよ〜の図です。

こんなこともできそう

グリッド機能を使えば、レストランのメニューや

ECサイトの商品詳細ページのワイヤーなんかもできちゃいます。

まとめ

進化が止まらないfigma、今後の動きも楽しみです！

投稿者プロフィール

urarin

涙腺が元気すぎて困る。

最新の投稿

• レポート2025.06.24デザインミーティング『デザミ』を始めました。
• ノウハウ2025.06.03【figma】オートレイアウトのグリッド機能を使ってみる
• レポート2024.11.01パンフレットも新しく、こだわりを込めて綴じる
• web2022.07.08愛のあるサイトって？ インターンサイト2024のこだわり