エクスポートしたファイルでテキストを更新する

エクスポートした.zipファイルを開いたら、.csv、.xlsx、.md、.docx、.xliff、.jsonファイルのテキストを好きなアプリケーションで編集できます。

XLSX・CSVファイルのテキストを編集する ​

エクスポートした.xlsxまたは.csvファイルを編集するには、Apple Numbers、Microsoft Excel、Google Sheetsなどのスプレッドシートアプリケーションか、Visual Studio CodeやSublime Textなどのテキストエディター・コードエディターでファイルを開きます。

Unicode文字を含むCSVファイルをMicrosoft Excelで開く。テキストにUnicode文字が含まれている場合（たとえば、コンテンツがポーランド語やロシア語の場合）、Microsoft Excelでは、組み込みのインポートウィザードを使ってCSVをインポートする必要があります。なお、Apple KeynoteやGoogle Sheetsなどのほかのスプレッドシートソフトウェアではこの操作は不要で、CSVファイルを通常どおり開けます。

CSVファイルをGoogle Sheetsで開く。CSVファイルをGoogle Sheetsにインポートするときは、Convert text to numbers, dates and formulasチェックボックスを必ずオフにしてください。オンのままだとFigmaのIDが変更されて崩れてしまい、Figmaに正しくインポートし直せなくなります。

.csvファイルの各行は、Figmaファイル内の1つのテキスト文字列を表しています。各テキストレイヤーの親フレームは「frame」列の値で簡単に確認でき、各行のコンテンツは「figma_text」列の値を更新して編集できます。

XLSX・CSVファイルに含まれる列について ​

id ​

id列には、元のFigmaファイル内のテキストレイヤーへの一意の参照が入っています。これにより、テキストの更新を後でCopyDocプラグインに再インポートできます。

「id」列は編集しないでください。テキストの更新をFigmaファイルに再インポートする予定がある場合は、「id」列を一切編集しないでください。編集すると、Figmaのテキストと対応付けられなくなります（または、ほかのレイヤーが誤って更新される可能性があります）。

frame ​

frame列には、その行のテキストレイヤーを含む親フレームの名前が入っています。テキストレイヤーがデザインのどこにあるかを確認するのに便利です。

layer_name ​

layer_name列は、元のFigmaファイル内のテキストレイヤーの名前を指します。ほとんどの場合はテキストの内容と同じですが、Figmaのテキストレイヤーの名前を手動で変更している場合は異なります。

注意：layer_nameを編集・更新すると、XLSXまたはCSVファイルをFigmaに再インポートしたときに、Figmaのテキストレイヤー名が自動的に更新されます。テキストレイヤーの内容自体には影響しないため、テキストの内容の編集は、figma_text列か、追加したカスタムテキストバリアントで行ってください。

figma_text ​

figma_text_ 列には、元のFigmaファイル内のテキストレイヤーのテキストが入っています。この内容を編集すると、更新した内容をFigmaに再インポートできるようになります。

XLSX・CSVのカスタムテキストバリアント ​

追加のカスタム列を付けてXLSXまたはCSVファイルをエクスポートした場合、それらの列は、エクスポートした.xlsxまたは.csvファイルで、ほかのデフォルト列すべての後に自動的に追加されます。この空のプレースホルダー列に別のバージョンや別の言語のテキストを入力しておくと、CSVをFigmaに再インポートするときに選択できます。

XLSX/CSVファイルは必ず.xlsx/.csvとして保存し直してください。スプレッドシートアプリで.csvファイルを編集する場合は、編集後に必ず.csvとして保存し直してください。アプリによっては別の形式で保存しようとすることがあり、その場合はCopyDocプラグインで再インポートするときに互換性がなくなります。

JSONファイルのテキストを編集する ​

エクスポートした.jsonファイルを編集するには、Visual Studio CodeやSublime Textなどのテキストエディター・コードエディターでファイルを開きます。

.jsonファイルの配列内の各オブジェクトは、Figmaファイル内の1つのテキスト文字列を表しています。各テキストレイヤーの親フレームは「frame」プロパティの値で簡単に確認でき、各オブジェクトのコンテンツは「figma_text」プロパティの値を更新して編集できます。

JSONファイルに含まれる列について ​

id ​

idプロパティには、元のFigmaファイル内のテキストレイヤーへの一意の参照が入っています。これにより、テキストの更新を後でCopyDocプラグインに再インポートできます。

「id」プロパティは編集しないでください。テキストの更新をFigmaファイルに再インポートする予定がある場合は、「id」プロパティを一切編集しないでください。編集すると、Figmaのテキストと対応付けられなくなります（または、ほかのレイヤーが誤って更新される可能性があります）。

frame ​

frameプロパティには、そのオブジェクトのテキストレイヤーを含む親フレームの名前が入っています。テキストレイヤーがデザインのどこにあるかを確認するのに便利です。

layer_name ​

layer_nameプロパティは、元のFigmaファイル内のテキストレイヤーの名前を指します。ほとんどの場合はテキストの内容と同じですが、Figmaのテキストレイヤーの名前を手動で変更している場合は異なります。

注意：layer_nameを編集・更新すると、JSONをFigmaに再インポートしたときに、Figmaのテキストレイヤー名が自動的に更新されます。テキストレイヤーの内容自体には影響しないため、テキストの内容の編集は、figma_textプロパティか、追加したカスタムテキストバリアントで行ってください。

figma_text ​

figma_text_ プロパティには、元のFigmaファイル内のテキストレイヤーのテキストが入っています。この内容を編集すると、更新した内容をFigmaに再インポートできるようになります。

JSONのカスタムテキストバリアント ​

追加のカスタムプロパティを付けてJSONファイルをエクスポートした場合、それらのプロパティは、エクスポートした.jsonファイルで、ほかのデフォルトプロパティすべての後に自動的に追加されます。この空のプレースホルダープロパティに別のバージョンや別の言語のテキストを入力しておくと、JSONをFigmaに再インポートするときに選択できます。

JSONの扱いは開発者の知り合いやチームに相談しましょう。JSON形式に詳しくない場合は、Web開発に詳しい知り合いに相談してみてください。この形式を使えば、データをサードパーティのAPIやアプリに連携したり、独自のNode.jsスクリプトを書いてテキストデータをさまざまな方法で加工したりと、便利なことがいろいろできます。

Markdownファイルのテキストを編集する ​

エクスポートした.mdファイルを編集するには、Visual Studio Codeなどのテキストエディター・コードエディターでファイルを開くか、MarkablyなどのMarkdown専用エディターを使います。

.mdファイルの各テキストブロックは、Figmaファイルのコンテンツを表しています。各ブロックの前には、対応するfigma_text_idを含む行があります。

「figma_text_id」プロパティの行は編集・削除しないでください。テキストの更新をFigmaファイルに再インポートする予定がある場合は、「figma_text_id」の行を一切編集しないでください。編集すると、Figmaのテキストと対応付けられなくなります（または、ほかのレイヤーが誤って更新される可能性があります）。

対応しているMarkdown書式 ​

Markdownファイル内のFigmaコンテンツは自由に更新でき、基本的なMarkdown書式（太字、斜体）やリンクを変更・追加することもできます。これらはFigmaファイルに再インポートできます。

  • 太字のテキストは、テキストを2つのアスタリスクで囲んで指定できます（例：**Text to bold**）
  • 斜体のテキストは、テキストを1つのアンダースコアで囲んで指定できます（例：_Italic Text_）
  • 太字斜体 のテキストは、テキストを2つのアスタリスクと1つのアンダースコアで囲んで指定できます（例：**_Italic Text_**）
  • ハイパーリンクは、This is [my link here](https://example.com) in a text paragraphというMarkdown構文で指定できます（リンクの[]テキスト内に太字・斜体の構文を追加して、リンクテキストに書式を付けることもできます）。

DOCXファイルのテキストを編集する ​

エクスポートした.docxファイルを編集するには、Microsoft WordやGoogle Docsなどのアプリケーションでファイルを開きます。

.docxファイルの各テキストブロックは、Figmaファイルのコンテンツを表しています。各ブロックの前には、対応するfigma_text_idを含む行があります。

「figma_text_id」プロパティの行は編集・削除しないでください。テキストの更新をFigmaファイルに再インポートする予定がある場合は、「figma_text_id」の行を一切編集しないでください。編集すると、Figmaのテキストと対応付けられなくなります（または、ほかのレイヤーが誤って更新される可能性があります）。

対応しているDOCX書式 ​

DOCXファイル内のFigmaコンテンツは自由に更新でき、基本的な書式（太字、斜体）やリンクを変更・追加することもできます。これらはFigmaファイルに再インポートできます。

XLIFFファイルを編集する ​

エクスポートした.xliffファイルを編集するには、Visual Studio CodeやSublime Textなどのテキストエディター・コードエディターでファイルを開きます。

.xliffファイルの各<unit>は、Figmaファイル内の1つのテキスト文字列を表しています。各テキストレイヤーの親フレームは「frame」プロパティの値で簡単に確認でき、各<unit>の翻訳先ロケールのテキストは<target>の値を更新して編集できます。

XLIFF編集ソフトウェアを使うと簡単です 通常のテキストエディターで.xliffファイルを更新したくない場合は、OSXならCounterpartsやXLIFFTool、WindowsならVirtaalなど、.xliffファイル編集専用のソフトウェアを使えます。

「id」プロパティは編集しないでください。テキストの更新をFigmaファイルに再インポートする予定がある場合は、各「id」プロパティを一切編集しないでください。編集すると、Figmaのテキストと対応付けられなくなります（または、ほかのレイヤーが誤って更新される可能性があります）。

デザインの参照画像を確認する ​

エクスポートしたテキストを編集するときに、元のFigmaデザインのどこにそのテキストが表示されているかを目で確認したい場合があります。Design Referencesオプションを有効にしていれば、エクスポートした.zipファイルに_framesというフォルダが含まれ、エクスポート対象に選択した各フレームの.png画像が入っています。これらは、エクスポートしたテキストファイルと並べてデザインの参照画像として使えます。

エクスポートされたテキストレイヤーは見た目の位置順に並びます。エクスポートされたファイル内のテキストレイヤーは、デザイン上の見た目の位置（左上から右下）の順に並べ替えられます。そのため、デザイン画像を見ながら、テキストが使われている場所を簡単に見つけられます。

動画チュートリアル ​

動画チュートリアル：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のテキストを更新する方法を説明しています。