When working on copy in Ditto’s web app, you can put visual context front and center by toggling to the Design view for any frame in a project.
By default, all frames in a project will start off in Text view. To switch to Design view, just click the toggle at the top right of the frame:
Ditto will preserve your view selection per frame across sessions — if you’ve toggled to Design View for a particular frame, then close the project, that frame will still be in Design View the next time you open that project.
To select text in the Design View, just hover over any text in the image and click. You can also select multiple text items at once using our keyboard shortcuts (CMD/ CONTROL or SHIFT), just like in Text View.
Once you’ve selected text, you can take all the same actions in the Edit panel that you can in Text View, including editing that text, marking status, adding assignees, attaching components, and more.
If the images in the Design View are being fetched or updated, you’ll see a loading icon.
The image that’s displayed in the Design view is a snapshot of what that corresponding Figma frame currently looks like in the Figma file. As a result, if you edit text in Ditto and haven’t yet synced that edit back into the Figma file, the image preview will reflect what’s currently in the Figma file. When this happens (the text in Ditto is not synced to Figma yet), Ditto will display an icon on the text item in the image, which you can hover over to view more details.
