Special data types
Beyond Text content, Images and swapping Components, Google Sheets Sync has the ability to change properties on the layer (e.g Fill colour, Font size etc.) – by setting the Value in your Sheet in a specific way. You can even chain multiple together.
None of these are case sensitive.
If your layer is a Text Layer or a Component Instance layer, then you'll need to prefix the Value in Google Sheets with a / for the plugin to know that you're specifying a special data type (and not Content or a Component name) – for all other layer types, you don't need to do this.
Setting the value to Show or Hide will make the layer hidden or visible.
If the value starts with a # it will assume it's a colour and apply it as the fill. (If this is for a group, it will apply the fill to all its children)
#1DA1F2→ would set the fill to #1DA1F2#ABC→ would set the fill to #AABBCC#AB→ would set the fill to #ABABAB#A→ would set the fill to #AAAAAA
If the value ends with a % if will assume you're setting the Opacity on the layer.
50%→ would set the layer opacity to 50%100%→ would set the layer opacity to 100%
If the value ends with a s if will assume you're setting the size (height / width) on the layer.
If the value ends with a w if will assume you're setting the width on the layer.
If the value ends with a h if will assume you're setting the height on the layer.
100s→ would set the layer height to 100px & the layer width to 100px32s→ would set the layer height to 32px & the layer width to 32px100w→ would set the layer width to 100px32w→ would set the layer width to 32px100h→ would set the layer height to 100px32h→ would set the layer height to 32px
If the value ends with a x or a y if will assume you're setting the size (x Position or y Position) on the layer.
20x→ would set the layer's x position to 20px within its parent40y→ would set the layer's y position to 40px within its parent
If the value ends with a xx or a yy if will assume you're setting the size (x Position or y Position) on the layer.
20xx→ would set the layer's x position to 20px within the Figma page (regardless of its parent)40yy→ would set the layer's x position to 20px within the Figma page (regardless of its parent)
If the value ends with a º if will assume you're setting the rotation on the layer.
On a mac, pressing Alt + 0 will create the degree symbol 'º' easily
30º→ would set the layer's rotation to 30º175º→ would set the layer's rotation to 175º
If the value starts with text-align: it will assume you're setting the Horizontal Text Alignment on the layer.
If the value starts with text-align-vertical: it will assume you're setting the Vertical Text Alignment on the layer.
text-align:center→ would set the layer's horizontal text alignment to centerAvailable horizontal alignment options are:
Left
Right
Center
Justified
text-align-verical:bottom→ would set the layer's vertical text alignment to bottomAvailable vertical alignment options are:
Top
Center
Bottom
If the value starts with font-size: it will assume you're setting the Font Size on the layer.
font-size:14→ would set the font size to 14pxfont-size:40→ would set the font size to 40px
If the value starts with line-height: it will assume you're setting the Line Height on the layer.
line-height:auto→ would set the Line Height to 'Auto'line-height:40→ would set the Line Height to 40pxline-height:120%→ would set the Line Height to 120%
If the value starts with letter-spacing: it will assume you're setting the Letter Spacing on the layer.
letter-spacing:2→ would set the Letter Spacing to 2pxletter-spacing:10%→ would set the Letter Spacing to 10%
You using more than one of these data types at once, by separating them by a 'space' or comma.
For example, setting your Sheets value as:
letter-spacing:4px, #f00, 30%, 20º, text-align:center— will result in setting your Layer to have:Letter spacing of 4px
A fill of Red (#ff0000)
A layer opacity of 30%
A rotation of 20º
Centered horizontal text alignment
Another method is to use multiple labels in your Figma layer's name.
Yep, that's right you can set multiple labels on one layer.
For example; if my Spreadsheet had these values...
If I names my Text layer Layer #status #colour .3 — then it would set the content of the Text to say "Delayed" and set the fill Colour to '#EB5757' (Red).
If you specify an index on a Layer with multiple labels, it must be at the end of the Layer name. You can not specify multiple Labels & multiple Indexes on the one layer.
Want some more Data Types supported that aren't listed here? Let me know by requesting them here: New Feature Request
