Si Figma tuviera un club de fans, allí estarían todos nuestros ironhackers, en primera fila, con pompones y coreando su nombre. Sí, lo reconocemos, nos encanta Figma y si tú no estás en el Figma Club de Fans es porque todavía no lo conoces. Sabes cuando has descubierto una súper serie de la que nadie de tus amigos todavía ha oído hablar y tu eres como un mesías que les revela este gran descubrimiento y estás súper emocionado porque van a poder sentir lo mismo que tú cuando viste la serie por primera vez, pero al mismo tiempo un poco celoso (solo un poco) porque lo van a vivir desde 0 … Esa sensación es la que sentimos ahora hablándote de Figma. Figma va a cambiar tu forma de crear, prototipar, compartir y colaborar y muchas otras cosas más.
Antes de continuar hablando sobre todas las fantásticas posibilidades de Figma, queremos compartir contigo un webinar que preparamos hace ya algún tiempo pero que puede resultarte muy interesante para ver las increíbles posibilidades que tiene Figma. El webinar se titula: Construye el prototipo de una App con Figma.
Recapitulemos rápidamente cuál es la diferencia entre UX y UI.
¿Qué es UX?
UX viene del inglés y se refiere a “User experience”, es decir, "Experiencia de usuario", se refiere más al back end y se centra en la investigación, la etapa de concepto y la definición de cómo optimizar la experiencia del usuario mientras navega por un sitio web o aplicación. Básicamente, un diseñador de UX es responsable de cómo funcionan las cosas en el mundo online, de resolver los problemas del usuario y hacer que nuestra vida, la de los usuarios de Internet, sea más fácil. Por ejemplo, el diseñador de UX deberá considerar todos los aspectos del Product Design (Diseño de Producto) y centrarse en la interacción entre el usuario y el producto mediante el uso de diversas técnicas como el storytelling, el customer journey mapping y la creación de buyer personas para garantizar que el flujo de experiencias es lo más intuitivo posible.
¿Qué es la UI?
UI, obviamente también del inglés, significa “User interface” que en español traduciríamos como “Interfaz del Usuario”; se refiere específicamente a la estética visual del sitio web y la app. El diseñador UI es responsable de cómo se organiza y comunica visualmente el producto y diseñará cada pantalla o página con la que el usuario interactúa. Además, el diseñador UI debe asegurarse de que la interfaz de usuario exprese visualmente correctamente todo lo que pensó el diseñador de UX. Pongamos un ejemplo para entenderlo mejor:
Tiktok: El diseñador de UX se encargará de crear el proceso de registro y de onboarding de nuevos usuarios de TikTok, y definirá qué pantallas se necesitan, qué botones, o qué información viene primero. Y el diseñador de UI será el responsable de ejecutar visualmente lo que el diseñador de UX planteó mediante la creación de interfaces adecuadas para la correcta interación del usuario con el producto, en este caso con TikTok app.
Figma es una de las herramientas de diseño más efectivas de entre todas las disponibles en el mercado y se ha posicionado como un potente rival para Adobe Suite y para muchas otras herramientas de prototipado como Sketch. Por eso, si estás buscando convertirte en un diseñador de UX o UI, Figma es sin duda LA aplicación.
Figma, nuestro héroe moderno
Las sólidas funcionalidades, el excelente diseño y las herramientas de generación de código de Figma apoyan el proceso del trabajo en equipo tan necesario para un diseñador UX/UI. Esto se atribuye en gran parte a su funcionalidad de colaboración en la nube, online y en tiempo real. Gracias a esto Figma vió cómo su popularidad se disparó durante la pandemia, durante el confinamiento, la colaboración fue posible para los diseñadores de UX y UI, diseñadores gráficos, estudiantes y otros profesionales (¡Dios te bendiga!, Figma, ¡Dios te bendiga!). Te lo decimos sin más rodeos, simplifica tu vida y comienza a trabajar con Figma ¡YA! Podrías estar diseñando aplicaciones, blogs o sitios web impresionantes invirtiendo muy poco tiempo y sin ningún código. Con Figma hay sitio para todos, tanto si te estás iniciando en el mundo del diseño, si eres diseñador web, si eres desarrollador de aplicaciones, emprendedor o autónomo… ¡Figma es para todos!
Del boceto a la creación de prototipos
Por lo general, la forma más fácil de expresar una idea es empezar a dibujar. Así es como se obtiene el primer boceto de la idea. A partir de ahí, comienzas a construir un prototipo. Un prototipo es esencialmente un "proyecto piloto" y se expresa a través de una maqueta o demostración de cómo se verá un producto y, a menudo, se usa para probar el concepto de un producto y hacer posteriormente más iteraciones. Siempre hay que recordar que no se trata del producto final, sino que lo que se pretende con este primer boceto es permitir que los usuarios interactúen con él y así dar vida al boceto que cambiará dependiendo del feedback del usuario. Por lo tanto, el objetivo principal de un prototipo es proporcionar una simulación de la interacción de la interfaz de usuario. En este artículo podrás descubrir las mejores herramientas de creación de prototipos para diseñadores.
Diseño web responsive
El diseño de un prototipo deberá adaptarse en función del tamaño y las capacidades del dispositivo; esto no significa que haya que tener en consideración todos los dispositivos. Lo mejor es tomar decisiones basadas en los que se usan más. Afortunadamente, Figma nos permite ver cómo se ve un diseño en diferentes tamaños. En el menú puedes elegir entre 7 teléfonos populares (iPhone, Galaxy, iPad, etc.), 3 tabletas diferentes, una vista de escritorio o un reloj inteligente. Simplemente arrastra los bordes del documento de diseño para ajustar el marco y te dará una idea exacta de cómo aparecerá en un dispositivo específico. Por último, Figma tiene una función inteligente que le permite conectarse a tu teléfono para que puedas ver cómo se ve en el dispositivo físico mientras diseñas.
Al diseñar un prototipo en Figma, hay cinco cosas principales a considerar:
Pantalla
Contexto de usuario
Objetivo
Alrededores
Consistencia
Interacciones y animaciones para la creación de prototipos en Figma
Esto puede sonar un poco fuera de tu zona de confort, y puede que automáticamente te venga a la mente una película de Pixar o tus dibujos animados favoritos, pero confía en nosotros, la creación de interacciones y animaciones en prototipos; es más sencillo de lo que parece. Las animaciones y las interacciones van de la mano con las microinteracciones de un usuario. ¿Por qué? Porque guían al usuario para que comprenda cómo utilizar el producto de forma óptima. Por lo tanto, estas animaciones no son solo funciones divertidas (aunque realmente lo son). Son herramientas poderosas para crear un prototipo eficaz. Figma incluso permite a los usuarios tomar fotografías, bocetos o imágenes y convertirlas en prototipos interactivos.
¿Ya te has descargado Figma? ¿No? No esperes más y haz clic aquí.
Si realmente quieres aprender a usar Figma y quieres llevarlo al siguiente nivel porque ...
quieres convertirte en un diseñador profesional de UX / UI
quieres ser ese empleado al que a todo el mundo el mundo quiere porque hace que tu empresa luzca espectacular
quieres que te aparezcan increíbles ofertas de trabajo en tu Linkedin
... ¡Entonces, echa un vistazo a nuestro bootcamp de Diseño de UX / UI!
