Studio
  • Why Studio?
  • Getting Started
  • Setting up Studio
    • Import from Tokens Studio for Figma
    • Import from Figma variables
  • Connect Studio to Figma
    • Using Tokens Studio for Figma
    • Using Companion by Tokens Studio
  • Connect Studio to Code
  • Platform
    • Features
      • Tokens
        • Token Sets
        • Token flow
      • Themes
        • Theme Groups and Theme Options
      • Configuration
      • Releases
    • Platform
      • Accounts
      • Organisation
      • Project
      • API keys
      • Inviting members
  • GRAPH ENGINE
    • Introduction
    • Editor
    • Creating a Graph Based Set
    • Nodes
    • Types
    • Editing
    • Available Nodes
      • Accessibility
        • Color Blindness
      • Array
        • Array Filter
        • Array Find
        • Arrify
        • Concat
        • Flatten
        • Index Array
        • Inject Item
        • Array Length
        • Array Push
        • Remove Item
        • Replace Item
        • Reverse Array
        • Slice Array
        • Sort Array
        • Array Map
      • Color
        • Color To String
        • Color Wheel
        • Contrast
        • Contrasting Alpha
        • Contrasting Color
        • Contrasting from Array
        • Convert Color
        • Create Color
        • Darken Color
        • Deconstruct Color
        • Delta E
        • Distance
        • Flatten Alpha
        • Lighten Color
        • Match Alpha
        • Mix Colors
        • Name Color
        • Poline
        • Range
        • Scale Colors
        • Sort Colors By Distance
        • String To Color
      • CSS
        • CSS Accessible Clamp
        • CSS Box
        • CSS Function
        • CSS Map
      • Curves
        • Bezier Curve
        • Construct Float Curve
        • Deconstruct Float Curve
        • Flip Float Curve
        • Preset Bezier Curves
        • Sample Array from Float Curve
        • Sample Curve
        • Sample Float Curve
      • Design Tokens
        • Array To Set
        • Create Border
        • Create Border Design Token
        • Create Box Shadow
        • Create Box Shadow Design Token
        • Create Design Token
        • Create Reference
        • Create Typography
        • Create Typography Design Token
        • Destruct Token
        • External Token Set
        • Extract Token
        • Flatten Token Sets
        • Group Tokens
        • Inline Tokens
        • Invert Token Set
        • Leonardo Color
        • Leonardo Theme
        • Name Tokens
        • Preview Typography
        • Resolve Tokens
        • Set To Array
        • Ungroup Tokens
        • Group Token Array
        • Ungroup Token Array
      • Figma
        • Code Syntax
        • Publish Varibales
        • Scope All
        • Scope by Type
        • Scope Color
        • Scope Number
        • Scope String
      • Generic
        • Constant
        • Delay
        • Input
        • Object Merge
        • Note
        • Object Path
        • Objectify
        • Output
        • Panic
        • Passthrough
        • Subgraph
        • Time
      • Gradient
        • Gradient Stop
      • Logic
        • And
        • Compare
        • If
        • Not
        • Or
        • Switch
      • Math
        • Absolute
        • Add
        • Add Variadic
        • Ceiling
        • Clamp
        • Closest Number
        • Cosine
        • Count
        • Difference
        • Divide
        • Divide Variadic
        • Evaluate Math
        • Exponentiation
        • Floor
        • Fluid
        • Lerp
        • Modulo
        • Multiply
        • Multiply Variadic
        • Power
        • Random
        • Range Mapping
        • Round
        • Sine
        • Snap
        • Square Root
        • Subtract
        • Subtract Variadic
        • Tangent
      • Preview
        • Color Compare
        • Color Scale
        • Color Swatch
        • Math Expression
        • Number
        • Preview Curve
      • Search
        • Find First Match
        • Linear Search
      • Series
        • Alternating Series
        • Arithmetic Series
        • Exponential Decay
        • Fibonacci Series
        • Geometric Series
        • Harmonic Series
        • Inverse Linear Mapping
        • Linear Space
        • Power Series
      • String
        • Case Convert
        • Interpolation
        • Join Array
        • Lowercase
        • Normalize
        • Pad
        • Regex
        • Replace
        • Split String
        • Stringify
        • Uppercase
      • Typography
        • Base Font Size
      • Typing
        • Assert Defined
        • Has Value
        • Parse Number
        • Parse Unit
        • Pass Unit
      • Vector2
        • Create
        • Destructure
      • Naming
        • Alphabetic Scale
        • Alphanumeric Scale
        • Greek Letter
        • Hierarchy Level
        • Numeric Scale
        • T-Shirt Size
  • PLUGINS
    • Tokens Studio for Figma Plugin
    • Companion by Tokens Studio
    • Tokens Studio for Framer Plugin
Powered by GitBook
On this page
  • What It Does
  • Inputs
  • Outputs
  • How to Use It
  • Tips
  • See Also
  • Use Cases
Edit on GitHub
  1. GRAPH ENGINE
  2. Available Nodes
  3. Math

Difference

PreviousCountNextDivide

Last updated 1 month ago

What It Does

The Difference node calculates the absolute difference between two numbers. It's useful for measuring the gap between values while disregarding which is larger.

Inputs

Name
Description
Type
Required

A

First number in the comparison

Number

No

B

Second number in the comparison

Number

No

Precision

How many decimal places to round to

Number

No

Outputs

Name
Description
Type

Difference

The absolute difference between A and B

Number

How to Use It

  1. Drag the Difference node into your graph.

  2. Connect your first number to the "A" input (e.g., 7.84) or use the default (0).

  3. Connect your second number to the "B" (e.g., 13) input or use the default (0).

  4. Optionally set the "Precision" input (defaults to 2 decimal places).

  5. The output will be the absolute value of the difference between the two numbers (e.g., 5.16)

Tips

  • The result is always positive, regardless of which input is larger.

  • Use the precision input to control rounding (e.g., 0 for integers, 2 for cents).

See Also

Use Cases

  • Contrast Measurement: Calculate the difference between foreground and background colors.

  • Error Margins: Determine how far a value deviates from a target.

  • Spacing Consistency: Check the difference between actual and intended spacing values.

: For getting the absolute value of a single number.

: For getting the signed difference between numbers.

Absolute
Subtract