> 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.

# Set variable value

## `variable.set(value, options?)`

Set the value of the selected variable.

**Syntax**

```typescript
variable.set(
    value: string | number | {{SIZE_VALUE}} | Variable | {{CUSTOM_VALUE}},
    options?: {
        mode: {{VARIABLE_MODE}},
    }
): Promise<null>;
```

### Parameters

| Parameter   | Description                                                                                                                                                                                                                                                                         | Type                                                                         |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **value**   | The value to set for the variable. Must match the variable's type. You can also pass a Variable object to create an alias, a [CustomValue](/designer/reference/variables-detail-overview#custom-values) for custom values, or `null` to reset a mode-specific value to its default. | `string` \| `number` \| `SizeValue` \| `Variable` \| `CustomValue` \| `null` |
| **options** | An optional parameter to set the [mode value](/designer/reference/variable-modes) of the variable.                                                                                                                                                                                  | `{mode: VariableMode}`                                                       |

> **Resetting a mode-specific value**
>
> To reset a mode-specific value back to the default base value, pass `null`
> when calling `variable.set()` along with the mode you want to reset. Variables
> without a mode-specific value won't be affected.

\


### Variable values by type

#### Color

```typescript
collection.createColorVariable(name: string, value: string | ColorVariable | CustomValue): Promise<ColorVariable>
```

| Accepted Formats for Value | Examples                                                 |
| -------------------------- | -------------------------------------------------------- |
| Color name                 | `collection.createColorVariable("primary", "red");`      |
| RGB Hex                    | `collection.createColorVariable("primary", "#ffcc11");`  |
| RGBA Hex                   | `collection.createColorVariable("primary", "#fffcc11");` |

#### Size

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

| Format                | Unit  | Examples                        |
| --------------------- | ----- | ------------------------------- |
| Pixels                | `px`  | `{ unit: "px", value: 50 });`   |
| Root EM               | `rem` | `{ unit: "rem", value: 2 });`   |
| EM Units              | `em`  | `{ unit: "em", value: 1.5 });`  |
| Viewport Width        | `vw`  | `{ unit: "vw", value: 100 });`  |
| Viewport Height       | `vh`  | `{ unit: "vh", value: 100 });`  |
| Small Viewport Height | `svh` | `{ unit: "svh", value: 100 });` |
| Small Viewport Width  | `svw` | `{ unit: "svw", value: 100 });` |
| Character Units       | `ch`  | `{ unit: "ch", value: 80 });`   |

#### Number & Percentage

```typescript
collection.createNumberVariable(name: string, value: number | NumberVariable | CustomValue): Promise<NumberVariable>
```

| Accepted Formats for Value     | Examples                                              |
| ------------------------------ | ----------------------------------------------------- |
| Number value between 0 and 100 | `collection.createPercentageVariable("opacity", 50);` |

#### FontFamily

```typescript
collection.createFontFamilyVariable(name: string, value: string | FontFamilyVariable | CustomValue): Promise<FontFamilyVariable>
```

| Accepted Formats for Value                       | Examples                                                         |
| ------------------------------------------------ | ---------------------------------------------------------------- |
| String of the font family name (e.g., "Verdana") | `collection.createFontFamilyVariable("defaultFont", "Verdana");` |

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`

### Examples

#### Color

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

// Get Variable
const variable = await collection?.getVariableByName("MyColorVariable");

// Check Variable type and set color
if (variable?.type === "Color") await variable.set("#fffcc11");
```

#### Size

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

// Get Variable
const variable = await collection?.getVariableByName("MySizeVariable");

// Check Variable type and set size
if (variable?.type === "Size") await variable.set({ value: 16, unit: "px" });
```

#### Number & Percentage

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

// Get Variable
const variable = await collection?.getVariableByName("MyNumberVariable");

// Check Variable type and set number
if (variable?.type === "Number") await variable.set(100);
```

#### Font family

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

// Get Variable
const variable = await collection?.getVariableByName("MyFontVariable");

// Check Variable type and set font family
if (variable?.type === "FontFamily") await variable.set("Verdana");
```

#### Alias

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

// Get Variables
const variableToSet = await collection?.getVariableByName("MyAliasVariable");
const variableToAlias = await collection?.getVariableByName("MyColorVariable");

// Check that Variable types are compatible and set alias
if (variableToSet?.type === "Color" && variableToAlias) {
    await variableToSet.set(variableToAlias);
}
```

#### Custom value

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

// Get Variable
const variable = await collection?.getVariableByName("MyCustomVariable");

// Check Variable type and set custom value
if (variable?.type === "Color") {
    await variable.set({
        type: "custom",
        value: "color-mix(in srgb, var(--blue-500), #fff 60%)"
    });
}
```

[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   |