Figma: Sorting content in an XTM Cloud source file

Guidelines

General rules

The sequence in which Figma content is extracted and sorted in an XTM Cloud source file might not seem obvious, but it follows quite a simple pattern. To keep your text in a clear, logical sequence, in Workbench, bear these principles in mind:

XTM Connect – Figma sorts content in a source file according to the sequence in which elements occur in the frame preview, not in the content tree, which can be seen on the left-hand side of an individual file. The way the elements in the content tree are arranged has no influence on the text sequence in Workbench, once an XTM project has been created. What actually matters is the sequence in which elements occur in the preview of the grouping element, e.g. frame, that you select, to pick up its content for translation in XTM Cloud.

Generally, XTM Connect – Figma sorts elements inside the grouping element in reading order – left to right and then top to bottom. However, content can be structured in a variety of ways. In the case of XTM Connect – Figma, the most important thing is the nesting level of elements. This is decisive in the further positioning of text in Workbench. This concept is explained below, using an example of two primary grouping elements: groups and instance nodes.

IMPORTANT!

Keep in mind that groups or instance nodes are only examples of a grouping element, and they are not the only ones. Also, they both can serve as primary grouping elements.

Not maintaining column order

If you use an additional external grouping element, such as groups, which directly encapsulates other grouping elements (in this case, instance nodes), it is your primary grouping element. XTM Connect – Figma first detects each primary grouping element. It then processes each one, in order of appearance. It then looks for individual text elements inside the primary grouping elements and sorts them in reading order (left to right and then top to bottom), based on their relative position to your grouping element (group). That grouping element is the first direct child of the marked elements (in this case, this grouping element is a direct child of the selected frame).

As a result, XTM Workbench will display the text in the following sequence:

  • This figure shows the effect of having an additional external grouping element:

IMPORTANT!

For XTM Connect – Figma to work in the way that is presented above, avoid nesting groups, i.e. do not create groups inside other groups. If you do, the resulting content structures that might be highly complex. If so, XTM Connect – Figma might not be able to sort the content properly, in Workbench.

Maintaining column order

If you do not use any additional external grouping element that would directly encapsulate other grouping elements, but you have only one grouping element (in this case, instance nodes), it is your primary grouping element. XTM Connect – Figma first detects these primary grouping elements and then processes each one in order of appearance. It then looks for individual text elements inside these primary grouping elements and sorts them in reading order (left to right and then top to bottom), based on their relative position to your grouping element (instance node). That grouping element is the first direct child of the marked elements (in this case, this grouping element is a direct child of the selected frame).

As a result, XTM Workbench will display the text in the following order:

  • This figure shows the effect of having only one grouping element: