Revolutionize Your Copy Management with Figma and Notion

Midjourney imagines how the futuristic copy management looks like

Content management is a headache for product teams. Copy discrepancies between designs, prototypes, staging, and production are inevitable. Defining a source of truth is a common solution, but relying on design mockups is not sustainable long-term. Tricks in Figma, such as organizing mockups and using a master component, may work for individuals, but mistakes grow exponentially with larger teams. Explaining the concept to busy stakeholders is also a challenge, and typos can easily appear when making changes across different locations.

My work in progress

The recipe

This tip is not for design knights who bring their mocks to ideal order every single day, but rather for lazy designers like me who are looking for a silver bullet. In short, there is a way to keep everyone up-to-date with your precious Figma mocks: play around with copy in Notion and make updates in one click.

Preparation

To get started, you will need the following:

1. Figma and Notion accounts (surprise, surprise!) 🙂
2. The Sync Notion plugin, which can be found here.
3. Consider trying or purchasing Notion AI, as it is a great tool that can take your work to the next level. If you do not have a UX writer, it can be especially helpful. Actually, that’s a spice for this recipe.

My Notion database

Cooking

1. Carefully read the plugin’s instructions, which are detailed and cover setting up Notion, the plugin, and Figma. At this step, there is no need to populate the database.
2. Name the layers in your Figma file using a taxonomy strategy. Consider connecting functionality and content. Choose names that are readable and discoverable in your database as it grows. Consider using camelCase, but don’t worry too much about name length.
3. Populate the database. In this case, a different set of columns than in the instructions were used for localization. You can experiment with different formats, but simpler is better.
4. Run the plugin and sync.

My Figma layers

I followed these steps myself. The most time-consuming parts of this process are setting up the plugin, preparing the text layers, and building the database in Notion. Regarding Figma, while my example is not text-heavy, there are many text layers. Once set up, copying components will work for you, and updating just one place will suffice.

Tips and tricks

First, I used Notion AI to generate ideas for the tool name, additional features, provide disclaimers for informational modals, and for translation. We operate in four markets, and localization is important. Notion AI does a great job with this.

My Notion page has evolved into a sandbox with various ideas for product development, naming ideas, a collection of texts, and an overview of the designs. It’s solid.

Secondly, in Figma, I organized everything using auto-layouts to ensure that the design is developed in the expected way. This way, I don’t have to worry about text not fitting inside boxes, overlapping text, or any other unpleasant surprises. However, be mindful that formatting might be lost when mixing styles or using fractions.

Potential challenges

1. Setting up text connections can be time-consuming and requires careful control.
2. You may need to reorganize your current Figma file structure, especially if you require localization. In my example, the database does not allow you to update both locales on the same page.
3. You will need a backend counterpart to make it work both ways: from Notion to Figma and from Notion to development. This should be the desired state.
4. This solution may not address some challenges that other teams, such as marketing, may be facing.

As designers, the challenges mentioned above are not particularly daunting. In fact, given that large tools like Contentful still do not integrate well with Figma, this solution is ideal. It offers a lean and robust CMS, as well as a reliable source of truth for copywriting.