【解決】XDにもテキストばらしがほしい!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
XDプラグインSplit Rows for XD アイキャッチ図版

Adobe XDでレイアウト・図版・スライドなどを作る際には,1行程度のテキストを大量に用意することになります。

通常ですと,テキストエディタなどで入力した改行区切りのテキストを1行ずつコピペして分割していきます。ただこれはかなり疲弊する作業です。

もしIllustratorでやる場合にはテキストばらしという定番スクリプトがあり,名前の通りテキストを一瞬で1行ずつにばらしてくれます。Adobe XDにもこれがあったら嬉しいですね。さらに言えば,ばらしたテキストを連結したり,行だけでなく列も分解できたら最高です。

そこで今回は,テキストを行ごと/文字ごとに分割したり,区切り文字で分割・結合するAdobe XD用プラグイン,Split Rows for XD を紹介します。

動画で見たい

Split Rows for XDって何?

テキストを分割または連結するAdobe XD用UXPプラグインです。行ごと/文字ごとに分割する,区切り文字で分割・結合するなどして文字の内容・見た目・構造を変更できるようになります。

初期設定では分割結果はテキストです。プラグインパネルにて,スタックまたはグループにする設定にも変えられます。

XDプラグインSplit Rows for XD パネル&動作イメージ図版

どのバージョンに対応しているの?

Adobe XDのバージョン48かそれ以降に対応します。このバージョンのXDが動けば,macOS/Windows問わず使用可能です。

動作確認済み
  • macOS 11.6.5(Apple Silicon)
  • Windows 10
  • Adobe XD(v51)

どうインストールするの?

今回のプラグインはAdobeの公開審査をすでに通過しているので,次のリンクからインストールします。

「このページで“Adobe XD.app”を開くことを許可しますか?」と出たら許可してください。Creative Cloudアプリが自動で開きます。その右のほうにあるインストールボタンを押せばインストールは完了です。

使いかたは?

高速に行ごとに分割する(Split Rows Simple)

  1. 複数行あるテキストを選択します
  2. Split Rows Panelのボタン,またはプラグインメニューのSplit Rows Simpleを選んてください

すると,行ごと(段落ごと)に別のテキストフレームに分割されます。動きは速いですが位置が変わります。スタイルはすべて1文字目と同じになります。

できたテキストフレームは,Result typeの設定によりグループやスタックに変更可能です。

XDプラグインSplit Rows for XDのSplit Rows Simple動作イメージ図版

スタイルと位置はそのままに行ごとに分割する(Split Rows Preserve Appearance)

  1. 複数行あるテキストを選択します
  2. Split Rows Panelのボタン,またはプラグインメニューのSplit Rows Preserve Appearanceを選んてください

すると,行ごと(段落ごと)に別のテキストフレームに分割されます。やや動きが遅いですが,スタイルと位置を保持します。

できたテキストフレームは,Result typeの設定によりグループやスタックに変更可能です。

XDプラグインSplit Rows for XDのSplit Rows Preserve Appearance動作イメージ図版

区切り文字でテキストを分割する(Split Columns)

  1. Split Rows Panelの真ん中あたり,Column separator入力欄に任意の区切り文字を入力してください。1文字ずつ分割したいときは,入力欄の区切り文字を削除して何もない状態にします
  2. テキストフレームを選択してください
  3. Split Rows Panelのボタン,またはプラグインメニューのSplit columnsを選びます

すると区切り文字のところでテキストが分割され,複数のテキストフレームになります。区切り文字自体はなくなりますが,スタイルはそのままです。横向きに並びます。

パネルの区切り文字入力欄(Separator)では,\tでタブ,\nで改行などいくつかの特殊文字を使えます。

できたテキストフレームは,Result typeの設定によりグループやスタックに変更可能です。

XDプラグインSplit Rows for XDのSplit Columns動作イメージ図版

複数のテキストを区切り文字で結合する(Join Text)

  1. Split Rows Panelの下段,Join separator入力欄に任意の区切り文字を入力してください
  2. 連結したい複数のテキストを選択します
  3. Split Rows Panelのボタン,またはプラグインメニューのJoin Textを選びます

すると区切り文字でテキストを連結し,1つのテキストフレームにします。座標左上→右下の優先順位で文字を繋ぎます。

パネルの区切り文字入力欄(Separator)では,\tでタブ,\nで改行などいくつかの特殊文字を使えます。

XDプラグインSplit Rows for XDのJoin Text動作イメージ図版

Split Rowsパネルを開く(Split Rows Panel)

プラグインパネル,またはメニューのSplit Rows Panelを選んでください。Split Rowsパネルが表示されます。

XDプラグインSplit Rows for XDのパネル全体

Display result in a dialogをONにすると,動作が正常に終了したときにダイアログを出してお知らせします。初期設定ではOFFになっていて,エラーのときのみダイアログを出します。

作者に感謝を伝えたい!

Buy me a coffeeは、クレジットカード払いなどでクリエイターにコーヒーをおごれるサービスです。ツール・情報が役に立った! 感謝の気持ちを表現したい! というかた、おごっていただけましたら嬉しいです☕️

パネルのリンク Buy author a coffee からもBuy me a coffeeのサイトに移動できます。

これでまた少し仕事が速くなりました。今日もさっさと仕事を切り上げて好きなことをしましょう!

このサイトで配布しているスクリプトやその他のファイルを,無断で転載・配布・販売することを禁じます。
それらの使用により生じたあらゆる損害について,私どもは責任を負いません。
スクリプトやファイルのダウンロードを行った時点で,上記の規定に同意したとみなします。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

広告

コメント

コメントを残す