Skip to content
Loops and Flows Tony Sciantarelli

A working comparison · built with TokenKit

Loops and Flows

Two ways to carry a design change into a product. Figma-first work is a flow: the change moves forward through frames, handoff, build and QA, and the reasoning behind it burns off along the way. Token-first work is a loop: the change lands in the contract, the browser shows the result, a gate measures it, and the decision stays to be reused.

Figma-first
A static frame is the source of truth, and the product is a translation of it.
Token-first
The token contract is the source of truth. Figma and code both read from it, and the rendered page is the proof.
Figma is in both
The question is which one decides.
The loop is the product. What survives is the measured relationship between intent, implementation, and production truth.

Five everyday changes follow. On the token-first side, press the buttons: every number there is measured in this browser from TokenKit’s real tokens, with the kit’s own contrast maths. Arrow keys step between changes.

Before the laps · survivorship bias

Where the damage isn’t

In the Second World War, the military wanted to armor its bombers where the returning planes showed the most bullet holes. Abraham Wald saw the bias: the holes marked where a plane could be hit and still come home. The fatal spots were the ones with no holes. The planes hit there never came back to be counted.

Illustration of Abraham Wald, saying: where the damage isn’t is where the system failed.
A bomber seen from above. Bullet holes on the wings, the tail and the fuselage; dashed rings on the nose and both engines, where there are none.
Hits on the planes that came back: survivable. Armor here: the planes hit here never returned to be counted.

Design review runs on the same trap. A Figma-first review inspects what came back: the approved frame, in one brand, one language, one theme, at one density. The failures live where no one looks, and they send back no data until a customer finds them. Each lap below goes looking there.

Change 1 of 5

The brand’s primary color changes

Marketing picks a brighter orange. It has to hold up everywhere a button appears.

Figma-first a flow

  1. DesignThe new orange goes into the color style, and every frame using the style repaints.
  2. Hand offDetached instances and exported assets keep the old color until someone spots them.
  3. BuildEngineering copies the new hex into the codebase.
  4. FoundWhite on the new orange measures 2.15:1. No step in the flow measures it, so an audit finds it after launch.
  5. The decision ends upin a review thread that says “looks good”.

Token-first a loop

Try
Button fill
Label on fill
To keep a white label, the fill becomes
  1. ObserveOne token changes: the brand fill becomes #F59E0B, and every button re-renders.
  2. NameMeasured: white on the new fill is 2.15:1, against the 4.5:1 a label needs.
  3. DecideKeeping white would move the fill to #A56A07, ΔE 0.20. The kit calls that a rebrand, not a tweak, so the label flips to ink: 9.9:1.
  4. CaptureThe pack records the choice and the numbers behind it.
  5. LearnEvery button in every context inherits it, and the contrast gate holds it on every run.

Change 2 of 5

The copy arrives in German

Same components, a longer language. German typically runs about a third longer than English.

Figma-first a flow

  1. DesignFrames are drawn with English copy, and text boxes are sized to fit it.
  2. Hand offRedlines specify widths that were really the English string lengths.
  3. BuildTranslation arrives after the build.
  4. FoundTruncated buttons and three-line titles on the German site, fixed one screen at a time.
  5. The decision ends upas a ticket per screen, and the next language repeats it.

Token-first a loop

Try
Characters
Body text lines
Elements overflowing their box
Line length token
  1. ObserveSwap the copy to German, in the browser.
  2. NameMeasured: +45% more characters, and nothing overflows its box.
  3. DecideLine length is a token, not a box width, and buttons grow with their labels.
  4. CaptureThe type gate checks line length against real rendered text on every run.
  5. LearnThe next language arrives the same way.

Change 3 of 5

The product gets a dark theme

Every surface flips, and every pair of text and background has to stay readable.

Figma-first a flow

  1. DesignDark is a second set of frames, with colors picked by eye on a bright monitor.
  2. Hand offTwo sets of values to keep in step, per component.
  3. BuildThe dark palette is re-typed in code.
  4. FoundA plugin check ran once, on the frames someone remembered. The palette picked by eye, measured on the right: 3.3:1 for secondary text.
  5. The decision ends upas a note on one frame. The next component needs its dark twin drawn and checked again.

Token-first a loop

Try
Title on card
Body text on card
Label on button
  1. ObserveDark is a pack: the same slots, filled with other values.
  2. NameMeasured: every pair in the table, in either theme.
  3. DecideA pair that fails fails the build, before anyone sees it.
  4. CaptureThe contrast gate checks 812 pairs across every pack, density and root size.
  5. LearnA new component is dark-ready the day it is built.

Change 4 of 5

A second brand joins

A sister brand needs the same product in its own colors, type and shape.

Figma-first a flow

  1. DesignThe library is duplicated for the new brand; components are detached and restyled.
  2. Hand offTwo libraries, two sets of redlines.
  3. BuildComponents are forked, or sprout brand props.
  4. FoundA fix made in one brand never reaches the other.
  5. The decision ends upsplit across two files, and every brand after that multiplies the drift.

Token-first a loop

Try
Title on card
Body text on card
Label on button
Component files edited
0
  1. ObserveA brand is a pack: its values, in the same slots.
  2. NameMeasured for each brand: the pairs every brand has to clear.
  3. DecideBrand colors that fail are nudged or rejected when the pack is generated, with the reason written into it.
  4. CaptureThe component never learns which brand it is rendering.
  5. LearnSix brands in this kit, one contract.

Change 5 of 5

A data view needs a dense mode

The people using it want more rows on screen without losing the targets they tap.

Figma-first a flow

  1. DesignA compact variant of each component is drawn by hand.
  2. Hand offCompact button, compact row, compact input, each specified separately.
  3. BuildThe variants are built as separate components.
  4. FoundCompact buttons shrink below a comfortable target, and nothing measures it.
  5. The decision ends upas variants that drift from the originals they copied.

Token-first a loop

Try
Density
Row height
Button height (minimum target 24px)
  1. ObserveOne attribute on the region: data-density="compact".
  2. NameMeasured: rows go from 57px to 45px.
  3. DecideSpacing scales with density; tap targets stop at the 24px minimum by design.
  4. CaptureNo variants to keep in step.
  5. LearnAny component, in any region, at any time.

After the laps · expert in the loop

Experts in the loop turn learning into outcomes, not artifacts.

Every lap ended in a call a tool couldn’t make alone: flip the label or move the brand color, which dark palette, how much a dense row can give up. The kit measured, a person who knew what the numbers meant decided, and the loop kept the decision. My aviation talk makes the same case in five eras of flight.

  1. Slide: early aviation, flown by a skilled pilot with throttle, rudder and aileronsMechanical flightSkill directly controls the machine.
  2. Slide: the co-agentic era, with a navigator, pilot, co-pilot and flight engineerThe crewExperts coordinate, and flight gets reliable.
  3. Slide: autonomous flight, a robot alone in the cockpit heading into stormsFull autonomyNobody qualified aboard. A bird strike or a bad sensor breaks it.
  4. Slide: a pastry chef at the controls, holding a tray of dessertsThe wrong humanA pastry chef at the controls makes it worse.
  5. Slide: an expert pilot flying with autopilot, flight management and smart sensorsExpert in the loopSystems handle weather, hazards and stability. The pilot keeps the final say.

Token-first is the fifth era. The gates handle contrast, line length and tap targets, so the expert’s attention goes to the calls only an expert can make.

Five changes, two ways

Loops learn. Flows burn.

QuestionFlow · Figma-firstLoop · token-first
Where the change is madeEvery frame that shows itOne token, pack or attribute
When problems surfaceIn QA, an audit, or after launchIn the browser, before merge
Where the decision livesThreads, tickets and memoryThe contract, with its reasons
What the next change starts fromZeroThe last decision

Stake small. Capture truth. Measure diffs. Retune intent. Fund the next lap only when evidence improves.