Figma es una herramienta de prototipos disponible en la nube, que les brinda a los product owners una solución completa para la colaboración y el diseño de interacciones y experiencias de usuario. Ofrece una interfaz intuitiva y una amplia gama de funciones para la creación de interfaces, la gestión de equipos y el seguimiento del proyecto.
Esta plataforma también ofrece herramientas de diseño y colaboración, como versiones en línea, comentarios y retroalimentación, lo que lo convierte en una gran opción para todo el team, desde desarrolladores, product owners, diseñadores hasta creativos. Por esta razón, decidimos armar una pequeña lista con los principales conceptos de esta herramienta para que tu equipo y tú puedan usarla de la mejor manera. 👩💻
Glosario básico de Figma:
Wireframe:
Es una representación simplificada de un sitio web o aplicación. Se pueden dibujar de forma manual o a través de una plataforma, como FIGMA. Pero, a grandes rasgos, consiste en líneas y textos sin colores e imágenes. En los wireframes se prioriza el orden y la estructura de los elementos. Al ser un diseño con pocos detalles, se puede entregar de una forma más expedita una versión al cliente para que, de esta manera, pueda dar su feedback.
Hi-Fi:
Un prototipo de alta fidelidad es un diseño de pantalla, que refleja la versión cercana al producto final. Estas pantallas contendrán la estructura y el orden del wireframe, pero se le agregarán colores, textos e imágenes.
Mock-up:
Son fotomontajes que permiten a los diseñadores mostrarle al cliente cómo quedarían los diseños adaptados a diferentes dispositivos. Luego de que se tienen las aprobaciones y los comentarios del cliente, los diseñadores se enfocan en la estética y le muestran una versión más similar a lo que vería el usuario en la aplicación. 📱
Design system:
Es una colección de componentes, estilos y guías de diseño que se utilizan para mantener la consistencia en la marca y la experiencia de usuario en un producto o aplicación. Los Design Systems permiten a los equipos de diseño crear y compartir componentes reutilizables y estilos en todo el proyecto, lo que aumenta la eficiencia y garantiza la consistencia en la experiencia de usuario. Los dueños de productos pueden utilizar Design Systems en Figma para asegurarse de que la marca y la experiencia de usuario sean coherentes en todas las aplicaciones y productos.
Kit UI:
Un kit UI es un conjunto pre-diseñado de elementos gráficos y estilos que se utilizan como base para la creación de interfaces de usuario en aplicaciones y sitios web. Los kits UI incluyen elementos comunes como botones, formularios, menús, iconos, tipografía, etc. y están diseñados para ser reutilizables y personalizables.
En Figma, los kits UI pueden ser importados y utilizados como una base para el diseño de la interfaz de usuario, lo que ahorra tiempo y garantiza la consistencia en la experiencia de usuario.
Principales diferencias entre design system y kit UI 🤔
Si se quiere crear un prototipo interno o simplemente visualmente atractivo, la mejor opción es un kit UI. En cambio, si lo que se busca es crear algo que funcione a gran escala, y sirva tanto para diseñadores como para desarrolladores, lo ideal es usar Design System.
-El Design System (DS) ayuda a los desarrolladores a reducir errores, ya que incorpora librerías que brindan códigos para implementar los componentes. Los Kits UI suelen tener únicamente los componentes usuales y sin tanta documentación.
– El Design System es escalable, permite hacer los cambios más rápidos y, además, se puede adaptar a las distintas pantallas, como por ejemplo mobile o desktop. El UI Kit, mientras tanto, es un elemento fijo y todos los cambios que requieran se deben hacer manual.
Poder acceder al código es una gran ventaja para los desarrolladores, por eso suelen preferir Design system, ya que el Kit UI se utiliza simplemente para tener una referencia visual de cómo se tiene que crear ese componente
Muchos elementos del Kit UI se pueden conseguir en la FIGMA Community, un espacio en el que los creadores pueden publicar archivos de diseño y también plugins para que cualquier otro usuario pueda tomarlos y así usarlos como base para sus proyectos.
Desde hace un tiempo, GM2 ya forma parte de la FIGMA Community, en donde compartimos diseños, plantillas y todos nuestros trabajamos. 🚀
¡No dejes de seguirnos! -> www.figma.com/@gm2design
