Create size variable

`collection.createSizeVariable(name, value)`

Create a Size variable with a name for the variable, and size value.

Once created, you can set size variables for:

Margin and padding — top, bottom, left, right
Position — top, bottom, left, right
Column and row gaps for display settings and Quick Stack
Height and width dimensions (including min and max)
Grid column and row sizes
Typography — font size, line height, letter spacing
Border radius and width
Filter and backdrop filter blur radius

Syntax

collection.createSizeVariable(name: string, value: SizeValue | SizeVariable): Promise<SizeVariable>

Size Units

Unit	Description	Example
`px`	Pixels - absolute unit, 1px is equal to one pixel on the screen.	`font-size: 16px;`
`em`	Relative to the font-size of the element (2em is 2 times the current font).	`padding: 1.5em;`
`rem`	Relative to the font-size of the root element.	`margin: 2rem;`
`vh`	Viewport Height - 1% of the viewport's height.	`height: 50vh;`
`vw`	Viewport Width - 1% of the viewport's width.	`width: 80vw;`
`dvh`	Dynamic Viewport Height - relative to 1% of the viewport's height.	`min-height: 100dvh;`
`dvw`	Dynamic Viewport Width - relative to 1% of the viewport's width.	`max-width: 50dvw;`
`lvh`	Large Viewport Height - relative to 1% of the viewport's height for large screens.	`height: 75lvh;`
`lvw`	Large Viewport Width - relative to 1% of the viewport's width for large screens.	`width: 100lvw;`
`svh`	Small Viewport Height - relative to 1% of the viewport's height for small screens.	`height: 60svh;`
`svw`	Small Viewport Width - relative to 1% of the viewport's width for small screens.	`width: 40svw;`
`vmax`	Viewport Maximum - 1% of the viewport's larger dimension.	`margin: 2vmax;`
`vmin`	Viewport Minimum - 1% of the viewport's smaller dimension.	`margin: 2vmin;`
`ch`	Character - relative to the width of the '0' (zero) character.	`width: 20ch;`

Parameters

name : string - Name of the variable
value: SizeValue - Object with the unit and value of the size. {unit: SizeUnit, value: number}
- SizeUnit : string - Any of the following units "px" | "em" | "rem" | "vh" | "vw" | "dvh" | "dvw" | "lvh" | "lvw" | "svh" | "svw" | "vmax" | "vmin" | "ch"

Returns

Promise<Variable>

A Promise that resolves to a Variable object

Example

// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Create Size Variable with a Size Value
const mySizeVariable = await collection?.createSizeVariable("Defualt Padding", { unit: "px", value: 50 })
console.log(mySizeVariable)

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canModifyVariables	Any	Main	Canvas	Design