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 simply 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). Please 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.

Please 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.

Please 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 block of text in the .md file array represents a string of text from your Figma file, which are each preceeded by a line that includes the corrosponding figma_text_id for the content.

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 **Text to bold** or double underscores eg.__Text to bold__
  • You can specify Italic text by using single asterisks *Italic Text* or single underscores eg._Italic Text_
  • You can specify Bold Italic text by using triple asterisks ***Bold Italic Text*** or triple underscores eg.___Bold 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 block of text in the .docx file array represents a string of text from your Figma file, which are each preceeded by a line that includes the corrosponding figma_text_id for the content.

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