La tecnología debe simplificar la vida del usuario, por lo que, en el mundo de la programación, es necesario confiar en expertos en UX/UI – respectivamente, User Experience y User Interface – para que las interfaces gráficas de aplicaciones y programas de todo tipo sean usables y funcionales. El diseño UI/UX es una actividad que, a lo largo de los años, ha ganado cada vez más importancia, y una de sus mejores bazas es Figma.

¿Qué es Figma?

La primera versión de Figma fue lanzada en 2015 y su crecimiento ha sido tan exponencial que fue adquirida por Adobe en 2022. Se trata de una plataforma de edición gráfica basada en la web y con una impostación colaborativa: esto significa que varios usuarios pueden interactuar en un único proyecto.

Más concretamente es una herramienta para el diseño web que permite crear interfaces gráficas para aplicaciones y sitios web, tanto para escritorio como para móviles, sin necesidad de conocer o escribir ningún tipo de código. Es un software de diseño UI/UX que también funciona como un editor gráfico pensado para la red.

MÁSTER EN DIGITAL MARKETING & GROWTH HACKING

Ha llegado el momento de decidir. Tu futuro, por primera vez, está en tus manos y tienes la oportunidad de formarte para ser quien quieras ser. 

¡Quiero saber más!

Características de Figma

Otro punto fuerte de Figma es que no es necesario instalar software o plugins; todos los diseñadores gráficos pueden acceder a la plataforma a través de un ordenador y un navegador. En su versión básica, el uso de Figma es gratuito, pero cuenta con varios paquetes de pago que amplían la experiencia. 

El programa es utilizado no solo por diseñadores UI/UX freelance, sino también por empresas que necesitan este tipo de apoyo. Al ser una herramienta que opera en tiempo real, los datos guardados se almacenan en la nube, evitando la introducción de modificaciones en local. Figma se adapta a muchas fases de la planificación de interfaces gráficas, estimulando la creatividad y sin descuidar los conceptos de diseño UX/UI.  

Es una herramienta extremadamente poderosa y eficaz que todos los aspirantes a desarrolladores web y diseñadores (y también los más experimentados) deberían aprender a utilizar. No en vano, los mejores módulos especializados, como un Máster en UX & Customer Experience, un recorrido formativo necesario para trabajar en este ámbito profesional, dedica bastante espacio a cómo aprovechar las ventajas ofrecidas por Figma.

Chica trabajando UX

¿Para qué sirve Figma Web?

Con Figma se puede realizar todo tipo de trabajos gráficos: desde el diseño de sitios web e interfaces gráficas para aplicaciones, hasta la creación de publicaciones para redes sociales o la realización de presentaciones. Por esto, es una herramienta cada vez más apreciada en empresas y estudios gráficos, que muestra toda su eficacia no solo en el diseño final de un producto gráfico, sino también, y especialmente, en todas las fases previas: brainstorming, evaluación de diferentes opciones gráficas, prototipado, recopilación e implementación de feedback.  

Por ejemplo, en el entorno Figma, un equipo de diseñadores puede construir colaborativamente el wireframe de un sitio web, es decir, el simple esqueleto de un proyecto gráfico sin colores ni estilos, recibir de inmediato los primeros comentarios de otros miembros del equipo o votar por la mejor opción. También pueden crear el prototipo del interfaz de una aplicación: es decir, simular ya en las primeras fases de trabajo la navegación e interacción dentro de un diseño.  

A través de Figma es posible interactuar paso a paso con el nacimiento y la evolución del proyecto. Es un software ofrece gran libertad de acción y permite realizar cualquier operación a nivel gráfico. Quizás, la principal innovación es la naturaleza colaborativa del programa, lo que permite que varios diseñadores y expertos UX/UI puedan trabajar juntos e interactuar en el mismo proyecto y en tiempo real, involucrando a todos los demás miembros del equipo de desarrollo. Esta funcionalidad optimiza los tiempos y permite la participación de todos los profesionales interesados.

¿Cómo usar Figma?

Figma se puede usar como una aplicación web directamente desde el navegador. Es accesible después de registrarse gratuitamente en su página oficial y crear una cuenta; alternativamente, es posible descargar gratuitamente el software para Windows o macOS e instalarlo en el ordenador: la interfaz es idéntica y para empezar siempre es necesario crear una cuenta gratuita. Una vez llevada a cabo la registración, se pueden establecer equipos, proyectos y trabajos (archivos) e invitar a otros usuarios al equipo para que tengan acceso a los proyectos en los que se colaborará.  

Los profesionales pueden activar un plan de suscripción Figma Professional de pago y tener acceso a algunas funciones adicionales, como un chat de audio dentro de la interfaz del programa (para hablar con los colaboradores sin usar software externo) y otras herramientas para colaborar con el equipo de diseño de forma remota. Finalmente, existe la versión móvil del software, que es más limitada y sirve principalmente para visualizar los proyectos ya creados en el ordenador.

Aprender a usar la interfaz es muy simple. Las Páginas son las entidades operativas donde es posible crear los Frames y trabajar en nuestros proyectos. La gestión de los componentes resulta muy familiar tanto para diseñadores UX/UI como para desarrolladores front-end, ya que la gestión está heredada del mundo CSS: Block Element Modifier. El área de trabajo en Figma es un entorno enorme, un cuadrado de hasta 65 mil píxeles, en el cual se pueden insertar las diferentes pantallas del diseño en el que se está trabajando.  

Otro aspecto interesante de Figma son las bibliotecas de componentes que permiten no perder tiempo construyendo elementos desde cero. De hecho, para acelerar la creación de un diseño, o un boceto, se pueden usar los muchos elementos gráficos ya están presentes en las bibliotecas. En la comunidad de Figma se pueden encontrar inspiraciones, materiales para el brainstorming, elementos gráficos y los llamados sistemas de diseño, es decir, un conjunto de reglas, guías y elementos gráficos que ayudan a dar coherencia a un producto gráfico.  

Finalmente, en la sección Prototipo de Figma se pueden conectar diferentes pantallas o elementos gráficos identificando unos nodos, para simular el funcionamiento de un sitio web o una interfaz de aplicación ya en las primeras fases de trabajo y así entender qué funciona y qué necesita mejorar. Una vez que se comparte el archivo con el resto del equipo, es posible recibir y poner comentarios a través de cómodos post-it de colores, utilizados para votar, señalar problemas o dar consejos.  

El trabajo realizado en la plataforma se guarda en la nube y en tiempo real, evitando así varios problemas, como trabajar accidentalmente en archivos obsoletos o perder mucho tiempo intercambiando documentos que también pueden ser muy pesados.