Design

Placeholder copy doesn’t have to be Lorem Ipsum

4 min read
Shayna Hodkin
  •  Aug 23, 2019
Link copied to clipboard

The design-copy relationship is tricky. If the team decides that design comes before copy, the designer has to put something in those text spaces—but if the designer dares to take copy upon themselves, they’ll end up creating a double workload: one for themselves, and one for the copywriter who has to come in after and clean up the near-inevitable mess.

So what do you do when you know what has to be in those spaces—because it’s never actually Lorem Ipsum—but you don’t know how to phrase it?

The solution might be hiding in one of your design tools.

The hidden copywriting tool in Sketch and Photoshop

Want to learn how to write product copy? This post is a great guide to that. But if you want to stay focused on design, InVision Craft can help.

Inside of InVision’s Craft plugin, there’s a tool called Data. This smart guy helps you populate fields with enough text to give your project stakeholders an idea of what’s going on, but without giving you or your copywriter extra work.

Here’s how it works, both for Sketch and Photoshop: 

Sketch: Inserting placeholder text using the Type tab

To insert placeholder text:

  1. Add or select the text layers you want to replace with non-Lorem Ipsum placeholder copy. Select layers separated by type of content: ie. phone numbers, email addresses, etc.
  2. Click the Data icon (Screenshot) and, in the Custom tab, click Type. 
  3. Click the type of data you want to insert.


Once you’ve done all that, you’ll see your text layers populated with random copy from the type you selected.

If you’re looking for something specific to populate randomly that you’re not finding in the tool’s options, you can also add custom types of text to insert. To do that: 

  1. Click the Data icon (Screenshot) and, in the Custom tab, click Type.
  2. Scroll down, hover over the empty field, and click Add Item.

  3. Choose the item you want to add from the list or click Add Custom. 
Adding placeholder text in Sketch

If you chose to add custom placeholder text, enter a name for the custom item, paste in or enter the items from which you want to randomly select, and place each item on a new line. You can then use that custom type just like one of the types of text.

(Click here to download Craft)

Photoshop: Inserting placeholder text using the Type tab

To insert placeholder text:

  1. Select the text layers you want to fill, one data type at a time (ie. phone numbers, email addresses etc). 
  2. Click the Data icon (), and then click the Type tab.
  3. Click a type item (Headlines, Article, etc.), and then, if necessary, click a category (Advertising, Beauty, etc.).

The placeholder text should now be inserted into your project.

Inserting placeholder text in Photoshop

Next level: Adding a new type item

If you’re looking for something specific to populate randomly that you’re not finding in the tool’s options, you can also add a new item. To do that: 

  1. Click the Data icon (), and then click the Type tab.
  2. Scroll down, hover over the empty field, and click Add item.
  3. Click the desired item.

Now you can use that type item to insert placeholder text.

Pro level: Creating a custom type item

If you need to use custom data for placeholder text, you can create a new type item and upload your own text.

To create a new type item:

  1. Click the Data icon (), and then click the Type tab.
  2. Scroll down, hover over the empty field, and click Add item.
  3. Click Add Custom.
  4. Enter an item name, choose a symbol, and paste in your text. 
Note: Only one text item should exist on each line.
  5. To enable randomization, uncheck the box Preserve Order.
  6. Click Save.

Now you can use the custom type item to insert placeholder text.

(Get started by downloading Craft.)

_

Whether you’re using Sketch or Photoshop, this feature will help you present the most true-to-life designs—and help you be your best designer.

Feature image by Nathaniel Shuman.

Collaborate in real time on a digital whiteboard