Naming your Figma layers
This is the key part of this whole plugin!!
There's 3 key parts about how you name your layer that will tell the Plugin:
- 1.Which Worksheet within your Google Sheets file to look at (e.g if there's multiple tabs in the Sheets file)
- 2.Which Label to use in the Worksheet to lookup the value
- 3.Which Value within all the values for that given Label should it used (e.g which index to use)
To specify which label to lookup, simply include a
# in your Figma's layer name, followed by the Label name.Looking at this example below, let's say I wanted to get the content of Title to be used in the Figma Text Layer — I would name the Figma layer
#Title.
The plugin will assume anything after a
# is specifying the label to lookup.It is not case sensitive, and will also ignore spaces, underscores and dashes.
So layer names of '#First name', '#first_name', 'Layer #FIRST-NAME' will all match to a Label in the Sheet named 'First name' (or even 'First_name')
If no
# is used in a Figma Layer name, then no value from the Sheet will be applied to it.
You can use the 'Fetch' feature to make re-naming even easier; learn more in the 'Running the plugin' section
By default, Google Sheets Sync will use the first Worksheet in your Google Sheets file.
If you want to specify a specific Worksheet to be used for the values, you can name your layers/pages, similarly to how you specify the correct Label to lookup (as per above) — but instead of using a
#, use // followed by the Worksheet name.For example; naming your Figma Page
Page 1 // Properties — the plugin will use the Worksheet named Properties when populating the content on that Page.You can also name a Frame or Group layer similarly to how you’d name a page — then all child layers would inherit the Worksheet from that Frame/Group’s name.
By default, Google Sheets Sync will automatically get the next value for the specified Label each time it comes across a Figma layer with the same Label in it's name.
For example; the first time it encounters a Layer's name containing
#Title, it will grab the 1st value under the row/column Labelled 'Title'. And for the next Layer it will use the 2nd value, and the next the 3rd and so on...You can specify the row/column the content is synced from within a specific lookup label, by naming your layer correctly.
Appending
.4 to the layer name will return the 4th value for that lookup label, .9 will return the 9th, and so on.Example layer names:
#Title.1– Will return the 1st value under the label 'Title'#Subtitle.5– will return the 5th value under the label 'Title'
If you specify an index for a Group/Frame — the index will be applied to all child layers; unless the Layer name of one of those children specifies its own Index
Apart from specifying the exact row/column value to use, there's a couple of other Index types you can use.
.n will make sure the value of your layer increments its index each time the Label is used (this is what is used by default)In this scenario you could have blank values in your sheet which could be included as part of incrementing the Index. If you want to ignore blank values, and increment individually for the given key, append
.i in the layer name.To choose a random index within all the possible indexes, append
.xSimilar to
.n this may include blank values, if your column/row for the given layer has blacnk values. To choose a random index that will ignore blank values, use .rOnce an index value reaches the maximum (or all possible randomised indexes have been exhausted) — it will reset and go back to the start
If you want to ignore layers (and all their children); prefix
- to the start of the layer name.For example if I have a Frame containing a design that I want to be ignored from syncing any content, it may be named something like
-Dashboard designThis concept can be applied on names of Pages too.
Main Components
By default all Main components will be ignored. (As most the time people don't want the layers in their Main component syncing).
If you really want to make sure your Main component is included, then prefix its layer name with
+For example; the Main component named
Navigation would be ignored, but +Navigation wouldn't be ignored
Last modified 2yr ago