Visual Context Preview shows the original Figma design next to the segments you're translating or reviewing in the wxrks Editor. Each translatable text on the design is linked to its segment, so you can jump from a text on the design to its segment and back. There's nothing to set up: the preview loads by itself for work units sent from Figma.
To check whether each translation fits its space on the design, see How to review translations on the Figma design in the Editor. This article covers the preview itself: when it appears, how it links to segments, and its controls.
Audience and access
The preview uses the same access as the Editor: if you can open the work unit in the Editor, you can use its preview. Every role sees the same preview and controls.
Role | What you use the preview for |
Vendor | Translate or review an assigned Figma work unit with each text's place on the design in view. |
Project Manager | Open a Figma work unit to check progress or context, and help a Vendor whose preview doesn't load (see For Project Managers and Account Admins below). |
Account Admin | The same as a Project Manager. Also the person to ask when a user gets a permission error on the design. |
Key concepts
Term | Meaning |
Figma work unit | A work unit created from a Figma page with the wxrks Figma Plugin. Its file name ends with |
Frame | One screen of the Figma page. The preview shows each frame as its own image, labeled with its name. |
Text box | The area on a frame where a translatable Figma text sits. When the Editor splits one Figma text into several segments, those segments share its text box. |
Source view / Target view | The two sides of the preview. Source view shows the design exactly as it was sent from Figma. Target view paints the current translations over the design. |
When the preview is available
The Editor opens Visual Context Preview automatically when both of these are true:
The work unit's file name ends with
.figma.json.The page was sent from Figma with a version of the wxrks Figma Plugin that includes Visual Context Preview. The plugin sends the design images along with the text, so no one has to upload them.
For any other file, the Editor picks a different preview mode. See wxrks Preview: Supported File Extensions.
Open the preview
Open the Figma work unit in the Editor.
If the preview panel is hidden, click Show/Hide preview (the eye icon) in the Editor header.
The preview panel shows the Figma page name at the top and every frame of the page below it, one under the other, each labeled with its frame name. Frames load as you scroll them into view, so a page with many screens doesn't load all at once.
ℹ️ Note: A Figma section, or a board too large to show at a readable size, is split into its individual screens. Each screen gets its own label, such as Section 1 / Checkout. This applies to pages sent with the current plugin version.
Source view and Target view
Figma work units open in Source view: the design as it was sent from Figma, in the source language. To see the translations painted over the design, click the side button (SRC) in the preview's left-hand menu to switch it to TGT (Target view). Click it again to go back.
Target view is covered step by step in How to review translations on the Figma design in the Editor, including which texts it flags as not fitting.
Move between the design and the segments
The preview and the segment list stay linked in both directions, in either view.
From the design to a segment
Click a text on the design. The Editor jumps to the matching segment and puts it in focus. If the text box is shared by several segments, the Editor jumps to one of them. To see every text box on the page at once, click Show all boxes (the grid icon) in the preview header.
ℹ️ Note: This works in the preview panel inside the Editor. In a preview opened with Open in new window, clicking a text doesn't jump to its segment.
From a segment to the design
Click a segment in the list. Its text box is highlighted on the design, and the preview scrolls to it. If a segment has no text box on the design, the highlight clears; that's expected, not an error.
Preview controls
Preview header
Control | What it does |
Zoom out / Zoom in | Step through 10%, 25%, 50%, 75%, 100%, 150%, and 200%. |
Zoom label (middle button) | Shows the current zoom. Click it to return to Fit, which scales each frame to the panel width. Fit is the default. |
Show all boxes (grid icon) | Outlines every text box on the page. Disabled when the work unit has no text boxes to show. |
Refresh the preview with the latest translations (refresh icon) | Reloads the design and its text boxes for the current work unit. |
Preview left-hand menu
Control | What it does |
Hide Preview | Closes the preview panel. Reopen it with Show/Hide preview in the Editor header. |
Open in new window | Opens the preview in a separate browser window. |
Fullscreen | Expands the preview to fill the screen. |
Expand (+) / Reduce (−) | Makes the preview panel taller or shorter. |
SRC / TGT | Switches between Source view and Target view. |
Preview Mode | Lists the preview modes available for the work unit. |
For Project Managers and Account Admins
Vendors never upload design files for the preview: the wxrks Figma Plugin sends the design images and text box positions together with the content. Your part is keeping that design current and unblocking Vendors.
Where the design is stored: with the project, but not in its Reference Files list. It can't be removed as an ordinary reference file.
Keeping it current: the preview shows the design as it was when the page was last sent from Figma. If the designer changes the page, send it again from the wxrks Figma Plugin so Vendors don't translate against an outdated layout.
When a Vendor reports a missing preview: check that the work unit's file name ends with
.figma.jsonand that the Vendor can open the work unit in the Editor. If the Vendor sees You do not have permission to view the design reference, check the Vendor's access to the project or task. If the preview says No design image was uploaded for this work unit., send the page again with the current plugin version.
Troubleshooting
What you see | Why | What to do |
No Figma preview in the Editor | The preview panel is hidden, or the work unit wasn't created from Figma. | Click Show/Hide preview in the Editor header. Check that the file name ends with |
Loading the design... doesn't finish, or Unable to load the design | The design couldn't be loaded for this work unit. | Click the refresh icon in the preview header. If it persists, ask your Project Manager to send the page again from Figma. |
You do not have permission to view the design reference | Your user can't access the design stored with this work unit. | Ask your Project Manager or Account Admin to check your access to the project. |
No design image was uploaded for this work unit. | No design was sent with this work unit, usually because it was sent with a plugin version older than Visual Context Preview. | Ask your Project Manager to send the page again with the current wxrks Figma Plugin. |
A frame shows Image unavailable for this frame | The image for that one frame couldn't be loaded. The other frames keep working. | Click the refresh icon in the preview header. |
Clicking a text does nothing, or Show all boxes is disabled | The work unit has no text box positions. | Ask your Project Manager to send the page again with the current wxrks Figma Plugin. |
For messages that only appear in Target view, such as Re-push this page from the Figma plugin to see translations over the design., see How to review translations on the Figma design in the Editor.
Related articles
How to review translations on the Figma design in the Editor: check how translations fit the design in Target view.
wxrks Figma Plugin: send Figma pages to wxrks and bring translations back.
wxrks Editor: the rest of the Editor's layout.
Previewing InDesign (.IDML) files in the wxrks editor: the equivalent layout preview for InDesign work units.