Durante las últimas dos semanas, he estado creando nuestro kit de interfaz de usuario en Gusto, donde trabajo, y este es un documento de Figma que contiene todos nuestros patrones y componentes de diseño para que los diseñadores de nuestro equipo puedan participar, comprar un componente que necesitan y luego vuelven a trabajar en el problema que están tratando de resolver.
Hay un par de cosas que he aprendido desde que empecé. En primer lugar, crear un kit de interfaz de usuario es un trabajo inmensamente delicado y lleva mucho tiempo (aunque resulta muy satisfactorio todo el tiempo). Pero, lo más importante, incrustar componentes de Figma dentro de otros componentes es una especie de magia.
Este es el por qué.
En primer lugar, es importante tener en cuenta que he tratado de dividir nuestros componentes en los fragmentos más pequeños. Entonces, por ejemplo, nuestros componentes Breadcrumbs, Tabs y Progress Bar están separados entre sí y los he volcado todos en una página de Símbolos.
Aquí hay un ejemplo de cómo comencé a construir nuestros elementos de formulario:
Por lo que puedo decir, así es como se diseñan muchos kits de interfaz de usuario: hay una página de bienvenida que presenta qué es este documento y cómo usarlo; hay una página de símbolos que la gente de los sistemas de diseño mantendrá de todo, desde botones hasta formularios dentro como símbolos o componentes; y luego suele haber otra página que tiene ejemplos de estos símbolos que representan la aplicación final.
El sistema de diseño de Shopify, Polaris, también hace esto con su archivo Sketch, pero también lo hacen muchos ejemplos que he visto de otros grandes equipos de diseño:
Pero de todos modos, volviendo a mi diseño en Figma, observe a continuación que una barra inclinada (/) se utiliza en el nombre de ProgressBar/Two y ProgressBar/Three componentes.
Bueno, esa es la convención de nomenclatura de Figma para identificar Instancias. Lo que esto significa es que cuando un diseñador arrastra en el ProgressBar componente del kit de interfaz de usuario, pueden cambiar entre diferentes opciones, como esta:
¡Eso es ingenioso! Pero una vez que dividí nuestra interfaz de usuario en estos pequeños componentes, comencé a preguntarme cómo podría combinar estas piezas para facilitar aún más las cosas a nuestro equipo de diseño. Pronto me di cuenta de que en nuestra aplicación tenemos elementos de navegación como migas de pan o barras de progreso, pero siempre tienen un título asociado. Una vez que descubrí eso, comencé una serie de nuevos componentes llamados Header/Default, Header/Breadcrumbs, Header/ProgressBar, etc., que tienen todos estos componentes incrustados dentro de ellos.
Entonces, ahora, cuando un diseñador arrastra el Header componente en sus maquetas, pueden hacer lo siguiente:
Estamos cambiando entre los diferentes Header instancias allí y eso no parece mucho, todavía. ¡Pero! Ya que estamos anidando componentes dentro de nuestro Header componente, los diseñadores pueden saltar a los subcomponentes, como ProgressBar y actualizar eso, también:
¿Qué tan limpio es eso? Y nuevamente, esto no parece particularmente útil todavía, pero anidar componentes dentro de componentes más grandes significa que puede comenzar a usarlos de manera inteligente.
Donde esto se pone interesante es aquí: en Gusto, tenemos dos interfaces de usuario diferentes para nuestros tipos de clientes. Tenemos administradores que ejecutan la nómina y luego sus empleados que pueden acceder a su cuenta para ver cuánto se les ha pagado. Hay diferentes opciones de navegación para ambos, así que creé dos componentes para ellos: Frame/Admin y Frame/Employee.
Estos dos componentes tienen la barra lateral y los elementos de navegación, pero luego se colocan en un componente separado llamado Layout/Default donde hemos colocado nuestro Header componente. Pero dado que estos componentes son instancias y están anidados juntos, podemos comenzar a hacer clic y hacer clic en bits de la interfaz de usuario para obtener la interfaz precisa que queremos.
Ahora, siempre que los diseñadores necesiten cambiar entre diferentes interfaces de usuario, pueden usar estos componentes e instancias anidados para alternar entre ellos muy rápido. Recién comencé a experimentar con esto, pero la idea es que al usar estos componentes anidados, le brinde a la gente una forma de alternar entre las diferentes variantes dentro de ellos y, al mismo tiempo, proporcione una buena API para diseños más grandes.
Si está utilizando instancias en Figma, Sketch u otra herramienta de diseño, ¡hágamelo saber! Estoy constantemente buscando mejorar las cosas aquí, pero creo que este es sin duda un buen comienzo.