.png)
Como muchos de ustedes recordarán, en los primeros días del diseño de la interfaz de usuario, no teníamos las excelentes herramientas que tenemos ahora. Trabajábamos con archivos de Photoshop con miles de capas o enormes archivos de Illustrator hasta que apareció Sketch, que solucionó muchos de nuestros problemas y se convirtió en una herramienta esencial en UXDivers. InVision desempeñó un papel importante en aquellos días a la hora de presentar, crear prototipos e interactuar con el cliente. Luego llegó Figma, que parecía tener potencial, pero aún era muy joven en ese momento. Sin embargo, después de un breve período de uso y de ver el apoyo de la comunidad, rápidamente sustituimos todo el proceso por una sola herramienta e hicimos el cambio sin dudarlo.
Con nuestra experiencia trabajando con Figma desde sus inicios, creemos que es muy útil conocer algunas de las mejores prácticas. Estas prácticas ayudan a agilizar los procesos de diseño y desarrollo, tanto en nuestro Kit de interfaz de usuario de prueba producto y en los numerosos servicios que ofrecemos.
Aunque se trata de una incorporación relativamente nueva, tiene un enorme potencial en muchos aspectos, como los colores, la tipografía, las propiedades, la creación de prototipos y mucho más. Pero lo básico sería tener bibliotecas al menos para las cosas que más utilizamos, por ejemplo:
De esta manera, el proceso de diseño se acelera significativamente y evitamos inconsistencias en la interfaz de usuario.
El uso de componentes y variantes en nuestros diseños es vital para mantener la coherencia y evitar tener que repetir los cambios en el mismo elemento en varios lugares.
Esta es otra herramienta poderosa que puede resultar un poco complicada al principio, pero es sin duda una de nuestras mejores amigas a la hora de diseñar elementos, ya sea para un componente, organizar elementos en una pantalla, hacer que nuestros diseños sean responsivos y mucho más.
El diseño automático va de la mano del uso de restricciones, que son fundamentales para comprender cómo se comportan los elementos al modificar su contenedor. El uso principal sería cuando necesitamos asegurarnos de que nuestro diseño se comporte bien en diferentes tamaños de pantalla.
En relación con esto, también podríamos vincularlo con el uso de variables y tamaños mínimo/máximo.
Por ejemplo, podemos tener dos tamaños de botones: móvil y escritorio. Si nuestro diseño cambia de un modo a otro, nuestro botón también lo hará.
Ponte a prueba a usar solo marcos, no grupos ni rectángulos. Los marcos tienen muchas funcionalidades y, por lo general, simplifican y mejoran sus diseños. Evita añadir rectángulos como fondos, lo mismo ocurre con las imágenes. Los marcos permiten el radio de las esquinas y, por si fuera poco, permiten el diseño automático, entre muchas otras ventajas.
Ten en cuenta que normalmente hay un equipo trabajando y no estás solo, por lo que todo debe ser accesible y fácil de entender, ya sea para otro diseñador o para el desarrollador que más adelante implementará tu diseño.
Si bien esta función no es exclusiva de Figma, hay algunas herramientas que nos ayudan con esto:
Consejo: Recientemente, se agregó la opción de crear un separador al nombrar una página con tres «---». Di adiós a esas páginas con forma de «________» que todos hemos creado para mantener las cosas organizadas.
En relación con la organización, una buena práctica es usar sucursales. A pesar de ser común en el desarrollo, no es tan común en el diseño, pero es muy útil. Podemos crear una sucursal específica para compartirla con un cliente mientras trabajamos en otra cosa sin superponerla. Otro uso común es cuando estamos dispuestos a trabajar en una nueva función: crear una sucursal y realizar todas las pruebas o modificaciones necesarias sin alterar el archivo maestro.
Precaución: Al menos por ahora, los comentarios realizados en cada rama no se fusionan con los del maestro; solo permanecen visibles en esa rama.
Las sucursales están disponibles en los planes Organization y Enterprise.
Por último, pero no menos importante, está el uso de un sistema de diseño. Gran parte de lo que vimos anteriormente podría formar parte de él y usarse como biblioteca en tantos archivos como queramos.
Tener un sistema de diseño es algo que está en constante evolución. ¿Para Kit de prueba, es crucial tener una biblioteca con todas las piezas necesarias para crear cualquier interfaz de usuario que queramos o para añadir nuevos elementos manteniendo la esencia de nuestro kit.
Podríamos hacer un blog completo sobre cada una de estas opciones, pero por ahora, esta es una forma de familiarizarse con los conceptos y entender cómo implementarlos. Es importante conocer algunas de las capacidades de Figma, que mejorarán enormemente tu productividad y te ahorrarán mucho tiempo.
¿Estás familiarizado o utilizas alguna de estas prácticas en Figma? Compártelos con personas que puedan resultarles útiles.
