Skip to content

Tokens Studio (Legacy Docs)

Main Navigation Docs Studio (current)Plugin Docs tokens.studio

Appearance

Sidebar Navigation

Getting Started

What is Studio

Creating an account

Setting up Studio

Import from Tokens Studio for Figma

Import from Figma variables

Connect Studio to Figma

Using Companion by Tokens Studio

Using Tokens Studio for Figma

Connect Studio to Code

Tokens Studio CLI

GraphQL

Postman

Platform

Tokens

Token Sets

Token flow

Themes

Theme Groups and Theme Options

Releases

Configuration

Activity Log

Data Controls

GRAPH ENGINE

Introduction

Editor

Creating a Graph Based Set

Generating a Token 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

Example Graphs

Creating a simple color scale

Settings

Organizations

Inviting members

Projects

API keys

Accounts

Guides

Migrating from Tokens Studio for Figma Plugin to the Tokens Studio Platform

Integrating with Github Actions

PLUGINS

Tokens Studio for Figma Plugin

Companion by Tokens Studio

Tokens Studio for Framer Plugin

On this page

Graph Engine›Available Nodes

Preview

Nodes for visualizing outputs. Displays colors, scales, or curves directly in the graph for immediate feedback during editing.

Pager

Previous pageTangent

Next pageColor Compare