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

Figmaで複数行テキストを1行ずつ分割するプラグイン「Nisa Text Splitter」

Figmaで複数行テキストを1行ずつ分割するプラグイン「Nisa Text Splitter」

デザイン作業で、もらった原稿を一気にペーストして、そこから並べて整理していくことがあります。

そんなときに、複数行のテキストを分割してくれるプラグインが「Nisa Text Splitter」です。

「Nisa Text Splitter」のインストール

Nisa Text Splitter

Figmaのプラグインインストールページで「install」をクリックするだけでインストールされます。

インストールするとメニューの[Plugins]に[Nisa Text Splitter]が追加されます。

[Plugins]→[Nisa Text Splitter]

「Nisa Text Splitter」の使い方

パネルの表示

メニューの[Plugins]→[Nisa Text Splitter]→[Nisa Text Splitter]を選択すると、パネルが表示されます。

Nisa Text Splitterのパネル

テキストを選択した状態で、このパネル上の項目をクリックすれば効果が適用されます。

テキストを1行ごとに分割する

複数行のテキストを選択した状態で、パネルの「Split text」もしくはメニューの[Plugins]→[Nisa Text Splitter]→[Nisa Split]を選択すると1行ごとにテキストが分割されます。

1行ごとに分割 

逆に複数のテキストを選択して「Join text」もしくはメニューの[Plugins]→[Nisa Text Splitter]→[Nisa Join]で再度くっつけられます。

「Join text」で再度合体

1行開けたテキストごとに分割して横並び

下記のように、1行改行のみで開けた状態のテキストを選択して、パネルの「Column」もしくはメニューの[Plugins]→[Nisa Text Splitter]→[Nisa Column]で、1行開けたテキストごとに分割して、さらに横並びにしてくれます。

1行開けた状態のテキストを選択

すると1行開けた部分で分割され、横並びになります。

複数行のまま分割して横並び

この方法だと1行ごとに分割ではなく、複数行のまま分割できるので、原稿によって使い分けましょう。

文字ごとに分割

自分の場合あまり使うことはなさそうですが、パネルの「Split word」をクリックすると1文字ずつ分割できます(これはメニューにはないので、パネルから選択する必要あり)。

改行があった場合でも、横1列で分割された文字が並びます。

整列

パネルの「ALIGNMENT」部分で選択テキストやオブジェクトの整列ができます。

  • Vertical:縦並び
  • Horizontal:横並び

文字だけでなくオブジェクトも問題なく整列されるので、分割したあとのテキスト整列以外にも使えそうです。

選択テキストを並び変え

分割したテキストを選択した状態で、パネルやメニューを選択すると、並び変えができます。

項目内容メニュー名
Sort by alphabetアルファベット順に並び変え[Nisa Sort]
Reverseいまの並びを反対にする[Nisa Reverse]
Sort by length文字数の長さ順に並び変え[Nisa Sort by length]
Shuffle並びをランダムにシャッフルする[Nisa Shuffle]
Remove Duplicates重複しているテキストを削除する[Nisa Remove Duplicates]

Keyboard Maestroでショートカットキーを設定

Keyboard Maestroを使ってメニューを選択するショートカットキーを設定しています(Keyboard Maestroについて知らないかたはこちらの記事をご覧ください)。

やっていることはメニューを選択するだけで、これですぐ分割できるようになります。

Keyboard Maestroでショートカットキーを設定

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

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

Twitterをフォロー Facebookでいいね