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.
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.
more :Image previews
Post a Comment