How a value is applied to a layer
Last updated
Last updated
Now you know how to specify which 'value' to grab from a Spreadsheet by including it in the Layer name. The value may be applied slightly differently depending on the Layer type.
The value will be used to set the content within the text layer.
If the value is a URL starting with http:// or https:// the Plugin will fetch the data from that URL and attempt to convert it to an Image and apply it as the background fill for the layer.
Applying image fills will only work on Vector layers (e.g not Text layers, Frames or Components).
Note: Large images may take a while to download
If you want to use an Image uploaded to Google Drive, you can simply paste the Google Drive 'Share link' into the Sheets cell. To get this link; when previewing your image in Google Drive, click the 3 dots in teh top right hand corner and click 'Share'.
Then click 'Change to anyone with the link'
Then Copy the link and paste it into your Google Sheets cell. The Plugin will automatically fomat the URL to download the image into your Figma file
Setting Components with Google Sheets Sync unlocks a whole new possibility of automating your designs.
To change which Component is used; make sure the Layer name of the component instance has a label in it (e.g #row) and then make sure the Value in the Sheets file is the name of the Main Component you want to swap it with.
For example; if the value in my Spreadsheet is 'Highlighted row' the plugin will attempt to swap the Component instance with a Component named 'Highlighted row'.
It is not case sensitive – but all punctuation, spaces etc. do count. It needs to match exactly.
So also make sure you don't have multiple Main components with the same name, otherwise it won't be able to tell which one to use.
Heads up, this will not just work for all your Components that may sit in an external Library or on a separate page in your Figma file. (As the plugin can't fetch all available components to compare it to.)
This will only work if your Main Components, or at least an instance of it, is within the 'Sync search area' (e.g Current page, current selection, whole doc) when you run the plugin.
As per above you can set a Component Variant in the same way. The key thing to note is how the name of the Variant is structured.
The name of a variant will be structured like: Property 1=Value, Property 2=Value, Property 3=Value
It must match exactly, and must contain all the Properties (not just a few), and be in the correct order.
For example, if you're Variants were setup like above; and you wanted to change the Component Instance to be a Primary Large Button with an Icon. Then the value in your Sheet would be: Type=Primary, Size=Large, State=Default, Icon=True
