Curso
Repeat
Módulo 03 · Design Systems
3.5 · Operaciones de Diseño
01 / 16
Módulo 03 · Design Systems·18–20 min

OperacionesdeDiseño.

El sistema operativo del equipo. Lo que separa al Senior que construye al Lead que opera.

El salto a Lead

Elcuellodebotelladelequipoerestú.

Senior

Construye un buen Design System.

Lead

Se asegura de que el equipo lo usa sin necesidad de preguntarle.

§01

Figma operado

Sidebar Figma · 12 páginas · 3 fases

La estructura que uso en cada proyecto.

Cada página con su emoji al principio + prefijo de estado en corchetes durante el proceso ([WIP], [Review], [UX Test], [Ready]). El equipo navega sin preguntar.

Contexto5 páginas · de la portada al flujo.
Proceso4 páginas con estado [WIP] / [Review] / [UX Test] / [Ready].
Soporte3 páginas para handoff, archivo y assets.
Pages
01 · Contexto5 páginas
🖼️Cover
📘Strategy & Context
🧩Design System & Tokens
🧪Research & Evidence
🗺️User Flows & Logic
02 · Proceso4 páginas
🚧WIPScratchpad
👀ReviewDesign Critique
🔬UX TestPrototypes
ReadyProduction
03 · Soporte3 páginas
📐Handoff & Edge Cases
📦Archive (History)
🎨Assets

Cada capa describe función, no forma.

Mal · invisible para la IA
▾ Group 8
Rectangle 4
Frame 22
Icon copy 3
Bien · contrato con la IA
▾ button
button-bg
button-icon-leading
button-label
button-icon-trailing

Test del ciego

Borra mentalmente colores y formas. ¿Alguien podría reconstruir el componente leyendo solo el árbol? Si sí, naming senior.

Orden visual = orden de capas

Si el icono va a la izquierda del label, en el panel va antes. La IA genera código en el orden que lee.

SectionsContenedor de contexto para la IA

ElnombredelaSectioneslaprimeralíneaqueleelaIA.

MalSection 452

Sin contexto. La IA improvisa la lógica.

Bien[PROD-123] Checkout-Payment-Methods

ID del ticket + lógica de negocio. La IA entiende contexto antes de ver componentes.

Y usa el estado nativo: Draft · Ready for Dev · Done.

Agrupa por dimensión semántica. No por booleanos sueltos.

Mal · booleanos sueltos
hover = true
disabled = false
focus = false
icon = true

No comunica que son estados del mismo concepto. La IA deduce. Deducir = equivocarse.

Bien · una dimensión, varios valores
state = default
state = hover
state = focus
state = disabled

Una propiedad con valores múltiples = grupo lógico claro.

Mutuamente excluyentes → agrupa. Verdaderamente opcionales (showIcon) → booleano OK.

§02

El Playbook

5 páginas que el equipo consulta. No 100 que nadie lee.

Pilar 01Principios de diseño

Criterios de decisión. «Mobile First sobre Desktop», no «hacemos cosas bonitas».

Pilar 02Taxonomía y stack

Herramientas, organización del Figma, convención de naming.

Pilar 03Rituales y cadencias

Critique, sync con dev, retro de ops. Cortos, con objetivo, liderados.

Pilar 04Handoff

Anotaciones, estados de error, edge cases, link al componente. Nunca «una pantalla bonita».

Pilar 05Definition of Done

La checklist que cierra el ciclo. Lo vemos al final.

Pilar Vive en Notion

Buscador, base de datos, fácil de editar. Revisión cada 3-6 meses.

La frase de Lead

«EstáenelPlaybook.»

Cuanto más uses esa frase, menos cuello de botella eres. Cuanto menos cuello de botella seas, más Lead te vuelves.

§03

ADRs · memoria del producto

Architecture Decision Records

Unadecisiónsindocumentaresopinión.Documentada,esleydeproducto.

01Título

Refactor checkout

02Contexto

40% abandono en paso 2

03Decisión

Dropdown → calendario

04Justificación

Test: 40% no entiende MM/DD

05Estado

Aceptado

Cómo blinda tus decisiones

«En el ADR-14 documentamos que el dropdown causó −40% de conversión. Si volvemos atrás, aceptamos ese riesgo en el KPI.» La discusión deja de ser gustos. Pasa a ser riesgos de negocio.

Definition of Done. Tu última línea de defensa.

Visual / UI
  • Tokens semánticos exclusivos
  • Componentes vinculados a librería
  • Contraste WCAG
UX / Lógica
  • Estados error/carga/vacío
  • Copy real, validado
  • Inicio y fin del flujo claros
Técnico
  • Auto Layout responsive
  • Interacciones documentadas
  • Animaciones con sticky notes

«Un dev que no te pregunta es un dev que defiende tu diseño en las reuniones donde tú no estás

Ejercicio 3.5·Reorganiza, nombra, documenta

Conviertetuarchivoensistemaoperativodelequipo.

Aplica todo lo del vídeo a un proyecto real o ficticio. No el manual completo: la versión 1 que tu equipo pueda consultar.

01

Reorganiza el Figma con las 12 páginas en 3 fases.

Contexto · Proceso (con prefijos [WIP] / [Review] / [UX Test] / [Ready]) · Soporte. Puedes partir de la plantilla descargable.

02

Renombra capas de 1 componente.

Convención semántica función-no-forma. Aplica el test del ciego.

03

Crea el Playbook v1 en Notion.

5 principios · taxonomía · 2 rituales con día+duración · Definition of Done.

04

Documenta 1 ADR real.

Título · contexto · decisión · justificación con datos · estado.

Módulo 03 · cerrado

HasconstruidoelsistemaoperativodeunLead.

3.1Cuándo (y cuándo no) construir un DS.
3.2Arquitectura con tokens jerárquicos.
3.3Atomic Design adaptado a 2026.
3.4Repeat DS Generator (próximamente).
3.5Operar el sistema en equipo.

Ya no solo sabes hacer cosas. Sabes cómo organizar el equipo para que las haga sin necesitarte.

Próximo módulo · 04

VibeCoding.DelDesignSystemalproductoreal.

Claude Code · CursorDS como contrato técnicoEl círculo del Product Designer moderno