Add
What It Does
Adds two numbers together to produce their sum. It's a basic math operation useful for combining numeric values like spacing tokens or opacity percentages.
Inputs
| Name | Description | Type | Required |
|---|---|---|---|
| a | The first number to add | Number | Yes |
| b | The second number to add | Number | Yes |
Outputs
| Name | Description | Type |
|---|---|---|
| value | The sum of a and b | Number |
.png)
How to Use It
- Drag the Add node into your graph.
- Connect a number (like 3) to the "a" input.
- Connect another number (like
3) to the "b" input. - Run the graph—your output will be 6.
Tips
- You can use the Add node with token references, like adding a base spacing value to an increment.
- For adding more than two numbers, chain multiple Add nodes together or use the Variadic Add node.
See Also
Use Cases
- Spacing Calculations: Add a base spacing unit (4px) to a multiplier to create consistent spacing increments in your design system.
- Opacity Adjustments: Add a percentage to a base opacity value to create a range of transparencies for different states.
- Font Size Scaling: Add a fixed increment to your base font size to create larger heading sizes.