Today, I’m going to show you how to sync the content of your Google Sheets directly into your Figma designs using the CopyDoc plugin.
Getting Started
The first thing you need to do is head over to the Figma community and search for “CopyDoc”. Under the “Plugins” tab, you’ll see the results for “CopyDoc”. Simply click on the “Install” button to add it to your Figma workspace.
Preparing your Google Sheets
For this example, let’s say we’re creating a simple movie app. We want to sync the content from a Google Sheets spreadsheet that we’ve prepared. In your spreadsheet, the first row should include the headers for each column. Each row and column will be used to populate our Figma layers.
It’s important that these headers match the names of the layers in Figma. For example, if we have a column titled “#Title” in our spreadsheet, there should also be a Figma layer with the name “#Title”.
If you want to add images to your layers, you’ll need to obtain the online image URL and paste it into the corresponding column in your Google Sheets spreadsheet.
Syncing the Content
Once you’ve prepared your spreadsheet and you’re ready to sync the content with Figma, you need to share your spreadsheet by clicking on the “Share” button. In the dialog box, select the option “Anyone with the link” so that Figma can access it.
Copy the shared link of your spreadsheet and go back to Figma. Right-click anywhere on the Figma canvas to open the context menu. Select “Plugins” and then click on “CopyDoc” to run the plugin.
In the CopyDoc plugin, click on the “Sync Content” button. From there, you can paste the link to your Google Sheets spreadsheet. The plugin will load the columns from your spreadsheet.
Creating Layers in Figma
Now, make sure you’ve created enough layers in Figma to match the content of your spreadsheet. You can use components, frames, or groups for this. In my example, I created three instances of a component and placed them on my canvas. The names of the layers in these instances should match the headers in your spreadsheet.
Syncing Layers with the Spreadsheet
Once you’ve selected the layers in Figma and verified that everything is set up correctly, you can click on the “Sync Rows from Spreadsheet with Figma Layers” button. The plugin will then start mapping the content from the spreadsheet to the corresponding layers in Figma.
The plugin will also download the specified images from your spreadsheet and associate them with the corresponding layers in Figma. Once it’s done, you’ll see that the content from your spreadsheet has been automatically integrated into your Figma layers, without the need for manual copy-pasting.
Conclusion
Using the CopyDoc plugin is a simple and powerful way to sync the content of your Google Sheets with your Figma designs. Whether you want to populate lists, grids, or any other content, this plugin allows you to do it quickly and efficiently.
Give it a try with your team or in your own projects and take advantage of this new feature to streamline your workflow. Thank you for following along, and stay tuned for more Figma tips and tricks!
Visit Crawlan.com for more information on using Google Sheets and other essential tools for your online marketing.
