> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Create size variable

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

## `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:

| Area                       | Properties                             |
| -------------------------- | -------------------------------------- |
| Margin and padding         | Top, bottom, left, right               |
| Position                   | Top, bottom, left, right               |
| Column and row gaps        | Display settings, Quick Stack          |
| Dimensions                 | Height, width (including min and max)  |
| Grid                       | Column and row sizes                   |
| Typography                 | Font size, line height, letter spacing |
| Border                     | Radius, width                          |
| Filter and backdrop filter | Blur radius                            |

### Syntax

```typescript
collection.createSizeVariable(
  name: string,
  value: {{SIZE_VALUE}} | {{VARIABLE_REFERENCE}} | {{CUSTOM_VALUE}},
  options?: {
    mode?: {{VARIABLE_MODE}}
  }
): 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*](/designer/reference/variables-detail-overview#custom-values) - A custom value for the variable

* **options**: *object* - Optional parameters for the variable.
  * **mode**: *VariableMode* - The [variable mode](/designer/reference/variable-modes) object. Get the variable mode by using the [`collection.getVariableModeByName()`](/designer/reference/get-variable-mode-by-name) method.

### Returns

**Promise\<*SizeVariable*>**

A Promise that resolves to a SizeVariable object

### Example

```typescript
// 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)

// Create a Size Variable with a Custom Value
const myCustomSizeVariable = await collection?.createSizeVariable("h1-font-size", {
  type: "custom",
  value: "clamp(1rem, 2vw, 2rem)",
})
console.log(myCustomSizeVariable)


```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |