Token Collections Grid Integration Block for React

A Figma variable collection can hold several modes, each with its own values for the same variables. The control in each cell picks one of two, and the sample redraws with that mode's values: the Light and Dark samples show the same five grey steps swapped between a light and an inverted surface, the type samples change sizes and line heights, the radius samples change the corners, and the spacing samples change the bar widths. The modes are named per collection in COLLECTIONS, which is how Figma names them too. The sample is a drawing; it does not read your file.

The collections that are switched on live in one array of ids. The line is built from it: how many are on, out of how many, and the sum of their variables counts. It sits in a polite status region that is in the page from the start, so a screen reader hears the new tally after each switch. Changing a mode never changes the tally, and nothing is written to a file or sent anywhere.

Not by itself: the block is a front end with example data. Reading variables through Figma's REST API needs the file_variables:read scope, and Figma offers that API on Enterprise plans only, so a real product should say so on its connect step. Replace COLLECTIONS with your file's collections and keep the switches wired to your own settings.

The block names Figma in text and ships no Figma logo, colour or wordmark. Figma's tile is a neutral lettermark, Fg in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it.

Each cell's onSync receives the new state; keep your own list of synced collections in place of the demo's, and write it where your product stores settings. The switch is controlled with checked and onCheckedChange, which receives the new value.

Below sm the four cells stack in one column and the mode control wraps under the collection's name. In a right-to-left layout the cells and controls flip while the samples keep their numbers left to right. The mode and sample changes are short transitions that are off with reduced motion, and the header fades up once on load; with reduced motion it simply appears.