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

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

Size Units

UnitDescriptionExample
pxPixels - absolute unit, 1px is equal to one pixel on the screen.font-size: 16px;
emRelative to the font-size of the element (2em is 2 times the current font).padding: 1.5em;
remRelative to the font-size of the root element.margin: 2rem;
vhViewport Height - 1% of the viewport’s height.height: 50vh;
vwViewport Width - 1% of the viewport’s width.width: 80vw;
dvhDynamic Viewport Height - relative to 1% of the viewport’s height.min-height: 100dvh;
dvwDynamic Viewport Width - relative to 1% of the viewport’s width.max-width: 50dvw;
lvhLarge Viewport Height - relative to 1% of the viewport’s height for large screens.height: 75lvh;
lvwLarge Viewport Width - relative to 1% of the viewport’s width for large screens.width: 100lvw;
svhSmall Viewport Height - relative to 1% of the viewport’s height for small screens.height: 60svh;
svwSmall Viewport Width - relative to 1% of the viewport’s width for small screens.width: 40svw;
vmaxViewport Maximum - 1% of the viewport’s larger dimension.margin: 2vmax;
vminViewport Minimum - 1% of the viewport’s smaller dimension.margin: 2vmin;
chCharacter - 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

1// Get Collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Create Size Variable with a Size Value
5const mySizeVariable = await collection?.createSizeVariable("Defualt Padding", { unit: "px", value: 50 })
6console.log(mySizeVariable)

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canModifyVariablesAnyMainCanvasDesign