Construye tus componentes de forma útil

2. Propiedades de los componentes

Boolean. Capas ocultas en nuestros componentes.

Lo normal es que una UI tenga varios elementos (botones, inputs, cards, etc). Cada uno de ellos podría ser un componente y, dentro de ellos, tendrán elementos visibles u ocultos para poder cubrir todas las opciones disponibles.

Vamos a explicar esto con un ejemplo muy simple.

Imaginemos que tenemos un input, con varios estados: Default y Filled. Cuando nuestro input se encuentre en este segundo, queremos mostrar un icono para acompañar al contenido escrito en el input. Para hacer esto, en lugar de crear dos componentes distintos, solo crearemos uno y a nuestro icono le aplicamos una propiedad boolean para que aparezca cuando se necesite.

De este modo tendremos un componente que se utilizará para dos estados. Este será nuestro componente base.

En el componente máster podremos especificar si queremos que el icono por defecto o si por el contrario por defecto el input se verá sin icono.

Importante, tener componentes con muchísimas capas ocultas puede reducir el rendimiento de nuestros archivos en Figma, porque estas capas aunque estén ocultas también consumen memoria y, si abusamos de esta propiedad, se puede hacer bastante tedioso mantener nuestros componentes. En definitiva, capas ocultas sí, pero con cabeza.

Variants

Al mismo tiempo los elementos de una UI tienen diferentes estados (default, active, hover, disabled, error, etc.) y este momento es cuando entran en juego las variantes. Esta propiedad nos permite tener diferentes versiones de nuestros componentes, para poder tener estos estados distintos.

Volviendo a nuestro ejemplo:

Podríamos tener un input con estado erróneo, que imaginemos marca el input en color rojo, y aparece un mensaje de apoyo indicando el tipo de error. Esto sería una variante de nuestro componente input.

Cambio de instancia

Este es el momento en el que se empieza a poner interesante y coger cierta complejidad. En un componente podemos incluir instancias de otros componentes, de esta forma podremos tener un componente formado por otros componentes y tener componentes anidados. El problema es que gestionar estas instancias a veces se hace muy engorroso si no usamos la propiedad “cambio de instancia”.

Lo que permite esta propiedad es poder manejar las instancias de nuestros componentes sin tener que navegar dentro de ellos, es decir si tenemos un componente formado por instancias de otros, nos permite cambiarlos de forma fácil.

Un ejemplo muy sencillo:

Tenemos un input con un texto y un icono (que es una instancia de una librería), ambos forman un componente. Para poder cambiar el icono del input sin tener que tener una variante por cada icono, es tan sencillo como aplicar la propiedad “Cambio de instancia” al icono, que como hemos mencionado es una instancia, esto es importante porque de no ser así no podremos aplicar esta propiedad.

Una vez aplicado nos aparecerá en todas las instancias del componente input una propiedad nueva para cambiar por el icono que queramos. Esto no solo es aplicable a este ejemplo, hay mil aplicaciones.

3. Librerías de componentes

Cuando se trabaja en productos o proyectos muy pequeños o aislados, normalmente los componentes se suelen alojar en una página separada, pero esto supone un problema, ya que si tenemos varios archivos de un mismo proyecto no podremos utilizar los componentes en todos ellos. Por ello, recomendamos que independientemente del volumen del proyecto siempre tengamos nuestro archivo de librería a mano. De esta forma si el proyecto crece, tendremos una parte del trabajo avanzado.

Esto nos asegurará una integridad del diseño y facilitará el mantenimiento de los componentes. Lo único a tener en cuenta es que si actualizamos la librería, deberemos actualizar los archivos que esté usando la misma.

4. Overrides

Normalmente nuestros componentes tienen contenido genérico, como por ejemplo textos demo, etiquetas de los botones o placeholder en los inputs. No podremos cambiar la estructura de nuestros componentes en una instancia pero sí que podremos escribir textos, rellenos, sombreados, bordes, etc. Esto nos permite ajustarlos perfectamente al contexto y necesidades de la UI que estemos diseñando. Esto es lo que se llama un override ¿Cómo mantener los overrides?

• Entre variantes. Figma, por defecto, intenta mantener los cambios que hemos hecho en las instancias entre las variantes de nuestro componente, pero aquí es cuando se vuelve un poco “tricky” y hay que saber ciertos detalles a la hora de construir nuestros componentes, y que funcione todo correctamente.  Para que, al cambiar de una variante a otra, nuestras capas entre variantes deben corresponderse completamente, tanto en nombre como en jerarquía.
• Al cambiar de instancia. La importancia aquí está en la distribución de las variantes dentro del componente y escoger correctamente cuál va a ser el valor por defecto, de tal forma que al cambiar entre ellos se correspondan los valores por defecto de ambos y Figma pueda mantener los overrides de forma automática (esto también hay que combinarlo con lo que mencionamos anteriormente, capas con el mismo nombre y estructura).

Conclusión

Figma es una herramienta que en pocos años ha conseguido que crear y mantener librerías de componentes sea una tarea un poco más sencilla y menos tediosa, ofreciendo a los diseñadores cantidad de posibilidades. Mantener un orden, estructura y nombrado correcto, tanto de capas como de componentes, será básico para que tu librería de componentes y el rendimiento de tu flujo de trabajo aumente exponencialmente.