How to export, update and import copy back to a Figma file?

Tom Osowski

Lead

The Figma Community develops many interesting plug-ins that improve the Designer <-> Writer/Editor/Translator workflow. CopyDoc is the plug-in that solves many problems, for instance quick and organized export of text layer and smooth import back to Figma.

Body

You know how it goes. You have an important release soon, and your manager goes "we don't have content yet, but we need to start working on the design. Copy will be written in parallel and delivered later."

In such a case, you don't get to work on the final text and need to use dummy content generated by a plug-in like ContentReel or a lorem ipsum generator. Once a writer delivers the final copy, you have to manually update each text field which is not exactly a dream task.

Or another case - a design needs to be localized, which means you have to provide a translator with an input file in an appropriate format, e.g., xliff. Then, you need to insert translated copy back into the fields. It's 100% certain that the text volume will be different than in the source design (meaning you'll have to adjust it), but there is a way to avoid copying and pasting text strings manually. Below we explain how it works and highlight its advantages.

CopyDoc - How does it work?

It’s pretty simple:

1) Select all the frames with copy you want to export.

2) Find the CopyDoc Text Kit plugin in Figma and install it.

3) In CopyDoc, pick the option: Export Figma Text Layers

4) Select an export format: XLSX, CSV, JSON, XLIFF 1.2, or XLIFF 2.0

If you go with XLSX, CSV, JSON, you can define custom columns, e.g., "Tom proofreading". In the generated file, you will see a blank column with a provided title which might be helpful in your case.
If you use XLIFF 1.2 or 2.0, you need to select the source language (the language of your copy in Figma) and the language you will translate into.
The XLIFF format is usually the one that makes professional translators happy, but most CAT tools (translation software) support all the above mentioned formats.
JSON can be useful for developers as they work with it daily. Using this format, you can create a multi-language app within seconds.
XLSX is an Excel format, so you should be familiar with it, and CSV can be useful for any database (and Excel as well).

5) The export settings include several interesting options which might help you or your translator:

You can include design references (works for all formats) that contain screenshots of copy in your design. It gives the translator the necessary context.
You can exclude locked layers and instances from your export file. It means you skip the text you don't want to translate.
You can organize the text alphabetically or according to the order of the layers. The app can also detect repetitive content, and you can arrange an export by duplicated text layers so the translator doesn’t need to translate the exact phrase over and over again.

6) Once you send the package with export files, you can sit back and relax. Your copywriter or translator will take it from here. In the case of translation, the translator loads the files into their CAT tool, sets up a project, and works their magic. Then, they save the target file in the same format as the source file and send it back.

7) When you receive the updated file, you can import it back to Figma. Copy Doc will detect what has changed. You will see all changes in a pop-up. If something doesn't look right, you can exclude it from synchronization.

8) After you click "Update Figma Text Layer", the frames will be updated with new copy.

CopyDoc - Example

Let's use my latest case to give you a better insight into how it works. I have recently prepared a presentation for a meetup and decided to translate it into English so that everyone could benefit from it.

We collaborate with Jula - our translator who knows a thing or two about Figma but prefers to work using professional translation software. She asked me to export all text from Figma so she could feed it into her translation tool. It is much more efficient than leaving comments in Figma and or using UX writing plug-ins.

I found the CopyDoc plug-in. First, I selected all frames in my presentation. Then, I selected the export option and XLIFF 1.2 format supported by Jula's translation software.

I skipped all additional options like grouping by name layers, grouping duplicated content, sorting options, etc. After a while, I had a ready package with an export file and visuals I could share with Jula.

In her editor, Jula saw all the source text strings in one column and typed the translation on the right. In addition, she had images as a reference that provided context and helped her understand the graphic layout. She translated all strings into English, saved the target file in XLIFF format, and sent it to me.

Once I received the translated file, I went back to Figma and selected "Re-import text updated Figma". The pop-up opened immediately with all changes provided by Jula. I briefly checked if everything looked okay and clicked "Update Figma text layers". It uploaded all text layers in a flash.

I went through the presentation to make sure everything looked right, and that's it! A ready-to-go forty-five pages pitch deck in English within minutes.

How to use the CopyDoc plug-in effectively?

Try to use the auto layout as much as you can.
Avoid using "fixed width" for text layers. If you use both auto layouts and fit & hug content, the text should fit in automatically.
In the presentation, there is a phrase "ślad węglowy w sieci" highlighted in yellow. Jula translated it as "digital footprint" which is considerably shorter. CopyDoc was smart enough to highlight only those two words (not the whole sentence, for instance) in the re-imported English version.
You don't need to select any frames at all. At first, I thought that the text is updated only in the pre-selected frames, but using the Re-import function, CopyDoc automatically detects which text layers have changed in your Figma file. It means if you want to keep the original version - you'd better make a copy! :)
Review the updated version and check if everything looks good. Even if you use auto layouts, something might look strange because the copy is shorter or longer or a sentence has a reversed word order. It can eat up some of your precious time, but it's still ten times faster than implementing Figma comments.

When can exporting copy from Figma might be helpful?

when you have dummy content because the work on the final copy is in progress,
when copy needs to be translated into other languages,
when you have a multi-language app and want to quickly check what it looks like in another language (imagine changing four thousand text fields - here, you can do it in a second!),
when you have an app and a UX writer changes only a few phrases,
if you want to quickly check grammar and spelling,
if you need to quickly find a particular phrase in your copy,
when you collaborate with someone who is not familiar with Figma and loves Excel :)

It is only one of many features that CopyDoc offers. There's a lot to explore:

You can quickly find a particular phrase and change it across all preselected frames (available in the free version).
You can run a spell check to make sure your copy is top-notch.
If your design needs to be localized into several languages, you can export all frames and create an Excel for translators where each language lands in a separate column. It can be helpful in maintaining multiple-language websites.
If you have content that changes a lot, connect text layers with Google Drive and keep it synchronized with the content from a chosen sheet.

Summary

As you can see, collaboration with editors, copywriters, and translators can be pretty efficient. There is no doubt it boosts productivity.

The disadvantage of the plug-in is that it is free only for the first 14 days. After that, it costs $18 monthly for unlimited export and import. I think it's worth it - calculate how much time you save :)

CopyDocs is one of many plug-ins offering such functions and many integrations. Do you know some particularly interesting plug-in of this kind? Let us know if you do!

Authors