No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Mejores prácticas de Entregables para Desarrollo usando Overflow y Zeplin

19/26
Recursos

¿Cómo llevar un diseño estático a la vida real?

Convertir un diseño desde una herramienta como Figma a un entregable real es un paso crucial en el desarrollo de un proyecto digital. Aunque un diseño en alta fidelidad puede parecer completo, sigue siendo inútil hasta que se convierte en un producto funcional. Socializar el diseño con los desarrolladores y proporcionarles todas las herramientas necesarias es esencial para lograr una implementación exitosa.

¿Por qué evitar las guías de estilo tradicionales?

Las guías de estilo entregadas en formatos como PDF pueden ser obsoletas y causar confusiones. Estas pueden dejar elementos al aire, obligando a los desarrolladores a adivinar detalles como distancias exactas o colores específicos. Los desarrolladores necesitan:

  • Detalles precisos: Establecer claramente elementos como las distancias exactas, colores, y comportamientos al interactuar.
  • Estandarización del lenguaje: Para que todos los involucrados hablen el mismo idioma y eviten malentendidos.

¿Cuál es la ventaja de las guías de estilo dinámicas?

Proveer una guía de estilo dinámica es el camino moderno y eficiente. Herramientas como Figma, Zeplin o InVision permiten crear guías que incluyen fragmentos de código directamente integrables, facilitando una interoperabilidad perfecta entre diseño y desarrollo. Este enfoque ofrece:

  • Claridad y precisión: Los desarrolladores ya no preguntan sobre distancias y colores.
  • Actualización fácil: Modificaciones en bibliotecas de componentes reflejadas automáticamente.
  • Reutilización de código: Fragmentos reutilizables en varias implementaciones.

¿Cómo implementar flujos de tarea efectivos?

Además de guías de estilo, crear flujos de tarea visuales es esencial para mantener alineado al equipo. Esto se puede lograr mediante:

¿Qué son y cómo crear flujos de tarea visuales?

Estos flujos, que conectan maquetas en alta fidelidad en un orden secuencial claro, facilitan entender qué pantalla sigue a cuál. Herramientas como Overflow permiten crear estos flujos de manera accesible y compartible.

  • Pasos para utilizarlas:
    1. Registro y descarga: Crear una cuenta en Overflow y descargar la aplicación.
    2. Importación desde Figma: Copiar y pegar el enlace de Figma, seleccionando qué pantallas importar.
    3. Conexión de pantallas: Utilizar la herramienta para crear conexiones visuales entre las pantallas.
    4. Presentación: Compartir el flujo en una presentación o demo, ideal para externos y clientes.

¿Cómo compartir efectivamente tu diseño?

Overflow permite no solo crear, sino también socializar tu diseño. Una vez generado el flujo, puedes:

  • Presentaciones limpias: Mostrar el diseño de manera profesional a inversionistas o clientes.
  • Compartir fácilmente: Generar enlaces compartidos desde la nube para acceso inmediato.

Crear un flujo de tarea no solo aclara qué pantalla sigue a cuál, sino que también ofrece una presentación refinada de tu proyecto. Con herramientas que facilitan desde el diseño inicial hasta la socialización con stakeholders, el proceso es más eficiente y efectivo que nunca. ¡Anímate a explorar estas herramientas! Con cada proyecto, adquieres habilidades valiosas que impulsan tu carrera en diseño.

Aportes 20

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Buenas tardes, en caso usemos windows que programa podremos usar alternativo a overflow.

Entregables del diseño (prototipos) - Tener claro el mismo lenguaje - Minimizar el retrabajo - Tener assets y estilos actualizados - Es fácil de mantener - Requerimientos claros

Con Overflow . io puedes importar tus diseños desde Figma y tener un flujo de trabajo con tus pantallas conectadas pero mostrado de una manera más limpia, ideal para presentaciones de negocio o ante directivos y accionistas de la empresa, evitando así que vean el alambrado intrincado de interacciones de tus frames de Figma, ya que Figma le da más peso a la funcionalidad del prototipo que a una presentación estética y depurada.

Los flujos de tarea son geniales para que todo el equipo del proyecto esté en sintonía de cómo funciona la herramienta.

Incluso el equipo de marketing o los Growth hackers pueden identificar fácilmente donde se “cae” el usuario. Esto permite hacer experimentos para “evitar las caídas” y que la experiencia siga mejorando.

  • El usuario se cae = El usuario deja de usar el producto, el usuario tiene una mala experiencia, el usuario no termina con lo que está haciendo.

El objetivo de una herramienta de esta naturaliza es que permite socializar tu diseño de una manera mucho mas limpia de tal manera que puedas esconder todos esos alambrados técnicos que tu sigues en tu proceso en figma. Muy bueno lo de socializar el diseño.

En Figma puedes hacer flujos usando un plugin llamado Autoflow

Con Figma no es posible hacer lo mismo que con Overflow y Zeplin?

Hoy Figma tiene modo Developer

¿Cuales son las guías de estilos?¿De qué tratan?

*Un poquito caro Overflow...*
**La ventaja de utilizar un flujo de tarea en alta fidelidad es practicamente hacer una presentación más profesional del diseño a gente externa al equipo, así como inversionistas y ejecutivos.**
intenté hacerlo coo se indica pero en over me sale esto ![](https://static.platzi.com/media/user_upload/image-22068098-f572-416f-9501-4199f088697e.jpg) descargué la versión gratis pero no me permite hacer la importación
Este video es una especie de tutorial de overflow que lo explica muy bien, espero les sirva. Saludos! <https://www.youtube.com/watch?v=4JQJ-MVFvH4>

adobe xd ya tiene esa opción

Presentación mas limpia con otras áreas

en el mismo figma se puede hacer

Yo no pude hacer este paso, me pedía instalar un pluggin y aún instalado no pude TnT

Adicionalmente el diseñador debe tomar algunas otras cosas en cuenta para entregar un producto de calidad al equipo de desarrollo. Les dejo un blog al respecto aquí. Saludos.