Artículos de Tecnología > Front End

Los 5 mejores plugins de Figma para trabajar con un Desing System

Laís Cavalcanti
Laís Cavalcanti
imgportada-top-5-plugins-figma alt="Pintura digital en estilo acuarela, que representa prototipos de pantalla"

Construir un Desing System no es una tarea sencilla, ya que requiere un equipo dedicado y una cultura organizativa que permita que todos los equipos comprendan su importancia. Una vez que esté generalizado, el Desing System debe mantenerse y actualizarse para que todos puedan consultarlo y construirlo juntos.

Con esto en mente, hemos enumerado 5 plugins de Figma que te ayudarán a ti y a tu equipo en la creación y gestión de un Desing System. ¡Echa un vistazo!

[TOC]

1. Figma Tokens

img1-plugin1-gif alt="Gif del plugin Figma Tokens que muestra cómo se puede activar, nombrar y guardar en formato JSON."

Cuando hablamos de un sitema de diseño, nos referimos a muchos estilos, componentes, iconos, textos, etc. dispersos por todo el documento. Optimizar estos estilos y ayudar a mantener la uniformidad en toda la interfaz del producto, facilitando el proceso tanto para los equipos de diseño como de desarrollo, es de suma importancia para mantener el Desing System y del código.

Figma Tokens es un plugin que ofrece la posibilidad de usar tokens de diseño (variables que abarcan varios elementos de estilo) que se pueden utilizar en una variedad de opciones de diseño, desde el amplio borde hasta los tamaños de espaciado, colores y estilos tipográficos. Te permite modificar los tokens y ver cómo se aplican esos cambios en todo el documento, además de poder exportarlos a un archivo en formato JSON.

Para acceder a la lista de plugins, haz clic en el menú de Figma en la esquina superior izquierda y luego en plugins, y elige Figma Tokens que ya ha sido instalado.

2. TypeScales

img2-gif-plugins-figma alt="Gif del plugin TypeScales que muestra varios tamaños de fuentes."

La tipografía es uno de los elementos más importantes de un sistema de diseño, ya que a partir de ahí puedes pensar en cuánta información se comunicará a los usuarios a través de textos. Es uno de los componentes básicos que debes controlar para trabajar armoniosamente con otros elementos, como los iconos. Incluso las alturas de sus líneas pueden influir en otros elementos estructurales, como los grids y los espacios.

Para ello, el plugin TypeScales ayuda a crear una escala modular en tipografía (un sistema simétrico que busca pensar de manera lógica los tamaños de un tipo) de manera sencilla.

3. Chroma Colors

img3-gif-plugins-figma alt="Gif del plugin Chroma Colors que muestra la selección de colores y la activación del plugin para estandarizarlos."

El color es un elemento que merece una gran observación y atención en cualquier Desing System y puede escapar fácilmente del control. Con una cantidad aparentemente infinita de matices y sombras, es común que los equipos de diseño terminen con docenas de valores de colores que se utilizan de manera inconsistente.

El plugin Chroma Colors ayuda a crear estilos de color de forma masiva e instantánea a partir de la selección de elementos. Para hacerlo, solo tienes que seleccionar los elementos rellenos de color, ejecutar el plugin y se generarán los estilos de color sin tener que crearlos manualmente, evitando errores e inconsistencias.

4. Design System Organizer

img4-gif-plugins-figma alt="Gif que muestra el uso del plugin Design System Organizer. Se seleccionan y organizan varios componentes."

Documentar todo el desing system para facilitar su actualización y difusión de contenidos, tanto para las áreas de diseño y tecnología como para otras áreas de la empresa, no es una tarea sencilla.

El plugin Design System Organizer ayuda al equipo de diseño a gestionar el Desing System, organizar componentes y estilos, así como clonar componentes fácilmente, crear una versión duplicada del desing system, entre otras funcionalidades.

Sin embargo, como nada es perfecto, este plugin no es gratuito y actualmente permite el acceso gratuito durante 15 días.

5. Wire Box

img5-gif-plugins-figma alt="Gif del plugin Wire Box siendo utilizado: se crean nuevas cajas de baja fidelidad para trabajar en ellas más adelante."

Con los sistemas de diseño, cada vez es más fácil y común trabajar en diseños de alta fidelidad. Sin embargo, en algunos momentos, es necesario volver a los wireframes de baja fidelidad.

El plugin Wire Box permite la construcción de diseños de baja fidelidad, lo que permite que el equipo se centre en la experiencia del usuario del producto en lugar de centrarse en la interfaz del usuario.

¿Te gustaron los plugins?

Si estás participando en la construcción de un Desing System, no dejes de utilizar estos plugins, seguramente te ayudarán mucho en la gestión del documento.

Hasta el próximo artículo :}

Laís Cavalcanti Como una persona curiosa, me gusta leer, mirar, escuchar y probar. Soy un entusiasta de la web accesible a todos. Hoy formo parte de la Escuela de Diseño y UX en Alura.

Este artículo fue traducido por Priscila Sousa.

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

Semestral

  • 264 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Luri powered by ChatGPT

    Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana

  • Acceso a todo el contenido de la plataforma por 6 meses
US$65,90
un solo pago de US$65,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Anual

  • 264 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Luri powered by ChatGPT

    Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana

  • Acceso a todo el contenido de la plataforma por 12 meses
US$99,90
un solo pago de US$99,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Acceso a todos
los cursos

Estudia las 24 horas,
dónde y cuándo quieras

Nuevos cursos
cada semana