Componentes de tragamonedas Figma: por qué crearlos y cómo usarlos

A medida que construya su kit de interfaz de usuario de Figma, se dará cuenta de que algunos componentes necesitan más flexibilidad que otros. Figma es una gran herramienta de diseño y hoy nos ofrece una gran oportunidad para usar variantes e instancias de componentes, pero para algunos componentes es posible que desee un poco más de flexibilidad y deje que su equipo de diseño cree sus propios componentes para satisfacer sus necesidades. .

Esta es una imagen modal con 2 ranuras.
Modal con ranuras

Este artículo hablará sobre una gran técnica llamada “slot” que es capaz de brindar tanta flexibilidad y libertad a los diseñadores. Desde mi punto de vista, esta es una forma de aportar flexibilidad a la hora de trabajar con un sistema de diseño. Al final de este artículo, también proporcioné un enlace a un archivo Figma que compartí con la comunidad donde puede probar esta técnica.

  • Flexibilidad del sistema de diseño: Si bien los componentes básicos, como los botones y los interruptores, son fáciles de administrar, a veces le gustaría brindar a sus diseñadores más flexibilidad para crear algunos diseños personalizados. Esto es especialmente notable en componentes como modales, tarjetas y paneles derechos. Imagine la variedad de modales en su sistema y cuántas tarjetas podría tener en su sistema.
  • Entrega de soluciones más rápida: Este método permite brindar soluciones en un corto período de tiempo sin una participación significativa del equipo de diseño. Los diseñadores pueden crear componentes personalizados para reemplazar las ranuras.

Cree un componente principal (también puede llamarlo plantilla) con un componente de ranura dentro para que cualquier diseñador pueda intercambiar diferentes componentes. Aquí hay un ejemplo simple. Imagine que estamos creando una ventana modal con un encabezado y un pie de página. En el centro de la ventana modal, coloca el componente de ranura. Los diseñadores de su equipo podrán seleccionar un componente de tragamonedas y reemplazarlo con otros componentes, como entrada o texto. Al agregar más ranuras, puede crear modales más complejos.

Asegúrese de explicar a los diseñadores cómo crear componentes personalizados utilizando las pautas del sistema de diseño para que todos los componentes sean consistentes.

Como ejemplo, puede explicar que todos los componentes en un modal deben tener el mismo relleno de 24 px en todos los lados.

Sería útil compartir videos con ellos que demuestren cómo crear componentes personalizados, lo que le ahorrará tiempo de trabajo (menos reuniones y mensajes en la pereza).

Como diseñadores, creo que debemos probar cosas diferentes y entender dónde funciona una técnica y dónde funciona otra. Si me pregunta sobre el papel general del uso de componentes de tragamonedas versus opciones, le diré que:

Debe usar variantes para componentes simples que sepa qué son y dónde se usan en su producto. Un ejemplo sería un botón. Sabe cuántos tipos (principal, fantasma, etc.) y cuántos estados (predeterminado, flotante, enfocado, etc.) necesita su sistema.

Es muy beneficioso usar ranuras si desea que los diseñadores creen algunos componentes personalizados que no necesitan incluirse en muchos lugares del producto. Esto facilita el flujo de trabajo entre los diseñadores y el equipo del sistema de diseño.

Además, puede crear múltiples variaciones y dejar que los diseñadores creen sus propios componentes. Por ejemplo, si está diseñando una ventana modal para su sistema, puede crear algunas opciones básicas que deben usarse en todos sus productos, como un componente simple para mostrar texto.

Este método no resuelve todos nuestros problemas. Figma proporciona un flujo de trabajo fluido y fácil y mucha flexibilidad de componentes, pero a veces asumimos que los componentes se organizarán de acuerdo con las pautas del sistema de diseño sin pensar, pero ese no es el caso. Los diseñadores deben estar familiarizados con las pautas y técnicas del sistema de diseño de Figma, como el diseño automático, para diseñar componentes personalizados adecuados.

Cuando le da a cada diseñador la libertad de agregar componentes personalizados, encontrará que replican la misma solución en otras pantallas e hilos. Cuando esto sucede, puede agregar algunos componentes personalizados como parte de la biblioteca de componentes. Así, el sistema de diseño puede ampliarse en función de las necesidades reales. Al igual que con los complementos que algunas personas desarrollan para diferentes productos, al final del día, la empresa ve valor debido al complemento que alguien ha desarrollado y puede incluirlo en el producto.

Aquí está el archivo de Figma que compartí en la comunidad de Figma donde puedes jugar con el método de tragamonedas. Es gratis, así que ¿por qué no intentarlo?

Esta es una imagen del archivo figma.
Previous post ¡Google, contenido de IA, Instagram y más!
Next post 10 consejos sobre cómo administrar tus seguidores de Instagram

Deja una respuesta