---
title: "Your first token"
description: "Lesson 10.1 of Creator Terminal's lesson films (Tokens and themes): Make a banking app's brand colour a token, have the badge and the button follow it, and change both at once."
canonical: "https://terminal.lottiefiles.com/first-token/"
last_updated: 2026-11-03
---

# Your first token

> Lesson 10.1 of Creator Terminal's lesson films (Tokens and themes): Make a banking app's brand colour a token, have the badge and the button follow it, and change both at once.

- The film (1:12): https://terminal.lottiefiles.com/media/10.1-first-token/207f15054ada/10.1-first-token.mp4
- Vertical cut: https://terminal.lottiefiles.com/media/10.1-first-token/523246d080cd/10.1-first-token-vertical.mp4
- Captions: https://terminal.lottiefiles.com/media/10.1-first-token/ef429b86bbc8/10.1-first-token.vtt
- The page: https://terminal.lottiefiles.com/first-token/
- The document the film opens: https://terminal.lottiefiles.com/media/10.1-first-token/07e6c85a1c77/payment.ctd

## Step by step

In this tutorial you'll make your first token: the brand colour of a banking app's "Payment
sent" card, shared by its badge and its **Done** button. A token is a value an app can set while
the animation plays, through the dotLottie player on the web, iOS or Android; LottieFiles calls
them Motion Tokens. One file can then wear any bank's colour, with no second copy to keep in step.

### Before you start

- Creator Terminal, installed and open ([Install Creator Terminal](/install/)).
- An animation with a colour you'd like an app to change. The film uses a payment card: a green
  badge with a tick, the amount, who it went to, and a green **Done** button.

### 1. Play the card

Press `0` to go to the first frame, then `space` to play. The card comes in, and holds. Press
`space` again to stop.

### 2. Make it a token

1. Click the badge, the green circle with the tick, on the stage (the canvas, in other tools).
   The rail on the right (the Properties panel, in After Effects or Figma) shows its values.
2. Under **Appearance**, click the word **Fill**. Clicking a value's name makes that value a
   token, and a box to name it appears under **TOKENS**.
3. Type `brand` and press Return.

The status line along the bottom of the window says how an app sets it.

![The status line: $brand, and that an app sets it with setColorSlot.](https://terminal.lottiefiles.com/media/10.1-first-token/e0629b0d3820/first-token-the-status-line-brand-and-that-an-app.webp)

### 3. Share it with the button

The **Done** button wears the brand's colour too. Click it, then its **Fill** in the rail, type
`brand` again and press Return. Typing an existing token's name links this value to it, so the
rail now reads `$brand`, **Fill · drives 1 more**: one value, for both layers.

![The rail, its TOKENS row reading $brand, Fill, drives 1 more.](https://terminal.lottiefiles.com/media/10.1-first-token/8f7aee4f2327/first-token-the-rail-its-tokens-row-reading-brand-fill.webp)

### 4. Change it once

Press `esc` twice, so nothing is selected. The rail shows the document, and **TOKENS** lists
`$brand` with its colour. Click the colour's value, type the other bank's coral, `#ff5a4f`, and
press Return. The badge and the button change together.

![TOKENS in the rail, with $brand set to the coral, #ff5a4f.](https://terminal.lottiefiles.com/media/10.1-first-token/39167288c9fe/first-token-tokens-in-the-rail-with-brand-set-to.webp)

### 5. See what it drives

Rest the pointer on `$brand` in the rail. Everything it drives is outlined on the stage: here the
badge and the button. The status line names them too: `$brand: a colour token on Button, Badge`.

![The card, coral now, its badge and Done button outlined: the layers brand drives.](https://terminal.lottiefiles.com/media/10.1-first-token/1be95ecebf2d/first-token-the-card-coral-now-its-badge-and-done.webp)

When an app sets `brand`, that's what changes. Through the dotLottie player, it sets a colour
token with `setColorSlot`, the colour as red, green, blue and opacity, each from 0 to 1 (this
one is red):

```js
setColorSlot("brand", [1, 0, 0, 1])
```

### What you learned

- A token is a value an app sets as the animation plays. Click a value's name in the rail to make
  one.
- Give several values the same token's name and one change reaches them all.
- With nothing selected, **TOKENS** in the rail lists every token, and resting on one outlines
  what it drives.

[Tokens and themes](/docs/layers/data/) in the manual has every kind of token, and themes.

## In this lesson

### A payment card (0:08)

Here's the card a banking app shows after every payment. Press zero, then space to watch it. Nice and quick. Press space to stop.

### Make it a token (0:18)

Two banks use this card, each in its own colour, so we'll make the colour a token. Click the badge. In the rail, click the word Fill, type brand, and press return. The status line says how an app sets it.

### One value for both (0:33)

The Done button wears the brand's colour too. Click it, then its Fill, type brand again, and press return. Now it follows brand. One value, for both.

### Change it once (0:45)

Press escape twice, so nothing's selected. Tokens lists brand, with its colour. Click the colour, type the other bank's coral, and press return. The badge and the button change together.

### What it drives (0:57)

Rest the pointer on its name, and everything brand drives is outlined. When an app sets brand, that's what changes.