Google Sheets Sync
Search…
⌃K

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.
​

Show / Hide

Setting the value to Show or Hide will make the layer hidden or visible.

​

Fill colour

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

​

Layer Opacity

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%
​

Layer Size (Width / height)

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 100px
  • 32s → would set the layer height to 32px & the layer width to 32px
  • 100w → would set the layer width to 100px
  • 32w → would set the layer width to 32px
  • 100h → would set the layer height to 100px
  • 32h → would set the layer height to 32px
​

Layer Position

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 parent
  • 40y → would set the layer's y position to 40px within its parent
​

Absolute Layer Position

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)

​

Layer Rotation

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º

​

Text Alignment

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

​

Font Size

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 14px
  • font-size:40 → would set the font size to 40px
​

Line Height

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 40px
  • line-height:120% → would set the Line Height to 120%
​

Letter Spacing

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 2px
  • letter-spacing:10% → would set the Letter Spacing to 10%
​

Chaining Multiple Data Types

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

​

Multiple labels at once

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 More Date Types?

Want some more Data Types supported that aren't listed here? Let me know by requesting them here: New Feature Request​
​
Previous
How a value is applied to a layer
Next
Repeating your layers
Last modified 1yr ago