Figma Plugins: la comunidad a los mandos.

Retrocedemos en el tiempo. Agosto en Madrid. Ni un alma en la oficina. La cabeza más en el chiringuito de la playa que en el trabajo. De repente… ¡bang! Figma saca a la luz su ecosistema de plugins.

Era algo realmente esperado, ya que sus competidores lo tenían desde hacía mucho tiempo y en las comparaciones ese argumento era demoledor. Pues ya está, habemus plugins.

La primera versión de este ecosistema está realmente bien: es sólida, sin errores y la instalación de cada uno es tremendamente sencilla, puro click & play. En la salida había 40 plugins, 3 semanas después hay 170 y cada vez que veo Twitter esa cifra aumenta.

La gente de Figma ha dado las herramientas para que crear plugins sea sencillo y, como dicen ellos, “si sabes crear una web, sabes crear un plugin en Figma”. Gracias a esto, la comunidad se ha puesto manos a la obra y han empezado a desarrollar cosas que nos están dejando con la boca abierta.

Se nota como una comunidad fuerte y comprometida hace avanzar y mejorar las aplicaciones con nuevos desarrollos, recomendaciones de diseño o incluso escribiendo un post. No me imagino esto mismo con las aplicaciones de Adobe.

Nosotros no hemos creado ningún plugin todavía, pero sí hemos analizado brevemente todos ellos y hemos hecho una selección. Al ritmo que va la comunidad, en un mes haremos otro análisis.

Plugins muy Top

• Google Sheets Sync: el plugin más esperado. Importa datos de una tabla de Google Sheets directamente a tu diseño.

• Content Reel: todos tenemos un "Javier González" genérico que usamos en todos los diseños. Este plugin nos ayuda a generar datos básicos personales y avatares. Una pena que las direcciones y otros elementos tengan formato USA y que haya nombres españoles poco acertados (Pires Leoberto?).

• Unsplash: imagenes guapas y con calidad para vestir tus mockups.

• Similayer: plugin que extiende la funcionalidad de Figma de “Sellect all with same…”. Este te permite encontrar objetos similares a gran número de criterios. Selecciona todos los objetos de [ancho] & [opacidad] & [nombre de capa] igual a [selección].

• Rename It: ¡Esta habitación parece una cochiquera! Pues aquí tienes un renombrado de capas bastante potente para ordenar tu espacio de trabajo.

• Chart: este plugin es realmente potente y nos permite crear gráficos con datos falsos como con datos de fuentes externas a través de JSON.

Edición de texto

• Nisa Text Spliter: muy buen plugin para trabajar con bloques de texto, unirlos, ordenarlos, etc.

• Add numbers to text: plugin para crear listas. Algo que creo que podría hacer la propia aplicación, la verdad.

• Change Text: el mítico y útil “buscar y reemplazar” texto. ¡Ya era hora!

• Font Scale: genera escalas tipográficas en base a un aspect ratio definido y a un tamaño base. Más información sobre escalas tipográficas.

Iconografía y logotipos

• Iconify: brutal repositorio de iconos y logotipos. Todos correctamente etiquetados y encontrables con su buscador. Un must.

• Brandfetch: introduces una URL y te devuelve el logo de su header. ¿Caso de uso? Bueno… algo se te ocurrirá.

Accesibilidad

• Able: comprueba el contraste de un texto y su fondo y te devuelve si pasa o no la validación de accesibilidad A, AA y AAA. También puedes comprobar cómo se ve ese texto con deficiencias de visualización de colores.

• Color Contrast Checker: al igual que el anterior, este plugin comprueba el contraste de todos los textos de un frame. Útil y necesario, aunque si hay muchos elementos el plugin colapsa.

• Color Blind: comprueba cómo tu diseño lo verían usuarios con problemas de visión relacionados con colores (Protanopia, Tritanopia, etc.)

Avanzados

• Figmotion: más que un plugin, es una aplicación en sí misma para hacer animaciones y obtener “código reaprovechable”. La interacción y comportamiento son un poco reguleras, pero tiene buena pinta y en el futuro seguro que nos dará muchas alegrías como las dio Flash :)
• Mapsicle: si trabajas mucho con mapas, este es tu plugin. Se acabó el ir a Google Maps, imprimir pantalla y volver con un PNG. Este plugin genera una imagen en base a la dirección exacta que introduzcas y puede ser editada después.

Ni fu ni fa...

• Table Generator: la generación de tablas es algo que lleva tiempo y puede ser complejo, pero la verdad, es menos complejo que usar este plugin. Estaría bien que la edición de formato (font-size, line-height, padding, border-radius) lo dejasen al diseñador y que el plugin se centrase en el duplicado y asociado de contenido a cada celda. Espero que en una nueva versión mejore.

• Autoflow: aunque tiene muchas descargas, lo único que hace es tirar una línea de un frame a otro y, si mueves el objeto, la línea no se mueve. Errores constantes. Para hacer esto tenemos el Flowkit. O si lo quieres gratis… aquí te dejo uno que he hecho yo.

• Translate: plugin de traducción que te obliga a crear una API Key para usarlo. No he podido registrarme. Siguiente!

• Time Machine: te duplica en otra página una selección para guardar un estado de tu diseño. Teniendo la gestión de historial, no le veo mucho sentido.

• Lorem Ipsum: creo que ya es momento de añadir contenido real en tus diseños. Plugin mainstream sin mayor aporte.

Plugins... bueno, graciosos

• Roto: extruye formas geométricas generando piezas en 3D. Se toma su tiempo.

• Image Palette: extrae los colores que más se repiten en una imagen. Está chulo pero hasta la fecha no le he visto caso de uso.

• Image tracer: rememorando Flash y su "Trace Bitmap"... algo similar.

• Tumble: pues…. hace que los objetos se caigan…

Si habéis visto algún otro interesante que se nos haya escapado... ¡comentario al canto!