iDevie
August 2021
M T W T F S S
« Jul    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Categories


A video clicking on the layers panel and changing the layer name to disconnect the layer name from the actual text

A video clicking on the layers panel and changing the layer name to disconnect the layer name from the actual text

Disconnecting the layer name from the actual text
  1. Headers should match your layer name in Figma (i.e. the “Shade Name” header here matches the “#ShadeName” layer name in Figma)
  2. 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.
  3. Make sure the data you want to use is the first tab
  4. 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.

A google sheet with a column & header for each title, description, and color variable

A google sheet with a column & header for each title, description, and color variable

  1. Run the Google Sheets Sync plugin
  2. Enjoy seeing all your content load
  3. 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!


Comments 0
There are currently no comments.