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