Making copy updates a breeze in Sketch

A Sketch plugin that decouples copy from visuals, to let writers and designers update each other’s work in a streamlined, non-destructive way.

(update: the plugin is broken in the last few version of Sketch. Feel free to fork the project and fix it, it’s all open source :) )

For all the talk of integrated, holistic design teams, much of the day-to-day work we actually do as design professionals is individual. Sure we bounce ideas back and forth and invent together — but for most of the heads-down hours spent on a project, designers and writers work on their own.

At Heist, the first draft of a page or component is written alongside early designs. I include early versions of real content in wireframes, and I’ll work side-by-side with designers to reach a rough mock-up stage. From there, they start pushing the visuals further while I polish the copy — which makes it hard to merge our work when we compare notes at the end of the day. Sometimes I’ll copy their Sketch file and paste in new content before sending it back to be merged with their latest designs—clearly an unsustainable, error-prone practice. Once we get into development, copy changes are often rolled right into HTML, leaving the design files hopelessly obsolete.

It would be easier if a designer and writer could start from the same artifact (an early mockup or wireframe), push ahead individually, and merge their work at a later date. New copy should be inserted into the latest design without any copy-pasting or file duplication.

Kristof Houben wrote an article on multilingual design in Sketch, which offered a solution to localisation in the form of a Sketch plugin. My coworker, Eric, and I immediately saw how it could be adapted for a design and copy process. After some tweaks to the original code, Sketch Copy Editor was born.

Keeping it real simple with just two buttons.

I’m going to show you what this simple plugin does in two steps, and how it can make the design writing process much easier.

1. Break copy out of the design file

As I mentioned earlier, we usually start drafting copy for a page or component with the designers, and what we end up with is an initial wireframe or early-stage design in Sketch. It might look something like this:

Our document is pretty straightforward: we have some design elements and some copy. You can see in the Layers panel on the left that we’ve given all of our layers unique, descriptive names. This is always important when working on a team, but it’s especially important for us — because when we export the copy we want everything neatly outlined with no confusion.

Generating a copy deck from the content in a Sketch file

After running the “Generate copy deck” command and following the instructions (pasting our clipboard into a text editor, then saving it as a .json file), we get this:

Now I have a file containing all the copy on the page separate from the design. Since we named our layers properly, I can see exactly what each text element is for, and its content. I can do all the editing and wordcrafting I want in my own time, and all the designer has to do is…

2. Update the design with new copy

Normally, when I send updated content to a designer they need to do a ton of copy-pasting from a spreadsheet to update the design. This plugin lets them quickly import a JSON file that inserts the new copy, even if the visual design has changed drastically. Check it out:

check out the not-small version of the video here:

Notice how, even though the design changed and elements were removed, the new copy was seamlessly inserted in place of the old. No more copy-pasting from spreadsheets. The only hiccup would be if the new copy is significantly longer than the old, causing overflow in the text box — something easily fixed as the designer continues working.

The best part is that this was done non-destructively. The plugin made an exact copy of the design to a new “Page” of the Sketch file before updating the content, so you have every iteration saved for process and posterity. Oh, and we sync these files over Dropbox, so the latest content is always available to everyone on the team.

Wrapping up

This workflow is still pretty new, but it’s already changing how designers and writers work together here at Heist. The next steps for Sketch Copy Editor are to make the copyediting experience simpler and easier — right now we’re editing JSON files in a text editor, but what if we could automatically import copy into Google Docs, or even a custom interface?

Check out Sketch Copy Editor on Github, and let me know on Twitter if you have any ideas, advice, or questions!