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 center- Available horizontal alignment options are:
- Left
- Right
- Center
- Justified
text-align-verical:bottom
→ would set the layer's vertical text alignment to bottom- Available 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
Last modified 2yr ago