Es el futuro, me dijeron después de preguntar qué es Figma. Hoy te quiero hablar sobre esta herramienta de diseño de interfaz colaborativa. Con ella los profesionales UX/UI podemos crear, probar y compartir nuestros diseños.
Pero antes de comenzar con la introducción a Figma te quiero contar brevemente mi relación con los programas de diseño.
El trabajo de un diseñador UX/UI
En 1990 instalé en un viejo Macintosh la primera versión de Adobe Photoshop. Durante mucho tiempo trabajé con esa herramienta. Instalaba el software en mis ordenadores, aplicaba las actualizaciones disponibles y así pasé muchos años de versión en versión.
A comienzos del 2000 lo comencé a dejar, trabajaba casi todo el día utilizando aplicaciones de la empresa Macromedia. Curiosamente, unos años después pasaron a ser de Adobe. Me sentía atado, sabes bien que las licencias de Adobe siempre fueron… «importantes».
En 2010 después de probar unas semanas la versión beta de Sketch decidí comprar la aplicación. Encontré en ella las mismas herramientas que utilizaba en Photoshop para hacer mi trabajo. Unos meses después ya no utilizaba las aplicaciones de Adobe. Es más, en algunos de mis ordenadores ni siquiera las tenía instaladas. Con este programa de la empresa Bohemian Coding descubrí que no se necesita un Ferrari para ir a comprar el pan. Imagino que entiendes lo que quiero decir.
En 2014 incorporé una nueva herramienta en mi flujo de trabajo, compré Affinity Designer y tiempo después me hice con Affinity Photo. Las sensaciones fueron las mismas que con Sketch, tenía la posibilidad de crear diseños profesionales pagando licencias razonables. Las tres aplicaciones funcionaban perfectamente en todos mis ordenadores, los nuevos y los viejos con menos potencia y prestaciones técnicas.
Aprende Figma desde cero recorriendo la guía de herramientas oficial.
Si llegaste hasta aquí y no conoces las apps de las que estoy hablando te diré que Sketch es un programa para el sistema macOS de Apple, la Suite de Affinity (Designer, Photo y desde hace poco Publisher) se puede utilizar en Macintosh y Windows.
¿Por qué te cuento estas cosas? Comparto mi experiencia para que entiendas el cambio de paradigma que me llevó a perder el miedo a trabajar con herramientas desconocidas y «poco probadas». La transformación comenzó con la compra de Sketch. No la hice de un día para otro, el cambio fue progresivo. Debería en realidad hablar en presente, porque el cambio lo sigo haciendo, hoy te estoy introduciendo en Figma.
Sigamos hablando del próximo paso.
Figma en español
Persiguiendo el objetivo de optimizar nuestro flujo de trabajo utilizando un mejor sistema de diseño comentamos con un compañero la posibilidad de dejar Sketch y pasar a Figma.
Figma funciona dentro de tu navegador, es una aplicación web (SaaS o Software as a Service) que puedes utilizar en sistemas operativos macOS, Windows y Linux. Aunque existen versiones de escritorio para Mac y Windows la posibilidad de usarlo en línea te dará libertad total. Cuando comencé a diseñar con Figma experimenté las mismas sensaciones que tuve en 2006 cuando pasé de Office a Google Docs de la hoy Google Drive o Google Suite.
En el momento de escribir este artículo Figma tiene tres planes disponibles. Starter, Professional y Organization. La primera es gratuita, 100% funcional pero con algunas limitaciones. Las otras dos son de pago pero los precios son muy asequibles. Un detalle, si eres estudiante también podrás utilizar libremente la versión Professional.
Si usas Figma en línea te olvidarás de instalaciones y actualizaciones. Es más, podrás guardar tus diseños en la nube de forma ilimitada, incluso con la versión gratuita. Si te descargas la versión de escritorio tampoco es un problema, la instalarás sólo una vez y sus upgrades son rapidísimos.
Características de Figma
Aunque mi idea es publicar más artículos con información y tutoriales de Figma me gustaría hacer un repaso de sus características principales.
Wireframes
Hasta hace poco tiempo los wireframes que montaba durante el proceso de creación los hacía con Balsamiq Wireframes, una aplicación que apareció en 2008. En su momento era todo un referente, quizás hoy lo siga siendo.
Pero ya no uso Balsamiq Wireframes en mis ordenadores. Con Figma puedes crear wireframes. Como te contaré a continuación a estos esquemas de páginas y pantallas podrás convertirlos en el diseño final y hasta a crear prototipos con ellos.
Diseño
Con Figma puedes diseñar pantallas de sitios web, aplicaciones móviles y cualquier otra interfaz gráfica interactiva. Encontrarás en sus paneles de herramientas muchas similitudes con otros programas como Sketch o InVision Studio.
Podrás crear y editar formas con vectores y nodos, utilizar paletas de colores y maquetar textos sin poner límites a tu imaginación. Tus ideas fluirán con facilidad porque pondrás toda tu atención en el diseño.
Insisto, dedicaré próximos artículos de este blog para comentar con detalle todas las opciones que Figma ofrece al profesional del diseño UX/UI.
Tutoriales de Figma
Aquí debajo te dejo mi lista de los tutoriales que he creado hasta el momento:
- Cómo crear animaciones en Figma sin plugins
- Cómo crear un enlace a un imagen
- Cómo crear links en Figma
- Componentes interactivos
- Todas las herramientas de Figma
- Canvas, el lugar donde diseñamos
- Auto Layout
- Auto Layout con atajos de teclado
- Auto Layout desde el menú contextual
- Auto Layout desde el menú o icono hamburguesa
- Auto Layout desde tu propio módulo
Si no te quieres perder ningún contenido puedes recibir mi Newsletter en tu correo electrónico.
Prototipos animados
Figma te permite crear prototipos animados con tus wireframes y diseños. Podrás darle vida a tus pantallas para mostrar el camino que harán tus usuarios y clientes.
Con un diseño prototipado que parece real tu equipo de trabajo podrá evaluar el proyecto y sacar las conclusiones necesarias para seguir con la idea original o para hacer los cambios que llevarán tu creación al éxito.
Con un diseño prototipado que parece real tu equipo de trabajo podrá evaluar el proyecto y sacar las conclusiones necesarias para seguir con la idea original o para hacer los cambios que llevarán tu creación al éxito.
Codificación
Dentro de la aplicación encontrarás un panel de código. Sin salir de Figma podrás utilizar un inspector de código para ver o interpretar tu diseño. Muy parecido al que tienes disponible en Sketch, o al usas en navegadores como Google Chrome o Mozilla Firefox.
Entre muchas otras cosas podrás generar o códigos en formatos SVG, CSS, iOS y Android.
Colaboración
Si tienes compañeros de trabajo que no están a tu lado no hay problema, Figma te ayuda a compartir tus diseños y prototipos con un simple enlace. Sólo se necesita un dispositivo con conexión a Internet. Tus compañeros de trabajo podrán dejar sus comentarios en contexto, incluso podrán editar y hacer cambios si así lo deseas. Con Figma la colaboración es muy fácil.
Sistemas de diseño
Si en tu empresa tienes un sistema de diseño escalable cualquier integrante del equipo podrá reutilizarlo infinitamente. Incluso lo podrás actualizar con nuevos elementos y herramientas ayudando a los diseñadores a trabajar más rápido y con más organización. Dedicaré también algunos artículos a este tema puntual.
Plugins
La comunidad que hay detrás de Figma crece de manera constante. Diseñadores y programadores desarrollan y ofrecen plugins para hacer de Figma una herramienta mucho más poderosa.
Está pasando lo mismo que en su momento ocurrió con Sketch, las posibilidades que esta herramienta nos ofrece a los diseñadores de experiencia de usuario son realmente infinitas.
En el artículo Los mejores plugins de Figma te cuento cuáles son mis plugins favoritos y cómo los selecciono e implemento en mi workflow.
Config, la conferencia de Figma
Figma organiza todos los años un evento llamado Config.
Config 2021
Hay fecha para Config 2021, el evento de Figma más importante del año. Será realizará el 21 de abril. En cuanto haya más información sobre el evento y los ponentes que participarán la compartiré aquí mismo.
Config Europe 2020
Varios meses después de hacer el primer Config se organizó un evento virtual llamado Config Europe en el que participar ponentes y asistentes de muchos países del mundo. El objetivo fue el de siempre, reunir a usuarios de Figma para hacer crecer la comunidad y que todos aprenden de todos. El primer Config Europe se realizó el 17 de septiembre de 2020.
Config 2020
Durante el mes de febrero de 2020 Figma organizó Config, una conferencia realizada en San Francisco, al evento asistieron más de 1000 usuarios de la aplicación, profesionales del desarrollo y el diseño de todos los niveles que enseñaron y aprendieron unos de otros.
La conferencia la abrió Dylan Field, el CEO de Figma, para agradecer la asistencia y compartir información sobre el crecimiento y consolidación de la aplicación.
Luego hablaron casi 40 ponentes de empresas como Dropbox, Shopify, NPR (la radio pública de Estados Unidos), Microsoft, Autodesk, Atlassian, GitHub, Etsy, Asana o Uber. Seguro que alguna de estas firmas te suena. Efectivamente, como lo estás pensando, ellos también usan Figma.
Hablaron del uso de Figma con casos reales, técnicas que implementan en su trabajo diario, nuevas herramientas, futuras características de la aplicación, etc.
Está disponible el livestream de la conferencia, lo puedes ver aquí mismo.
Curso de Figma
¿Te interesa hacer un curso para aprender a usar Figma? Como dije mi intención es publicar más artículos sobre la aplicación, su uso y la implementación de la misma en procesos creativos. Este post lo actualizaré cada vez que publique información sobre Figma.
Por cierto, estoy compartiendo directos con clases y tutoriales en Twitch.
Te pido entonces, por favor, que sigas con atención mis noticias. Y al mismo tiempo te invito a dejar tus preguntas, reflexiones, experiencias y/o sugerencias en un comentario.
¿Qué? ¿Te animas a dar el salto?
✅ Tutoriales de 2023
¿Qué es y cómo trabaja un Product Designer?
¿Cómo trabaja un profesional dedicado al diseño de producto?
Cómo diseñar un buscador en Figma
Tutorial paso a paso para crear una barra de búsqueda para una aplicación móvil.
Cómo crear una barra de navegación en Figma
Tutorial para diseñar componentes y prototipo.
Cómo crear un menú desplegable en Figma
Indicaciones paso a paso para montar un menú dropdown.
Aprende a usar Figma, Sketch y Webflow
Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.
Información de privacidad
En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
Excelente herramienta, estoy muy interesada en aprenderla. Agradezco de antemano su ayuda y ganas de enseñarnos.
Muchas gracias a ti por tu interés Evelyn, en breve comenzaré a publicar los artículos que estoy haciendo dedicados completamente a Figma.
Interesante el artículo, y si me interesa saber más de Figma, me topé con él hace tres meses, más o menos. Empecé a utilizarlo y el manejo es sencillo, tal vez porque algunos comandos son similares a los que uso en otros programas de diseño. Ahora toca ahondar más en el tema y artículos como este, estoy seguro que ayudarán sobremanera. Una consulta para ser diseñador UX/UI, basta con saber estás plataforma de prototipados o hay algo más que averiguar.
Felicitaciones.
Muchas gracias Jorge por dejar tus comentarios. Decirte que seguiré publicando artículos sobre la Figma, hoy sigue siendo la herramienta más innovadora para diseñar.
Sobre tu segunda inquietud te diré que para trabajar con UX/UI debes contar con skills que no son propias de la o las herramientas que puedas utilizar, si ese tema te interesa por favor dímelo, con tu respuesta podré añadir al plan editorial artículos y programas del podcast que podrán responder tus inquietudes. Saludos!
Saludos amigo y muchas gracias por su trabajo.
Mi comentario tiene que ver con la codificación, por ejemplo yo estoy creándome un sitio web para mi negocio en WordPress, mi idea es personalizar lo más que pueda la interfaz de usuario. Mi pregunta: ¿Podría diseñar esa UI en Figma y luego exportar algún tipo de código a WordPress y así colgar mi diseño en la interfaz de WordPress?
De antemano gracias por su disposición y espero me puedas ayudar
Buena tu pregunta Richard, gracias por dejarla aquí en el blog. Me la apunto para responderla con detalle en un próximo artículo. Saludos.
Me gustaría mucho aprender sobre este aplicativo de diseño. ¿Estos diseños se pueden publicar tal cual para una página web o una aplicación móvil? O ¿son solo para diseñar y esquematizar? Saludos.
Figma es una aplicación de diseño y prototipado Nemesio. Después de montar tu proyecto en ella tendrás que desarrollarlo en el lenguaje y la plataforma que más se acerquen a tus necesidades.
Tengo un problema y es que abro mi aplicación de escritorio Figma y me manda al navegador y no me da la función de trabajar en la App de escritorio.
Ofir, ante todo gracias por dejar tu pregunta sobre Figma. Quiero terminar de entender lo que te pasa, si la aplicación de escritorio te manda al navegador entiendo que lo hace para que abras una sesión allí, acción que te permitirá abrir la aplicación de escritorio para seguir trabajando en ella sin problema alguno. ¿Lo has probado?
A mi me pasa lo mismo que a Ofir. Es como si la aplicación dejara de funcionar y la sesión de mi cuenta tiene limitaciones. No tiene todas las herramientas de la de escritorio.
Juliana, ¿puedes darme más información? Cuando dices que no tienes todas las herramientas de la versión de escritorio… ¿de qué herramientas hablas? si quieres puedes enviarme capturas de pantalla a info@juanpol.com
Si puedo ayudarte, cuenta con ello, saludos.
Hola ! Me interesa…
Pues… bienvenida al blog Verónica! Cualquier duda o inquietud pregunta y te responderé lo más rápido posible. Gracias por tu interés!
Hola Juan, me encantó tu artículo. Estoy comenzando a estudiar esto del UX/UI, estaré al pendiente de los demás artículos, gracias!
Muchas gracias Esayé! Cualquier duda que tengas déjala en un comentario y te respondo. Saludos!
Hola Juanpol! La verdad muy valiosa tu información y experiencia de como pasar de Adobe a nuevas aplicaciones. Yo igual tengo más de 25 años de trabajar con Adobe, pero quiero conocer nuevas formas de trabajar adaptadas a tiempos reales. Pregunta: se necesita conocer de programación para trabajar con Figma? Saludos!
Hola Iván, bienvenido al blog, es tu primer comentario y espero que no sea el último. Te respondo, para trabajar con Figma no necesitas saber programar, podrás crear tus diseños con click de ratón y atajos de teclado. Los flujos e interacciones de los prototipos igualmente, sólo usarás ratón y teclado. Si te puedo ayudar en algo, deja un comentario. Saludos!
Hola buenos días, tengo la siguiente inquietud, yo uso una licencia professional para Figma, si en dado caso se me llega a vencer la licencia se me perderia todo el trabajo realizado o se eliminaria, o queda almacenado hasta que vuelva a renovar la licencia?
Muchas gracias.
¿Cual es el rango salarial para un diseñador que maneja Figma en el mercado laboral?