How to review translations on the Figma design in the Editor
When a work unit comes from the wxrks Figma Plugin, the Editor preview shows the actual Figma screens and paints each translation over the original text. You can see how it fits the layout and spot text that no longer fits before the translations go back to Figma.
💡 Who is this for? Vendors translating or reviewing Figma work units, and Project Managers checking a Figma project before delivery. No extra permission is needed: if you can open the work unit in the Editor, you can use its preview.
Before you start:
The work unit must have been sent from Figma with the wxrks plugin. Its preview opens as Figma automatically. See wxrks Preview: Supported File Extensions for how preview modes are picked.
Translations are painted only on pages pushed with the current version of the plugin. Pages pushed earlier still show the design, but not the translations (see Troubleshooting).
1. Open the Figma preview in Target view
Open the Figma work unit in the Editor. The preview panel opens below the segment list and shows every screen (Figma frame) of the page, one below the other, each labeled with its frame name.
Look at the side button in the preview's left-hand menu. Figma work units always open on SRC (Source view): the design exactly as it was pushed from Figma, in the source language.
Click SRC to switch it to TGT (Target view). Each text in the design is replaced with its current translation.
💡 To give the design more room, click Expand (the + icon) in the preview's left-hand menu. Each click makes the preview panel taller. Reduce (the − icon) shrinks it again.
ℹ️ Target view is an approximation. The preview reuses the font, size, weight, color, alignment, and line spacing recorded in Figma, but your browser renders the text, not Figma. If a font isn't installed on your computer, a similar system font is used instead. Use the preview to judge fit and context, not exact typography. The footer reminds you of this: Target view. Approximate preview. Fonts and formatting may not be accurate.
2. Load the segments you want to see translated
⚠️ The preview doesn't paint every translation at once. The Editor loads segment text gradually, as you scroll through the segment list. The preview can only paint the translation of a segment that is already loaded in the Editor. Until then, that text keeps showing the source on the design, even if it's already translated. Don't take a source-language text in Target view as a missing translation until you've loaded its segment.
While some segments on the page are still unloaded, the footer shows Translations show as segments load. Hover it to see the reminder Scroll the editor to load the rest.
To load the segments behind a text, do either of the following:
Click the text on the design. The Editor jumps to that segment and loads it together with the segments around it, so their translations appear on the design right away.
Scroll the segment list down to those segments. They're loaded as they come into view.
💡 Before reviewing a long page on the design, scroll through the whole segment list once. That loads every segment, so the whole page shows its translations.
3. Find a segment on the design, and the reverse
The preview and the segment list stay linked in both directions:
From the segment to the design: click a segment in the list (1). The preview scrolls to that text and highlights it in yellow (2), so you know where it sits on the screen.
From the design to the segment: click any text in the preview. The Editor jumps to that segment and puts it in focus, ready to edit.
ℹ️ The design updates when you move on to another segment, not on every keystroke. Edit a translation, go to the next segment, and the new text appears on the design.
To see every translatable text area at once, click Show all boxes (the grid icon) in the preview header. Click it again to view the design without outlines.
4. Spot texts that don't fit
Translations are often longer than the source. As it paints each translation, the preview checks it against the space the original text had in Figma and marks the result. The footer counts each kind (1, 2):
Marking in the preview | Footer message | What it means | What to do |
Solid red box | N texts overflow the original box | The text has a fixed size in Figma, and the translation needs more lines than fit. In Figma, it will be clipped or spill out of its box. | Shorten the translation, or let the designer know the box needs more room. |
Dashed amber box | N auto-size texts grow with the translation | The text auto-resizes in Figma, so the box will grow to fit the translation instead of clipping it. This is not an error. | Glance at the surrounding layout: a growing text can push or overlap nearby elements. |
Hover a footer message to see what its marking means.
ℹ️ For auto-width texts, small differences are tolerated: a text is marked as growing only when the translation is more than 5% wider than the original.
5. Navigate large pages
Use the controls in the preview header:
Zoom out / Zoom in step through 10%, 25%, 50%, 75%, 100%, 150%, and 200%.
The middle button shows the current zoom. Click it to go back to Fit, which scales each screen to the panel width.
The refresh button (Refresh the preview with the latest translations) reloads the design and repaints it.
A page that holds many screens loads in pieces: each screen's image and translations are drawn as it scrolls into view in the preview. This is separate from segment loading (see step 2).
Troubleshooting
What you see | Why | What to do |
Footer says Re-push this page from the Figma plugin to see translations over the design. | The page was pushed from Figma before translations could be painted on the design. Only the Source view is available for it. | Ask whoever manages the Figma file to send the page again from the wxrks Figma Plugin. |
Footer says Preparing the translated preview… | The preview is still loading the images it needs to cover the original text. | Wait a few seconds. On large pages this can take longer. |
A frame shows Image unavailable for this frame | The image for that screen couldn't be loaded. | Click the refresh button in the preview header. |
Footer says No design image was uploaded for this work unit. | No design was sent with this work unit, so there is nothing to preview. | Send the page again from the Figma plugin. |
You do not have permission to view the design reference | Your user can't access the design files attached to this work unit. | Ask your Project Manager or Account Admin to check your access to the project. |
Some texts still show the source language in Target view | Those segments aren't loaded in the Editor yet (the footer shows Translations show as segments load), or they have no translation yet. | Click the text on the design or scroll the segment list to load it. If it still shows the source, translate the segment. |