# Figmaのフレームを一瞬で整列するプラグイン「LilGrid」

URL: https://webrandum.net/figma-plugin-lilgrid/
公開日: 2022-07-13
更新日: 2022-07-13
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

デザインを作成しているといつの間にかフレーム（アートボード）がごちゃついてきます。

ページ単位だとそれほど数もないので、ドラッグして整列してしまうのでも問題ないかもしれませんが、これが細かいアイコンパーツ分あると地味に面倒です。

今回はフレームを一瞬で整列する「LilGrid」を紹介します。

## LilGrid

![LilGrid](https://webrandum.net/mskz/wp-content/uploads/2022/07/image_1-3.png)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/9a24a200cc98b733acfcc42e92a6b1f69dd778626163a058047ab1b5da4eeb42.webp)Figmahttps://www.figma.com/community/plugin/795397421598343178/LilGridFigma Community plugin - LilGrid takes elements and arranges them into a grid automatically. Select elements to organize, or leave nothing selected to let it organize everything on your page. It only affects top-level elements on your page.For example it’s great to use on pages full of icons for your design system....](https://www.figma.com/community/plugin/795397421598343178/LilGrid)

LilGridはアイコンなどのフレーム整理を一瞬でしてくれるプラグインです。

インストールするとメニューバーに［Plugins］→［LilGrid］が追加されます。

## 基本的な使い方

LilGridを起動するか、もしくはメニューバーの［Plugins］→［LilGrid］を選択してパネルを表示します。

パネルを表示したら整列設定をして「Organize to Grid」をクリックすれば一瞬で整理されます。

ちなみに、整列する要素を選択すると選択した要素にのみ適用されて、何も選択しない場合はページ上のすべてのトップレベル要素に適用されます。

![LilGridのパネル](https://webrandum.net/mskz/wp-content/uploads/2022/07/image_2-4.png)

設定できる項目は下記の通りです。

| 設定項目 | 内容 |
| --- | --- |

| Auto Size | チェックを入れると、グリッドの横幅と高さは自動で要素のサイズに応じて調整してくれる |
| --- | --- |

| Grid Width | グリッドの横幅を指定する（「Auto Size」にチェックが入っていないときのみ使用される） |
| --- | --- |

| Grid Height | グリッドの高さを指定する（「Auto Size」にチェックが入っていないときのみ使用される） |
| --- | --- |

| Max Columns | カラムの最大数を入力する |
| --- | --- |

| Sort | チェックを入れると、フレームの名前順にソートされる |
| --- | --- |

基本的には「Auto Size」にチェックを入れて自動で計算をしてもらいつつ、「Sort」に関してはアイコンによっては名前順にソートされるよりも位置である程度区切った方が分かりやすいパターンもあるので、外して位置である程度並べてもらうのが良さそうです。