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:

Syntax

1
collection.createSizeVariable(
2
  name: string, 
3
  value: {{SIZE_VALUE}} | {{VARIABLE_REFERENCE}} | {{CUSTOM_VALUE}},
4
  options?: {
5
    mode?: {{VARIABLE_MODE}}
6
  }
7
): Promise<SizeVariable>

Parameters

• name : string - Name of the variable

• value:

  • SizeValue - Object with the unit and value of the size. {unit: SizeUnit, value: number}

    • SizeUnit See the accordion below for the list of supported units.

      Size Units

      Absolute Units

      Unit	Name	Description	Example Usage
      px	Pixels	Absolute unit, 1px equals one pixel on the screen	font-size: 16px;

      Relative Units

      Unit	Name	Description	Example Usage
      em	Element-relative Em	Relative to parent element’s font size (2em = 2× parent font)	padding: 1.5em;
      rem	Root Em	Relative to root element’s font size	margin: 2rem;
      ch	Character Units	Relative to width of ‘0’ (zero) character	width: 20ch;

      Viewport-based Units

      Unit	Name	Description	Example Usage
      vh	Viewport Height	1% of viewport height	height: 50vh;
      vw	Viewport Width	1% of viewport width	width: 80vw;
      vmin	Viewport Minimum	1% of viewport’s smaller dimension	margin: 2vmin;
      vmax	Viewport Maximum	1% of viewport’s larger dimension	margin: 2vmax;

      Dynamic Viewport Units

      Unit	Name	Description	Example Usage
      dvh	Dynamic Viewport Height	Adjusts to viewport height changes (mobile browsers)	min-height: 100dvh;
      dvw	Dynamic Viewport Width	Adjusts to viewport width changes	max-width: 50dvw;
      svh	Small Viewport Height	Viewport height for small screens	height: 60svh;
      svw	Small Viewport Width	Viewport width for small screens	width: 40svw;
      lvh	Large Viewport Height	Viewport height for large screens	height: 75lvh;
      lvw	Large Viewport Width	Viewport width for large screens	width: 100lvw;

  • SizeVariable - A reference to another size variable
  • CustomValue - A custom value for the variable

• options: object - Optional parameters for the variable.

  • mode: VariableMode - The variable mode object. Get the variable mode by using the collection.getVariableModeByName() method.

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