Making text updates to exported files

After opening your exported .zip file, you can start editing text content in your .csv, .xlsx, .md, .docx, .xliff, or .json file in your software application of choice.

Editing text in XLSX or CSV files ​

To edit your exported .xlsx or .csv file, you can open the file in a spreadsheet application like Apple Numbers, Microsoft Excel or Google Sheets, or Just a text/code editor application like Visual Studio Code or Sublime Text.

Opening CSV files with unicode characters in Microsoft Excel. Microsoft Excel requires you to use the built-in Import Wizard to import the CSV if your text contains unicode characters (for example, if your content is in Polish or Russian). Note that other spreadsheet software like Apple Keynote and Google Sheets doesn't require you to do this, and you can open the CSV file normally in those apps.

Opening CSV files Google Sheets. When importing a CSV file into Google Sheets, please ensure you uncheck the Convert text to numbers, dates and formulas checkbox, otherwise your Figma IDs will be modified and messed up, which means they won't be able to be imported properly back into Figma.

Each row in the .csv file represents a string of text from your Figma file, you can verify the parent frame for each text layer by checking the "frame" column value as an easy reference, and you can edit the content for each row by updating the "figma_text" column value.

Understanding the columns included in your XLSX or CSV file ​

id ​

The id column contains unique references to the text layers in your original Figma file, this is what allows any text updates to be re-imported back into the CopyDoc plugin later.

Don't edit anything in the "id" column. If you intend to re-import your text updates back into your Figma file, please don't edit anything in the "id" column, otherwise the links back to your Figma text won't be possible (or could possibly update other layers incorrectly).

frame ​

The frame column contains the name of the parent frame that the current row's text layer is included in, this is helpful for referencing where the text layer appears in your design.

layer_name ​

The layer_name column is in reference the name of your text layer in the original Figma file; this is almost always the same as the text content itself, but will be different if you've manually renamed your Figma text layers.

Note: editing or updating the layer_name will automatically update your Figma text layer name if the XLSX or CSV file is re-imported back into Figma. This won't have any impact on the text layer's content itself, so please ensure you're making any text content edits to the figma_text column, or in any other custom text variants you may have added.

figma_text ​

The figma_text_ column contains the text content from the text layers in your original Figma file, editing this content will make it available to re-import the updated content back into Figma again.

Custom Text Variants in your XLSX or CSV ​

If you've exported your XLSX or CSV file with additional custom columns, these will automatically be included after all of the other default columns in your .xlsx or .csv file export. You can populate these empty placeholder columns with different versions or different languages, which can be selected if you re-import your CSV back into Figma.

Ensure you re-save the XLSX/CSV file as a .xlsx/.csv. If you're using a spreadsheet app to edit your .csv file, please sure you re-save the file as a .csv after editing it; sometimes these apps will try to save the file in a different format, which won't be compatible when re-importing your file again via the CopyDoc plugin.

Editing text in JSON files ​

To edit your exported .json file, you can open the file in a text/code editor application like Visual Studio Code or Sublime Text.

Each object in the .json file array represents a string of text from your Figma file, you can verify the parent frame for each text layer by checking the "frame" property value as an easy reference, and you can edit the content for each object by updating the "figma_text" property value.

Understanding the columns included in your JSON file ​

id ​

The id property contains unique references to the text layers in your original Figma file, this is what allows any text updates to be re-imported back into the CopyDoc plugin later.

Don't edit anything in the "id" property. If you intend to re-import your text updates back into your Figma file, please don't edit anything in the "id" property, otherwise the links back to your Figma text won't be possible (or could possibly update other layers incorrectly).

frame ​

The frame property contains the name of the parent frame that the current object's text layer is included in, this is helpful for referencing where the text layer appears in your design.

layer_name ​

The layer_name property is in reference the name of your text layer in the original Figma file; this is almost always the same as the text content itself, but will be different if you've manually renamed your Figma text layers.

Note: Editing or updating the layer_name will automatically update your Figma text layer name if the JSON is re-imported back into Figma. This won't have any impact on the text layer's content itself, so please ensure you're making any text content edits to the figma_text property, or in any other custom text variants you may have added.

figma_text ​

The figma_text_ property contains the text content from the text layers in your original Figma file, editing this content will make it available to re-import the updated content back into Figma again.

Custom Text Variants in your JSON ​

If you've exported your JSON file with additional custom properties, these will automatically be included after all of the other default properties in your .json file export. You can populate these empty placeholder properties with different versions or different languages, which can be selected if you re-import your JSON back into Figma.

Ask your developer friends/team to help you use JSON. If you don't know much about the JSON format, check with someone you know who understands web development, as they'll be able to use this format to do some really neat things, like integrating the data into a third party API/app, or write their own Node.js script to manipulate the text data in other cool ways.

Editing text in Markdown files ​

To edit your exported .md file, you can open the file in a text/code editor application like Visual Studio Code or use a dedicated Markdown editor like Markably.

Each text block in the .md file represents content from the Figma file. A line containing the corresponding figma_text_id appears before each block.

Don't edit or remove anything in the "figma_text_id" property lines. If you intend to re-import your text updates back into your Figma file, please don't edit anything in the "figma_text_id" lines, otherwise the links back to your Figma text won't be possible (or could possibly update other layers incorrectly).

Supported Markdown formatting ​

You can make updates to any Figma content in your Markdown file, and also modify or add some basic markdown formatting (bold, italics) and links, which can be re-imported back into your Figma file.

  • You can specify Bold text by using double asterisks around the text, for example, **Text to bold**
  • You can specify Italic text by using single underscores around the text, for example, _Italic Text_
  • You can specify Bold Italic text by using double asterisks and one underscore around the text, for example, **_Italic Text_**
  • You can specify hyperlinks by using the markdown syntax of This is [my link here](https://example.com) in a text paragraph (you can also format the link text by adding the bold/italic syntax inside of the link's [] text area).

Editing text in DOCX files ​

To edit your exported .docx file, you can open the file in an application like Microsoft Word or Google Docs.

Each text block in the .docx file represents content from the Figma file. A line containing the corresponding figma_text_id appears before each block.

Don't edit or remove anything in the "figma_text_id" property lines. If you intend to re-import your text updates back into your Figma file, please don't edit anything in the "figma_text_id" lines, otherwise the links back to your Figma text won't be possible (or could possibly update other layers incorrectly).

Supported DOCX formatting ​

You can make updates to any Figma content in your DOCX file, and also modify or add some basic formatting (bold, italics) and links, which can be re-imported back into your Figma file.

Editing XLIFF files ​

To edit your exported .xliff file, you can open the file in a text/code editor application like Visual Studio Code or Sublime Text.

Each <unit> in the .xliff file represents a string of text from your Figma file, you can verify the parent frame for each text layer by checking the "frame" property value as an easy reference, and you can edit the target translation locale for each <unit> by updating the <target> value.

Use XLIFF editing software to make this easier If you don't want to use a normal text editor for making updates to your .xliff file, you can use specific software made for editing .xliff files, such as Counterparts or XLIFFTool for OSX or Virtaal for Windows.

Don't edit anything in the "id" property. If you intend to re-import your text updates back into your Figma file, please don't edit anything in each "id" property, otherwise the links back to your Figma text won't be possible (or could possibly update other layers incorrectly).

Viewing design references ​

If you're editing text in your export, you may want to visually reference where the text is displayed in the original Figma design. If you enabled the Design References option, your exported .zip file will include a folder called _frames, which includes .png images for each frame that you've selected to export. These can be used as a design reference alongside the exported text files.

Exported text layers are ordered by visual position. The text layers in the exported files are sorted by their visual position in the design (from the top/left to the bottom/right), this should help make it easier to scan a design image and find where the text is being used.

Video Tutorials ​

Video Tutorial: Import/export Figma text layers with CSV files

This video walks through how to import/export Figma text layers with CSV files using the CopyDoc plugin.

Video Tutorial: Export & Re-Import Figma text content via Airtable sync

This video walks through how to export & re-import Figma text content via Airtable sync using the CopyDoc plugin.

Video Tutorial: Import/export Figma text layers with JSON files

This video walks through how to import/export Figma text layers with JSON files using the CopyDoc plugin.

Video Tutorial: Export and re-import selected text layers in Figma

This video walks through how to export and re-import selected text layers from Figma using the CopyDoc plugin.

Video Tutorial: Update Figma text layer content with Markdown files

This video walks through how to update Figma text layer content with Markdown files using the CopyDoc plugin.

Video Tutorial: Update Figma text from Microsoft Word with DOCX files

This video walks through how to update Figma text from Microsoft Word with DOCX files using the CopyDoc plugin.

Video Tutorial: Update Figma text from Google Docs with DOCX files

This video walks through how to update Figma text from Google Docs with DOCX files using the CopyDoc plugin.

Video Tutorial: Update Figma text from Office 365 with DOCX files

This video walks through how to update Figma text from Office 365 with DOCX files using the CopyDoc plugin.