Line Break Cleaner
こんなときに使える
見かけの改行位置に入った改行文字を削除して、テキストボックスの大きさに合わせて自動改行するように変更したい
html.to.design を使ってとりこんだテキストのように、望まずしてAuto widthになって、変なところに改行文字が入っているテキストレイヤーがあります。
これを「Line Break Cleaner」でクリーニングすると、不要な改行を除去してAuto heightなレイヤーに変換できます。
Figma上でデザインを変更したり、テキストレイヤーを別の場所で再利用するときに便利です。
無意味なソフト改行を、通常の改行文字に変えたい
Figma上でテキストに改行を入力するとき、通常改行ではなくソフト改行を入れることもあります。
が、ソフト改行にする必要がないのにソフト改行になっている場合は、コピペしてコーディングソフトなどでテキストを利用するときに邪魔です。
![HTMLコードの画像。pタグ内に「ユーザーに愛されるWebサイトを制作します。[LSEP]レスポンシブデザイン…」と書かれている](https://deep-space.blue/main/wp-content/uploads/2025/08/image-24.png)
PhpStormの場合
これを「Line Break Cleaner」でクリーニングすると、ソフト改行が通常改行に変換されるため、手動での調整が不要になります。
使い方
方法その1：手動でお好きなレイヤーを選択して、クリーニング
クリーニングしたいテキストが決まっているときに使える、最も簡単な方法です。
- クリーニングしたいテキストレイヤーを選択
- 「選択したテキストをクリーニング」をクリック
方法その2：クリーニングしたほうがよさそうなテキストをスキャンしてまとめて選択し、クリーニング
クリーニングしたほうがよさそうなテキストが、たくさんある時に使える方法です。
- フレームまたはセクションを選択
- 「スキャン実行」をクリック
- 「〇つのテキストを検出」の右にある「全選択」をクリック
- 「選択したテキストをクリーニング」をクリック
スキャン条件の調整
「詳細設定」タブで「スキャン対象の最小文字数」の設定が変更できます。
デフォルトでは20文字より少ない文字数のテキストはスキャン対象外です。
特長：意図的に挿入した改行文字が消えにくい
自動スキャンから短いテキストを除外
自動スキャンしてフレームやセクション全体の文字を全選択するとき、短いテキストは対象から除外します。
※「詳細設定タブ」の「スキャン対象の最小文字数:」で調整できます
テキストボックスの右端の改行文字だけを除去
テキストボックスの中の改行文字のうち、右端に近い改行文字かどうかを計算してから除去します。
また「。」や「？」「！」の直後の改行は除去しません。
※「詳細設定タブ」の「改行処理閾値:」で右端判定の厳しさを調整できます
こんなときは
1. 「。」「？」「！」「.」の直後の改行が消えません
消えない仕様になっています。
意図的な改行文字を消さないことを重視した設計のため、上記の文字の直後の改行は、仮にテキストボックス右端ぴったりの位置にあっても削除されません。
2. 右端ぴったりの位置にある改行が消えません
「Webサイト」のような日本語全角文字以外を含む文章は、計算に失敗することがあります。
「詳細設定」タブの「改行処理閾値:」を0.5～0.8程度にすると改行除去に成功しやすくなります。
※ただし、意図的に挿入した改行も消えやすくなります
※ 改行文字がテキストボックスの右端にあるかを判定するために、文字数×フォントサイズpx数を使用しています。そのため、半角文字や記号を多く含む文章は、改行文字位置計算がずれやすい問題があります。
プラグイン：https://www.figma.com/community/plugin/1537450151622815002/line-break-cleaner
コメント