動画チュートリアル:Figmaで再利用できるテキストコンテンツライブラリを作成する
この動画では、CopyDocを使って、Figmaで再利用できるテキストコンテンツライブラリを作成する方法を解説しています。
動画チュートリアル:Figmaにテキスト展開のコンテンツスニペット用ショートカットを追加する
この動画では、CopyDocプラグインを使って、Figmaにテキスト展開のコンテンツスニペット用ショートカットを追加する方法を解説しています。
テキスト展開スニペットの作成
Content Libraryパネルを開いたら、Collectionsタブで最初のテキストスニペットを作成します。Add New Snippet + ボタンをクリックし、必須の項目を入力します。
トリガーショートカット名
トリガーショートカットは、Figmaのテキストレイヤーに入力(またはコピー&ペースト)すると内容が展開される特別なキーワードです(例://expandme)。
コレクションに追加(省略可)
新しく追加したテキストスニペットは、初期設定では「Uncategorized」になります。カスタムのコレクション名を作成する(または以前に作成したコレクションを選ぶ)と、スニペットをカテゴリ別に整理できます。
テキストコンテンツのスニペット
テキストコンテンツのスニペットには、コンテンツライブラリでスニペットをクリックしたときにFigmaのテキストレイヤーに適用される文字列が入ります。
1つのテキストスニペットに複数のバリエーションを作るには、文字列の間に縦線を2つ並べて区切ります(例:Hey || Hello || Hi)。
テキストスニペットで使えるMarkdownの書式
必要に応じて、スニペットに基本的なMarkdownの書式(太字、斜体)やリンクを追加できます。これらの書式は、スニペットをFigmaのテキストレイヤーに適用したときに自動的に反映されます。
- 太字は、アスタリスク2つ
**Snipet text to bold**またはアンダースコア2つeg.__Snipet text to bold__で指定できます - 斜体は、アスタリスク1つ
*Italic Snippet Text*またはアンダースコア1つeg._Italic Snippet Text_で指定できます - 太字の斜体は、アスタリスク3つ
***Bold Italic Snippet Text***またはアンダースコア3つeg.___Bold Italic Snippet Text___で指定できます - ハイパーリンクは、
This is [my link here](https://example.com) in a text snippetというMarkdownの構文で指定できます(リンクの[]内のテキストに太字・斜体の構文を加えて、リンクテキストに書式を付けることもできます)
テキストレイヤーを選択してスニペットを適用する
保存したテキストスニペットを適用する1つ目の方法は、スニペットを適用したいFigmaのテキストレイヤーを選択してから、Applyボタンをクリックすることです。そのテキストレイヤーに、スニペットのバリエーションがランダムに適用されます。
テキストスニペットを展開してから、特定のバリエーションをクリックするか、一括適用のオプション(Ordered、Random、A-Z ↓、Z-A ↑)を選ぶと、スニペットを特定の順番で適用したり、特定のバリエーションを適用したりすることもできます。
テキスト展開のトリガーでスニペットを適用する
保存したテキストスニペットを使うもう1つの方法は、Figmaのテキストレイヤーの内容を編集しているときに、テキストスニペットの「トリガー」(例://expandme)をそのレイヤーに直接コピー&ペースト(または手入力)することです。トリガーショートカットが、追加したテキストスニペットの全文に自動的に展開されます。
トリガーはCopyDocのほかの機能でも使えます。 テキスト展開スニペットは、Figmaのテキストレイヤーの内容が更新されたときにスニペットを自動的に検出する仕組みです。そのため、CopyDocのほかのテキストレイヤー更新方法(検索と置換、CSV・XLSXの一括インポート、Google Sheetの同期など)でも、トリガーショートカットを使えます。更新するコンテンツの一部にトリガー名を入れるだけです(for example, Hello //firstname, how it's going?)。
テキストスニペットの編集・削除
コンテンツライブラリに追加したカスタムのテキストスニペットを削除または編集するには、Collectionsタブのスニペット一覧でテキストスニペットをクリックして展開します。削除するにはTrashアイコンのボタンをクリックし、Deleteで確定します。編集するにはPencilアイコンのボタンをクリックして編集パネルを開くと、選択したスニペットのトリガー名、コレクション、テキストの内容を更新できます。
テキストスニペットの一括移動・削除
複数のテキストスニペットをまとめて別のコレクションに移動できます。対象のスニペットのチェックボックスを選択し、Select Snippet Collectionドロップダウンから既存のコレクション名を選ぶか、新しいコレクション名を追加してから、Moveボタンをクリックします。
スニペットを別のコレクションに移動する代わりに、DeleteボタンをクリックしてDeleteで確定すると、選択したすべてのスニペットを一括で削除できます。
テキストスニペットをCSVにエクスポートする
カスタムのテキストスニペットを.csvファイルにエクスポートできます。エクスポートしたいスニペットのチェックボックスを選択してから、Export To CSVボタンをクリックすると、選択したスニペットが.csvファイルとして自動的にダウンロードされ、パソコンに保存できます。
これらの.csvファイルを編集して、コンテンツライブラリのスニペットに再インポートできます。
CSVからテキストスニペットをインポートする
CopyDocのコンテンツライブラリ機能のCollectionsタブでImport CSVボタンをクリックすると、カスタムのテキストトリガーとスニペットを含む.csvファイルをインポートできます。
ドロップゾーンにドラッグする.csvファイルには、Export CSV機能でエクスポートして更新したスプレッドシートか、同じ形式で作成した新しいスプレッドシートを使えます。
CSVは次の構成にする必要があります。1行目(見出し行)の各列にトリガー名(例://expandme)を入れ、各トリガーの列の下の行に、スニペットごとのテキストのバリエーションを入れます。
| //firstname | //cities |
|---|---|
| Kate | Seattle |
| Elbert | Los Angeles |
| Michael | New York |
| Amy | Austin |
| Portland | |
| Boston |