Figmaでデザインデータを整理するときに役立つプラグイン「Clean Document」
デザイン作業をしていると、デザインデータがごちゃついてきます。
今回はデザインデータの整理に役立つ「Clean Document」についてまとめておきます
Clean Document
Clean Documentはデザインデータをキレイにするための下記機能が備わったプラグインです。
どれも手作業でやるのは面倒なことですが、一瞬でできます。
- 非表示のレイヤーを削除
- 1つの要素だけのグループを解除
- レイヤーの位置やサイズを整数にする
- レイヤー名を自動でテキストに合わせる
- ページレイヤーの並び変え
インストールするとメニューバーに［Plugins］→［Clean Document］が追加されます。
基本的な使い方
メニューバーの［Plugins］→［Clean Document］→［Clean Layers］でレイヤー回りの操作ができる「Clean Document」パネルが表示されます。
もしくは、［Plugins］→［Clean Document］内に機能が揃っていて、選択した項目の機能が適用されます。
レイヤーの整理
「Clean Document」パネルを表示して、使用したい機能にチェックを入れて「Clean Layers」をクリックすると実行できます。
ちなみに、通常はページ全体に適用されますが、要素を選択していれば選択要素にのみ適用されます。
| 項目 | 機能 | 備考 |
|---|---|---|
| Delete hidden layers | 非表示レイヤーを削除 | |
| Ungroup single-layer groups | 1つの要素だけのグループを解除 | |
| Make pixel-perfect | レイヤーの位置やサイズを整数にする | |
| Smart rename layers | レイヤー名を自動でテキストに合わせてリネームする | 「Ignore layers named」に無視したいファイル名を 入力すると無視されるようになる |
| Smart sort layers | ページ内の座標に合わせてレイヤーを並び変える | |
| Skip locked layers | ロックしているレイヤーは上記機能をスキップする |
「Ignore layers named」は正規表現も使用可能で、デフォルトは「^@」が入力されていて「先頭に@がついているレイヤー」はリネームが無視されるようになっています。
ページの整理
［Plugins］→［Clean Document］→［Sort Pages by Name］を選択すると、ページの並び変えを名前順に並び変えてくれます。
