Nuestro Design Team comienza el nuevo curso escolar con las pilas cargadas. Pero no penséis que han estado todo el verano de brazos cruzados. Han aprovechado las vacaciones para probar y analizar todas las novedades presentadas en Config 2023. Y a ti ¿te ha dado tiempo a trastear y descubrirlas? ¿No? Pues keep calm! Hoy Malena Guevgeozian, UX/UI Designer en Slash, te hace un resumen de top 5 de novedades Config 2023 presentadas.
Tipografías
Algo muy simple pero que todos estábamos esperando. Por fin podemos visualizar cómo se ve la tipografía antes de seleccionarla. Esto, que parece algo muy sencillo, es de bastante ayuda para los diseñadores. ¿Por qué? Pues porque nos ahorra mucho tiempo al poder previsualizar rápidamente las tipografías para seleccionar la más adecuada sin necesidad de ir probando. Además, podemos filtrar por categorías, por ejemplo: Google Fonts. Algo muy útil sobre todo en aquellos proyectos donde hay limitaciones en cuanto a los recursos que se pueden utilizar.
Autolayout versión 5
El autolayout es uno de los mejores amigos del diseñador. Por suerte esta actualización está disponible para todos los tipos de usuarios en Figma ¡Así que a probarla! Varias cosas cambian dentro del autolayout. Por un lado, podremos setear mínimo y máximo tanto de ancho como de altura. Esto nos ayudará mucho, por ejemplo, con aquellas cajas de texto que al agrandar una card quedaban muy largas.
También se suma una nueva opción a la posibilidad de tener un layout horizontal o vertical: el wrap. Esta opción es ideal para adaptar nuestros diseños a diferentes tamaños de pantalla. Si tenemos un frame de autolayout con varias cards dentro, combinando la opción de wrap con la configuración de un ancho mínimo, al achicar el frame las cards se distribuirán automáticamente en más de una línea, generando así rápidamente un diseño responsive.
Se introducen también otras novedades interesantes como el espaciado negativo y el posicionamiento absoluto. Esto nos permite jugar con las superposiciones y es sin dudas un plus a la hora de incentivar la creatividad y romper un poco las estructuras de nuestras grillas.
Variables
La nueva característica de variables es todo lo que necesitábamos para agilizar la creación de diseños que se adapten. Las variables funcionan de manera similar a los estilos, pero tienen la capacidad de cambiar según el contexto en el que se utilice. Esta nueva funcionalidad nos permitirá por ejemplo diseñar cards que se adaptan a dark y light mode; previsualizar los textos en diferentes idiomas y cambiar un frame a diferentes tamaños de dispositivos, ajustando automáticamente los elementos que tiene dentro. Nos encantan las funcionalidades que nos permiten aprovechar mejor nuestro tiempo, y el uso de variables seguro nos ahorrará horas a la hora de diseñar y trabajar con design systems!
Modo Dev
El nuevo Dev Mode es perfecto para el design handoff. Por fin diseñadores y desarrolladores estaremos en la misma página, literalmente. Este modo les da a los desarrolladores todo lo que necesitan para transformar nuestros diseños en código sin perder ningún detalle importante en el proceso. Algunas de las funcionalidades que se incluyen en este modo son, entre otras:
- Poder ver y copiar propiedades y valores de los componentes
- Visualizar cuáles son los cambios desde la última apertura del archivo
- Marcar que pantallas están listas para desarrollar
- Poder integrarse con otras plataformas como Github y Jira
El Dev Mode es un gran paso para incentivar el trabajo colaborativo multidisciplinar, mejorando la comunicación entre diseñadores y desarrolladores y trabajando de forma más eficiente. ¡Ya sabéis que en Slash somos devotos del trabajo en equipo!
Prototipado avanzado con variables
Esta es, sin dudas, nuestra funcionalidad preferida de todas las novedades del Config 2023. ¿Te ha pasado que para crear un prototipo de una función muy simple tuviste que duplicar 3, 4 o más pantallas? Incluso así algunas veces era muy difícil lograr un prototipo que funcionara tal cual sería en la aplicación. Con el uso de variables y condicionales, en tan solo una pantalla y de una forma muy lógica podemos resolver este problema ¡Y hasta sentirnos un poco como si fuésemos desarrolladores escribiendo código! Ahora podremos evitar tener un archivo con un millón de líneas yendo de una pantalla a otra. Podremos resolverlo tan solo con una línea que establezca una condición.
¿Cómo funciona? Supongamos que estamos desarrollando un ecommerce. En la página de producto tenemos un campo de texto que nos dice la cantidad de stock disponible y un botón para agregar el producto al carrito. Con las nuevas funcionalidades de variables y condiciones, podemos establecer una condición en la que al hacer click sobre el botón el número de stock disminuye; y en caso de que el stock sea igual o menor a 0, el botón se vea deshabilitado. Todo esto teniendo una sola pantalla en nuestro archivo de Figma. Esto nos ahorra un montón de tiempo. Además, nos permite trabajar de forma más ordenada y eficiente, siguiendo la misma lógica que utilizarán los programadores al desarrollarlo.
Es súper importante mantenerse al día con las actualizaciones que Figma nos propone para mejorar nuestro trabajo ¡y en muchos casos hacerlo más divertido! Así que a ponerse manos a la obra para aprender y sacar ventaja de todas estas nuevas funcionalidades en nuestros proyectos.
