A finales de 2022, Figma lanzó una actualización importante que cambió la forma de utilizar los componentes en Figma.
Este nuevo modo de trabajar los componentes tiene 2 ventajas principales:
- Reduce bastante el número de variantes que tienes que generar para tu sistema de diseño.
- Mejora la usabilidad para los diseñadores que van a usar tus componentes, o para ti mismo.
4 nuevas propiedades
Hay 4 tipos de propiedades que puedes aplicar a tus componentes de Figma:
- Variant se utiliza para crear variantes que ya conocíamos de las versiones anteriores de Figma. Sirve para guardar cambios de estilos como colores, bordes, fondos o tamaños entre las diferentes variantes. Por ejemplo, para crear estados como activo/inactivo.
- Boolean se usa para aplicar la condición de que se vea o no alguna capa (layer) de tu componente. Por ejemplo, para que un icono se pueda esconder o mostrar.
- Instance swap sirve para indicar que el contenido de ese elemento se puede intercambiar. Puedes definir el valor por defecto e intercambiarlo por elementos de tus librerías.
- Text se utiliza para indicar qué capas de texto se deben editar. Por ejemplo, el texto editable de un botón o de un input.
Cómo aplicar las propiedades paso a paso
Hay 2 formas de usar estas propiedades en los componentes. Puedes crearlas desde el componente y asignarlas a los elementos que éste contiene o ir directamente al elemento y crear la propiedad disponible según el tipo que sea.
Los elementos del componente son cada unidad a la que se le puede asignar una propiedad, es decir: texto, icono, etc.
En este ejemplo se muestra el segundo caso, el cual te ahorra pasos en el proceso. Como vemos, con 2 variantes y las propiedades definidas en el menú de la derecha, puedes tener hasta 6 aplicaciones. En este caso, son 6 porque es lo que el design system de la aplicación necesita, pero dependerá de las limitaciones que quieras que tenga el componente.
1. Crea el componente base
Empieza creando el componente base con los elementos que vas a usar en sus variaciones, aunque por defecto alguno vaya escondido. Para empezar a trabajar con las propiedades piensa en qué elementos querrás que varíen y los que no.
2. Aplica las propiedades a los elementos del componente
Cuando selecciones el elemento al que quieras aplicar una propiedad, en el menú de diseño (Design) te aparecerá el símbolo marcado a continuación en las diferentes secciones donde puedas aplicar propiedades. Ten en cuenta que a un elemento se le pueden aplicar varias propiedades. Por ejemplo, un texto puede tener diferente mensaje y estar escondido o no.
En este caso, al seleccionar un icono, aparecerá el CTA para añadir una propiedad relacionada con esa sección. Por ejemplo, en la sección donde seleccionas qué icono va en esa capa, podrás añadir la propiedad de Instance swap, que como hemos comentado, permite cambiar el icono por otro que haya en la librería seleccionada. En la sección Layer, donde configuras la transparencia y visibilidad de la capa, podrás crear una propiedad Boolean. Esto mismo, pasará con cada elemento del componente en cuestión.
3. Comprueba las propiedades creadas
Finalmente, selecciona el componente y haz una copia para ver cómo verán los diseñadores ese componente cuando lo usen. Comprueba utilizando el menú de la derecha (el de propiedades del componente) que todas las variaciones que puedan hacer generen los cambios que esperas.
Consejos para crear las propiedades
- Al principio, es mejor si dejas para el final las variantes. Es decir, crea primero todas las propiedades y, al final, crea las variantes con estas propiedades.
- Muy importante: cuando uses iconos, asegúrate de que tienen la misma estructura de capas y el mismo nombre. Si no son iguales, Figma a veces no arrastra los estilos del componente principal. En el siguiente ejemplo puedes ver que, usando la propiedad Swipe instance, al cambiar el icono de la flecha por el del más, Figma no arrastra el blanco del componente principal, sino que coge el color del icono original.
Con los mismos pasos, pero cambiando el nombre de las capas de los iconos, al seleccionar el icono de más, directamente aparece con las características del componente principal.
Aunque hay que abrir la mente a una nueva forma de pensar para definir los componentes y usar las nuevas propiedades, una vez entendido es muy fácil utilizarlas. Con las propiedades, los diseñadores sabrán directamente qué elementos del componente pueden editar.
Además, ayuda a estructurar los elementos y sus variantes. Completa tu design system con una buena documentación para facilitar su uso cuando éste crezca.
