El handoff en Figma es el puente entre el diseño y el desarrollo. Cuando documentas bien un flujo, exportas assets en los formatos correctos y dejas claras las reglas visuales, evitas malentendidos y aceleras la implementación. Esta guía te muestra cómo preparar entregas claras para programadores usando Figma, con ejemplos concretos sobre íconos, imágenes, prototipos y guías de estilo.

¿Qué formatos de assets debo exportar desde Figma?

La elección del formato depende del tipo de recurso y del contexto en el que se va a usar. No es lo mismo un ícono vectorial que la portada de una película, y cada caso pide una decisión distinta.

Los tres formatos más usados son PNG, SVG y PDF, cada uno con ventajas específicas. Para que los gráficos se vean nítidos en pantallas con distintas densidades, exporta múltiples escalas: 1x, 2x y 3x.

• SVG: ideal para íconos y gráficos simples. Mantiene la resolución sin importar el tamaño porque es vectorial.
• PNG: para imágenes rasterizadas como fotos o gráficos complejos. Combínalo con escalas 1x, 2x y 3x.
• PDF o JPG: alternativas válidas para imágenes gráficas según el caso, como portadas o avatares.

¿Por qué exportar en 1x, 2x y 3x? Porque los dispositivos tienen distintas densidades de píxeles. Tres escalas garantizan que el gráfico se vea nítido tanto en una pantalla estándar como en una Retina o de alta densidad.

¿Cómo exporto un ícono paso a paso en Figma?

Selecciona el ícono, por ejemplo uno de la tab bar, y en el panel derecho busca hasta abajo la pestaña Exportar [02:14]. Da clic en el ícono de más y aparecerá la opción de tamaño 1x con formato PNG por defecto.

Desde ahí puedes agregar las tres escalas en PNG y sumar una versión adicional en SVG. Así el desarrollador decide si prefiere usar el factor de escala con PNG o trabajar directo con SVG, que crece sin pixelarse.

¿Y para imágenes con píxeles como portadas o avatares?

El concepto es el mismo, pero el formato cambia. Para una portada de película o el avatar de un director, donde hay píxeles reales, sigue usando PNG en sus tres escalas o evalúa PDF y JPG según lo que pida el equipo de desarrollo.

¿Cómo documentar un flujo de usuario en Figma?

Documentar un flujo va más allá de pegar pantallas. Necesitas que cualquier persona que lo abra entienda el objetivo, el recorrido y las reglas de interacción.

Empieza con el nombre del flujo y una breve descripción que explique qué hace y cuál es su objetivo final. En el ejemplo de la compra de boletos, el lector debe entender desde el inicio qué se busca lograr al terminar el recorrido.

Las pantallas del flujo deben estar conectadas como prototipo funcional [05:32]. Esto permite que el developer abra el archivo y revise animaciones, transiciones y variantes al dar clic en cada botón. También sirve para hacer pruebas de usuario uno a uno enviando el enlace del proyecto.

¿Cómo agrupar las pantallas del flujo?

La recomendación es organizar las pantallas de izquierda a derecha, marcando claramente dónde inicia y dónde termina el recorrido. En la primera línea va el happy path, ese camino donde todo funciona correctamente.

El ejemplo de compra de boletos sigue esta secuencia:

1. Clic en la acción de comprar.
2. Selección de horario disponible.
3. Selección de asientos con suma y resta dinámica del total.
4. Resumen y elección de método de pago, con énfasis en Apple Pay.
5. Alerta de compra exitosa.
6. Despliegue del boleto adquirido al pulsar Ver mis boletos.

En una segunda línea colocas variantes o acciones secundarias, como ver el tráiler desde la vista de detalle. Si una variante es muy extensa, como agregar un nuevo método de pago, conviene generar un documento aparte con su propio flujo.

¿Qué información debe acompañar a cada pantalla?

Aunque exista un kick-off inicial donde explicas el proyecto al equipo, la documentación escrita evita olvidos y malentendidos posteriores. Cada pantalla necesita su propia ficha técnica.

Los elementos clave que debes describir son:

• Propósito de la pantalla: qué hace y por qué existe.
• Acción principal: en este caso, comprar boletos.
• Acciones secundarias: como ver el tráiler.
• Navegación: por ejemplo, al pulsar comprar boletos se despliega un modal de abajo hacia arriba para seleccionar fecha y hora.
• Animaciones relevantes: descríbelas si forman parte importante de la experiencia.
• Limitaciones: restricciones técnicas o de negocio.

¿Qué es una limitación en el handoff? Es una regla técnica o de negocio que el desarrollador debe respetar. Por ejemplo, que la tarjeta de fondo de la película ocupe máximo el 55% de la altura de la pantalla, o que el usuario solo pueda comprar hasta 8 boletos por transacción.

¿Por qué documentar limitaciones en porcentajes?

Figma trabaja en píxeles, no en porcentajes, pero los dispositivos varían. iOS tiene múltiples modelos de iPhone con resoluciones distintas, así que documentar reglas como el 55% de altura mantiene tu diseño fiel a la visión original sin importar el dispositivo.

También debes anticipar casos no cubiertos. Si el límite son 8 boletos, ¿qué pasa cuando el usuario intenta seleccionar el noveno asiento? Esa pantalla faltante es justo la variante que necesitas agregar.

¿Cuándo crear guías de estilo personalizadas?

Si tu proyecto usa Material Design o el iOS Kit de Apple sin modificaciones, no necesitas documentar las guías de estilo a detalle porque ya viven a nivel de sistema operativo.

Pero si cambiaste el esquema de color, ajustaste la tipografía o creaste componentes nuevos, genera una sección dedicada con esas guías actualizadas. Indica también cómo se usan los componentes nuevos y dónde encontrarlos en el archivo.

Ahora te toca a ti: organiza los flujos clave de tu app, documenta cada pantalla con objetivo, variantes y animaciones, y comparte en los comentarios cómo estructuraste tu handoff y qué detalles consideras esenciales.