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

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

Parameters

• name : string - Name of the variable
• value: SizeValue | SizeVariable | CustomValue - Object with the unit and value of the size. {unit: SizeUnit, value: number} Additionally, you can pass a SizeVariable to create a referenced variable or CustomValue to create a variable with a custom value.
  • SizeUnit : string - Any of the following units "px" | "em" | "rem" | "vh" | "vw" | "dvh" | "dvw" | "lvh" | "lvw" | "svh" | "svw" | "vmax" | "vmin" | "ch"

Returns

Promise<SizeVariable>

A Promise that resolves to a SizeVariable object

Example

1
// Get Collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create Size Variable with a Size Value
5
const mySizeVariable = await collection?.createSizeVariable("Defualt Padding", { unit: "px", value: 50 })
6
console.log(mySizeVariable)
7
8
// Create a Size Variable with a Custom Value
9
const myCustomSizeVariable = await collection?.createSizeVariable("h1-font-size", {
10
  type: "custom",
11
  value: "clamp(1rem, 2vw, 2rem)",
12
})
13
console.log(myCustomSizeVariable)

Designer Ability