Usando Zeplin para la entrega de diseño: ¿Cómo se compara con el modo de desarrollo de Figma?

Un producto de software empresarial de alta calidad suele contar con un equipo completo de desarrollo de software, compuesto por varios diseñadores de UI/UX, analistas de negocio, desarrolladores, testers e ingenieros de DevOps. Un producto excelente siempre es fruto de la colaboración. Utilizando herramientas de diseño populares como Figma, los diseñadores de UX traducen las especificaciones del flujo de negocio en prototipos de producto basados ​​en aspectos de la interacción persona-computadora (HCI).

Según el tamaño de la empresa, diseñadores de UI dedicados o desarrolladores full-stack convierten los prototipos en interfaces de software realistas y bien diseñadas tras el proceso de entrega del diseño. En esta fase, los equipos reciben prototipos de diseño listos para desarrollar de los diseñadores de UX. El proceso de entrega del diseño conecta dos roles laborales diferentes, por lo que suele ser caótico si el producto es complejo. En 2023, Figma introdujo el Modo de Desarrollo para ofrecer funciones centradas en el desarrollador y resolver problemas comunes en la entrega del diseño.

En cambio, Zeplin ofrece una plataforma colaborativa completa para la entrega del diseño. Zeplin ayuda a los equipos de software implementando funciones para cada desafío que enfrentan durante el proceso de entrega del diseño. ¡Comparemos Zeplin con el Modo de Desarrollo de Figma y descubramos cuál se adapta mejor a su equipo de producto de software!

Desafíos en el proceso de entrega del diseño

Independientemente del modelo de desarrollo de software, todos los equipos siguen el conocido Ciclo de Vida del Desarrollo de Software ( SDLC ) para crear y mantener sistemas de software. En el SDLC, el proceso de entrega del diseño, conocido como proceso de entrega del diseño, ocurre entre los hitos de diseño y desarrollo.

La entrega del diseño consiste en enviar un prototipo completo y autoexplicativo a los desarrolladores para su implementación, pero este proceso no es tan simple como esperamos debido a los siguientes desafíos:

• Los diseñadores y desarrolladores trabajan en dos entornos diferentes, por lo que es posible que los desarrolladores no puedan traducir la especificación de diseño exacta en un producto del mundo real.
• En la mayoría de los casos, no todas las pantallas del prototipo están listas para el desarrollo, aunque los diseñadores lo envíen. Entonces, ¿cómo notifican eficazmente los diseñadores a los desarrolladores sobre las pantallas del prototipo finalizadas?
• ¿Cómo pueden los desarrolladores comprobar eficazmente los cambios entre la última versión del prototipo y la versión anterior lista para desarrollar?
• Al igual que los diseñadores no tienen interés en aprender a programar, los desarrolladores tampoco muestran interés en aprender herramientas de UX. ¿Cómo pueden los diseñadores enviar un prototipo a los desarrolladores de forma intuitiva?
• Los diseñadores y desarrolladores tienen mentalidades y prácticas diferentes. Por ejemplo, a los diseñadores les puede gustar ver varios flujos de usuario en el mismo lugar, pero a los desarrolladores les gustaría buscar pantallas por nombre, filtrarlas por incidencias de Jira o agruparlas por un flujo de usuario específico. ¿Cómo exploran los desarrolladores un prototipo según sus preferencias?
• ¿Qué sucede si las partes interesadas revisan y aprueban los prototipos de diseño antes del proceso de entrega?

Estos desafíos suelen volver caótico el proceso de entrega, ya que implican largas reuniones e interminables chats rápidos entre diseñadores y desarrolladores. Resolver estos desafíos mediante estrategias manuales con reuniones y chats (es decir, publicar constantemente nuevos nombres de usuario de prototipos listos para desarrollar en un chat grupal) es, sin duda, una pérdida de tiempo.

Afortunadamente, Figma Dev Mode y Zeplin ofrecen soluciones productivas competitivas para estos desafíos para ahorrar tiempo.

¿Qué es el modo Dev de Figma?

Figma fue una herramienta de creación de prototipos de diseño de interfaz desde sus inicios, por lo que lanzó muchas funciones productivas dirigidas a los diseñadores de UX.

Ahora, el Modo de Desarrollo de Figma es un modo de plataforma que añade funciones enfocadas en el desarrollador para agilizar el proceso de entrega del diseño. Los diseñadores pueden marcar secciones o pantallas de diseño específicas como listas para desarrollo y compartir un diseño de Figma habilitado en el Modo de Desarrollo con los desarrolladores. Una vez que los desarrolladores acceden al Modo de Desarrollo de Figma, pueden identificar las pantallas listas para compilar, inspeccionar elementos de diseño, comparar versiones, generar fragmentos de código y ver anotaciones.

Además de la interfaz del modo Dev, Figma se esfuerza por aumentar la productividad de los desarrolladores con opciones de integración centradas en el desarrollador al proporcionar extensiones/integraciones para VS Code, GitHub, Jira, Trello, etc.

¿Qué es Zeplin?

Zeplin es una plataforma colaborativa completa para resolver los desafíos del proceso de entrega de diseños. Al centrarse exclusivamente en los flujos de trabajo de entrega de diseños, no ofrece funciones de diseño de interfaz integradas como Figma. Por lo tanto, permite importar diseños desde herramientas populares como Figma, Adobe XD, Adobe Photoshop y Sketch.

Zeplin cubre muchos aspectos del proceso de entrega de diseño genérico al ofrecer características como inspección de elementos, historial de versiones similar a Git, búsqueda productiva, organización de pantalla amigable para desarrolladores (es decir, agrupar pantallas por secciones), administración de flujo de interacción con todas las funciones, herramientas de colaboración y generación de código:

Además de sus principales funciones de transferencia de diseño, aumenta la productividad de los desarrolladores a través de extensiones/integraciones de VS Code, Trello, Storybook, Jira, etc.

Repasemos Zeplin y Figma en una comparación cara a cara.

Zeplin vs. Figma Dev Mode: Comparación

Parece que tanto Figma Dev Mode como Zeplin buscan resolver el mismo problema, ¿verdad? Pero ¿cuál resuelve mejor los desafíos de la entrega de diseño? Hagamos una comparación completa e identifiquemos qué solución se adapta mejor a tu flujo de trabajo actual de entrega de diseño.

Capacidad de aprendizaje

Contar con buenos factores de aprendizaje es fundamental para cualquier plataforma de diseño/desarrollo, ya que estos factores afectan el tiempo de entrega del producto y el presupuesto. Si una plataforma es fácil de aprender, los diseñadores y desarrolladores pueden ahorrar tiempo al no dedicar horas a comprenderla.

El Modo de Desarrollo de Figma no es una plataforma independiente, sino un modo conmutable dentro de la plataforma Figma. Desde la perspectiva del diseñador de UX, esto es excelente, ya que puede usar la misma plataforma familiar para el proceso de entrega, pero los desarrolladores deben aprender a usar Figma como desarrolladores. Figma oculta muchas funciones específicas para diseñadores para facilitar el aprendizaje y ofrece vistas intuitivas para desarrolladores que mejoran la productividad:

Zeplin es una plataforma independiente, por lo que los diseñadores y desarrolladores de UX deberían familiarizarse con ella como nuevos usuarios. Dado que solo gestiona el proceso de entrega del diseño, su interfaz solo contiene tres segmentos autoexplicativos: Panel de Control, Flujo y Guía de Estilo, para que cualquiera pueda empezar a usar Zeplin en tiempo récord.

Tanto Figma Dev Mode como Zeplin tienen buenos factores de aprendizaje, pero Zeplin se destaca en estos factores debido a su disposición de interfaz limpia y minimalista que se adapta a cualquier rol en un equipo de software específico.

Flujo de transferencia de diseño

Elegir el flujo óptimo de transferencia de diseño es crucial, ya que afecta la productividad de cada miembro del equipo. Un mejor flujo de transferencia de diseño reduce drásticamente el tiempo que todo el equipo dedica a los canales de comunicación.

La entrega de diseño del Modo de Desarrollo de Figma se basa en el botón “Listo para desarrollo”, que marca una sección o marco específico como listo para construir. Una vez que los diseñadores de UX marcan los segmentos que se pueden desarrollar, pueden compartir un enlace que dirige a los desarrolladores al Modo de Desarrollo:

Como plataforma colaborativa, los usuarios de Figma pueden añadir comentarios y anotaciones de diseño. En este caso, no veremos un flujo claro en la entrega de diseño de Figma, ya que todo lo que hacemos consiste en alternar entre dos modos: Diseño y Desarrollo. Figma ofrece funciones centradas en la entrega de diseño para desarrolladores, pero no ofrece un flujo de entrega completo con entornos de diseño/desarrollo aislados, aprobaciones, etc.

Zeplin toma prototipos de otras herramientas de diseño, aislando a los desarrolladores de la herramienta de prototipado original. Como resultado, los diseñadores pueden editar y publicar pantallas en Zeplin cuando estén listos para construir simultáneamente, sin preocuparse por lo que ven los desarrolladores:

Zeplin también completa el proceso de entrega ofreciendo soporte para la aprobación del diseño. Al igual que Figma, Zeplin permite añadir anotaciones y comentarios para la colaboración.

Zeplin ofrece un flujo de entrega de diseño completo al aislar los diseños listos para desarrollo, mientras que Figma usa el indicador de listo para desarrollo como la opción de entrega principal.

Vistas fáciles de usar para desarrolladores

Los diseñadores y desarrolladores de UX ven las interfaces de producto de forma diferente según sus trabajos. Los diseñadores de UX suelen pensar desde la perspectiva del usuario sin conocimientos técnicos y consideran los diseños de producto como una composición de formas. Los desarrolladores suelen analizar los diseños de producto basándose en diseños de interfaz programables (por ejemplo, Flexbox) y componentes. Por lo tanto, una plataforma óptima de entrega de diseño suele priorizar las vistas intuitivas para los desarrolladores.

El Modo de Desarrollo de Figma permite inspeccionar elementos de diseño desactivando la edición y comprobar dimensiones, márgenes y relleno en un widget de vista previa de modelo de caja similar a un navegador . El Modo de Desarrollo muestra la misma vista del diseñador durante la inspección de elementos:

Zeplin implementa la inspección de elementos para pantallas individuales y permite ver la misma información que Figma. Además, permite una inspección rápida con una miniatura del diseño, pero no ofrece un widget de vista previa del modelo de caja similar al de un navegador, como Figma.

El panel de control de Zeplin ofrece funciones pensadas para desarrolladores. Permite organizar las pantallas por secciones. Las secciones del diseñador de Figma se convierten automáticamente en secciones de Zeplin, por lo que no es necesario crearlas manualmente. A diferencia del modo de desarrollo de Figma, Zeplin permite filtrar y ordenar las pantallas por secciones, como se muestra en la siguiente vista previa:

En Figma, el Modo de Desarrollo oculta los flujos de interacción , por lo que debemos activar el modo de diseño para verlos. Figma muestra cualquier flujo de interacción y permite a los diseñadores editarlo de la siguiente manera:

Zeplin muestra flujos en una página separada con algunas características adicionales como personalizar flujos de interacción y soporte de elementos de flujo (es decir, etiquetas, formas de diamante, etc.), pero solo muestra las acciones de navegación de pantalla de Figma:

Funciones de control de versiones

Al igual que las bases de código de los sistemas de software, los prototipos de diseño suelen tener múltiples versiones. Por ejemplo, un diseñador de UX puede enviar el diseño de la pantalla de inicio de sesión para su desarrollo y crear otra versión de esa pantalla específica para experimentar con una idea sugerida por los propietarios del producto.

Figma resuelve el problema del control de versiones ofreciendo ramificación de archivos e historial de versiones basado en guardado automático.

El concepto de ramificación puede parecer complejo al principio, pero los diseñadores de UX con buena formación pueden adoptarlo. Figma permite a los diseñadores enviar una versión de prototipo para desarrollo y editarla mediante la creación de una rama, sin afectar la versión original de desarrollo.

Figma crea automáticamente un historial de versiones basado en el guardado automático por rama y permite a los desarrolladores comparar cada cambio de la siguiente manera:

Mientras tanto, Zeplin es una plataforma independiente que importa diseños desde otras herramientas de diseño, por lo que no ofrece una función de ramificación, permitiendo a los diseñadores realizar ramificaciones dentro de sus herramientas de diseño favoritas. En Zeplin, los diseñadores ni siquiera necesitan realizar ramificaciones para editar un prototipo, ya que les pide que realicen una confirmación similar a la de Git con los cambios durante el proceso de importación del diseño:

Zeplin crea el historial de versiones basándose en eventos de importación manuales y significativos, y no sincroniza automáticamente los eventos de guardado automático de las herramientas de diseño. También permite comparar instantáneas del historial de versiones, de forma similar al modo de desarrollo de Figma, pero siempre muestra mensajes significativos del historial de versiones, como se muestra en la vista previa anterior.

Generación de código

El producto de entrega de diseño puede ser más productivo si el código de estilo del elemento prototipo se genera automáticamente. Así, los desarrolladores pueden copiar y pegar las definiciones de diseño de los elementos y los estilos de los componentes sin tener que traducir manualmente cada estilo del elemento prototipo desde cero.

El modo de desarrollo de Figma es compatible con HTML/CSS, Android Compose/XML y SwiftUI/UIkit de iOS. Podemos usar los plugins de la comunidad de Figma para generar código para React, Flutter, Tailwind, etc. El modo de desarrollo permite cambiar el lenguaje o framework de generación de código en cualquier momento.

La generación de código de Zeplin cuenta con compatibilidad integrada con HTML/CSS, XML para Android y SwitchUI/UIkit para iOS. Las extensiones oficiales y de la comunidad de Zeplin te ayudan a generar código para React Native, Flutter, Xamarin, Tailwind, etc. A diferencia del Modo de Desarrollo de Figma, los generadores de código integrados de Zeplin no son conmutables y se agregan automáticamente según la configuración del proyecto. Sin embargo, las extensiones te permiten generar código para múltiples objetivos, como se indica a continuación:

Compatibilidad con VS Code y otras integraciones

VS Code (Microsoft Visual Studio Code) se convirtió en el editor de código predeterminado de la industria del software moderno debido a sus características de productividad y su diseño amigable para los desarrolladores, por lo que cada plataforma relacionada con la ingeniería de software tiende a introducir extensiones de VS Code para los usuarios.

Figma ofrece una extensión de VS Code con todas las funciones para impulsar el desarrollo de software, permitiendo a los desarrolladores ver diseños, colaborar, vincular código con componentes de diseño y autocompletar código basado en el código generado por Figma. El Modo de Desarrollo de la aplicación de escritorio/web de Figma no es muy intuitivo para los desarrolladores en cuanto a la organización de pantallas, pero esta extensión de VS Code agrupa las pantallas por secciones de forma intuitiva.

Zeplin ofrece una extensión minimalista de VS Code que permite a los desarrolladores explorar las pantallas de prototipos. Ofrece una función de búsqueda instantánea, registro de actividad e integración con Jira para navegar a las pantallas de prototipos. No ofrece autocompletado ni vista previa del diseño integrados en VS Code, pero permite abrir la aplicación de escritorio o web de Zeplin al instante para estas necesidades.

La extensión Zeplin también permite conectar código con componentes similares a Figma. Zeplin es una extensión minimalista con una barra lateral que abre la aplicación de escritorio/web para ver los diseños. Según este problema de GitHub , el equipo de desarrollo de Zeplin mejorará la extensión de VS Code en el futuro, permitiendo a los usuarios ver prototipos directamente en VS Code.

Además de la integración con VS Code, tanto Zeplin como Figma ofrecen extensiones para integrar Jira, Microsoft Teams, Trello, etc., como plataformas de colaboración en equipo.

Funciones gratuitas y precios

Todos los productos SaaS modernos incluyen paquetes de precios por suscripción. Figma Dev Mode no es una aplicación independiente, por lo que está incluido en el modelo de precios de la plataforma Figma como una característica. Por otro lado, Zeplin ofrece un modelo de precios diferente según su estrategia comercial. El precio es, sin duda, un factor a considerar antes de seleccionar una herramienta de transferencia de diseño.

Tanto Figma como Zeplin ofrecen paquetes gratuitos para que los usuarios usen o aprendan a usar la plataforma de forma gratuita. No es necesario pagar por Zeplin para probarlo en el proceso de entrega de diseños, pero Figma requiere que actualices al plan Profesional para probar el Modo de Desarrollo. En Zeplin, con una cuenta gratuita, puedes probar casi todas las funciones, excepto las de aprobación de diseños y la diferencia de versiones. Zeplin aumenta el número de flujos y aprobaciones al aumentar el nivel del paquete.

Figma ofrece el editor de prototipos y solo algunas funciones para el paquete gratuito y activa más funciones (es decir, ramificación) cuando aumenta el nivel del paquete.

El Modo de Desarrollo de Figma requiere una suscripción mensual de $12 para empezar a usarlo, pero Zeplin te permite usarlo gratis con algunas funciones limitadas. Los paquetes de Zeplin parten de $10 y todos los paquetes preconfigurados ofrecen una prueba gratuita de 30 días, a diferencia de Figma.

Lea más sobre los detalles de precios en los siguientes enlaces:

• Paquetes y precios de Figma
• Paquetes y precios de Zeplin

Zeplin vs. Figma Dev Mode: ¿Cuál soluciona mejor la entrega del diseño?

Ambas plataformas ofrecen funciones fáciles de usar para los desarrolladores de manera competitiva para resolver los desafíos en el proceso de entrega del diseño.

Zeplin ofrece una mejor organización de las pantallas de prototipos, un diseñador de flujo personalizable con todas las funciones y una interfaz mínima pero productiva, pero su extensión VS Code no implementa todas las funciones que los desarrolladores necesitan.

Por otro lado, la extensión VS Code de Figma ofrece funciones más enfocadas en el desarrollo que la de Zeplin, pero el Modo de Desarrollo de Figma carece de una búsqueda eficiente, una mejor organización de la pantalla y un diseño de interfaz minimalista y fácil de usar. Tanto Zeplin como Figma ofrecen aplicaciones de escritorio para sistemas operativos macOS y Windows.

Zeplin se mantiene a la vanguardia con el Modo de Desarrollo de Figma en cuanto al flujo de entrega de diseño. El Modo de Desarrollo de Figma es un modo de plataforma que alterna funciones entre diseñadores y desarrolladores, pero Zeplin es una plataforma colaborativa con todas las funciones que ofrece un entorno productivo para el proceso de entrega del diseño. El flujo de trabajo de Zeplin, basado en Git-commit, aísla las pantallas de prototipos listos para construir y en progreso mejor que la compleja función de ramificación de Figma.

El Modo de Desarrollo de Figma no ofrece un flujo de entrega completo, por lo que es ideal para equipos de software que no siguen estrictamente un proceso de entrega de diseño bien estructurado. Zeplin resuelve mejor los desafíos de la entrega con un flujo de entrega de diseño justo, por lo que es ideal para equipos que siguen estrictamente un proceso de entrega de diseño bien estructurado. Zeplin es una herramienta independiente que permite importar diseños desde Figma, por lo que usar Zeplin con Figma es una forma productiva de optimizar el proceso de entrega de cualquier equipo de producto de software moderno.

Conclusión

Tanto Zeplin como Figma pueden ofrecer nuevas funciones de entrega de diseño fáciles de usar para los desarrolladores que compitan entre sí, pero el flujo de entrega de diseño colaborativo y bien definido de Zeplin no se convertirá en una función del Modo de Desarrollo de Figma, ya que el objetivo principal de Figma es proporcionar una plataforma de diseño, no una plataforma de entrega de diseño como Zeplin. El flujo de entrega de diseño de Zeplin, basado en la aprobación y con estilo Git-commit, ofrece una solución más simple y genérica para los desafíos de entrega de diseño que el Modo de Desarrollo de Figma y las funciones de ramificación.

Figma es una herramienta de diseño de interfaz con todas las funciones y el modo de desarrollo es una de las características que ayudan en el proceso de entrega del diseño, pero Figma no ofrece un flujo de trabajo con todas las funciones para el proceso de entrega, por lo que usar Zeplin junto con Figma es una decisión inteligente para equipos de software de gran escala que necesitan un proceso de entrega de diseño estricto y bien estructurado.

Créditos : Archivo de diseño gratuito de la aplicación móvil Traveling, publicado bajo licencia Creative Commons 4.0 ( CC 4.0 ), utilizado en las vistas previas de Figma y Zeplin. Se realizaron pequeñas modificaciones al archivo de diseño original para demostrar las funciones de importación de Figma a Zeplin.

Si quieres conocer otros artículos parecidos a Usando Zeplin para la entrega de diseño: ¿Cómo se compara con el modo de desarrollo de Figma? puedes visitar la categoría Desarrollo.