Plus UI Design · Practical guides

Prepare a variable handoff for a product team

Use a small surface-and-spacing example to explain a design system without overwhelming the reader.

Separate primitives from decisions

A primitive might describe a raw color, while a semantic variable describes its role. Document those relationships with names your team understands. For example, explain that “color/surface/default” is the default page surface rather than presenting it as another unexplained swatch.

Build a review example

Create a simple card using a surface variable and spacing variables. Place the card beside the generated documentation. Review the example in each mode available in your collection. The table explains the values; the card shows what those values do in a real composition.

Write the handoff notes

Record the intended use, relevant modes and known exceptions. Name an owner for questions. If engineering uses different token names, include an explicit mapping instead of assuming a Figma variable name is already a production CSS variable.

Example to adapt

Design role                 Example name
Default page background     color/surface/default
Card padding                spacing/card/padding
Space between card items    spacing/card/gap