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:
Select a piece of text
Click on Design preview in the web app’s top right corner or Preview in the details panel
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 linked 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.
💡 Select a text item in Text view to see all of its Figma frame instances
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.
💡 Review your frames in Frame view to navigate through your workflow as it’s organized in your Figma file
Switch to a different page to see view all of the Ditto text item frames on that Figma page in Frame view.
Edit in design previews
While in Design Preview mode, you can edit the text, update its status, assign copy, attach library components, and more — just like in text view.
The design preview shows a snapshot of the Figma file as it is at that moment. Any new edits made from the web app will be marked with a blue pen icon in the design preview. Once the Figma file has been synced with the latest version, the mockup in the design preview will be updated to reflect that change.
Fetch the latest design preview
Your Figma file will sync automatically with Ditto as long as the Figma plugin is open. However, design previews can take a little longer to load.
To ensure you’re seeing the most up-to-date version, manually sync the preview by clicking the sync icon (↻) in the top right of your project page.
