Rewrite design copy with Avocode Write for Adobe XD

Avocode Write Plugin for Adobe XD banner.

By Jack Yu

Posted on 09-14-2020

A key part of any great user experience is excellent copywriting throughout the user journey. It can be challenging to find the right words to convey a particular message in your interface design, especially when you’re working with sizing constraints, branding requirements, evolving messaging, and other challenges. Whether it’s for a call-to-action button or a sign-up modal, teams often need to go through multiple copy versions before landing on the final one. Having a well-defined process for iterating on changes to copy and collaborating with your extended team is crucial for designing powerful user experiences.

Avocode is a design hand-off tool for asynchronous web and mobile app development, copywriting, and design review workflows. Many teams use Avocode as the ultimate source of truth to work with design files and to more quickly build digital products with outstanding interface design.

With the new Avocode Write plugin for Adobe XD, you’ll be able to hand-off Adobe XD artboards for copywriting, text editing, proofreading, review, and inspecting, and then import any changes back to XD. Avocode Write enables all of your team’s stakeholders — including content creators, UX writers, and copywriters – to edit copy in XD designs in the browser, without any accidental design changes.

The Avocode Write plugin for Adobe XD is part of a recently launched collection featuring popular UX copywriting and localization plugins. Check out the full collection in the XD Plugin Manager.

Adobe XD

Create and share designs for websites, mobile apps, voice interfaces, games, and more.

Learn more

Get started with Avocode Write using real copy to edit designs

The Avocode Write plugin for Adobe XD helps you rewrite copy effortlessly while also enabling seamless collaboration with all of your team’s stakeholders. Here are some quick steps for getting started with Avocode Write:

Step 1: Sync Adobe XD designs to Avocode

Create an Avocode account and download the Avocode desktop app, which is needed for seamless design sync. Make sure your Avocode desktop app is running and you’re logged into your Avocode account. Then, install the Avocode Write plugin on Adobe XD directly from the XD Plugin Manager.

The Avocode Write plugin installation and overview page in the Adobe XD plugin manager.

Go to Plugins/Avocode Write and hit Sync to Avocode.

The 'Sync to Avocode' button is highlighted in the plugin panel of an Adobe XD project.

Next, the Avocode desktop app will open so you can assign the design into a project:

After syncing an Adobe XD project to Avocode the desktop app launches with a prompt to assign the file to a project.

Step 2: Open your XD design in Avocode Write and start editing text layers

Text in Adobe XD artboards that are synced to Avocode can be edited from the Avocode app.

All synced XD artboards will open in view. Click on text on any artboard to rewrite it. Avocode will count your characters and indicate if the new copy suggestion is overlapping text layer bounds. When you’re done rewriting each text field, hit Save.

After editing Adobe XD artboard text fields in Avocode a Save or Cancel prompt appears.

Soon, Avocode will also add contextual comments at the top for facilitating team collaboration and feedback. Stay tuned for this feature coming in late September or early October.

Step 3: Share the design with others who might need to edit copy

You can send private links to other Avocode users. For stakeholders who don’t use Avocode, you can also share a Public link, which will enable them to review and suggest copy changes.

Find the XD design in Avocode and open it in Write (as described above). Hit Share and copy a public or private sharing link.

Generating a public, shareable link in the Avocode desktop app.

Step 4: Pull text changes back to design

Open the respective design in Adobe XD. (You can also download it from Avocode.)

Next, install the Avocode Write plugin from this link or search for Avocode Write in the Adobe XD plugin manager.

Go to Avocode Write and either copy a Public sharing link or hit “Sync to design.” Copy the link.

Instructions for syncing Avocode text to designs in Adobe XD.

In the Avocode Write plugin for Adobe XD, press Set Avocode Write URL and paste the link from Avocode to the XD plugin.

The 'Set Avocode Write URL' button is highlighted in the plugin panel of an Adobe XD project; selecting it launches a prompt to connect an Avocode URL.

Now that you’ve connected the file living in Avocode Write to your Adobe XD document, you can hit Pull text changes. This way, all the latest copywriting changes will be propagated to your design text layers. If some new text variants are longer than you styled them before, it’s time to polish the design layout.

The 'Pull Text Changes' button is highlighted in the plugin panel of an Adobe XD project that has been connected to an Avocode Write URL.

The Avocode Write plugin for Adobe XD brings together all of your team’s stakeholders to seamlessly rewrite copy, helping you create rich interface designs.

Start rewriting text and collaborating on design copy in your XD designs by downloading the Avocode Write plugin for Adobe XD from the XD Plugin Manager.

Stream Adobe MAX

Download the Creative Cloud mobile app today to discover tutorials and livestreams, and so much more, and you’ll be ready to stream the MAX Conference sessions from October 20-22 directly from your device.

Download now

Topics: News, Creativity, Design, High Tech, Creative Cloud,

Products: XD,