figma-clean-docment-plugin
公開日: 2022.04.22  | 更新日: 2022.07.08

Figmaでレイヤーやグループを自動整理できる「Clean Document」の使い方

今回は、Figmaでデザインモックなどを無計画に作った結果とっ散らかってしまったレイヤーを、一瞬できれいに整理・整頓してくれるプラグイン「Clean Document」を紹介します。無駄なグルーピングやラベルと内容が一致していないテキストなどを一括で整理できます。

この記事のターゲット

  • Figmaファイルのレイヤー構造や名前を整理するのが苦手な方

  • Figmaのレイヤー整理を手短に行いたい方

  • Figmaの中級者〜上級者


1. 「Clean Document」をインストール

clean-document1

Figma Community の「Clean Document」のページからインストールします。

プラグインに関する説明と詳しいインストール方法はこちらの記事を参考にしてください。

Figmaのプラグインのインストール方法と使い方

今回はFigmaでプラグインをインストールする方法と使い方を解説します。あわせて、当サイトで紹介している便利なプラグインと使い方を解説したプラグイン集もまとめていますので、参考にしてみてください。 ... 続きを読む

figma-how-to-use-plugins

2. レイヤーを整理したいFigmaファイルでプラグインを起動する

インストールできたら、とっ散らかって整理したいFigmaファイルを開きます。

今回はデモとして、あえてレイヤー構造に無駄なグループや適当な名前をつけたウェブサイト風のデザインモックを用意しています。

clean-document2

プラグイン適用前のレイヤーを見てみると、無駄に入れ子になったグループや、レイヤー名と内容が一致しないテキストなど、急いでデザインを作成した時などにありがちな状態になっています。

まずは、手っ取り早くプラグインを起動して適用しています。プラグインの手順は次の通りです。

  1. 右クリックメニューを開き「Plugin」から「Clean Document」をクリックし、続けて開かれるリストの一番上の「Clean layers」をクリック

  2. 開いたポップアップメニュー中の、適用したいオプションにチェックを入れる

  3. 「Clean Layers」ボタンをクリックする

clean-document3

適用されると、レイヤーが整理されて閉じた状態になります。

開いて中を見てみると、無駄に入れ子になっていたグループは消え去っています。

デフォルト名のままだったAuto layoutのグループは「Auto Layout Horizontal」など、段組みの方向まで含まれたわかりやすい名前に変換されていることがわかります。

テキストのレイヤー名も、テキスト本文と同じ内容に置き換わっていますね。

Clean Documentのオプション

「Clean Document」で設定できるオプションの内容は次の通りです。

  • Delete hidden layers:非表示のレイヤーを削除する

  • Ungroup single-layer groups:中身が1つしかないグループを解除する

  • Make pixel-perfect:選択範囲内または現在のページ上のレイヤーのX、Yの座標とサイズを最も近い整数値に直す(わずかに縦横比が変化する可能性があります)

  • Smart rename layers:レイヤー名をよしなにわかりやすい名前に変換してくれる(Ignore layers namedに入れた)

    • エクスポート設定のあるレイヤーは名前が変更される

    • オプションで「Ignore layers named」欄に正規表現でレイヤー名を指定すると、特定のレイヤーを変換から除外できる

  • Skip locked layers:ロックされたレイヤーを無視する

clean-document5

また、上記のオプション以外に以下の機能もあります。

  • Smart Sort Layers:選択範囲内または現在のページ上のレイヤーを、ページ上の相対的な重なり順序を維持しながら、XとYの位置でソートする

  • Sort Pages by Name:現在のページをアルファベット順に並べ替える

  • Reset Plugin:設定をデフォルトに戻す

clean-document4

勝手に名前を変更されたくない場合や、大量のレイヤーをソートしたい場合などに部分的に適用することもできて便利ですね。


この記事を読んだ方におすすめの記事

Figmaでテキストを縦書きに対応する方法

今回はFigmaでテキストを縦書きに対応する方法を紹介します。和風のWebサイトや広告バナー・フライヤーなどをデザインする際に、縦書きのテキストを配置したりできるようになるので、制作の幅も広がると思います。 ... 続きを読む

figma-text-vertical-alternates

Figmaで画像の色をセピアや単色のモノクロに変換する方法

今回は、SNSやブログなどで使用するバナー画像にすぐ使える、モノクロ画像をFigmaで簡単に作成する方法をまとめました。 ... 続きを読む

figma-brend-mode-luminosity

Figmaでシンプルなヘッダー・コンポーネントを作る方法

今回は、Figmaでシンプルなヘッダー・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるシンプルなヘッダーを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-header

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告