Figma: Text formatting in the CMS

Introduction

One of the problems that you might identify is that text formatting (bold, color, link, italics, etc.), set in the Figma CMS, is not reflected in XTM Workbench, in the form of inline tags, when the content is sent to XTM Cloud for translation. This might then cause some additional work for the design team, who need to format the translated content again once it is imported back to Figma.


How does text formatting work in Figma?

The Figma CMS stores formatting information per character, not per word. This implies that the resulting text will never be the same length as the source text. Moreover, programmers cannot predict all the intentions behind set formatting attributes, and most importantly, which particular string in the resulting file corresponds to a word from the source file. Therefore, in order to avoid differences in text formatting, Figma resets the formatting of the text layer to that of the first character, by default.

In the Figma API, it is not possible to set more than one formatting attribute per layer, for uploading the text. In other words, you cannot format particular words or characters differently from others within the framework of one layer. When a text that has different formatting styles applied to it is placed in a single layer in Figma, the translation will not have that formatting preserved. For instance, if you have one word bold, one italic, and one underlined, within one layer, these formatting styles will not be there once the translation is imported back to the CMS:

To avoid this problem, strings with unique text formatting need to be in a separate layer. Then, the formatting of translated content should be unchanged, compared to the source text.


Figma implementation and licensing restrictions

Figma does not provide information about custom fonts in its API due to copyright and licensing issues regarding those fonts. Due to Figma's current policy and API implementation, it is impossible to implement support for custom fonts that are available locally in a project. For more information, see the following official text, which should shed more light on the issue: https://www.figma.com/plugin-docs/working-with-text/#mixed-styles.

This is a limitation within Figma. Since Figma has not implemented that functionality, the XTM International team is not able to apply any solution that would comply with Figma’s licensing provisions. If you are interested in finding out whether Figma plan to implement an easy way to handle fonts in their system, including the UI and API, we suggest that you contact Figma directly.