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
  • Inputs
  • Outputs
  • Inner Graph Special Inputs
  • Inner Graph Required Output
  • How to Use It
  • Tips
  • See Also
  • Use Cases
Edit on GitHub
  1. GRAPH ENGINE
  2. Available Nodes
  3. Array

Array Find

PreviousArray FilterNextArrify

Last updated 7 days ago

What It Does

Creates a sub-graph that evaluates each item in an array, returning the first item where your condition evaluates to true. You define the matching condition in the inner graph using a custom combination of nodes.

Inputs

Name
Description
Type
Required

array

The array to search through

List

Yes

Dynamic inputs

Any inputs you add to the inner graph will appear here

Varies

No

Outputs

Name
Description
Type

value

The first matching item found (undefined if none found)

Any

index

The position of the matching item in the array (-1 if none found)

Number

found

Whether a matching item was found

Yes/No

Inner Graph Special Inputs

Name
Description
Type

value

The current array item being evaluated

Any

index

The current position in the array

Number

length

The total length of the array

Number

Inner Graph Required Output

Name
Description
Type

matches

Whether the current item matches your condition

Yes/No

How to Use It

  1. Drag the Array Find node into your graph.

  2. Connect your array to the "array" input. In this example the input is a Geometric Series which outputs an array [16, 24, 36, 54, 81, 122].

  3. Click on the Subgraph Explorer button on the node to open and edit the inner graph.

  4. In the inner graph, build your condition using the special "value" input. In this case a Compare node to check if the "value" is less than 50.

  5. Connect your condition's result to the "matches" input on the Output node.

  6. Return to the main graph, where you can use the matched value, index, and found outputs. It outputs the first value that matches the condition. In this case the output is 16.

Tips

  • The inner graph runs once for each item in the array until a match is found.

  • You can add your own inputs to the inner graph's Input node, which will appear as inputs on the main Array Find node.

  • For complex comparisons, you can build any logic you need in the inner graph.

See Also

Use Cases

  • Finding Data by Complex Criteria: Locate items based on multiple conditions or calculations.

  • Advanced Filtering: When your matching logic requires multiple steps or operations.

  • Custom Search Algorithms: Implement specialized search logic for your specific data structures.

: Similar to Array Find, but returns all matching items instead of just the first.

: For simple comparison-based searching (greater than, less than).

: For exact-match searching.

Array Filter
Find First Match
Linear Search
Array Find Example
Subgraph explorer