WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

LilGrid

LilGrid

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

基本的な使い方

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

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

LilGridのパネル

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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね