Li Zheng
Bay Area, CA
lz@lzheng.com

Sketch Plugin: Copy Updater

  • Team

    Solo Project

  • Role

    Design, Develop

  • Duration

    May - Jun 2020

Open Project

The Challenge

Designing with real data can help make decisions on text truncation, define white space and content size to keep a good balance, and improve readability.

However, a piece of text may often be reviewed and modified by different parties for perfection, some temporary text may repeatedly appear in multiple places to compose a flow such as an interim feature name. Updating a word in these situations manually is a labor-intensive task and sometimes may cause unexpected mistakes.

  • Repetitive work
  • Unexpected mistakes
  • Coordinate difficulties
A task to update all copy from style 1 to style 2

Scope & Constraints

The solution is going to be used inside the company where security and information confidence is always the priority. Therefore, third-party services with cloud storage are forbidden. 

Because PMs, copy-writers, and other designers are also going to utilize it, the solution cannot go beyond a common tool or service across all the parties.

  • No new third-party service
  • No additional tool/software
  • Solo project & lack of coding experience
Common tools that PMs, Designers and Copywriters are using are Zepline and OneDrive

Research

Designer

Needs

  • Use real data and meaningful text other than placeholder copy from the beginning of ideation.
  • Get a reminder when there is a new version of texts.
Designer

Pain Points

  • Spend a long time updating texts on multiple screens for a minor change such as fixing a misspelling.
  • Leave several mocks with an old version of texts due to carelessness.
PM

Needs

  • Have a single source of truth for texts across all projects.
  • Have screens with the most recent copies ready as early as possible for developers to implement.
PM

Pain Points

  • Lose track of copy versions.
  • Forget to notify designers that there is a text update request which results in outdated mocks in the project.
Copywriter

Needs

  • View the updated result as soon as possible.
  • Keep track of copy revision history.
Copywriter

Pain Points

  • Provide the same guidance for the same piece of text on every single screen it appears
  • Tag all designers working on a certain product every time a piece of text needs an update.

Ideation

Apart from a Sketch document, generating a separate text file allows copy revision and UI iteration to move forward simultaneously. By utilizing OneDrive, or any other cloud storage services allowed in the company, all parties can contribute to the copy without the limitation of accessing the Sketch tool.

Thus within the constraint, I decided to develop a Sketch plugin that can sync a copy file and a Sketch document.

Thoughts of split design files from copy files

Has to have

Format Restrictions

All editors have to follow a certain convention while editing copies. This rule has to be enforced by a mechanism other than consciousness because we may make mistakes.

Customizable Structure

Due to the complexity and difference of each project, the structure of copies may be various. This format has to adapt and support more than two dimensions.

Nice to have

Co-editing

Multiple editors work together on a single text tile in real-time.

Commenting

All stakeholders can provide their contextual comments.

Reminder

Designers get a notification when a piece of copy is updated.

History

Keep track of a copy revision history with each author’s information.

Solution

With Sketch’s very detailed developer-facing resource site, its official developer tool plugin, and ample open-source examples, I was able to easily pick up development while learning.

User Flow 1: PULL

Start preparing strings in a JSON file and then use @key as a string content or an override data of a symbol in a Sketch document. Link the JSON file and pull corresponding strings for selected elements.

1. Prepare

2 JSON examples

2. Use @key

Fill @key for symbols with overridable copies.

3. Link & Pull

Go to Plugins, Click on Copy Updater, then Link JSON

User Flow 2: PUSH

Work as usual in a Sketch document and pay more attention to each text and symbol name as they will be used as keys in a JSON file. Generate a JSON file for selected elements and then push updates to the same file.

1. Prepare

Initial setup with appropriate naming for each layers

2. Generate

Go to Plugins, click on Copy Updater, then Generate JSON

3. Push Updates

Go to Plugins, click on Copy Updater, then Push to JSON

User Flow 3: CHECK

It’s always a challenge to keep track of string revision while working on multiple projects with different teams. Instead of manually pulling all the strings whenever switching projects to ensure no text is left behind, a check mechanism can extremely improve efficiency. It scans every editable text area, compares them with the linked JSON file, and list all unsynced strings for users to decide what to do next.

1. Check

Check dialog with initial settings

2. Pull or Push

Check dialog with different update directions

3. Update or Ignore

Check dialog with one checkbox checked and the rest unchecked

User Flow 4: TRUNCATION

When working on multiple platforms for the same project, according to different screen sizes the same piece of string may require truncation to fit the layout. To reduce duplicated copies, this tool also supports the truncation feature.

Tail Truncation

Truncation demo

Tail Truncation + Ellipsis

Tail truncation demo

Middle Truncation + Ellipsis

Middle truncation demo

User Flow 5: GENERATING EXCEL

Our copywriting team requested to have a feature exporting all texts with the source screens into an Excel file for easy search and documentation purposes. The Generate Excel feature allows users to export selected artboards and containing content with a navigation link and a copy revision column into a new or existing Excel file.

1. Generate

Go to Plugins, Click Copy Updater and select Generate Excel

2. Navigate

Use the top left Name Box to navigate through all screens and content

3. Revise

The modified copy will be highlighted when content is updated.

Impact

This plugin was introduced to the internal design team and was utilized by several product teams. It helps drastically save designers time and minimize potential mistakes that could happen during copy revision.

As the plugin doesn’t contain any company-related information and can benefit other designers, I published it on GitHub and now it can be found through Sketch’s official plugin collection.