Localize your Figma design text layers

Video Tutorial: The simplest way to localize any Figma designs

Video Tutorial: Translate Figma text layers with XLIFF files

Export Figma text layers to a localization spreadsheet ​

By clicking the Localize Frames button in CopyDoc, you can export your frame(s) and select the target languages you'd like to translate the designs to (eg. French, German etc). Clicking the Export XLSX button will automatically export the text content from your frame(s) to an .xlsx spreadsheet file.

Grouping duplicate text layers ​

Enabling the Group Duplicate Text Layers option will ensure that any text layers with exactly the same content with automatically be grouped into a single entry in your XLSX export. This option can make editing and re-importing your content back into Figma a bit easier, as you only need to edit the text in one place.

Maintaining the visual text case from Figma ​

Enabling the Use Figma Visual Text Case option will automatically force your exported text layers to match the "visual" text case (eg. "Uppercase", "Title Case", "Lowercase") option set on your text layer in Figma. You can use this option to visually mirror the text content in your design, instead of exporting the underlying text layer content (eg. as it appears with the default "As typed" case setting selected).

Add localized content for each locale column in your spreadsheet ​

After you've exported your .xlsx file, you can then edit the Excel file and populate the placeholder locale columns as needed.

Re-import your localized spreadsheet into Figma ​

After you've populated the locales and saved your spreadsheets, you can then re-import your .xlsx file back into the CopyDoc plugin by dragging and dropping it in, then clicking the Localize Frames button to re-import your new content locales. Upon re-importing the file, CopyDoc will automatically create a brand new page with a new email frame per locale with all of the text updates you made (per text layer/"row") in the spreadsheet.

Using Markdown Formatting ​

You can optionally export the text in your Localization spreadsheets as markdown by enabling the Add Markdown toggle, which will automatically render any bold, italic or hyperlinked text in their markdown format (below). This will allow you to edit/add formatting to different parts of your CopyDoc design's text content before re-importing any translated text.

After editing the exported spreadsheet, and adding/removing markdown formatting, enabling the Import Markdown Formatting toggle with ensure your XLSX import will automatically parse basic supported markdown formatting (below) and apply this to your Figma text layers.

Supported markdown formatting: ​

  • You can specify Bold text by using double asterisks around the text, eg. **Text to bold**
  • You can specify Italic text by using single underscores around the text, eg. _Italic Text_
  • You can specify Bold Italic text by using double asterisks and one underscore around the text, eg. **_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).