We do a lot of cross-team collaboration at Tenten when working on client projects that require both design and marketing expertise. Since our product designers have picked up the ins and outs of HubSpot, we thought it was due time to introduce our marketing team to Figma.
Figma has been the one-stop design tool for our product and design teams for prototyping websites, content creation, and deck building. In short, Figma is much more than a design tool — it’s our 360-platform for all agency work.
For an in-depth guide on Figma for beginners, read this Figma Beginner’s guideone of our designers, Jade, wrote a while back.
For social media
Previous workflow
We were already using Figma to create content a lot of our social media content. We had a designer in charge of post creation and a marketer in charge of copywriting, conceptualizing, and posting.
Despite the simple set-up, we found that running our socials was eating into time that should be for client work. We needed a new workflow that allowed us to create social media assets consistent with our new brand guidelines more efficiently.
Current process
Let’s walk through how our marketing team creates our #TenTenNewsTuesday Instagram stories on Figma.
Creating templates:
1. Use a design system: Since we’re making posts for Tenten’s Instagram account, we’re using our agency’s design system across our posts which we’ve built out in Figma.
If you don’t have a design system in place, get the basics down: colors, typography, and graphic assets. We’ve published our design system as a Library so we can use it globally in other Figma projects and files.
2. Create components: We house all our social media templates in a separate file titled “Tenten Social Media Design System” within our “Tenten Design System” project.
We created two components with the standard Instagram story dimensions — a “Standard” story and an “Image” story.
3. Create variants: Each story has five layout variations. Using the power of Figma’s variants, we created a “Type” property and added the five layout variations to each story component.
The “Standard” story has a second “Color” property to change the background to colors from the Tenten brand. The “Image” story has a second variation for text color.
Creating components based on a design system makes it easy to manage design changes. Global changes to our agency-wide design library will be updated to the elements in our #TenTenNewsTuesday file. If we want to add or change a layout, we just edit the variants of our story components and publish the changes to our team library.
Creating the story:
Our marketing assets are housed in a separate project hub titled “Marketing materials” that uses our “Tenten Social Media Design System”.
1. Drag and swap: In our “Tenten News Tuesday” file, all our marketing team needs to do is drag in a story component from our assets library and choose the preferred layout and color scheme for the story. All that’s left to do is to import relevant images and write the copy.
Another benefit from creating templates first and putting in content later is that our marketing team knows approximately how much text they can fit without breaking the integrity of the layout. This means less back and forth in editing the copy to fit the layout and editing the layout to fit the content.
2. Sequencing: The Figma playground is great for assessing an overview of the story sequence. We use the prototype function to preview the flow of the story.
For translating copywriting
Our website is available in English and Traditional Chinese to cater to our diverse clientele. Most of the time, we design in English and hand over copy docs to the marketing team to be translated. Most of the time, the translating happened on a single Notion document.
Managing the copy became increasingly difficult as our website went through multiple design iterations. Information hierarchy and design decisions got lost in translation when formatted on a Notion page.
We now have our marketing team translate and edit copy directly on Figma for 2 main reasons:
- This gives both the design team and marketing team better visual insight into how the layout differs in English and Chinese.
- By translating according to the layout, the marketing team has more context about what each line of text is supposed to achieve. Is it a heading in the hero or microcopy for the about section?
Translated versions of our case studies in Figma. **Note: Figma is not a text editor and we recommend cross-checking your copy for typos and grammar.
Better ways to work
We’re all about finding new ways to work collaboratively at Tenten. Leaning into Figma’s versatility and using the platform to build things together helps our teams stay aligned and move forward in one direction.