At Ditto, we believe that text is part of design (in fact, the most important part of any design!). A great user experience requires copy and visual design to work together — one can’t exist without the other.

Despite this, existing workflows on teams often treat the copy and the visuals as separate entities, with visuals getting rapidly iterated on in the mockups, while copy is left behind and worked on like Word docs or Google Sheets.

Ditto has always empowered teams to close the gap between copy and design with features like our two-way sync between Ditto and Figma, mockup previews in the web app, and our Figma plugin (that allow teams to use all of Ditto’s features directly in Figma). Today, we’re excited to announce a feature that takes that one step further: Design View in the web app! 🥳

With Design View, teams can keep visual context front and center as they’re editing copy in the web app, ensuring that the text and the visuals remain tightly coupled throughout the entire design process.

How does it work?

• Work on copy in whatever context suits your needs. Easily toggle between two modes as you’re editing copy on each frame: Text and Design View. Use Text View when you want to focus on the content, structure it, and get an overhead view on text metadata. Switch to Design View whenever you want more context on how and where text is being used.
• Stay up-to-date on the latest changes to mockups. In Design View, you’ll be able to see a snapshot of what the Figma file currently looks like, making it easy to stay informed on whether the mockups have the latest copy, or copy changes have been made without your knowledge.
• Take advantage of all of Ditto’s text management features. Design View is fully compatible with all of Ditto’s existing features to help you save time and streamline collaboration when working on copy with your team. Regardless of what view you use, you’ll be able to reuse text via Ditto components, search text across your project, mark status, assign text, and more.

To get started, just open up one of your projects in Ditto’s web app! To learn more, read our full help guide here.

‍