Figmatic Plugin Docs

# Using CopyDoc

# Exporting frames to Microsoft Word

The Export Frames to Microsoft Word feature in CopyDoc works by letting you use your top level parent frames from the current Figma page as pages for a Microsoft Word document, and exporting them to a .docx file that you can download to your computer.

# Getting started with exporting your frames to a Microsoft Word document

To get started with this feature, click on the Export Frames button in the main CopyDoc plugin screen.

# Selecting and deselecting frames as pages for your Word document

You'll now be able to select the frames from your current Figma page that you would like to use as the pages in your Microsoft Word document.

CopyDoc will load all of your "parent frames" from your current Figma page into the plugin as a list of frames that you can use to choose the frames you should like to add as pages to your Word doc; you can click on any frame's checkbox or image thumbnail to select it (clicking it again will deselect it).

Parent frames required

To create a Microsoft Word document, your Figma page must contain at least one "Parent Frame". This means, any "frames" that are located directly underneath your page.

# Highlighting Figma parent frames to select them

To make it easier to select the Figma parent frames that you want to add to your Word document, clicking or highlighting any frame(s) on your Figma page will automatically filter them down in the available frames list in the CopyDoc plugin.

# Refreshing Figma parent frames

If the CopyDoc plugin is already running and you need to add or remove any parent frames on your current Figma page, you can make those updates as needed and then click on the Refresh icon button in the settings toolbar.

# Using quick sort to order your frames

There are a number of different ways to sort the order of your frames for your Word document pages:

# Sort frames by Figma Layer Order

Selecting the Sort frames by Figma Layer Order option will automatically sort your the order of your frames to match their order in your Figma layers.

# Sort frames visually by Columns

Selecting the Sort frames visually by Columns option will automatically sort your the order of your frames to match their visual positioning order by columns in your Figma design.

# Sort frames visually by Rows

Selecting the Sort frames visually by Rows option will automatically sort your the order of your frames to match their visual positioning order by rows in your Figma design.

# Sort frames visually by Figma Layer Name

Selecting the Sort frames by Figma Layer Name option will automatically sort your the order of your frames to match their alphabetical order according to their Figma layer names.

# Manually ordering frames with drag and drop

You can manually sort the order of your frames using drag and drop, by clicking/holding your mouse on any thumbnail image, and dragging it up or down to shift its order in your Microsoft Word doc pages, then dropping it to confirm that order. This custom ordering will be saved if you want to switch between ordering options, so you can get it back by clicking the Sort frames by Custom Order option in the sorting select box.

# Downloading your Microsoft Word document

After clicking the Export to DOCX button, you'll see a confirmation screen letting you know that your Microsoft Word document is ready to download. To download the .docx file from Figma to your computer, you can click the Download Word Doc button in the CopyDoc plugin.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

Exports aren't optimised for Google Docs

If you're exporting your Figma designs to .docx, please open them in Microsoft Word, as some features won't be supported in Google Docs.

# Exporting text to CSV/JSON

The Export CSV/JSON feature in CopyDoc works by letting you export all of the text layers for your top level parent frames from the current Figma page to a .csv and .json file (with optional images for design references) that you can download to your computer.

# Getting started with exporting your text to CSV/JSON

To get started with this feature, click on the Export CSV/JSON button in the main CopyDoc plugin screen.

# Selecting and deselecting frames as pages for your Word document

You'll now be able to select the frames from your current Figma page that you would like to use as the pages in your Microsoft Word document.

CopyDoc will load all of your "parent frames" from your current Figma page into the plugin as a list of frames that you can use to choose the frames you should like to add as pages to your Word doc; you can click on any frame's checkbox or image thumbnail to select it (clicking it again will deselect it).

Parent frames required

To create a Microsoft Word document, your Figma page must contain at least one "Parent Frame". This means, any "frames" that are located directly underneath your page.

# Highlighting Figma parent frames to select them

To make it easier to select the Figma parent frames that you want to add to your Word document, clicking or highlighting any frame(s) on your Figma page will automatically filter them down in the available frames list in the CopyDoc plugin.

# Refreshing Figma parent frames

If the CopyDoc plugin is already running and you need to add or remove any parent frames on your current Figma page, you can make those updates as needed and then click on the Refresh icon button in the settings toolbar.

# Using quick sort to order your frames

There are a number of different ways to sort the order of your frames for your CSV/JSON exports:

# Sort frames by Figma Layer Order

Selecting the Sort frames by Figma Layer Order option will automatically sort your the order of your frames to match their order in your Figma layers.

# Sort frames visually by Columns

Selecting the Sort frames visually by Columns option will automatically sort your the order of your frames to match their visual positioning order by columns in your Figma design.

# Sort frames visually by Rows

Selecting the Sort frames visually by Rows option will automatically sort your the order of your frames to match their visual positioning order by rows in your Figma design.

# Sort frames visually by Figma Layer Name

Selecting the Sort frames by Figma Layer Name option will automatically sort your the order of your frames to match their alphabetical order according to their Figma layer names.

# Manually ordering frames with drag and drop

You can manually sort the order of your frames using drag and drop, by clicking/holding your mouse on any thumbnail image, and dragging it up or down to shift its order in your CSV/JSON file exports, then dropping it to confirm that order. This custom ordering will be saved if you want to switch between ordering options, so you can get it back by clicking the Sort frames by Custom Order option in the sorting select box.

# Toggling design references option

Enabling the Design References option will include .png images for each frame that you've selected to export to JSON/CSV. These can be used as a design reference alongside the text exported to .csv and .json files.

# Starting the text export process

Once you're happy with all of your export settings, you can click the Export CSV/JSON button at the top of the export panel to begin exporting text layers from Figma to CSV/JSON.

# Downloading the generated .zip file

After CopyDoc has finished processing your text layers, you'll be shown a confirmation message; you can download your .zip file containing your exported CSV/JSON (and optional image) files by clicking the Download Text button.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

# Opening your .zip file

After you've downloaded your .zip file from Figma to your computer, you can open your file explorer to the directory where it was saved. Double clicking on the exported .zip file will unzip the contents and let you use your text exports however you like.

# Making text updates to exported files

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

# Editing text in CSV files

To edit your exported .csv file, you can open the file in a spreadsheet application like Apple Numbers (opens new window), Microsoft Excel (opens new window) or Google Sheets (opens new window), or simply just a text/code editor application like Visual Studio Code (opens new window) or Sublime Text (opens new window).

Each row in the .csv file represents a single Figma text layer, 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 "text" column value.

Ensure you re-save the file as a .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.

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

Opening CSV files with unicode characters in Microsoft Excel

Microsoft Excel requires you to use the built-in Import Wizard (opens new window) 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.

# 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 (opens new window) or Sublime Text (opens new window).

Each object in the .json file array represents a single Figma text layer, 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 "text" value.

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.

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 the .csv or .json 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 .csv and .json 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.

# Importing CSV/JSON text updates

The Import CSV/JSON feature in CopyDoc works by letting you add your updated .csv or .json file that was originally exported from the CopyDoc plugin, and manually approving any text differences compared to the text layers in your Figma file, then applying any selected updates with one click.

# Previewing your CSV/JSON file text updates

To get started, click on the Import CSV/JSON button in the main CopyDoc plugin menu, then drag and drop your updated .csv or .json file from your computer into the drop zone of the import settings panel. This will read your file and check for any updated text layers compared to your Figma text layers.

# Reviewing and updating text layers

After your text update previews have loaded, you can see a list of all the differences of the text layers that contain updates in your file. You can approve the changes that will be applied by scrolling through the list and checking or unchecking the text updates you would like to import. Once you're happy with the selected text layers, click the Update Figma Text Layers button to instantly apply all of the selected text updates at once.

Use the normal "undo" command in Figma to undo updates

If you would like to undo your text updates, you can use the standard CMD + Z (on Mac) or CTRL + Z (on Windows) shortcut to undo the changes in your Figma file.

# Zooming in on text layers that contain updates

To instantly see where each text layer is in your Figma file, you can click on the Search icon next to any of the updated layers to instantly move the focus of your Figma page to show where the text layer is located. You can click on this icon before or after making your text updates.

# Spell checking Figma text layers

The Spell Check Layers feature in CopyDoc works by checking every text layer on your page for spelling errors, and provides suggestions to correct any misspelled words.

# Selecting the spell checking language

To get started with this feature, click on the Spell Check Layers button in the main CopyDoc plugin screen. When the settings panel opens, you can select the language of the text you would like to spell check by clicking on the Language select box and changing the language that matches your Figma text content.

# Finding spelling mistakes in your text layers

Once you've selected your language, you can click the Find Spelling Mistakes button to begin searching every text layer on the current Figma page for spelling mistakes.

More Figma text layers will take longer

The more text layers in your Figma file, the longer it will take to find spelling mistakes.

# Zooming in on text layers that contain spelling mistakes

Once the search is complete, you will see a list of words that contain spelling mistakes.

To instantly see where each text layer is in your Figma file, you can click on any word in the results list to expand it and show the frame(s) where the text is located in your page; clicking on the Search icon next to any of these frames will instantly move the focus of your Figma page to show where the text layer is located.

# Applying spelling corrections to text layers

To apply a correction to a word that contains a spelling mistake, you can click on any of the suggestion buttons underneath each word; clicking on any of the buttons will instantly change the word to the new suggested word in each of the locations where it exists.

# Undoing spelling corrections to text layers

To undo a correction you made to a word, you can click the Undo button besides the "corrected to" notification after a suggestion was applied; clicking on the Undo button will instantly change the corrected word back to the original word in each of the locations where it exists.

# Exporting comments to CSV/JSON

The Export Figma Comments feature in CopyDoc lets you export all of the comments from the current Figma file to a .csv and .json file (with optional images for design references) that you can download to your computer.

# Getting started with exporting your comments to CSV/JSON

To get started with this feature, click on the Export Figma Comments button in the main CopyDoc plugin screen.

# Adding your Figma file URL

You will need to manually add your Figma page URL by clicking on the Share button in the Figma header, then clicking Copy link in the pop-up window, and finally pasting the copied URL into the Figma Page URL (Required) input field in the CopyDoc plugin settings.

# Adding your Figma personal token

To authenticate the request for reading comments in your Figma file, you will need to manually add a personal Figma access token. You can obtain a token by navigating to your Figma Settings* page, scrolling down to the Personal Access Tokens heading and clicking + Create a new personal access token; you can enter any description (eg. "CopyDoc") for your token when prompted, then you will be able to copy your token and switch back to your Figma file to paste it into the Figma Personal Access Token (Required) input field CopyDoc settings.

Your token will automatically be saved after successful export

After you've successfully exported comments via CopyDoc, your Figma personal access token will automatically be saved (and pre-populated in the input field) for future use in the plugin, across other Figma projects.

# Toggling design references option

Enabling the Include Design References option will include .png images (containing numbered/positioned pins per comment thread) for each frame that contains at least one comment. These can be used as a visual reference alongside the text comments exported to .csv and .json files.

# Fetching and exporting comments

Once you've added your valid Figma Page URL and Figma Personal Access Token, you can click the Export Comments to CSV/JSON button, which will scan your Figma file for any comments and generate a CSV and JSON file (along with image references, if the Include Design References option was enabled).

After CopyDoc has finished exporting your comments, you'll be shown a confirmation message; you can download your .zip file containing your exported comments by clicking the Download Comments button.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

# Opening .zip file

After you've downloaded your .zip file from Figma to your computer, you can open your file explorer to the directory where it was saved. Double clicking on the exported .zip file will unzip the contents and let you use your comments however you like.

← Troubleshooting CopyDoc →