UX-UI Conexión Creativa podcast

⚡ Tokens W3C en 5 pasos como Apple, Adobe, GitHub

0:00
7:34
Reculer de 15 secondes
Avancer de 15 secondes

Tokens W3C en 5 pasos como Apple, Adobe, GitHub

Sarah cumple su promesa del episodio anterior: ¿es W3C overkill o no? Spoiler: depende.

En este episodio hablamos de cómo Apple, Adobe y GitHub estructuran sus design tokens en JSON siguiendo el spec del W3C Design Tokens Community Group.

5 pasos prácticos:

1. JSON con $value + $type (la base W3C)
2. Tipos correctos (color, dimension, fontFamily, etc.)
3. Aliases con referencias { } (donde Sarah debate si es overkill)
4. Jerarquía 3 niveles: primitives → semantic → component
5. Build con Style Dictionary (de Amazon, gratis, multi-plataforma)

Más una historia real: cómo saltarse un nivel de jerarquía costó 3 meses de migración en un equipo donde estuvo Sarah.

📍 CAPÍTULOS

00:00 — Música intro
00:06 — Cold open + callback al episodio 001
00:53 — Hook + setup
01:14 — Paso 1: JSON con $value + $type
02:06 — Paso 2: Tipos correctos
02:55 — Paso 3: Aliases con { } (debate overkill)
04:00 — Paso 4: Jerarquía de 3 niveles
05:09 — Paso 5: Build con Style Dictionary
06:02 — Resolución debate overkill
06:33 — Regla de oro
06:46 — Outro y próximo episodio

📚 LIBRO
"Construye tu Design System" en Amazon Kindle:
https://tinyurl.com/4a7z36db

🔌 PLUGIN MENCIONADO
Design System Sync (free tier 5 exports, Pro $10/mes):
https://ds-sync.netlify.app

🎧 EPISODIO ANTERIOR
🎨 Los 7 errores que matan tu Design System en Figma (Sarah debut)

🚀 PRÓXIMO EPISODIO
Componentes en Figma desde cero. Botón, input, card, en una hora.

📺 CONTACTO
YouTube: @uxuiconexioncreativa

D'autres épisodes de "UX-UI Conexión Creativa"