Design previews allow your teammates to see all the visual context of a text item, even if they don’t have access to your Figma files. By viewing your text in the Figma mockups, you can see its placement, surrounding elements, and the overall flow. This is especially important when writing or reviewing copy, ensuring stakeholders understand exactly how text will appear.

See design previews in the web app

Enter design preview mode

1. Select a piece of text
2. Click on Design preview in the web app’s top right corner or Preview in the details panel
3. You’ll enter Design Preview mode, where you’ll see a full-size version of the Figma frame containing the selected text. If the text has multiple instances, all frames with that text will be displayed.

Text and frame view

Ditto’s two design preview modes offer different advantages to editing and reviewing text in context of your design: Text view and Frame view. Easily toggle between the two modes by clicking the design preview mode button.

Text view

By default, design previews are displayed in Text view. In this mode, all of your project text are listed on the left hand side, and all frames from your Figma file containing the selected text item are shown. You can easily jump between different text items to make edits and scroll to see how the text appears in different frames.

<aside> 💡

Select a text item in Text view to see all of its Figma frame instances

</aside>

Frame view

Toggle to Frame view to load all the frames for your text items on a specific Figma page. This is particularly useful for reviewing and editing text in a natural flow of how frames are displayed in your Figma page.

For example, your project manager reviews your app’s onboarding flow by clicking through each frame of the onboarding steps. They can select text items on each frame to make comments and approve them by updating the status to 🟢 Final.