CopyDocのExport Text Layers機能を使うと、現在のFigmaページにある最上位の親フレームのテキストレイヤーをすべて、.csv、.json、.md、.xliffファイル(オプションでデザインの参照画像付き)にエクスポートして、コンピューターにダウンロードできます。
CopyDocは、通常のテキストレイヤーとパス上に配置されたテキストを対象にします。選択範囲ベースのエクスポートを使う場合は、Figmaのセクション内にある対応テキストも検出できます。
はじめに:テキストレイヤーを含めるFigmaフレームを選択する
この機能を使うには、CopyDocのメイン画面でExport Text Layersボタンをクリックします。
現在のFigmaページから、CSV、JSON、Markdown、XLIFFのエクスポートでページとして使いたいフレームを選択できるようになります。
CopyDocは、現在のFigmaページにあるすべての「親フレーム」をプラグインに読み込み、フレームの一覧として表示します。この一覧から、エクスポートにテキストレイヤーを含めたいフレームを選びます。フレームのチェックボックスまたはサムネイル画像をクリックすると選択され、もう一度クリックすると選択が解除されます。
フレームとテキストレイヤーの並び順
並び順のコントロールを使って、Figmaのレイヤー順、レイヤー名、見た目の行、見た目の列、または利用可能なカスタム順に並べられます。見た目による並べ替えでは、少しずれている要素も同じ行や列にまとめられます。レイヤー名は自然順で並べ替えられるため、Frame 2のような名前はFrame 10より前に表示されます。
これらの設定はエクスポートの順序を制御するだけで、Figmaのキャンバス上のレイヤーの名前や配置は変更しません。ローカライズのプレビューを手動で並べ替える場合は、引き続きドラッグ&ドロップで行います。
最上位のFigmaフレームが必要です テキストレイヤーをCSV、JSON、Markdown、XLIFFにエクスポートするには、Figmaページに「親フレーム」が1つ以上必要です。親フレームとは、ページの直下にある「フレーム」のことです。
エクスポート形式とCSV・JSON・Markdown・XLIFFのオプションを選択する
ロックされたFigmaレイヤーをエクスポートから除外する
Exclude Lockedオプションを有効にすると、Figmaページ上でロックされているテキストレイヤーや、ロックされた親レイヤー(フレーム、グループ、コンポーネントなど)の中にあるテキストレイヤーが自動的にスキップされます。エクスポートに含めたくないテキストレイヤーを除外するのに使えます。
Figmaの見た目の大文字・小文字を維持する
Use Figma Text Caseオプションを有効にすると、エクスポートされるテキストレイヤーが、Figmaのテキストレイヤーに設定された「見た目」の大文字・小文字(たとえば「Uppercase」「Title Case」「Lowercase」)に強制的に合わせられます。テキストレイヤーの元の内容(たとえば、デフォルトの「As typed」設定を選んだときの表示)ではなく、デザインでの見た目どおりのテキストをエクスポートしたい場合に使えます。
デザインの参照画像を含める
Include Design Referencesオプションを有効にすると、エクスポート対象に選択した各フレームの.png画像が含まれます。これらは、.csv、.json、.md、.xliffファイルにエクスポートしたテキストと並べてデザインの参照画像として使えます。
重複するテキストレイヤーをまとめる
Group Duplicate Text Layersオプションを有効にすると、内容がまったく同じテキストレイヤーが、CSV、JSON、Markdown、XLIFFのエクスポートで自動的に1つの項目にまとめられます。このオプションを使うと、テキストを1か所で編集するだけで、変更後に同じテキストを持つすべてのレイヤーに再インポートされるため、コンテンツの編集とFigmaへの再インポートが少し楽になります。
Figmaフレームを別々のファイルに分ける
デフォルトでは、CopyDocは選択したすべてのFigmaフレームを1つのドキュメントファイル(たとえば.csv、.xslxなど)にエクスポートします。Figmaフレームごとに別のドキュメントファイルとしてエクスポートしたい場合は、エクスポート設定でExport File Per Frameオプションを有効にします。
なお、Group Duplicate Text Layersオプションも有効になっている場合、このオプションは使えません。まとめるオプションでは、すべてのテキストレイヤーを1つのファイルとしてエクスポートする必要があるためです。
CSV・JSONのエクスポートにカスタムテキストバリアントのプレースホルダーを追加する
CSVやJSONファイルで外部で変更したテキストをエクスポート・再インポートするよくある用途の1つは、Figmaのテキストを別バージョンのコンテンツにすばやく差し替えることです。多くの場合、これはコンテンツを別の言語に翻訳するローカライズや、A/Bテスト用に別のコンテンツを試す場合などです。
複数の言語やテキストバリアントでこれを行う必要がある場合は、エクスポート形式の選択ボックスでCSV (Custom) またはJSON (Custom) オプションを選択します。どちらかを選ぶと新しいテキスト入力欄が表示され、CSVやJSONのエクスポートに含める独自のカスタムテキストバリアントのプレースホルダーを追加できます。
たとえば、現在のFigmaデザインのテキストレイヤーを複数の言語に翻訳する必要があるとわかっている場合は、Japanese、Dutch、Frenchというカスタムバリアントを追加します。これらはすべて追加のCSV列またはJSONプロパティとして追加されるので、Figmaからコンテンツをエクスポートした後に翻訳したテキストを入力できます。
後でこれらのテキストの更新をCopyDocプラグインでFigmaに再インポートする場合は、1つのCSVまたはJSONファイル内の任意のバリアントをすぐに選んで差し替えられるため、複数のファイルを管理するよりもずっと簡単です。
テキストコンテンツをエクスポートしてダウンロードする
エクスポート設定がすべて整ったら、エクスポートパネル上部のExportボタン(たとえばExport CSV)をクリックして、FigmaのテキストレイヤーをCSV、JSON、Markdown、XLIFFへエクスポートし始めます。
CopyDocがテキストレイヤーの処理を終えると、確認メッセージが表示されます。Download … Exportボタン(たとえばDownload CSV Export)をクリックすると、エクスポートしたテキストファイル(およびオプションの画像ファイル)を含む.zipファイルをダウンロードできます。
Figmaからコンピューターに.zipファイルをダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした.zipファイルをダブルクリックすると中身が解凍され、エクスポートしたテキストを自由に使えるようになります。
Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます(通常はパソコンのDownloadsフォルダに保存されます)。
任意の選択範囲からテキストレイヤーをクイックエクスポートする
最上位のFigmaフレームに限らず、任意のFigmaレイヤーの選択範囲からテキストレイヤーをすばやくエクスポートしたい場合は、CopyDocプラグインのQuick Exportボタンをクリックし、ファイルをコンピューターにダウンロードします。このファイルを編集すれば、Import Text Layers機能を使ってテキストレイヤーを更新することもできます。
動画チュートリアル
動画チュートリアル:CSVファイルでFigmaのテキストレイヤーをインポート・エクスポートする
この動画では、CopyDocプラグインを使って、CSVファイルでFigmaのテキストレイヤーをインポート・エクスポートする方法を説明しています。
動画チュートリアル:Airtable同期でFigmaのテキストをエクスポート・再インポートする
この動画では、CopyDocプラグインを使って、Airtable同期でFigmaのテキストをエクスポート・再インポートする方法を説明しています。
動画チュートリアル:JSONファイルでFigmaのテキストレイヤーをインポート・エクスポートする
この動画では、CopyDocプラグインを使って、JSONファイルでFigmaのテキストレイヤーをインポート・エクスポートする方法を説明しています。
動画チュートリアル:Figmaで選択したテキストレイヤーをエクスポート・再インポートする
この動画では、CopyDocプラグインを使って、Figmaで選択したテキストレイヤーをエクスポート・再インポートする方法を説明しています。
動画チュートリアル:MarkdownファイルでFigmaのテキストレイヤーの内容を更新する
この動画では、CopyDocプラグインを使って、MarkdownファイルでFigmaのテキストレイヤーの内容を更新する方法を説明しています。
動画チュートリアル:DOCXファイルを使ってMicrosoft WordからFigmaのテキストを更新する
この動画では、CopyDocプラグインを使って、DOCXファイルでMicrosoft WordからFigmaのテキストを更新する方法を説明しています。
動画チュートリアル:DOCXファイルを使ってGoogle DocsからFigmaのテキストを更新する
この動画では、CopyDocプラグインを使って、DOCXファイルでGoogle DocsからFigmaのテキストを更新する方法を説明しています。
動画チュートリアル:DOCXファイルを使ってOffice 365からFigmaのテキストを更新する
この動画では、CopyDocプラグインを使って、DOCXファイルでOffice 365からFigmaのテキストを更新する方法を説明しています。
- CopyDocのローカライズワークフローを使って、複数のロケール向けにテキストをエクスポート、翻訳、再インポートできます。
- セットアップの手順をひととおり確認するには、CopyDocのクイックスタートガイドをご覧ください。
- スプレッドシート同期、テキストの更新、ドキュメントのエクスポートについては、CopyDoc Figmaプラグインのページをご覧ください。