Creación de Activos Digitales con un Flujo de Trabajo en Figma

Qué Hice

Fui responsable de analizar e implementar un nuevo flujo de trabajo para generar activos gráficos para el equipo de Gestión Comunitaria.

Realicé entrevistas internas, evalué soluciones potenciales y propuse un nuevo flujo de trabajo.

El Problema

Anteriormente, la generación de activos para publicaciones en redes sociales a partir de artículos publicados se implementaba directamente en el sitio web, utilizando los datos de los artículos para crear una estructura HTML y la biblioteca dom-to-image para exportar esa estructura como un archivo PNG.

El problema era que, debido a las limitaciones de renderizado CSS de la biblioteca, algunas cosas eran imposibles de implementar.

Además, al no contar con un diseñador gráfico en el equipo, había una gran dependencia de diseñadores externos para crear contenido más personalizado, aquellos que iban más allá de lo que era posible con la biblioteca.

Trabajé pensando, en el mejor de los casos, en superar estas limitaciones. ¿En el peor caso? Reestructurar todo el proceso con una herramienta diferente.

Objetivo

Implementar un nuevo flujo de trabajo para generar activos gráficos.

Investigación

Realicé varias entrevistas con el equipo de Gestión Comunitaria para comprender mejor los principales problemas con el flujo de trabajo actual de generación de activos.

A pesar de ser consciente de las limitaciones mencionadas anteriormente, al menos desde el punto de vista técnico, me interesaba más entender lo que consideraban un problema o, en el mejor de los casos, lo que realmente funcionaba.

La falta de libertad y la interfaz fueron los principales problemas.

La primera entraba en conflicto con la capacidad de mantener la coherencia interna de la marca, ya que esa libertad necesitaba estar dentro de un marco que evitara desviaciones de las pautas de la marca.

La segunda superaba el tiempo y presupuesto del proyecto, ya que desarrollar más una herramienta interna requeriría más esfuerzo de desarrollo y mantenimiento.

Decisiones

El proyecto entonces pasó de tratar de solucionar algo a redefinir todo el flujo de trabajo con una herramienta que: no fuera una solución interna o autohospedada para mantener al mínimo el mantenimiento, que estuviera actualizada regularmente, que tuviera una buena UX/UI, y que ofreciera a los usuarios más libertad creativa sin dejar de mantenerla restringida.

Figma fue mi elección. Exploré algunas herramientas y suites, como BannerBear y Adobe Suite, pero al final, la relación costo-beneficio se inclinó a favor de Figma.

La razón no fue solo la familiaridad, sino porque:

Se pueden definir variables y estilos globales, incluidos los colores.
Se pueden crear componentes con variantes y operadores booleanos.
Su interfaz es más sencilla que otros editores gráficos vectoriales.

Figma ofreció una mejor experiencia de usuario para todo el flujo de trabajo, mientras mantenía los activos generados dentro de la marca al limitarse a estilos, variables y componentes definidos.

Diseño

Definí los elementos que componen la identidad visual de Enfant Terrible, como isotipos, imagotipos, logotipos, paleta de colores y tipografía.

Cada uno de ellos fue definido como componentes y estilos en una guía de estilo de la marca, que sirvió como base visual tanto para este proyecto como para el rediseño del sitio web.

Realicé una evaluación visual del contenido publicado en redes sociales. Identifiqué cinco tipos de contenido: artículos, citas, videos, monetización/loyalty y situacional (contenido personalizado).

Cada tipo de contenido, excepto el contenido personalizado, fue transformado en componentes en Figma, asegurando consistencia en los diferentes casos de uso a través de una única fuente de verdad.

Realicé una capacitación interna intensiva de dos días, seguida de una semana de soporte. Para el comienzo de la semana siguiente, el flujo de trabajo ya estaba implementado.