Special data types

Google Sheets Sync

Search…

Getting Started

Setting up your Sheet Structure

Naming your Figma layers

Running the plugin

How a value is applied to a layer

Special data types

Repeating your layers

Support

Examples

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