Arquitectura de componentes en Figma

El año pasado publiqué el artículo "Construyendo componentes flexibles en Figma". Desde que escribió ese artículo, Figma ha agregado mejoras que amplían las muchas formas en que puede estructurar componentes al permitirle anidar componentes dentro de otros e intercambiar fácilmente instancias de componentes, por lo que pensé que era un buen momento para una revisión actualizada de los componentes en Figma

Una de las mejores cosas del sistema de componentes de Figma es que puede acceder a la pila de capas de cada instancia de un componente. Esto puede tener un gran impacto en todo el sistema de diseño porque puede ayudar a mantener los componentes contenidos y reducir la cantidad de componentes necesarios.

Otra actualización reciente introdujo el intercambio de instancias de arrastrar y soltar. Esto puede tener lugar localmente dentro de su archivo, o directamente desde la biblioteca de su equipo compartido (un documento de Figma separado). Ser capaz de hacer esto puede tener un gran impacto en la estructura de sus componentes.

Aquí hay algunas ideas sobre cómo puede maximizar la modularidad y, en algunos casos, reducir la cantidad de componentes necesarios.

Componentes anidados

Figma le permite anidar componentes dentro de los componentes. Esto significa que puede estructurarlos en todo tipo de formas modulares. Aquí hay algunas formas diferentes de usar componentes anidados:

Bloques de construcción

A menudo crearé un componente de "componente básico" y lo usaré como base para otro componente. Por ejemplo, en estos botones, he creado un rectángulo redondeado básico para la forma del botón y lo he convertido en un componente. Este componente no se publica en la biblioteca de mi equipo, las instancias solo se usan en otros componentes que construyo, como los componentes de botón reales (que se publican).

La ventaja de este método es que todos mis botones y estados de botones hacen uso de este componente base (con anulaciones de estilo aplicadas) que mantiene un enlace de regreso a ese componente base de "bloque de construcción". Si necesito hacer un cambio globalizado, como cambiar la forma del botón, simplemente puedo regresar y editar el componente original y el cambio afecta a todos los componentes que se basan en él.

Cada botón anida el componente del bloque de creación dentro de él y aplica anulaciones de estilo al componente base para crear los diferentes estados. Copyright © 2018, Texto abierto. Todos los derechos reservados.

Intercambio de instancias

Otra ventaja de anidar componentes es que puede intercambiarlos / reemplazarlos por otros componentes. Por ejemplo, en el encabezado del mosaico a continuación, solo tengo que construir un componente para el encabezado del mosaico y simplemente cambiar el componente anidado por uno diferente. Si está familiarizado con Sketch, probablemente ya esté familiarizado con este concepto, sin embargo, la interacción en Figma para intercambiar componentes es diferente (arrastrar y soltar).

Atajos:
Para cambiar un componente: mantenga presionada la opción al arrastrar.
Arriba intercambie un componente anidado (dentro de otro componente, marco o grupo): mantenga presionada la opción ⌘ + al arrastrar.

Las instancias de diferentes íconos se pueden intercambiar por otras de su documento o biblioteca de equipo compartida. Copyright © 2018, Texto abierto. Todos los derechos reservados.

Enmascaramiento

Actualización: La utilidad de este método se ha depreciado gracias a la introducción de estilos globales en Figma 3.0.

Para hacer esto, haga algunos componentes de muestra (una forma con relleno) y coloque una instancia del componente en una capa sobre la ilustración que desea enmascarar. Con ambas capas seleccionadas, aplique una máscara, y todo lo que tiene que hacer para cambiar el color es usar el método descrito anteriormente para intercambiar instancias del componente de relleno, con otra muestra.

Mostrar / ocultar componentes

Debido a que puede acceder a la pila de capas de cada instancia, hay momentos en los que tiene sentido alojar los diversos estados dentro de un solo componente. El ejemplo más simple de esto es una casilla de verificación o un botón de opción. En lugar de tener dos componentes (marcado y sin marcar), simplemente puede incluir el estado "marcado" en su componente. Mostrar y ocultar la capa marcada cambiará el estado.

Acceder a la pila de capas de cada instancia le permite mostrar / ocultar capas

Atajos: seleccione la capa marcada y presione la tecla Eliminar para ocultar la capa. Alternativamente, ⌘ + Shift + H, también alternará la visibilidad de las capas.

Recortar componentes

Piense en los componentes como marcos encapsulados: las mismas cosas que puede hacer con los marcos también se aplican a los componentes de construcción, incluida la posibilidad de recortarlos.

Cree un componente y configure las restricciones dentro de él; mientras mantiene presionado ⌘, arrastre el marco de su componente para recortar el contenido o ajuste las dimensiones en el panel de propiedades. El contenido de su componente puede cambiar si no ha configurado las restricciones, así que asegúrese de hacerlo primero. Esto es ideal para crear una "cuadrícula de repetición" de filas / columnas, o configurar datos tabulares. Puede crear más filas de las que necesita y utilizar este método para mostrar solo la cantidad de elementos que desea. Combine esta técnica con restricciones, e incluso puede configurar componentes que oculten o revelen contenido a medida que su componente principal se expande y contrae. Asegúrese de que "Clip Content" esté marcado en su panel de propiedades para ver el resultado recortado.

Los grupos de instancias pueden ensamblarse como componentes y luego recortarse utilizando la opción

Configuración de los componentes de la cuadrícula recortada:

  1. Configura tu componente repetible inicial
     Las instancias de este componente se repetirán para cada fila o columna. Esto podría incluir componentes anidados, cuadros de texto, marcadores de posición de imagen (formas con relleno), etc.
  2. Configurar las restricciones
    Configure las restricciones para el elemento repetible, piense cómo quiere que reaccione en relación con el componente principal (que será su cuadrícula).
  3. Ajusta el tamaño del marco
    Mantenga presionado ⌘ mientras ajusta el tamaño del marco del componente para agrandar las dimensiones del componente de modo que pueda incorporar el relleno de su componente a su tamaño general (si corresponde a su diseño).
  4. Instancias duplicadas
    Duplique su elemento repetible, puede usar los comandos Empaque horizontalmente o Empaque verticalmente en Figma (en el menú Organizar) para asegurarse de que todos los componentes estén perfectamente unidos entre sí. Es por eso que recomiendo construir el relleno en su componente.
  5. Haga su componente de "cuadrícula"
    Convierta su grupo de instancias repetidas en un nuevo componente.
  6. Configurar las restricciones
    Configure las restricciones dentro de su nuevo componente de cuadrícula; piense cómo quiere que responda cada uno de los elementos de la cuadrícula cuando se recorta el contenedor de la cuadrícula y la dirección en que se expandirá.
  7. Contenido del clip
    Marque "contenido del clip" en el panel de propiedades. Esto ocultará el contenido que exceda el límite del marco.
  8. Ajusta el tamaño del marco
    Mantenga presionado ⌘ mientras ajusta el tamaño del marco del componente para recortar el componente a la cantidad deseada.

Una vez que comience a configurar estas cuadrículas, las posibilidades son infinitas. ¡Anular texto, símbolos y agregar imágenes es muy sencillo!

Esta técnica, combinada con “Colocar imágenes” (Shift + ⌘ + K), le permite llenar una cuadrícula con contenido de imagen muy rápidamente.

Componentes de texto

Desde el lanzamiento de Figma 3.0, una forma más eficiente de manejar los estilos de texto es usar las nuevas características de Estilos para administrar de manera centralizada las propiedades de tipo. Dicho esto, los componentes de texto aún pueden ser recipientes útiles para combinar múltiples propiedades / estilos como un solo objeto.

Hasta que haya una forma alternativa de manejar los estilos de texto (), construirlos como componentes es la siguiente mejor opción. Esto funciona muy bien porque, como cualquier otro componente, puede agregarlos a la biblioteca de su equipo y sincronizarlos en sus diseños. También puede anular fácilmente propiedades como color, alineación, estilo y peso. Aquí hay algunos pasos para crear sus componentes de texto:

Los componentes pueden funcionar para estilos de texto. Cambiar el estilo es fácil desde el panel de componentes.
  1. Hacer un cuadro de texto
    Haga clic una vez para crear un cuadro de texto (no arrastre para crear un cuadro). Estilo con la fuente / peso / color / altura de línea / alineación / etc. que deseas
  2. Convierta este cuadro de texto en un componente
    Establezca las restricciones del cuadro de texto dentro del símbolo en: "Arriba y abajo" e "Izquierda y derecha". Esto asegura que su cuadro de texto permanezca dimensionado para el componente.
  3. Renombrar capas
    Cambie el nombre de su componente al nombre de estilo de texto deseado.
    Cambie el nombre de su capa de texto a algo genérico como "Texto". Cambiará el nombre de esta capa de la misma manera en todos los componentes de texto posteriores.
  4. Usa tus nuevos componentes
    Cada vez que necesite cambiar un estilo de texto, simplemente puede cambiar las instancias a un componente de texto diferente. Debido a que cambiamos el nombre de todas las capas de texto dentro de los componentes para que sean iguales, esto permite que el componente asigne cualquier texto anulado a la instancia intercambiada.

Y si quieres ser aún más elegante, Mirka S escribió un artículo increíble sobre técnicas de texto modulares / escalables.

Combinándolo todo

En el ejemplo a continuación, todas las técnicas anteriores se han utilizado para crear un componente de mosaico extremadamente flexible que tiene en cuenta diferentes estados y variaciones para su uso dentro de maquetas y prototipos.

Aquí hay un resumen de algunas de las diferentes variaciones de componentes:

Un componente bien construido puede adoptar muchas formas diferentes simplemente intercambiando componentes anidados y alternando la visibilidad de las capas. Copyright © 2018, Texto abierto. Todos los derechos reservados.Copyright © 2018, Texto abierto. Todos los derechos reservados.

Descompostura

Anidados dentro del componente de mosaico, que se muestra arriba, hay una serie de elementos que pueden activarse / desactivarse o intercambiarse a diferentes componentes.

  • Íconos
    Los íconos son instancias anidadas y pueden cambiarse fácilmente por otros íconos.
  • Contenido del azulejo
    El área de contenido en el mosaico también es un componente anidado. Para crear el componente de mosaico base, hay un componente de marcador de posición con una línea punteada roja que describe las dimensiones y también establece sus restricciones dentro del mosaico. Puedo reemplazar el componente de marcador de posición con mis componentes de cuadrícula de contenido real. Combinando esto con el método recortado de "contenido de clip", puedo mostrar una versión de una vista de "cuadrícula de repetición" que crecerá con el componente principal.
  • Barra de desplazamiento
    La barra de desplazamiento es simplemente un componente anidado cuya visibilidad se puede alternar si queremos comunicar que el contenido del interior es desplazable.
  • Truncamiento
    Un pequeño vector con un gradiente de blanco sólido a transparente está situado encima del componente de texto del título del mosaico. Su visibilidad se puede activar o desactivar para mostrar nuestro efecto de truncamiento gradual cuando sea necesario.
  • Buscar
    Situado dentro del encabezado del mosaico, hay un componente de entrada de búsqueda que también se puede alternar. Dado que este elemento en particular también es un componente anidado, me permite intercambiar diferentes estados del campo de entrada de marcador de posición, a poblado, a poblado con foco.

Aquí está en acción:

Algunas notas adicionales

Menú de instancia

Los componentes locales de su archivo también se pueden intercambiar desde el menú de instancia. Un patrón de nomenclatura consistente con barras inclinadas ayuda a clasificar sus componentes en grupos más manejables.

Otra forma de intercambiar componentes es seleccionar un componente y acceder al menú de instancia desde el panel de propiedades. Desde aquí puede elegir un componente diferente para intercambiar. Esto funciona solo para componentes locales porque la lista se llena solo de componentes que ya existen en su documento.

El uso de barras diagonales para segmentar su esquema de nomenclatura no solo organizará sus componentes en grupos dentro de este menú, sino que también organizará sus activos exportados en subdirectorios.

Sustitución de componentes

Cambiar muchas instancias de un componente de uso frecuente suena como si fuera una tarea desalentadora, especialmente si se extiende a través de muchos marcos diferentes. Sabemos que cambiar la instancia es fácil, el problema es encontrarlos a todos. Afortunadamente, Figma tiene una función para hacer selecciones basadas en elementos comunes.

Documentación

Figma le permite agregar descripciones a sus componentes maestros. Si tiene variaciones en componentes similares, casos de uso específicos o incluso un componente rediseñado que está validando, este es un gran lugar para agregar información útil para acompañar su componente que estará fácilmente disponible para los diseñadores, directamente desde los paneles de la biblioteca de componentes y equipos .

Las descripciones agregadas a sus componentes maestros, aparecen al pasar el mouse, dentro del menú de componentes.

La documentación no solo es crítica para los diseñadores, es igualmente importante considerar la colaboración con el desarrollador. No es posible encapsular cada detalle en un pequeño campo de descripción, así que trate de ponerse en el lugar de los desarrolladores e identifique lo que necesitan saber. Con tantas aplicaciones que se vuelven centradas en los componentes en su estructura, hay una buena posibilidad de que los desarrolladores quieran adoptar el mismo enfoque para escribir código y quieran comprender la gama completa de cada componente y sus diversos estados que se especifican en el diseño. Es fácil caer en la trampa pensando que necesita una guía de estilo elaborada, un sitio web de documentación o herramientas adicionales para lograr esto, pero la realidad es que muchos equipos pequeños simplemente no tienen el tiempo o los recursos para hacerlo. La buena noticia es que no es un requisito para tener éxito: manténgalo simple y evite complicarlo.

Figma puede ayudar a facilitar el apretón de manos del desarrollador y la naturaleza colaborativa de lo que ese proceso siempre debe ser. Considere el siguiente ejemplo. Un componente selector de fecha con varios estados. Este componente en particular está dentro de una configuración de archivo para ser un repositorio para todos los componentes de la interfaz de usuario en el sistema de diseño. Los componentes que contiene se comparten con otros archivos que contienen las maquetas de pantalla. En lugar de enviar solo las pantallas al desarrollador, considere compartir un enlace directamente a los documentos de la biblioteca de su equipo para acompañar las maquetas.

Los componentes maestros que componen el selector de fecha residen en un marco (nombrado apropiadamente para que se agrupen en el panel de componentes). Los componentes maestros se encuentran a la izquierda. Estos son los componentes a los que los diseñadores tendrán acceso desde el panel de bibliotecas de su equipo cuando trabajen en maquetas de pantalla. A la derecha, hay solo instancias de los componentes maestros (para que no tenga que preocuparse de que estos abarroten la biblioteca de su equipo cuando se accede desde otros archivos). Esas instancias pueden ensamblarse para ilustrar varios estados del componente. La documentación puede ser tan simple como agregar algunas notas y colaborar con los desarrolladores a través de comentarios. Esto pone todo en un solo lugar y evita que el desarrollador tenga que buscar en sus diversas maquetas de pantalla solo para comprender el alcance completo de lo que necesitan para construir.

Eliminar componentes maestros

Al hacer clic en el enlace azul, se restaurará su componente maestro. ¡Uf!

Eliminar un componente maestro podría ser desastroso. ¡Imagínese cada instancia vinculada de dicho componente, todas las separaciones repentinas y se convierte nuevamente en un marco! Figma te tiene cubierto. Las instancias realmente mantendrán su estado de instancia en caso de que tenga que revertir esto más adelante. Esto le permite seleccionarlos todos e intercambiarlos a un componente diferente (que existe) o, en realidad, restaurar el componente maestro original.

Gracias por leer, por favor comparta sus pensamientos / preguntas a continuación y avíseme si este artículo fue de alguna ayuda. Si tiene alguna pregunta, ¡no dude en enviarme un mensaje de correo electrónico en Twitter o en el canal Spectrum Figma!

Y ... si nunca has probado Figma pero de alguna manera te has encontrado aquí, échale un vistazo, ¡es gratis para individuos y estudiantes!