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

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

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

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

LilGrid

LilGridはアイコンなどのフレーム整理を一瞬でしてくれるプラグインです。
インストールするとメニューバーに［Plugins］→［LilGrid］が追加されます。

LilGridを起動するか、もしくはメニューバーの［Plugins］→［LilGrid］を選択してパネルを表示します。
パネルを表示したら整列設定をして「Organize to Grid」をクリックすれば一瞬で整理されます。

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

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

設定項目	内容
Auto Size	チェックを入れると、グリッドの横幅と高さは自動で要素のサイズに応じて調整してくれる
Grid Width	グリッドの横幅を指定する（「Auto Size」にチェックが入っていないときのみ使用される）
Grid Height	グリッドの高さを指定する（「Auto Size」にチェックが入っていないときのみ使用される）
Max Columns	カラムの最大数を入力する
Sort	チェックを入れると、フレームの名前順にソートされる

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