- Headers should match your layer name in Figma (i.e. the “Shade Name” header here matches the “#ShadeName” layer name in Figma)
- For colors, you need to add a /# in front of each hex code for the plugin to recognize it as a color instead of text.
- Make sure the data you want to use is the first tab
- Go to the share button, set it to “anyone with the link can view” and copy the link
Tip: Make sure the data you want is the first tab in the Google Sheet. You can store multiple lists this way, and move the tab you want just before you activate the plugin in Figma. In the example below, we’ll drag the “Foundation” tab from the second to first tab before running the plugin.
- Run the Google Sheets Sync plugin
- Enjoy seeing all your content load
- Adjust your Google sheet and re-run the plugin as many times as desired
Now that you have everything set up it’s super easy to create, test, and update your designs. I had a lot of fun seeing how different groupings and sorts would change the experience, especially for longer lists.
In this example of a color picker you can see how helpful this was to understand how the component might work with real content. In just a few minutes I was able to:
- Set up a list from my master component
- Run the plugin and see how it would look for my lipsticks
- Move a tab and see how the same component would look for my foundations
- Resort the data and decide on the best way to display the content
Plus, if there are any changes to the product names or colors it will be easy to add/delete rows or change the content in the Google Doc.
Happy Designing & Thanks Dave!