Qué es Figma y cómo es útil para diseño web

Figma ha surgido como una herramienta revolucionaria que ha simplificado y optimizado el proceso de diseño web de manera extraordinaria. Hemos aprendido que el diseño web y la programación web están íntimamente relacionados, hasta el punto en que siempre es beneficioso que un perfil de diseño aprenda a programar y que una desarrolladora o desarrollador aprenda los fundamentos del diseño, como teoría del color o distribución de contenido, especialmente si se especializa en desarrollo frontend.

Una de las principales responsabilidades de la diseñadora o el diseñador web es hacer la propuesta de la interfaz de usuario (UI) ante el equipo de desarrollo, para que esta sea la brújula del proyecto. Es aquí cuando Figma juega como principal herramienta aliada, y ya veremos sus muchos beneficios.

¿Qué es Figma?

Figma es una aplicación de diseño colaborativo basada en la nube que permite a los equipos crear, colaborar y prototipar diseños en tiempo real. A diferencia de otras herramientas de diseño, Figma no requiere descargas ni instalaciones complicadas, ya que puede funcionar directamente en el navegador web, lo que facilita su acceso desde cualquier lugar y en cualquier momento.

Principales características de Figma

Interfaz intuitiva y versátil

Una de las características más destacadas de Figma es su interfaz intuitiva y versátil. Con una curva de aprendizaje mínima, incluso para principiantes, Figma ofrece una amplia gama de herramientas y funciones que permite crear diseños impresionantes con relativa facilidad. Además, también resulta una herramienta comprensible para desarrolladores y desarrolladoras, así como React trabaja con componentes, Figma usa la misma lógica, lo que agiliza la comunicación entre diferentes equipos.

Colaboración en tiempo real

La colaboración eficiente es una necesidad en cualquier proyecto de diseño web, y Figma lo hace más fácil que nunca. Con la capacidad de trabajar simultáneamente en un mismo diseño, varios miembros de un equipo pueden realizar cambios, comentar y ver las actualizaciones en tiempo real, lo que agiliza el proceso de iteración y garantiza una comunicación fluida.

Diseño responsivo y consistente

La coherencia del diseño y su adaptabilidad son indispensables, especialmente ahora que experimentamos las páginas web desde diferentes dispositivos. Figma ofrece herramientas avanzadas para crear diseños responsivos que se adapten a diferentes resoluciones de pantalla. Además, su sistema de estilos permite mantener la consistencia en todo el proyecto, facilitando la gestión de elementos como colores, tipografías y estilos de botones.

Prototipado interactivo

El prototipado es una parte crucial del proceso de diseño web, ya que permite a los diseñadores y las diseñadoras probar la funcionalidad y la experiencia del usuario (”UX”, por sus siglas en inglés) antes de la implementación final. Con Figma, es posible simular la navegación y las interacciones de cada sección de una web de manera realista.

Los 10 principios heurísticos del UI/UX

Los 10 principios heurísticos del UI/UX son una serie de lineamientos presentados en 1994 por Jakob Nielsen, uno de los profesionales más respetados mundialmente sobre usabilidad en la web. Estos son usados por equipos de diseño de interfaces para asegurar la creación de plataformas fáciles de usar y que proporcionen una buena experiencia al usuario.

1. Visibilidad del estado del sistema: Mantén al usuario informado sobre lo que está pasando en la interfaz en todo momento. Por ejemplo, muestra indicadores de carga o procesos.
2. Coincidencia entre el sistema y el mundo real: Haz que los elementos de la interfaz se parezcan a objetos o conceptos familiares para que puedan entenderse fácilmente.
3. Control y libertad del usuario: Da la posibilidad de deshacer acciones o salir de situaciones no deseadas sin dificultad.
4. Consistencia y estándares: Utiliza patrones de diseño consistentes en toda la interfaz y sigue las convenciones de la plataforma o sistema operativo para que las personas se sientan cómodas y familiarizadas.
5. Prevención de errores: Diseña la interfaz de manera que prevenga errores o malentendidos por parte del usuario o usuaria. Por ejemplo, usando mensajes de confirmación antes de realizar acciones importantes. ¡De este mandamiento nace la confirmación antes de hacer una transferencia!
6. Reconocimiento en lugar de recuerdo: Haz que las opciones y acciones importantes sean fácilmente reconocibles en lugar de requerir que tu cliente recuerde información específica.
7. Flexibilidad y eficiencia de uso: Diseña la interfaz de manera que pueda ser utilizada tanto por principiantes como por personas expertas, proporcionando atajos y opciones avanzadas.
8. Estética y diseño minimalista: Haz que la interfaz sea visualmente atractiva y fácil de entender, evitando el desorden y la sobrecarga de información.
9. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores: Proporciona mensajes de error claros y orientación sobre cómo corregirlos.
10. Ayuda y documentación: Ofrece ayuda y documentación útil cuando sea necesario, pero intenta que la interfaz sea lo suficientemente intuitiva como para no tener que recurrir a ella.

¿Qué ventajas ofrece Figma ante otras plataformas de diseño?

Como es de esperarse, Figma no es la única herramienta de diseño que existe en el mercado. Este es un nicho bastante competido, pero este programa ofrece ciertas ventajas por sobre sus rivales, aquí algunas de ellas:

Dev Mode

El “dev mode” o modo de desarrollo de Figma funciona como el inspector del navegador para el archivo de diseño: solo tienes que hacer clic en los objetos para obtener detalles como medidas, especificaciones y estilos, traducidos a fragmentos de código CSS, iOS o Android.

Así obtienes el código listo para llevar a producción, y en caso de trabajar con otros frameworks, puedes utilizar un plugin (GitHub y Jira están disponibles) para personalizar el código. ¡Figma incluso puede integrarse con Visual Studio Code!

Según el reporte del impacto económico de Figma, creado por la consultora Forrester, indica que los equipos que utilizan este programa aumentan la eficacia del desarrollo en un 35%.

FigJam

FigJam es una herramienta añadida a Figma que le hace competencia directa a Miro e InVision, destinada a agilizar la organización de equipos y proyectos, ayudándoles a visualizar la planeación e ilustración de ideas. Recientemente, se le agregó una funcionalidad con inteligencia artificial que busca acelerar el proceso y superar el síndrome de la página en blanco, en otras palabras, el bloqueo creativo.

Prototipado: Figma vs. Framer

Ya hemos mencionado el prototipado interactivo como principal característica de Figma, pero existe otra herramienta, llamada Framer, que ofrece esta funcionalidad desde otro enfoque.

• Diseño de UI vs. Prototipado avanzado: Figma está principalmente orientado al diseño de UI. Por otro lado, Framer se enfoca más en el prototipado avanzado, permitiendo crear prototipos con animaciones y microinteracciones, con herramientas para agregar interacciones, animaciones y comportamientos complejos a los diseños.
• Colaboración y trabajo en equipo: Figma es conocido por su capacidad de colaboración en tiempo real, lo que permite a varias personas trabajar en un mismo documento simultáneamente, comentar y dejar feedback. Framer también ofrece algunas capacidades de colaboración, pero no en la misma medida que Figma.
• Curva de aprendizaje: Figma tiende a tener una curva de aprendizaje más suave, siendo más accesible para principiantes y equipos que buscan una herramienta fácil de usar y rápida de aprender. Framer, por otro lado, puede requerir más tiempo para dominarla debido a su enfoque en el prototipado avanzado y la necesidad de comprender conceptos del código y la animación.

La elección entre Figma y Framer dependerá de las necesidades específicas del proyecto. El punto fuerte de Figma es el diseño de UI y colaboración en equipo, mientras que Framer es ideal para crear experiencias interactivas más sofisticadas.

Además, Figma es consciente de sus limitaciones y la importancia de usar la mejor herramienta para cada escenario. Por ejemplo, si vas a editar fotos, la opción preliminar es Adobe Photoshop. Si estás haciendo ilustraciones detalladas, Adobe Illustrator es una obviedad. Pero si el proyecto se basa en diseño UX, Figma estará por sobre Adobe XD.

Accesibilidad: Figma vs. Sketch

Figma y Sketch son dos de las estrellas más brillantes de esta industria. Aun así, las grandes diferencias están en los pequeños detalles que las hacen diferentes. Dependiendo de las preferencias de cada equipo o sus necesidades, cualquiera de estos programas puede llevar la ventaja al momento de decidir en cuál desarrollar un proyecto, aquí veremos las principales características de cada uno:

• Accesibilidad: Figma es una herramienta basada en la nube, lo que significa que puedes acceder a tus archivos desde cualquier lugar con conexión a Internet y colaborar en tiempo real en el mismo documento. Sketch, por otro lado, es una aplicación de escritorio que no ofrece esta funcionalidad de colaboración en tiempo real sin el uso de complementos de terceros.
• Sistema operativo: Figma es multiplataforma y es compatible tanto con sistemas operativos de escritorio (Windows, macOS, Linux) como con navegadores web, lo que la hace más versátil en términos de accesibilidad. Sketch, por otro lado, es exclusivo de macOS, lo que significa que solo puede ser utilizado en dispositivos Apple.
• Licenciamiento y precios: Figma ofrece un modelo de suscripción mensual o anual, con diferentes planes según las necesidades, y también tiene una versión gratuita con ciertas limitaciones. Sketch, por otro lado, tiene un modelo de negocio basado en licencias de tarifa única, lo que significa que compras la aplicación una vez y recibes actualizaciones durante un período de tiempo determinado.
• Integraciones y complementos: Ambas herramientas ofrecen una amplia gama de integraciones y complementos que amplían su funcionalidad y pueden adaptarse a las necesidades específicas de cada usuario y usuaria. Sin embargo, debido a su naturaleza basada en la nube y su API abierta, Figma tiende a tener una comunidad más activa y una mayor cantidad de complementos disponibles en comparación con Sketch.

Como parte de su estrategia de integración con otras herramientas, un proyecto de diseño que nace en Sketch puede ser importado en Figma sin mayores complicaciones.

¿Por qué Adobe abandonó la compra de Figma?

En diciembre del 2023, Dylan Field, cofundador y Chief Executive Officer (CEO) de Figma, anunció la cancelación de la fusión con Adobe por mutuo acuerdo. Esta noticia fue, en general, muy bien recibida por profesionales del diseño y el desarrollo web.

La Autoridad Reguladora de Competencia y Mercados (CMA, por sus siglas en inglés) de Reino Unido propuso una serie de condiciones que Adobe debía aceptar para avanzar en la adquisición, pero al final la compañía decidió dar un paso atrás y pagar una multa de mil millones de dólares por romper el acuerdo.

Desde un punto de vista holístico, que Figma continúe compitiendo con Adobe significa que ambas compañías seguirán un incentivo natural: conseguir la mayor cuota de mercado, y este a su vez, será el combustible para invertir en el desarrollo de sus productos, soporte y regulará orgánicamente el precio del software a lo largo del tiempo.

Y a decir verdad, esta es una noticia en la que podemos comentar que “no hay mal, que por bien no venga”. Especialmente cuando Adobe podría enfrentarse a una gran multa ante la Comisión Federal de Comercio de los Estados Unidos (FTC, por sus siglas en inglés), por manipular a sus usuarios para pagar más de lo esperado por de-suscribirse de su servicios.

Estas malas prácticas en el mercado, que se le conocen como “dark patterns”, formas en que las plataformas tratan de engañar a su clientela que, en este caso en particular, buscan aumentar la retención. Y que sí, es una práctica que va en contra de los principios heurísticos del UI/UX de Jakob Nielsen.

¡Impulsa tu carrera en desarrollo frontend!

Mucho hemos hablado de Figma en este artículo, pero bien sabemos que en la industria tecnológica todo evoluciona de manera acelerada y estamos al pie del cañón para informarte de las nuevas tecnologías y el impacto que tienen en el día a día del mundo del desarrollo. Por ejemplo, penpot es una alternativa de código abierto para el diseño de interfaces y en el futuro pudiese convertirse en uno de los principales competidores de Figma.

Sin importar cómo pinte el futuro, hoy has conocido a la herramienta que ha acercado más que nunca a equipos de diseño y equipos de programación.

Si lo tuyo es el desarrollo de interfaces visuales, Figma es una de las herramientas que te harán la vida más fácil como frontend developer. Todo lo demás, ¡lo puedes aprender aquí! Apúntate al bootcamp de desarrollo web Full Stack o rellena el formulario debajo de esta sección para recibir toda la información.