# Design Handoff: Figma a Desarrollo

> El proceso de comunicar decisiones de diseño a desarrolladores—handoffs claros previenen malinterpretación y reworko.

*Tags: ux, processes, junior*

---



> [!info] Definición Rápida
> El proceso de comunicar decisiones de diseño a desarrolladores—handoffs claros previenen malinterpretación y reworko.


## ¿Qué es Design Handoff?

Design handoff es el momento en que diseños se mueven de Figma a código. Sin handoff claro, los desarrolladores interpretan diseños a su manera. Azul se convierte en un matiz diferente. El padding se adivina. Las animaciones se simplifican.

Un buen handoff responde: ¿Qué es este componente? ¿Cómo se comporta? ¿Cuáles son los estados? ¿Cuál es el espaciado? Un handoff malo son solo mockups sin documentación.

**Una frase contundente:** Un buen handoff responde cada pregunta que un desarrollador tiene antes de que la haga.

## Por Qué el Handoff Importa

- **Previene Reworko** — Cuando los desarrolladores malinterpretan, construyen lo incorrecto. El reworko es caro. El handoff claro lo previene.
- **Asegura Consistencia** — Cuando las especificaciones son claras, cada instancia de un componente se ve igual.
- **Reduce Preguntas** — Los desarrolladores no vuelven preguntando "¿qué color es esto?" Las especificaciones lo han respondido.
- **Acelera Desarrollo** — Sin idas y vueltas. Sin aclaraciones necesarias. El desarrollo fluye rápido.

## Proceso de Handoff

1. **Prepara Archivo de Figma** — Organiza componentes. Usa nombres consistentes. Limpia elementos sin usar.
2. **Crea Especificaciones** — Documenta espaciado, colores, tipografía, estados, interacciones.
3. **Añade Anotaciones** — En Figma, añade notas explicando decisiones no obvias.
4. **Crea Documento de Handoff** — Una sola referencia para todas las especificaciones (página de Notion, PDF o documento viviente).
5. **Revisa con Desarrolladores** — Camina por las especificaciones. Responde preguntas. Obtén buy-in.
6. **Comparte Acceso** — Los desarrolladores pueden acceder a Figma. Usa modo Inspect para medidas.
7. **Mantén Alineamiento** — Si las especificaciones cambian, actualízalas. Mantén documento actual.

## Características de Figma para Handoff

- **Modo Inspect** — Los desarrolladores hacen clic en elementos y ven medidas, propiedades y código.
- **Librería de Componentes** — Librería de componentes organizada que los desarrolladores referencian para consistencia.
- **Anotaciones** — Añade notas en artboards explicando decisiones.
- **Design Tokens** — Exporta colores y tipografía como tokens que los desarrolladores pueden importar.
- **Comentarios** — Feedback asincrónico en diseños. Los desarrolladores pueden hacer preguntas aclaratorias.

## Qué Documentar

1. **Propósito del Componente** — ¿Cuándo y por qué se usa este componente?
2. **Especificaciones Visuales** — Dimensiones, padding, márgenes, colores, tipografía.
3. **Estados** — Default, hover, active, deshabilitado, cargando. Cada estado debe estar documentado.
4. **Interacciones** — Comportamiento de clic, animaciones, transiciones. Detalles de timing y easing.
5. **Comportamiento Responsivo** — ¿Cómo se adapta este componente en móvil/tablet/escritorio?
6. **Casos Borde** — Texto muy largo, caracteres especiales, estados vacíos.
7. **Accesibilidad** — Estados de enfoque, requisitos de contraste, etiquetas ARIA si aplica.

## Template de Documentación

```
Componente: [Nombre]

Propósito: [¿Qué es? ¿Cuándo se usa?]

Especificaciones Visuales:
- Ancho: [px]
- Alto: [px]
- Padding: [px]
- Border Radius: [px]
- Fondo: [hex de color]
- Texto: [fuente, tamaño, peso, color]

Estados:
1. Default: [descripción visual]
2. Hover: [descripción visual]
3. Active: [descripción visual]
4. Deshabilitado: [descripción visual]

Responsivo:
- Móvil: [cambios]
- Tablet: [cambios]
- Escritorio: [sin cambios, igual a default]

Accesibilidad:
- Objetivo táctil mínimo: 44px
- Ratio de contraste: [nivel WCAG]
```

## Consejos de Mentor

- **Primer consejo: El handoff es una conversación, no un documento.** Una especificación perfecta que los desarrolladores no entienden es inútil. Camina por componentes clave. Está disponible para preguntas.
- **Prueba la interpretación de los desarrolladores.** Después del handoff, revisa la primera implementación. ¿Están construyendo lo que diseñaste? Si no, las especificaciones fueron poco claras.
- **Dale autonomía a los desarrolladores.** Las especificaciones son una guía, no una prisión. Si los desarrolladores tienen una implementación mejor que coincide con especificaciones, déjalos hacerlo.
- **Versiona tus especificaciones.** Cuando las especificaciones cambian post-lanzamiento, versionalas. Los desarrolladores necesitan saber qué especificación su código coincide.

## Recursos y Herramientas

- **Libros:** "Frontend Architecture for Design Systems" de Micah Godbolt
- **Herramientas:** [[Figma]] con modo Inspect, Zeroheight o Specify para especificaciones auto-generadas, [[Notion]] para documentación
- **Artículos:** Mejores prácticas de handoff de diseño en Nielsen Norman, handoff en [[UX Collective]]

---

Source: https://www.fernandoux.com/es/wiki/procesos/design-handoff/