Use Google Sheets as a Database for your Figma Design Content
An improved way to collaborate with cross-discipline colleagues
“Is this the most up-to-date content?” “Has our writer reviewed this yet?” “Is this the source of truth?”
You’ve heard these questions, but why does it happen so frequently? One reason could be that teams aren’t co-located; writers in one building and the design team in another mean competing meetings and little time to collaborate. As a result, it becomes easy for documents to become out-of-date or to create duplicate and triplicate content.
Here’s a solution that I’ve used in the past to make it easier to collaborate with our cross-discipline colleagues. We’ll use the example of creating a social media template with a design and writing team involved.
Example: Social Media Template
Step 1: Add Google Sheets Sync
Search for and add the Google Sheets Sync Plugin in the Figma Community.
Step 2: Create a generic post layout in Figma
Create as many pages or slides as you want your social post to have. Add a generic structure that’ll be common across all pages. I included a category, headline, message, and brand name.
Step 3: Create a new Google Sheet
Use the structure you created in Figma as the table headers in your spreadsheet. Add mock content, for now, to test everything out.
Step 4: Create a public link
When you’re ready, click Share. Make sure under that General Access you select “Anyone with the link” so Figma can access the data.
Step 5: Prep your Figma file
Back in Figma, let’s do one quick thing before importing. Create components with your original artboards, then make copies. We’ll link the copies to our database to preserve the original components with the placeholder content.
Step 6: Open Google Sheets Sync
Right-click the canvas and go to Plugins > Google Sheets Sync.
When the plugin opens, past the sharing URL in the input and click Fetch.
Step 7: Link Figma layers to Google Sheets
To link your layers to the plugin, select the layer you want to sync, then click on the cell to link it. You’ll see the layer’s name update with a reference to the spreadsheet.
Step 8: Sync
When you’re done, click Sync. You’ll see the content get updated in our staged designs.
Step 9: Add Visual Design
Create two new artboards with the original 400 x 400px dimensions. Next, copy the artboards with the synced layers and paste them into the blank boards. Since it’s in a new board, you can add additional layers to achieve any visual you want. When you change fonts, font sizes, or colors, those settings are preserved, even when you update the content in your sheet and re-sync!
That’s it! With a little better organization, we can reduce duplicate content, enable ownership of our stakeholder teams, and keep documents in sync!
Here are the files I used to create this post. I hope it helps you and your team run more smoothly!
Resources
Have any questions? Find me on Twitter @glennsorrentino!
