Oftentimes, viewing copy in its visual context is essential. For both writers and any stakeholders reviewing the copy, visuals can be critical for understanding where and how copy is being used -- where it's placed on a screen, what else a user will see, and what part of the flow it's on.
With image previews in Ditto, you can see frame-by-frame previews of your Figma mockup. You'll also be able to toggle a highlight box that shows the location of the text you're working on. Any teammates in your workspace (including users with comment-only permissions) can view images, so you can make sure all stakeholders are getting the full visual context, whether they're editing or reviewing copy.
👉Quick note: Image previews are only available for Ditto projects linked to Figma, not draft projects. For more information on the difference between Figma-linked projects and draft projects (as well as how to use each), head to our guide to drafting text in Ditto and our guide to Figma-linked projects.
There are two ways to see previews:
This will open up a modal where you can view a full-size version of that Figma frame.
When you select a piece of text, you'll see the image under a the "Figma Frame Preview" section at the bottom of the Edit panel.
You can also click on the image to enlarge it!
For any piece of text, you'll also be able to click the "Highlight" button (or the icon at the top of the enlarged modal) to highlight that the text you've selected in the image. The box that's drawn reflects the text box in the Figma file.
A few notes: