Plugins para la construcción y documentación de Design Systems en Figma (1/2)

De alguna manera los Design System son el alma y corazón de nuestro producto, marca o hasta la concepción de un proyecto. Crearlos y mantenerlos requiere esfuerzo, dedicación y compromiso. Es una tarea ardua que apasiona y crea dolores de cabeza pero, gracias a las comunidades colaborativas digitales de estos tiempos, estas tareas se pueden llegar a suavizar con ayuda de herramientas como es el caso de los plugins, creados desde cualquier lugar del mundo en estas comunidades. 

A continuación destacamos 6 de estos plugins, ideales para trabajar desde Figma, en las distintas fases de un Design System, específicamente en las fases de construcción, mantenimiento y accesibilidad.

Plugins para construir y mantener un Design System

Batch Styler

Editar estilos en Figma puede llegar a ser una molestia. Con Batch Styler se vuelve mucho más fácil, ya que nos permite actualizar los estilos en segundos.

Algunas de sus funcionalidades:

  • Cambiar varios estilos de texto para usar una nueva fuente o cambiar su color principal.
  • Buscar y reemplazar en todos los estilos seleccionados, además se puede cambiar el nombre de los estilos fácilmente
  • Actualizar todas las descripciones de los estilos y aplicarlos al sistema de diseño.
  • Actualizar los estilos de color cambiando, por ejemplo, solo su tono base, luminosidad, saturación o valores hexadecimales.
  • Seleccionar y eliminar fácilmente estilos que no correspondan.

Typestyles

Con este plugin se pueden generar estilos de texto por lotes

  1. Selecciona el tipo de letra del que deseas generar un estilo de texto. 
  2. Elige los modificadores para generar tus estilos de texto y listo.

Un tip: puedes reemplazar las etiquetas predeterminadas de familia de fuentes, tamaño y peso con etiquetas personalizadas.

Button Buddy

Se pueden crear todos los botones que necesitas y sus estados componetizados con solo 2 clics: 

  1. Configura los colores. 
  2. Selecciona un estilo de botón.
  3. Button Buddy proporcionará los botones estructurados.

Plugins para asegurar la accesibilidad

Color Contrast Grid

¿Quieres saber si el color que usas cumple con la relación de contraste? Color Contrast Grid genera una tabla de relaciones de contraste para todos los estilos de color de tu proyecto, te permite limitar la visualización según el contraste y componetizar de manera flexible.

Color Blind

Diseña interfaces mucho más accesibles con este plugin, descubre cómo las personas con deficiencias visuales podrían percibir tu diseño.

Stark

Permite crear y probar diseños accesibles en tiempo récord. Simplifica la colaboración de accesibilidad entre diseñadores y desarrolladores. Con Stark, no solo se puede probar y verificar problemas de accesibilidad, sino también aplicar sugerencias de color o mejoras tipográficas.

No todo termina aquí, te invitamos a explorar estos plugins y a que nos comentes sobre ellos e incluso nos recomiendes otros. En una próxima entrega, explicaremos otros plugins útiles para las fases de documentación y actualización de un Design System.