How Figma saved my life

How Figma saved my life

1 photo


As a company, we are used to giving a very careful service to all our clients, however, that care has rarely been provided to ourselves in a long time, leaving aside something as important as our corporate identity. But one day that changed. Someone gave a metaphorical bang on the table and said TODAY IS THE DAY, and that’s when our rebranding began. In today’s post we want to tell you how Figma saved my life and how we managed to develop a template system to use in our social networks.

Initial problem

The rebrading was carried out by Designer Dan Matthews, CEO of the New Zealand Design Studio Design Cabin, specialized in branding, who did an excellent job and positioned our brand with a very modern design , forceful, which highlights the use of typography as a graphic element and the creation of our symbol that gives a lot of play both alone and used to integrate images or graphics.

This image uses black and white as colors and adds to its palette the colors of the clients or themes that are being treated, thus creating a variety of combinations that are very useful when creating content for networks.

Once the rebranding was complete, it was time to go out into the world and show it off.

From the first moment we knew that the two chosen channels to give us visibility would be Linkedin and Instagram. The first for being a direct line with many people in our sector with whom we want to be in contact and the second for being the fashion social network, the place to be. And it was here that we realized that we might have a problem.

The person in charge of social networks was the queen of CANVA, but she had never worked with “real” design tools. We had to find a solution to this problem, because, just as we knew that on Linkedin what catches is the word, on Instagram, love at first sight is achieved by image.

 

Solution

We needed to find a methodology that would allow our CM to generate content in line with our corporate identity without the need to always have the design team, so we decided to implement a template system to create graphic material on Instagram in a totally autonomous way, what has been a lifelong Design System, generating defined rules, limitations and principles so that you can apply them in the development of each publication.

At first, we proposed using Canva itself because it was the tool I knew, but after several attempts we realized that there was always something that ended up getting out of place or did not have all the functionalities we needed to execute the design as it was established.

It was difficult, for example, to create a sentence with different typographic weights, having to do several layers to achieve it.

Finally, the light bulb went on and we said: “If Figma is the usual tool for the development of all our projects, why don’t we set up our Design System focused on Instagram for our CM?” So it was. Figma was the program of choice to automate the creation of social media content.

 

figma stories

What is FIGMA and how do we automate the content creation process for Instagram.

Figma is a SaaS application for collaborative team design projects, which offers everything you need to develop a digital project. It’s perfect for designing user interfaces, you can make prototypes, illustrate (it’s a vector-based program) and it even generates code for hand-off to the development team.

For all this, we thought it was ideal to design the templates that our Community Manager would use in order to have content according to our corporate identity.

We propose different formats to show what we had previously scheduled for Instagram, including Stories and Feed. We also generated very defined rules with very concrete examples to serve as a guide for the Community Manager.

In this way, you would only have to look closely at the examples and make use of all the elements enabled to walk in line with our corporate identity. The marked methodology is so intuitive that it is impossible to get lost and the tool itself is quite simple and minimalist.

Depending on the type of content that you want to create, you choose one or another template from the examples and instructions section that the UX / UI team has created and then paste it on a page that we have called “Create your stories” and there already a magic begins that consists of replacing the sample content with the new one.

The truth is that being used to Canva and having spent many hours editing existing templates, it was not difficult to get the point of the new Figma mechanism.

 

Templates for Instagram in Figma

The content can be displayed in many ways, and all of them had to be consistent with our identity, that is why we did not design a single cover, semi-cover and descriptions model, but rather we generated different compositions that could be combined with each other, to have more room for maneuver when creating stories.

  • The covers could be: one color, two, with or without image and using our corporate typography, Aktiv Grotesk. You could play with sizes, visual weights (without neglecting the previously established typographic hierarchy) and the use of color, which, as we explained before, our brand allows us to adapt, having greater flexibility, even some cover could be used as semi-cover, as long as it was related to the rest of the content to be published.

 

cover example

 

  • The semi-cover is a somewhat more static composition, however, the range of colors to be used and the space between elements to be able to interact with the social network itself and include GIFs or similar, can make it very versatile. Without neglecting the hierarchy of texts, which continues to be a key element in the semi-cover when communicating what we want in each publication.

 

semi cover figma

 

  • The descriptions, or contents follow a pattern similar to that of the covers. As in the rest of the cases, a background color and another will be used for the typeface, which in this case is smaller than the semi-cover and does not include various typographic weights.

 

The elements created by the design team were 4:

  • Frame

Also known as a work table, it is the initial base and from there we add the rest of the elements.

In the Frame are delimited: the space to host content and the mandatory margins that we must leave, if we do not want elements of the Instagram interface itself to overlap when you publish a Story.

 

frame

 

  • Backgrounds

The backgrounds have also been pre-designed in such a way that the isotype can house images inside and thus have an unlimited number of possibilities.

Figma_backgrounds

 

  • Texts

Another element that they have created has been the text blocks, being able to choose a different one depending on whether it is for the cover, semi-cover or content.

text

  • Fillet

Finally, the common element that covers, semi-covers and descriptions have is the filet, established in the identity guideline and the one that will give us that personal touch to our publications. This fillet will be placed at the end of each sentence and so that our CM knows at what height to place it, we have generated a block that will delimit the space between the last word of the phrase and our fillet. You will only have to place this block in the last word to know the distance to which it has to be placed and at the same time it will give you the length of it.

Conclusions

  1. Figma has allowed the CM and the design team to work collaboratively.
  2. It has improved the rate of production and above all, the quality of work.
  3. And last but not least, the saving system offered by this tool has made our CM breathe much easier.
  4.  

If this article has given you some light, we recommend our post in which we teach you how to do keyword research to optimize your website with the best keywords for your business.