Figmaでデザインデータを整理するときに役立つプラグイン「Clean Document」

デザイン作業をしていると、デザインデータがごちゃついてきます。
今回はデザインデータの整理に役立つ「Clean Document」についてまとめておきます

Clean Document

Figma

Figma

https://www.figma.com/community/plugin/767379019764649932/Clean-Document

Figma Community plugin — Automagically organize and clean up your Figma document.Fund my work on Figma plugins →Delete Hidden LayersDeletes all hidden layers within the selection or on the current page.Ungroup Single-Layer GroupsUngroups single-layer groups within the selection or on the current page that have no...

Clean Documentはデザインデータをキレイにするための下記機能が備わったプラグインです。
どれも手作業でやるのは面倒なことですが、一瞬でできます。

• 非表示のレイヤーを削除
• 1つの要素だけのグループを解除
• レイヤーの位置やサイズを整数にする
• レイヤー名を自動でテキストに合わせる
• ページレイヤーの並び変え

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

基本的な使い方

メニューバーの［Plugins］→［Clean Document］→［Clean Layers］でレイヤー回りの操作ができる「Clean Document」パネルが表示されます。
もしくは、［Plugins］→［Clean Document］内に機能が揃っていて、選択した項目の機能が適用されます。

レイヤーの整理

「Clean Document」パネルを表示して、使用したい機能にチェックを入れて「Clean Layers」をクリックすると実行できます。
ちなみに、通常はページ全体に適用されますが、要素を選択していれば選択要素にのみ適用されます。

「Ignore layers named」は正規表現も使用可能で、デフォルトは「^@」が入力されていて「先頭に@がついているレイヤー」はリネームが無視されるようになっています。

ページの整理

［Plugins］→［Clean Document］→［Sort Pages by Name］を選択すると、ページの並び変えを名前順に並び変えてくれます。