Herramientas de Transferencia de Diseño Gráfico
Las 5 mejores herramientas de transferencia de en 2022
La transferencia de diseño implica entregar un diseño de interfaz de usuario a un desarrollador que lo codificará. Antes de que “entregar diseños” fuera siquiera un término, entregar diseños era una tarea complicada, frustrante y, a menudo, desastrosa. Hace mucho tiempo, Adobe Photoshop era la única herramienta disponible para diseñar interfaces de usuario, y no existían las herramientas y/o funciones de transferencia de diseño. La conversión de un diseño a código se denominaba “cortar un PSD”. Ay, los días.
Cortar un PSD (un documento de Photoshop) era responsabilidad del desarrollador, lo cual era muy frustrante porque, comprensiblemente, los desarrolladores no querían trabajar con herramientas de diseño. Los diseñadores documentaban manualmente las especificaciones de diseño para aclarar las cosas, pero esto aún generaba inconsistencias visuales/funcionales y discusiones acaloradas con los desarrolladores.
Entrega de diseño hoy
Hoy en día, hay una gran cantidad de herramientas de interfaz de usuario con funciones de transferencia de diseño e incluso herramientas que están completamente dedicadas a la transferencia y que ayudan a los diseñadores y desarrolladores a traducir el diseño en código, albergar archivos de diseño, mantener la coherencia entre los elementos de diseño y facilitar una buena colaboración entre diseñadores y desarrolladores. .
Los diseñadores y desarrolladores modernizados reconocen el proceso de transferencia de diseño como un proceso de desarrollo clave, ya sea que se construya un sistema de diseño o un producto desde cero. De hecho, las herramientas de diseño de interfaz de usuario como Figma ofrecen funciones de sistema de diseño y transferencia en paralelo.
¿Qué hacen realmente las herramientas de traspaso de diseño?
Las herramientas de traspaso ayudan:
- diseñadores para preparar sus diseños para la inspección
- desarrolladores para inspeccionar y traducir diseños a código
- diseñadores y desarrolladores para colaborar y comunicarse
Sin la entrega del diseño, los desarrolladores solo tienen una alternativa: adivinar . Adivinar a menudo da como resultado inexactitudes visuales y funcionales, como el uso de colores incorrectos o interacciones que se comportan de manera extraña. A su vez, esto afecta la experiencia del usuario y envía a los diseñadores a un colapso nuclear.
Echemos un vistazo a cinco de las mejores herramientas de transferencia de diseño.
Figma (más usado)
Si bien no es tan avanzado como Zeplin en cuanto a la cantidad de lenguajes de código compatibles, Figma traduce los estilos de diseño a CSS (para web), Swift (para iOS/macOS/iPadOS) y XML (para Android). Sin embargo, esto debería cubrir la mayoría de las transferencias de diseño de todos modos.
Se pueden instalar herramientas alternativas de transferencia de diseño como complementos de Figma para cuando los diseños deben traducirse a Sass, Less, Stylus, código React Native y más.
Los activos de imagen se pueden exportar o copiar al portapapeles en formato SVG o PNG, todos a la vez o individualmente, en cualquier resolución.
Si los colaboradores tienen algo que decir (o preguntar) sobre el diseño, pueden comunicarse de forma clara y abierta mediante comentarios contextuales, lo que ayuda a la colaboración y garantiza que todos estén de acuerdo con el aspecto, la sensación y el funcionamiento del diseño.
Figma no solo es la herramienta más utilizada para la transferencia de diseño, sino también para flujos de usuario, interfaces de usuario, prototipos interactivos, sistemas de diseño y control de versiones
Zeplin (mejor valorado)
Zeplin admite más lenguajes de código que Figma (React Native, Sass, Less, Stylus, etc., además de los estándares Swift, XML y CSS). También es más barato que las herramientas similares a Figma, aunque esto se debe a que las herramientas similares a Figma son multifuncionales y cubren mucho más el flujo de trabajo de diseño de la interfaz de usuario. Zeplin es la herramienta de transferencia de diseño mejor calificada (según la Encuesta de herramientas de diseño de 2020), por lo que algunos diseñadores tienden a pasar por alto este inconveniente.
Para usar Zeplin, primero deberá crear diseños con Photoshop, Adobe XD, Sketch o Figma, por lo que es totalmente comprensible que algunos diseñadores prefieran mantener su flujo de trabajo de diseño de interfaz de usuario contenido en una sola herramienta, y esta es probablemente la razón. Figma se usa con más frecuencia que Zeplin para el traspaso.
En cuanto a la funcionalidad, Zeplin hace todo lo que esperarías que hiciera una herramienta de traspaso (y lo hace bastante bien). Exporta activos de imagen en una variedad de formatos y en varias resoluciones, traduce estilos de diseño a código y facilita la comunicación.
InVision
La herramienta de transferencia de diseño de InVision, Inspect, que funciona dentro de Specs y Prototype (la herramienta de documentación de diseño de InVision y la aplicación web principal, respectivamente), es solo una herramienta dentro del conjunto grande (quizás demasiado grande) de herramientas de colaboración de diseño de InVision.
Sin embargo, InVision Studio (la herramienta de diseño de interfaz de usuario de InVision) es donde muy probablemente creará sus diseños antes de entregárselos a los desarrolladores. Studio está disponible para usuarios de macOS y Windows.
InVision se ha visto envuelto en comentarios negativos recientemente por gastar demasiado en la comercialización de herramientas que no han estado a la altura. la moda. La principal crítica es que las herramientas de InVision a veces se sienten a medio hacer y desconectadas, incluso después de un lanzamiento retrasado. Por el contrario, Figma funciona perfectamente como una aplicación singular.
No obstante, InVision es la tercera herramienta más utilizada para la transferencia de diseño y sigue siendo una herramienta de uso común en general. Si bien parece estar en declive, con una competencia sólida comiendo su porción del mercado, ha estado tranquilo últimamente
La herramienta de inspección de InVision puede traducir estilos de diseño a CSS, Less, Sass, SCSS, Stylus, Swift/Objective-C (Apple) y XML (Android), que es una lista impresionante. Si está familiarizado con el ecosistema de InVision, elegir Inspeccionar para el proceso de entrega del diseño no sería una mala opción y no arruinaría su banco.
Adobe XD
Hasta ahora, hemos analizado las herramientas de transferencia de diseño (Zeplin), las herramientas de diseño de interfaz de usuario multifuncionales que incluyen la transferencia de diseño (Figma) y las suites de diseño con varias herramientas semiintegradas, incluida la transferencia de diseño (InVision). De estas herramientas, Adobe XD es la más similar a Figma, ya que también es una herramienta de diseño de interfaz de usuario multifuncional.
Adobe XD es un competidor sólido en esta lista, sin grandes inconvenientes. De hecho, si ya está familiarizado con el ecosistema de Adobe, Adobe XD podría ser la mejor opción, especialmente si ya tiene una suscripción a Adobe Creative Cloud
En general, si solo necesita transferir el diseño a CSS y/o ya está familiarizado con el ecosistema de Adobe, Adobe XD es una opción decente. En estos dos casos, pagar más para suscribirse a Figma podría ser innecesario.
Bosquejo
Al igual que Figma y Adobe XD, Sketch es otra herramienta de diseño multifuncional que puede facilitar la mayor parte del flujo de trabajo del diseño de la interfaz de usuario, incluida la transferencia del diseño. Sin embargo, desafortunadamente, Sketch solo admite la traducción de estilos de diseño a CSS
Otro inconveniente de Sketch es que su aplicación principal solo es compatible con usuarios de Mac, aunque, dado que la transferencia de diseño funciona a través de una URL que se puede compartir, esto no debería preocupar a los desarrolladores (pero es algo a tener en cuenta si su equipo tiene varios diseñadores).
En general, Sketch no es el mejor, pero tampoco está mal. Permanece entre los cinco primeros porque a los diseñadores les encanta su experiencia de usuario.
