Image previews

‍

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:

1. Click the image preview button on any frame in the canvas.

This will open up a modal where you can view a full-size version of that Figma frame.

‍

2. Select a piece of text.

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:

• Image previews are created for top-level frames in your Figma file. If you'd like to change what's shown in the images, you'll need to edit those top-level frames.
• It can often take a bit of time to fetch the images, especially when you first import a file. If you get a message that says the images are still being fetched, wait a few minutes and then refresh the page to load them in!
• If you're working on more visually-complex mockups, use our Figma plugin directly in your Figma file for more control.
• Are you seeing incorrectly-positioned highlight boxes? This is likely due to how the Figma file is set up. To ensure the highlight boxes are positioned correctly, check the "Clip content" setting for all your top-level Figma frames.