the-bridge-logo.svg
Screenshot 2023-11-23 at 09.47.37.png
21/07/2022  - UX/UI Design

Figma UX UI, la herramienta que necesitas

Si llevas tiempo dándole vueltas a la manera de mejorar el diseño de UI/UX de la aplicación móvil o web, que tengas entre manos, debes saber que Figma va a convertirse en una de tus grandes aliadas. Si existe una herramienta de diseño gráfico intuitiva que te permite la creación de wireframes, prototipos, mockups, etc. Esa es Figma.Antes de meterte en Google y teclear “tutorial Figma”, vamos a explicarte de qué manera esta herramienta te aportará infinidad de mejoras en el diseño UX/UI ¿Qué es Figma?Haciendo un breve resumen, sería la manera más rápida de generar prototipos para mostrarlos a los diferentes stakeholders de un proyecto. ¿Qué conseguimos con Figma? Pues, para empezar, agilizar el proceso de diseño, ya que lo que se logra es coordinar un buen trabajo en equipo. Cuenta con un buen número de plantillas pensadas para diseñar arquitecturas de ecosistemas como AWS, Google Cloud o Microsoft AzureFigma UX UI facilita la vida porque es una forma rápida y sencilla de comenzar los diseños, generando prototipos que puedan verificar los requisitos solicitados por el cliente y con la que además, puedas obtener el código fuente. Al potenciar el trabajo en equipo y en tiempo real, la ligereza y la rapidez con la que se puede trabajar es mucho mayor. Además, mantiene un historial de versiones para que se puedan realizar consultas sobre pasos previos.Pero, de qué manera sobresale esta plataforma en el diseño de la interfaz de usuario (UI) y en el de la experiencia de usuario (UX). Esta será la parte en la que nos centraremos a partir de ahora.Kit de wireframing en FigmaPara facilitar el uso de la herramienta sin importar el nivel de conocimientos o experiencia en el sector, Figma cuenta con un kit de wireframing, tanto para wireframes de alta como de baja fidelidad. De esta manera se podrán elaborar diseños sencillos y agilizando los primeros pasos del proceso con una plantilla en blanco y negro. MockupsPodrás elaborar mockups estableciendo las tipografías, tamaños y colores del producto final y mostrarlo a los stakeholders fácilmente a través de un link con la simple condición de tener acceso a Internet y utilizar un navegador.Tener la posibilidad de realizar una demostración visual rápida de nuestros diseños a compañeros como a clientes es, sin duda, una buena forma de aclarar conceptos y facilitarnos el trabajo a la hora testear el diseño. Figma también nos ofrece la opción de generar prototipos animados. Podremos crear experiencias reales de usuario, efectuar cambios al momento y hacer uso de una funcionalidad llamada Smart Animate que anima objetos de forma automática.Como en la mayoría de herramientas de este estilo, se puede acceder a varios tipos de cuenta: la gratuita con un buen número de prestaciones y otros planes de pago con características más avanzadas. Funcionalidades básicas de FigmaCreación de marcos predefinidosUna funcionalidad de gran utilidad para un diseñador UI/UX, poniendo a su disposición tamaños de pantalla predefinidos que le ahorrarán tiempo de trabajo.ComponentesLos componentes en Figma pueden reutilizarse durante todo el proyecto, lo que consigue un diseño consistente optimizando el tiempo del usuario.Si es necesario modificar alguna propiedad del diseño del componente, todas las “copias” de este se modificarían también, sin tener que hacerlo una por una. EstilosCon los estilos definiremos una serie de propiedades como colores, fuentes o efectos, que podremos utilizar en cualquier parte del proyecto. Al igual que sucede con los componentes, si necesitamos cambiar la propiedad de un estilo, los elementos que lo usen lo harán de inmediato también.Selección inteligenteLa selección inteligente permite modificar simultáneamente características del conjunto de elementos seleccionados, ya sea su tamaño, el espaciado entre ellos, el orden de aparición o la duplicación/eliminación del conjunto seleccionado.Diseño y código en un clickSe trata de una herramienta que unifica el consenso entre diseñadores y desarrolladores de código. De un diseño elaborado en pocos minutos, podemos extraer tanto el código CSS, Android o iOS
Sigue leyendo. Artículos especializados en diferentes áreasEcha un vistazo al resto de artículos que tenemos en nuestro blog. Trabajamos duro para crear contenido de calidad y enriquecer la comunidad.
    ¿Te has quedado con ganas de saber más?No lo dudes y contacta con nosotros, te resolveremos todas las dudas y te asesoraremos para que encuentres el bootcamp, la modalidad y el plan de financiación que mejor se adapta a ti.
    SOLICITA INFORMACIÓN