Diseño Web

La tecnología Cloud Computing está derribando conceptos fuertemente atrincherados en la mente de usuarios y en el paradigma de la interacción entre usuario - computador. Quienes nos encontramos inmersos en un mundo dedicado al diseño nos hallamos en la misma disyuntiva, ¿qué tecnología es mejor, las aplicaciones offline u online?

No es necesario divagar mucho sobre cual herramienta de diseño (para nuestro caso) es mejor, ya que, en realidad, existen recursos informáticos para todos los gustos. Pero la alta demanda y competitividad en aspectos como productividad, desempeño, versatilidad y adaptabilidad empujan al profesional a desarrollar sus habilidades como UI / UX de la mano de programas que satisfagan dichos requerimientos.

Hablando de software para implementación y desarrollo UI / UX, tanto Figma como Sketch mantienen una íntima relación con términos como branding, mockup, patterns, moodboard, wireframes, prototyping, etc., lo que las hace predilectas dentro del mundo del desarrollo de Apps (nativas, híbridas y WebApps) y diseño Web, logrando confundir en gran manera el grado de efectividad que cada una de ellas tiene, así como las razones del por qué hacerlas el brazo derecho en el campo del diseño UI/UX.

Por tal razón y dando paso al motivo de este pequeño análisis, veamos por qué cada una es mejor que otra y cuáles son sus similitudes actualmente.

Por qué Figma es mejor que Sketch

Si analizamos los cientos de artículos que profundizan en el tema de Figma vs Sketch, podríamos asegurar sin lugar a dudas que Figma lleva la delantera. El argumento común es su precio y su naturaleza multiplataforma.

Figma es una aplicación para navegadores que aprovecha la tecnología de recursos en línea desde la nube, lo que permite que el usuario no necesite instalar en su ordenador software alguno, permitiendo ser ejecutada en sistemas Windows, iOS, Android, Linux, etc. Esto desvincula al usuario de futuras actualizaciones o problemas de software (compatibilidad, recursos mínimos del sistema, etc.).

La versión de Figma a la que se accede es gratuita y posee todas las opciones del programa, pero si se desea acceso a un ámbito más profesional u organizativo, el valor del mismo va desde $144 a $540 respectivamente.

En el caso de Sketch, solo puede ser instalado en sistemas iOS y el valor, en su versión standard, es de 99$ por año (lo cual personalmente no lo considero costoso), lo que obviamente deja a Sketch en una posición inferior a la versión gratuita de Figma.

A pesar del tiempo que Sketch está en el mercado, aproximadamente unos 11 años, Figma, que está desde el 2016, posee una comunidad de seguidores y personas que pertenecen al mercado del diseño muy similar a la que apoya y sigue a Sketch (llamados Embajadores Sketch), los cuales se encuentran en más de 60 países alrededor de todo el mundo.

Pero en este campo, Figma va un paso más allá a través de una conferencia de diseño que re realiza anualmente desde el 2020, dirigida a todo el mundo y llamada Config. Este año se realizó los días 21 y 22 del mes de abril, y en esta ocasión participaron más de 60 expositores entre directores ejecutivos, diseñadores de producto, investigadores UX, diseñadores UI / UX entre otros. Los mismos representaban a marcas y empresas muy conocidas como GitHub, Uber, NBC, Squarespace, IBM, Shopify, entre otras, además de, por supuesto, representantes de Figma. Si deseas saber un poco más sobre este evento te dejo el link de config.figma.com para que puedas acceder al mismo.

Aquí en OpenWebinars, tenemos un curso de Figma con el que podrás conocer y aprender a utilizar Figma y todas las utilidades que ofrece esta potente herramienta de diseño para la creación y el prototipado de interfaces, tanto de forma teórica como de forma práctica.

Por qué Sketch es mejor que Figma

Dentro del campo de la interacción entre usuario y programa, es necesario darle importancia al periodo de aprendizaje al que se somete el profesional UI / UX para comprender ampliamente el manejo de una herramienta informática de este tipo.

En el caso de Sketch, su interface gráfica o entorno de trabajo permite que la curva de aprendizaje sea más corta que la de Figma, haciendo de Sketch una aplicación muy intuitiva, lo que permite al diseñador manejarla de una forma más profesional con menor cantidad de opciones o “tools designs” dentro de su área de diseño y en menor tiempo.

En el caso de Figma, su curva de aprendizaje es un poco más amplia, lo que la vuelve un poco compleja a pesar de que las dos herramientas cumplen con estándares similares en la distribución de elementos (menús, opciones, propiedades, etc.), dentro de sus interfaces de usuario.

También podemos destacar que la experiencia de usuario con Sketch es mejor que con Figma, debido a que, en el caso de Sketch, el usuario no necesita tener conocimientos previos sobre programas de diseño para interactuar con esta aplicación.

Con respecto a su naturaleza, Sketch se ejecuta y permite el uso de todas sus funciones sin necesidad de estar conectado a Internet. Al ser un programa instalado en un ordenador, no necesita acceso a Internet para su uso. En el caso de Figma, solo se ejecuta con una conexión de Internet, lo que en su momento es una fortaleza y al mismo tiempo su debilidad más grande. Si por alguna razón, se elimina la señal, es posible seguir trabajando sobre el proyecto actual, pero ya no permite la apertura de un nuevo proyecto.

Una ventaja, que se vuelve un plus para los usuarios de productos Apple, es que la interfaz de este programa es muy familiar por lo que el software se adapta perfectamente al sistema operativo, para, por ejemplo:

• Interfaces de usuario oscuras y claras (dark mode).
• Soporte completo para pantallas Retina y no Retina.
• Soporte de Touch Bar.
• Control de versiones de documentos locales.
• Rendimiento súper rápido en Apple Silicone.
• Barra de herramientas y atajos personalizables.

Similitudes de ambas herramientas

Si buscamos similitudes, a pesar de que muchos análisis existentes están enfocados en marcar una diferencia radical entre Figma y Sketch, podemos destacar varias:

• Relacionadas al contexto de conexión dentro de grupos de trabajo o colaborativos en tiempo real, Figma, una aplicación con una interface Web, permite que la colaboración del equipo de trabajo se de en tiempo real y esto lo ha permitido desde sus inicios. Por el otro lado, Sketch, una aplicación instalada únicamente en sistemas iOS (iPad, iPhone, iMac, etc.), ha avanzado en este tema permitiendo que, a la fecha, el tema del trabajo colaborativo sea parte de sus servicios (Sketch Cloud), permitiendo la creación de grupos de trabajo y que estos puedan interactuar en tiempo real de la misma forma que lo hace Figma. Podemos puntualizar que en un principio Sketch Cloud solo permitía compartir archivos entre grupos de trabajo.

• Si analizamos el caso de los plugins, asistentes o integraciones, que permiten mejorar la experiencia de usuario asi como el desarrollo de productos, ambas aplicaciones tienen acceso a un complejo y diverso número de librerías extras que mejoran el trabajo de los equipos de diseño (más de 700 herramientas extra). Entre estos encontramos a Protopie, Maze, Flinto, Abstract, Overlay, Zeplin, Stark, Chart, Overflow, Plant, Crowdin, Lokalise entre otras más. Tanto Figma como Sketch admiten complementos que permiten a los diseñadores crear animaciones interactivas y prototipos, y los dos se integran perfectamente con Zeplin o Avocode para la transferencia de los desarrolladores. Si deseas aprender a manejar más ampliamente el entorno desarrollo de Figma te comparto el taller crea aplicaciones desde cero con Figma, para que seas capaz de diseñar una app básica y prototipar la misma en Figma.

• Topando un poco más el diseño de prototipos y animación, los dos poseen capacidades nativas para su creación. Aun así, Sketch tiene una plataforma más robusta con marcos más flexibles que permiten a los diseñadores crear prototipos interactivos incluso sin una aplicación separada. Al comparar solo la creación de prototipos nativos y las capacidades de transferencia de los desarrolladores, Figma toma la iniciativa, porque la acción de preparar prototipos web interactivos es mucho más fácil. Hablando sobre este tema, en OpenWebinars también tenemos un taller de Wireframing con Figma, con el cual aprenderás a realizar Wireframing, además te ayudará a conocer las distintas fases que existen dentro del proceso de Wireframing, todo mediante el uso de la herramienta de prototipado Figma.

• Hablando de su entorno o área de trabajo, las dos tienen un lienzo o Canvas infinito lo cual se agradece sobre todo si somos desarrolladores no muy organizados con el espacio. Sus elementos u opciones de diseño poseen redes vectoriales que permiten que el manejo de los diversos objetos que conforman un “arte” o diseño sean manipulados de manera muy precisa y flexible. También existen similitudes en la distribución del área de diseño, entre muchas otras que facilitan la interacción de los usuarios cuando se decide migrar de una tecnología a otra.

• Hablando un poco de estadísticas, en Internet encontramos un gran número de documentación junto con métricas y valoraciones que ponen a Sketch entre las primeras 3 soluciones informáticas (como promedio) que un diseñador UI / UX selecciona “inicialmente”. En el caso de Figma, hay algunas páginas (como es el caso de startup.info), que ni siquiera la consideran en sus reportes. En este tema, se considera las métricas que genera similarweb.com, página dedicada al ranking de acceso a servicios en Internet, encontramos que Figma se encuentra en la posición número 441 del ranking mundial. En el caso de Sketch, se encuentra en la posición número 36590 de este mismo ranking). Por otro lado uxtools.co, servicio web dedicado al análisis profundo de herramientas de diseño, muestra como Figma se encuentra sobre Sketch, tanto para el área de UI, así como en prototipado y flujo de trabajo entre otras categorías.

Estas valoraciones entre otras deben ser interpretadas desde un ámbito o espectro tecnológico, ya que las mismas son el resultado del acceso a servicios web, por lo que es obvio considerar que Figma tendrá mayor relevancia ya que su ejecución se realiza sobre Internet.

Podemos concluir que las dos poseen una fuerte influencia en el mercado de la implementación de interfaces gráficas y de desarrollo UI / UX.

Personalmente considero que existe un problema o traba en las dos aplicaciones, y es que su entorno de trabajo está dirigido a un público de lengua inglesa. Si bien es cierto el inglés es un lenguaje universal, las interfaces de ambas aplicaciones, al estar en este idioma, pueden limitar en cierto grado la interacción adecuada con el usuario. Afortunadamente existen muchos cursos, webinars y manuales en diversos idiomas (incluido el español), que permiten superar esta situación al usar cualquiera de las dos herramientas (con todo se espera que en algún momento sean multi lenguaje).

Conclusión, ¿Figma o Sketch?

Debo dejar claro que, personalmente, considero que es una pregunta muy compleja. Incluso, en el mercado existen aplicaciones que poseen mejores virtudes que las que hemos analizado hoy, como pueden ser Miro, Adobe XD, Balsamiq, etc.

Es lógico considerar que, debido a los avances tecnológicos actuales, sobre todo con el tema de Cloud Computing o recursos computacionales en la nube, Figma lleva las de ganar. Se vuelve una herramienta muy versátil, flexible, de alto rendimiento, escalabilidad y conectividad.

El precio-beneficio es muy positivo y, sobre todo, a pesar del poco tiempo que permanece en el mercado, ha impactado en gran manera en profesionales de todo el mundo permitiendo que se vuelva la opción a elegir entre toda la oferta de aplicaciones existentes.

Es válido mencionar que Sketch, debido a su relación directa con sistemas iOS, es mucho más virtuoso, ya que pertenece a un entorno netamente minimalista (el de Apple), lo que hace de este software muy “sui generis” y no necesita luchar por buscar un espacio en la oferta y demanda del mercado actual de UI / UX. También debemos esperar los efectos que tendrá Sketch Cloud que ahora permite participación y colaboración de los equipos de trabajo en tiempo real.

En este punto lo más práctico sería recomendarte a que pruebes ambas herramientas, pues solo a través de la experiencia personal se llega a percibir cual sería la más idónea para nuestro desarrollo profesional.