Cómo Figma me salvó la vida

Cómo Figma me salvó la vida

1 photo


Como empresa, estamos acostumbrados a dar un servicio muy cuidado a todos nuestros clientes, sin embargo, ese cuidado pocas veces nos lo hemos proporcionado a nosotros mismos en mucho tiempo, dejando de lado algo tan importante como nuestra identidad corporativa.  

Pero un día eso cambió. Alguien dio un golpe metafórico sobre la mesa y dijo HASTA AQUÍ, y fue entonces cuando empezó nuestro rebranding.

 

Problema inicial

El rebrading corrió a cargo del Diseñador Dan Matthews, CEO del estudio Neo zelandés de Diseño Design Cabin , especializado en branding, que hizo un trabajo excelente y posicionó nuestra marca con un diseño muy moderno, contundente, en el que destaca el uso de la tipografía como elemento gráfico y la creación de nuestro símbolo que da mucho juego tanto en solitario como utilizado para integrar imágenes o gráficos. Esta imagen utiliza como colores el blanco y negro y añade a su paleta los colores de los clientes o temáticas que se estén tratando, dando así lugar a crear variedad de combinaciones que nos son muy útiles a la hora de crear contenido para redes.

Una vez completado el rebranding, llegó el momento de salir al mundo y mostrarlo.

Desde el primer momento supimos que los dos canales elegidos para darnos visibilidad serían Linkedin e Instagram. El primero por ser una línea directa con muchísima gente de nuestro sector con el que queremos estar en contacto y el segundo por ser la red social de moda, the place to be. Y fue aquí donde nos dimos cuenta que podíamos tener un problema.

La responsable de redes sociales era la reina del CANVA, pero no había trabajado nunca con herramientas de diseño “de verdad”. Teníamos que buscar una solución a este problema, porque, así como sabíamos que en Linkedin lo que atrapa es la palabra, en Instagram, el amor a primera vista lo consigues a golpe de imagen.

 

Solución a nuestro problema con Figma

Necesitábamos dar con una metodología que permitiera que nuestra CM generase contenido en línea con nuestra identidad corporativa sin la necesidad de contar siempre con el equipo de diseño, por lo que decidimos implementar un sistema de plantillas para crear material gráfico en Instagram de forma totalmente autónoma, lo que viene siendo un Design System de toda la vida, generar reglas, limitaciones y principios definidos para que pueda aplicarlos en el desarrollo de cada publicación.

Al principio planteamos usar el propio Canva por ser la herramienta que conocía, pero tras varios intentos nos dimos cuenta que siempre había algo que terminaba descolocándose o no tenía todas las funcionalidades que necesitábamos para ejecutar el diseño tal y como estaba establecido.  

Era difícil, por ejemplo, crear una frase con distintos pesos tipográficos, teniendo que hacer varias capas para conseguirlo.

Finalmente, se nos encendió la bombilla y dijimos: “Si Figma es la herramienta habitual para el desarrollo de todos nuestros proyectos ¿Por qué no montamos en ella nuestro Design System enfocado a Instagram para nuestra CM?” Y así fue. Figma fue el programa elegido para automatizar la creación de contenido de las redes sociales.

 

story con figma

Qué es FIGMA y cómo automatizamos el proceso de creación de contenidos para Instagram.

Figma es una aplicación SaaS para proyectos de diseño colaborativo en equipos, que ofrece todo lo necesario para desarrollar un proyecto digital. Es perfecta para diseñar interfaces de usuario, puedes hacer prototipos, ilustrar (es un programa basado en vectores) e incluso genera código para el traspaso al equipo de desarrollo (hand-off).

 Por todo ello, pensamos que Figma era ideal para diseñar las templates que usaría nuestra Community Manager para poder tener un contenido acorde a nuestra identidad corporativa.

Planteamos diferentes formatos para mostrar lo que previamente habíamos calendarizado para Instagram, incluyendo Stories y Feed. También generamos normas muy definidas con ejemplos muy concretos para que sirvieran de guía a la Community Manager.

De esta forma, solo tendría que fijarse bien en los ejemplos y hacer uso de todos los elementos habilitados para caminar en línea a nuestra identidad corporativa. La metodología marcada es tan intuitiva que es imposible perderse y la herramienta en si es bastante simple y minimalista.

Dependiendo del tipo de contenido que se quiera crear, se elige una u otra plantilla de la sección de ejemplos e instrucciones que ha creado el equipo de UX/UI y luego se pega en una página que hemos llamado “Crea tus stories” y allí ya comienza una magia que consiste en reemplazar el contenido de ejemplo por el nuevo.

La verdad es que estando acostumbrada a Canva y habiendo empleado muchas horas editando plantillas ya existentes, no fue complicado que pillara el punto al nuevo mecanismo de Figma.

 

Templates para Instagram en Figma

El contenido se puede mostrar de muchas formas, y todas ellas tenían que estar acorde a nuestra identidad, por eso no diseñamos un único modelo de portada, semiportada y descripciones, si no que generamos diferentes composiciones combinables entre sí, para tener más margen de maniobra a la hora de crear stories.

  • Las portadas podían ser: a un color, a dos, con o sin imagen y utilizando nuestra tipografía corporativa, Aktiv Grotesk. Se podía jugar con los tamaños, los pesos visuales (sin dejar de lado la jerarquía tipográfica establecida previamente) y el uso del color, que como explicamos antes nuestra marca nos permite adaptar, teniendo una mayor flexibilidad, incluso alguna portada podría llegar a usarse como semiportada, siempre y cuando tuviera relación con el resto del contenido a publicar.

portada con figma

  • La semiportada es una composición algo más estática, sin embargo, el rango de colores a emplear y el espacio entre elementos para poder interactuar con la propia red social e incluir GIFs o similar, la pueden hacer muy versátil. Sin dejar de lado la jerarquización de textos, que sigue siendo un elemento clave en la semiportada a la hora de comunicar lo que queremos en cada publicación.

ejemplo de semi portada con Figma

  • Las descripciones, o contenidos siguen un patrón similar al de las portadas. Como en el resto de casos, se usará un color de fondo y otro para la tipografía, que en este caso es de un tamaño inferior al de la semiportada y no incluye varios pesos tipográficos.

 

Los elementos creados por el equipo de diseño fueron 4:

  • Frame

También conocido como mesa de trabajo, es la base inicial y a partir de ella vamos añadiendo el resto de elementos.

En el Frame quedan delimitados: el espacio para albergar contenido y los márgenes obligatorios que debemos dejar, si no queremos que se solapen elementos de la propia interface de Instagram cuando publicas un Story.

 

frame en figma

 

  • Fondos

Los fondos también han sido prediseñados de tal forma que el isotipo pueda albergar imágenes en su interior y así tener un número ilimitado de posibilidades.

 

fondos de story con figma

 

  • Textos

Otro de los elementos que han creado, han sido los bloques de texto, pudiendo elegir uno diferente dependiendo si es para la portada, semiportada o contenido.

 

textos en figma

  • Filete

Por último, el elemento común que tienen las portadas, semiportadas y descripciones, es el filete, establecido en la guideline de la identidad y el que nos dará ese toque personal a nuestras publicaciones. Este filete se colocará al final de cada frase y para que nuestra CM sepa a que altura colocarlo, hemos generado un bloque que delimitará el espacio entre la última palabra de la frase y nuestro filete. Solo tendrá que colocar este bloque en la última palabra para saber la distancia a la que tiene que colocarlo y al mismo tiempo le dará el largo del mismo.

 

filetes en figma

Conclusiones

  1. Figma ha permitido que la CM y el equipo de diseño trabajen de forma colaborativa.
  2. Ha mejorado el ritmo de producción y sobre todo, la calidad del trabajo.
  3. Y por último, pero no menos importante, el sistema de guardado que ofrece esta herramienta, ha conseguido que nuestra CM respire mucho más tranquila.