Video Tutorial: The simplest way to localize any Figma designs
This video tutorial is a complete step-by-step guide showing you the simplest way to localize any Figma designs using the CopyDoc plugin.
Video Tutorial: Translate Figma text layers with XLIFF files
This video tutorial is a complete step-by-step guide showing you how to translate Figma text layers with XLIFF files using the CopyDoc plugin.
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.
If you need to add extra columns to your localization spreadsheet that you don't want to be imported back into Figma (eg. metadata content like "approved", "status", "reviewer" etc), you can do this by prepending a triple underscore prefix before any column header name (eg. ___approved or __status) and this will ensure the column is ignored by CopyDoc when the .xlsx file is re-imported back into Figma.
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.
Enabling the Keep Frame Positions toggle will ensure that the arrangement/positioning of any new imported/translated frames are kept to match the arrangement of the original frames that were exported from Figma. Turning this toggle off will let the plugin arrange them in a tidy/ordered grid of frames instead.
Enabling the Add a “Worst Case” Frame (Longest Text) toggle will create an extra frame that takes the longest bits of text from all the new locales/translations in the spreadsheet per text layer, and generates a frame that shows what the worst case scenario is for text being really long; this can be useful to test the robustness of the design, and make sure it can handle any length of text without breaking or looking weird.
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.
CopyDoc currently supports inline markdown formatting for bold, italic, bold italic, hyperlinks, and line breaks. Avoid adding headings, lists, code blocks, tables, HTML, or other markdown syntax that is outside of those supported inline text features.
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).
Other localization workflows
CopyDoc also supports AI-assisted localization workflows:
The AI localization providers each support two workflows in CopyDoc: a direct API translation option and a manual prompt option that generates a CSV translation prompt for you to run in the provider's own app.