Ditto’s design view allow your teammates to see all the visual context of a text item, even if they don’t have access to your Figma files. Seeing copy inside its designs provides you additional context about 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.

Ditto’s design view and text view offer different advantages for editing and reviewing text in context of your design. Easily toggle between the two views by clicking the button in the top left corner inside your Ditto project.

By default, if your project is connected to a Figma file, your project is displayed in design view. All the frames added to this project are displayed in the frames sidebar on the left hand side for easy navigation between frames, while the center canvas shows the design preview of the frame you’ve currently selected. Any text layer on the frame can be clicked to display the details panel for you to edit or review.

Switch to a different page to see view all of the frames on that Figma page.

Switch to the text view to see all of the text items in your place in a single place. Your center canvas lists your text items, giving you a clear overview of your project. Filter based on status, assignee, and tags to easily find the text you’re looking for. Click on any text items to open the details panel to edit or review that piece of text. If the text item is linked to a text layer in your design, click View in the details panel to jump into the design view.

While in design view, you can create text items, edit copy, update text properties, attach library components, and more — just like in the Figma plugin.

The design preview shows a snapshot of the Figma file as it is at the moment after the latest sync). 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 design preview will be updated to reflect that change.

Your Figma file will sync automatically with Ditto whenever the Figma plugin is open.

To ensure you're seeing the most up-to-date version, trigger a sync by clicking the sync icon (↻) in the top right of your project page.

When you don’t have any frames selected in the design view, you will automatically enter Grid view. This gives you a high level overview of all the frames in your project directly in Ditto, organized based on Figma pages.

The frame sidebar contains all of the frames in your project for the Figma page you’re on, and provides an easy navigation option between frames. Each of your frame is represented by its thumbnail and Figma frame name for quick identification.

Scroll through the sidebar and click on a frame to view its design and copy in the center design preview canvas. Alternatively, click the arrow keys located at the top of the sidebar to cycle through your frames one-by-one.

Filter your frames in design view and grid view to better find the frames and copy you need.

Add frame filters: