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

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

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

通常ですと,テキストエディタなどで入力した改行区切りのテキストを1行ずつコピペして分割していきます。ただこれはかなり疲弊する作業です。幸いなことに,Figmaではそれを実現するプラグインがすでにいくつか公開されています。

定番なのはNisa Textのようです。しかしスタイルが1文字目で統一されたり,位置が変わったりしてしまうところに改善の余地があります。見つけた中ではSplit textが比較的便利でしたが,完璧ではありません。

しかし,既存の機能やプラグインに満足できなければ自分で作ってしまえばいいのです。

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

動画で見たい

Split Rows for Figmaって何?

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

どの機能も基本的に,位置と文字ごとのスタイルが変わらないようになっています。

初期設定では分割結果はテキストになります。プラグインパネルにて,結果をAuto layoutまたは単一のグループにする設定にも変更可能です。

FigmaプラグインSplit Rows for Figma パネルイメージ図版

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

今回のプラグインはFigmaコミュニティの公開審査をすでに通過しています。Figma/FigJamのプラグインメニューから「Split Rows for Figma」を検索するか,次のリンクからインストールしてください。

使いかたは?

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

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

すると,行ごと(段落ごと)に別々のテキストフレームに分割します。スタイルと位置を保持します。

Result typeの設定により,結果の型はAuto layout/グループ/テキストのどれかになります。

グループ/テキストの場合,概ね同じ見た目・同じ位置に再現可能です。Auto layoutの場合は,空行を無視するなどの変化が発生します。

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

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

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

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

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

Result typeの設定により,結果の型はAuto layout/グループ/テキストのどれかになります。

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

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

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

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

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

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

Show Panel

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

作者に感謝を伝えたい!

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

パネルのリンク Buy author a coffee からも Buy Me a Coffee に移動できます。

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

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

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

SNSでもご購読できます。

広告

コメントを残す