# Using CopyDoc
- Exporting popular document formats
- Finding and replacing text content
- Exporting Figma text layer content
- Making text updates to exported files
- Re-importing text updates to Figma
- Spell checking Figma text layers
- Generate a table in Figma from spreadsheet rows
- Syncing spreadsheet rows with Figma
- Exporting Figma comments
- Counting text layer characters
# Exporting popular document formats
The Export Figma Frames feature in CopyDoc works by letting you export frames on your current Figma page to other popular document formats.
# Selecting your Figma frames to include
To get started with this feature, click on the Export Frames button in the main CopyDoc plugin screen.
You'll now be able to select the frames from your current Figma page that you would like to export to another format.
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 would like to include; you can click on any frame's checkbox or image thumbnail to select it (clicking it again will deselect it).
Parent frames required
To export frames from CopyDoc, your Figma page must contain at least one Parent Frame; this means, any "frames" that are located directly underneath your page.
# Selecting your document export format
After you've selected the Figma frames you would like to export, you can select the export format using the dropdown box options, which include:
- PDF
.pdf
- Microsoft Word
.docx
(BETA) - Microsoft Excel
.xlxs
- Plain Text
.txt
- HTML Table
.html
- E-Book
.epub
- Comic/Manga
.cbr
# Export PDF
Selecting the PDF option allows you to export your Figma frames (which are treated as "pages") to a PDF document. You can configure the following settings for PDF exports:
# Export PDF File Per Frame
Enabling the Export PDF File Per Frame toggle will ensure each Figma frame you've selected will be exported as an individual .pdf
files, rather than exporting all of the selected frames being merged together into a single .pdf
file.
# Vector Gradient Fix
If you're exporting Figma frames to .pdf
that contain gradient fills inside any vector paths, you can enable the Vector Gradient Fix setting to ensure the gradient is rendered as expected. If you don't need this option, there's no need to enable it.
# DPI
You can select the DPI (dots per inch) setting for your PDF exports, which will influence the file size and quality of your exported .pdf
files. The higher the DPI, the better the quality (with higher file sizes) - the lower the DPI, the less quality (with lower file sizes).
The available DPI options are:
- 72dpi Low Quality
- 150dpi Good Quality
- 300dpi Best Quality
PDF Export Browser Support
Due to browser compatibility issues, exporting PDF files from CopyDoc isn't supported in Safari. Please run the plugin in another browser (like Chrome (opens new window)) or the Figma Desktop App (opens new window) instead.
# Export Microsoft Word
Selecting the Microsoft Word option allows you to export your Figma frames (which are treated as "pages") to a DOCX file that can be opened and edited in the Microsoft Word desktop app. You can configure the following settings for Microsoft Word exports:
# Export DOCX File Per Frame
Enabling the Export DOCX File Per Frame toggle will ensure each Figma frame you've selected will be exported as an individual .docx
files, rather than exporting all of the selected frames being merged together into a single .docx
file.
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.
# Export Microsoft Excel
Selecting the Microsoft Excel option allows you to export the text content of your Figma frames to a XLSX file that can be opened and edited in Microsoft Excel (or another spreadsheet app that supports .xlsx
files). You can configure the following settings for Microsoft Excel exports:
# Export XLSX File Per Frame
Enabling the Export XLSX File Per Frame toggle will ensure each Figma frame you've selected will be exported as an individual .xlsx
files, rather than exporting all of the selected frames being merged together into a single .xlsx
file (with each Figma frame as a different "tab" in the Excel file).
# Include Design References
Enabling the Include Design References option will include .png
images for each FIgma frame that you've selected to export. These can be used as a visual design reference alongside your text exported to .xlsx
files.
# Export Plain Text
Selecting the Plain Text option allows you to export the text content of your Figma frames to a TXT file that can be opened and edited in any text editing software. You can configure the following settings for Plain Text exports:
# Include Design References
Enabling the Include Design References option will include .png
images for each FIgma frame that you've selected to export. These can be used as a visual design reference alongside your text exported to .txt
files.
# Export HTML Table
Selecting the HTML Table option allows you to export the text content of your Figma frames to a HTML file that can be opened in a web browser, or edited in any text/code editing software. You can configure the following settings for HTML Table exports:
# Include Design References
Enabling the Include Design References option will include .png
images for each FIgma frame that you've selected to export. These can be used as a visual design reference alongside your text exported to .html
files.
# Export E-Book
Selecting the E-Book option allows you to export your Figma frames to a EPUB file that can be viewed with any e-book reader software or app. You can configure the following settings for E-Book exports:
# Include Design References
Enabling the Include Design References option will include .png
images for each FIgma frame that you've selected to export. These can be used as a visual design reference alongside your text exported to .epub
files.
# Export Comic/Manga
Selecting the Comic/Manga option allows you to export your Figma frames to a CBR file that can be viewed with any Comic Book or Manga reading apps. You can configure the following settings for Comic/Manga exports:
# Include Design References
Enabling the Include Design References option will include .png
images for each FIgma frame that you've selected to export. These can be used as a visual design reference alongside your text exported to .cbr
files.
# Exporting and downloading your document
When you're happy with your selected frames and the options for your chosen export format, you can click on the Export button to generate your file.
After clicking the Export button, you'll see a confirmation screen letting you know that your file is ready to download. To download the file from Figma to your computer, you can click the Download 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).
# Finding and replacing text content
The Find & Replace feature in CopyDoc works by letting you search all of the text layers on your current Figma page , and replacing any matching with different text. This is useful for a quick find and replace, instead of using a full CSV or JSON export/import.
# Using the find and replace feature
To get started with this feature, click on the Find & Replace button in the main CopyDoc plugin screen.
You'll now be able to search your current Figma page for text using the Text to Find in Figma Page input field, and then specify the text you'd like to replace any matches with by using the Text to Replace Matches With input field.
Clicking the Find Matches & Preview Updates will conduct the search and show a list of any matching text layers where the text you searched for was found. You'll also be able to preview what the text will look like with your replacement text.
You can select/deselect any text layers you would like to perform the replacement on; if you don't know which layer is related to which part of the design, you can click on the Text icon button to instantly zoom and scroll to that text layer on your Figma page.
When you're happy with the previewed changes and the text layer selections to replace, you can click on the Update Figma Text Layers button to automatically replace any matching text with your new specified text.
Figma text layers with missing fonts can't be updated
If your Figma text layer contains a missing font (opens new window), the plugin won't be able to update it. Please ensure any text layers you would like to update in any way using the CopyDoc plugin have their missing fonts resolved.
# Exporting Figma text layer content
The Export Text Layers 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
, .json
, .md
or .xliff
file (with optional images for design references) that you can download to your computer.
After exporting these files, you can then update their content outside of Figma using a text editing software, and instantly re-import the updated text back into your Figma designs again later.
# Getting started and selecting your Figma frames to include text layers from
To get started with this feature, click on the Export Text Layers button in the main CopyDoc plugin screen.
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 CSV, JSON, Markdown or XLIFF export.
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 text layers to your export from; you can click on any frame's checkbox or image thumbnail to select it (clicking it again will deselect it).
Parent frames required
To export text layers to CSV, JSON, Markdown, or XLIFF, your Figma page must contain at least one "Parent Frame". This means, any "frames" that are located directly underneath your page.
# Selecting your export format and CSV/JSON/Markdown/XLIFF options
# Excluding locked Figma layers from export
Enabling the Exclude Locked Figma Layers option will automatically skip over any locked text layers layers or text layers that are contained inside of a locked parent layer (frame, group, component etc) on your Figma page. You can use this to easily exclude any text layers that you don't want to be included in your export.
# 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).
# Including design references
Enabling the Include Design References option will include .png
images for each frame that you've selected to export. These can be used as a design reference alongside the text exported to .csv
, .json
, .md
or .xliff
files.
# 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 CSV, JSON, Markdown or XLIFF 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 and it will be re-imported back to all of the layers with the same text after being changed.
# Adding custom text variant placeholders to CSV or JSON exports
One common use case for exporting and re-imported text that has been modified externally in a CSV or JSON file is to quickly swap out your text in Figma to an alternate version of the content. Often, this is localised content, where you're translating content into a different language, or trying out a different set of content for A/B testing etc.
If you need to do this for more than a single language or text variant, you can select the CSV (Custom) or JSON (Custom) options in the export formats select box. Selecting either of these options will reveal a new text input field where you'll be able to add your own custom text variant placeholders that will be included in your CSV or JSON exports.
For example, if you know you need to translate the text layers in your current Figma design to multiple languages, you might add custom variants called Japanese, Dutch and French. This will ensure that these are all added as additional CSV columns or JSON properties, and you'll be able to populate them with the translated text after exporting your content from Figma.
If you decided to re-import these text updates back into Figma via the CopyDoc plugin again later, you'll be able to instantly select any variant in your single CSV or JSON file to swap out, making it much easier than maintaining multiple files.
# Exporting and downloading your text content
Once you're happy with all of your export settings, you can click the Export button at the top of the export panel to begin exporting text layers from Figma to CSV, JSON, Markdown or XLIFF.
After CopyDoc has finished processing your text layers, you'll be shown a confirmation message; you can download your .zip
file containing your exported text (and optional image) files by clicking the Download Text button.
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.
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).
# 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).
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.
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 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 CSV 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 CSV
If you've exported your CSV file with additional custom columns, these will automatically be included after all of the other default columns in your .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 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.
# 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 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 (opens new window) or use a dedicated Markdown editor like Markably (opens new window).
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 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 underscoreseg.__Text to bold__
- You can specify Italic text by using single asterisks
*Italic Text*
or single underscoreseg._Italic Text_
- You can specify Bold Italic text by using triple asterisks
***Italic Text***
or triple underscoreseg.___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 XLIFF files
To edit your exported .xliff
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 <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 (opens new window) or XLIFFTool (opens new window) for OSX or Virtaal (opens new window) 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.
# Re-importing text updates to Figma
The Import Text Layers feature in CopyDoc works by letting you add your updated .csv
, .json
, .md
or .xliff
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.
Figma text layers with missing fonts can't be updated
If your Figma text layer contains a missing font (opens new window), the plugin won't be able to update it. Please ensure any text layers you would like to update in any way using the CopyDoc plugin have their missing fonts resolved.
# Dragging in your file, previewing changes and updating Figma layers
To get started, click on the Import Text Layers button in the main CopyDoc plugin menu, then drag and drop your updated .csv
, .json
, .md
or .xliff
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.
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.
If you originally exported a .csv
or .json
file with multiple custom text variants, you'll be able to switch between these by clicking on the Select (CSV Column/JSON Property) To Import drop down menu.
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, then 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 Text icon button 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.
Figma text layers with missing fonts can't be updated
If your Figma text layer contains a missing font (opens new window), the plugin won't be able to update it. Please ensure any text layers you would like to update in any way using the CopyDoc plugin have their missing fonts resolved.
# 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.
Figma text layers with missing fonts can't be updated
If your Figma text layer contains a missing font (opens new window), the plugin won't be able to update it. Please ensure any text layers you would like to update in any way using the CopyDoc plugin have their missing fonts resolved.
# 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.
# Generate a table in Figma from spreadsheet rows
As well as syncing spreadsheet rows with Figma layers from a spreadsheet, the Sync Spreadsheet Content feature in CopyDoc allows you to sync repeatable text and image content from multiple rows from any spreadsheet (which can be an .xlsx
/.csv
file or a public Google Sheet URL) to your selected Figma layers.
Regardless of if you're using an XLSX, CSV or Google Sheet for your spreadsheet, the structure is always the same; the very first row (or the "header") of your spreadsheet is used as the first header row of the table (as the "component" row), and any rows underneath will become instances of that first header.
# Importing CSV/XLSX spreadsheet to a Figma table
You can preview your spreadsheet contents by either dragging and dropping your correctly structured .csv
or .xlsx
file into the Sync XLSX/CSV File dropzone area, or by clicking on it and selecting the file manually by browsing for it on your computer.
Once the preview has loaded, and then click on the Generate a table in Figma from this spreadsheet button. This will import the content from your spreadsheet into a table on your current Figma page.
# Importing Google Sheet spreadsheet to a Figma table
You can preview your spreadsheet contents by pasting your public Google Sheets URL into the Sync Public Google Sheet input field; if it's a valid, and public URL that's correctly structured, it will automatically load a preview of the headers that it contains after pasting it.
Once the preview has loaded, and then click on the Generate a table in Figma from this spreadsheet button. This will import the content from your spreadsheet into a table on your current Figma page.
# Including image URLs in your spreadsheet/table
If you'd like to use images in your spreadsheet that will get added as image layers in your Figma table, you can paste any image URLs that begin with http://
or https://
, and the CopyDoc plugin will automatically assume that they're being used as images.
# Syncing spreadsheet rows with Figma
As well as generating tables from a spreadsheet, the Sync Spreadsheet Content feature in CopyDoc allows you to sync repeatable text and image content from multiple rows from any spreadsheet (which can be an .xlsx
/.csv
file or a public Google Sheet URL) to your selected Figma layers.
This can be really helpful for designs that contain repeating grids or lists where you need to populate it with real content automatically.
# Structuring your spreadsheet
Regardless of if you're using an XLSX, CSV or Google Sheet for your spreadsheet, the structure is always the same; the very first row (or the "header") of your spreadsheet has to contain the names of the Figma layers that you would like to sync the rest of the rows underneath it with.
You can name these whatever you like, but it's easiest to use a short yet descriptive hashtag format like: #Title or #Description. In Figma, you would then name your text layers #Title or #Description as well; this will ensure that they are mapped together when the spreadsheet is synced up in the plugin later.
# Renaming Figma layers from the spreadsheet
Along with updating text content in your Figma layers, the Sync Spreadsheet Content feature also supports automatically renaming non-text layers in the same way.
For example, if you have 6 Figma frames all named #My Frame, you can use this as a column name in the first row of your spreadsheet, and then add 6 more rows under that column in your spreadsheet containing the names you'd like rename each of the selected frames to in Figma (eg. "My New Frame Name", "My Other New Frame Name" etc).
When you sync the spreadsheet with Figma, any matching (non-text) Figma layers will automatically be renamed.
# Including image URLs in your spreadsheet
If you'd like to use images in your spreadsheet that will get added to your non-text Figma layers, you can paste any image URLs that begin with http://
or https://
, and the CopyDoc plugin will automatically assume that they're being used as images. Please also ensure you name your image column header to be the same as your Figma image layers (eg. #Poster).
# Sync local image files from your computer via XLSX import
If you prefer to use images already saved to your computer, instead of image URLs online, you can do this by zipping your images along with your XLSX file. If you need a hand with this, please follow our step-by-step video tutorial (opens new window) on how to sync a folder of images to your Figma layers via an XLSX spreadsheet.
Video files are also supported for paid Figma plans
As per [Figma's documentation](Supported for files in Education, Professional, Organization, and Enterprise teams.) for native video support, if you're running CopyDoc in a Figma file that's on a paid Figma plan (Education, Professional, Organization, or Enterprise team), you'll also be able to sync videos in the same way as the example of syncing images above. Videos files can be up to 100mb in size and in .mp4, .mov or .webm format.
# Naming your Figma layers
In Figma, you'll rename your text layers to be the same as the header names that you already setup in your spreadsheet. For example, if you named your spreadsheet headers #Title or #Description, then you would then name your text layers #Title or #Description as well; this will ensure that they are mapped together when the spreadsheet is synced up in the plugin later.
Figma image layers
If you're using the spreadsheet to update image content, you can also rename your Figma image layers with the same spreadsheet header name (eg. #Poster) that contains image URLs in its column's content rows; your Figma layers will automatically be replaced with image content when the spreadsheet is synced.
Updating (non-text) Figma layer names
If you'd like to rename any non-text Figma layers, you can use the layer name (eg. My Frame) as your column header name, and then add any new names in the rows below it, and any matching Figma layer names will automatically be renamed when the spreadsheet is synced.
# Duplicating your Figma layers
After you've named the layers in Figma that you'd like to map to your spreadsheet columns, you can now copy/paste your layers into multiple blocks. These will be selected later, and each one will be mapped to a single row in your spreadsheet; this is what allows you to easily create lists or grids with dynamic content in Figma.
# Syncing content from a CSV/XLSX file
If you've created your spreadsheet as either a .csv
or .xlsx
file, you can sync it with your Figma design by clicking on the Sync Content button in the main CopyDoc plugin screen, which will open up the settings panel for this feature.
You can preview your spreadsheet contents by either dragging and dropping your correctly structured .csv
or .xlsx
file into the Sync XLSX/CSV File dropzone area, or by clicking on it and selecting the file manually by browsing for it on your computer.
Ensure that you select at least one layer in Figma that contains renamed layers to match your spreadsheet headers, and then click on the Sync Spreadsheet Rows with Figma Layers button. This will sync the content from your spreadsheet with your selected renamed Figma layers.
# Syncing content from a Google Sheet
If you've created your spreadsheet as a Google Sheet, you can sync it with your Figma design by clicking on the Sync Content button in the main CopyDoc plugin screen, which will open up the settings panel for this feature.
# Making your Google Sheet link public and copying the URL
In order to use your Google Sheet's content to sync with Figma, you'll first need to ensure that the Google Sheet share URL is made public, otherwise the plugin won't have permissions to read it. You can do this by opening up the spreadsheet in Google Sheets, clicking the Share button and changing the sheet's permissions from Restricted* and update it to Anyone with the link.
# Pasting your Google Sheet URL and syncing with Figma
You can preview your spreadsheet contents by pasting your public Google Sheets URL into the Sync Public Google Sheet input field; if it's a valid, and public URL that's correctly structured, it will automatically load a preview of the headers that it contains after pasting it.
Ensure that you select at least one layer in Figma that contains renamed layers to match your spreadsheet headers, and then click on the Sync Spreadsheet Rows with Figma Layers button. This will sync the content from your spreadsheet with your selected renamed Figma layers.
# Exporting Figma comments
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.
# Counting text layer characters
CopyDoc allows you to count the number of characters, words, sentences and paragraphs for any text layers in your design by selecting them on your Figma canvas, or by using the Figma layers panel. You can select a single Figma text layer, or multiple Figma text layers at the same time.