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
  • Supported Operators
  • Tips
  • See Also
  • Use Cases
Edit on GitHub
  1. GRAPH ENGINE
  2. Available Nodes
  3. Logic

Compare

PreviousAndNextIf

Last updated 1 month ago

What It Does

Compares two values using one of several comparison operators. It evaluates the relationship between the inputs and outputs a boolean (true/false) result indicating whether the comparison is satisfied.

Inputs

Name
Description
Type
Required

a

The first value to compare

Any

Yes

b

The second value to compare

Any

Yes

operator

The comparison operator to use (=, ≠, >, <, ≥, ≤)

Text

No

Outputs

Name
Description
Type

value

The result of the comparison (true if the comparison is satisfied, false otherwise)

Yes/No

How to Use It

  1. Drag the Compare node into your graph.

  2. Connect the first value to compare to the "a" input.

  3. Connect the second value to compare to the "b" input.

  4. Select the desired operator from the dropdown (default is "equal").

  5. Run the graph—the output will be true if the comparison is satisfied, false otherwise.

Supported Operators

Operator
Symbol
Description

Equal

=

True if a is equal to b

Not Equal

≠

True if a is not equal to b

Greater Than

>

True if a is greater than b

Less Than

<

True if a is less than b

Greater Than or Equal

≥

True if a is greater than or equal to b

Less Than or Equal

≤

True if a is less than or equal to b

Tips

  • For string comparison, the operators follow JavaScript's string comparison rules.

  • When comparing objects, "equal" means the same exact object, not just objects with the same properties.

  • Mixing types in comparison may give unexpected results (e.g., comparing a string to a number).

See Also

  • If: For conditionally choosing between two values based on a boolean.

  • And: For combining multiple conditions, requiring all to be true.

  • Or: For combining multiple conditions, requiring at least one to be true.

Use Cases

  • Conditional Logic: Create branching logic based on value comparisons.

  • Data Validation: Check if values meet specific criteria or thresholds.

  • Range Testing: Verify if a value falls within or outside a specific range.