Output: Preview UI for spacing tokens

[Sidnioulz]

A collection of preview components discovered out there. I'll soon split this ticket per token type. Please comment your own examples below. Those were taken from sites recommended to me by DS folks I contacted, plus the sites I built myself.

Examples

Margin/Padding

FTV

Wikimedia defines tokens without a preview

Datadog DRUID 🧑‍🦯 ❌

Nord Health

---

Gap

FTV

Datadog DRUID

---

Dimensions

Polaris presented as width/height

Wikimedia defines tokens without a preview

FTV

Datadog DRUIDS separates preview from the table for efficient use of space

Nord Health

Bonus visualisation

Datadog's visual representations of space:

Pinterest's negative spacing tokens use a different preview:

Challenges

• Many different types of visualisations, which would need metadata or conventions to be effectively used
• In some cases, examples, separating preview from the token table, or live showcases may be more effective in teaching the tokens than a simple preview in table