Lorem Ipsum is dead. And if it is not, it probably should be. For years, designers and developers have promoted using real data in mockups instead of placeholder text. Over the last few years, "designing with real data" has become a visible trend, with many articles, posts, and talks on this topic.
Meet UberData - a Photoshop extension that inserts real data into mockups. It is a practical tool for filling repetitive UI blocks with meaningful content.
UberData can insert data from public JSON APIs, RSS feeds, JSON files, plain text files, and image folders. Future versions are planned to support CSV, Excel, Google Sheets, and more.
Why? What about Craft?
I believe there is always room for another good product. UberData is my alternative to InVision Craft Data. I built it because InVision dropped Windows support long ago, and on macOS their Photoshop support started from CC 2015. UberData runs on both platforms and supports Photoshop CC versions starting from 2013 (but unlike Craft, it does not run in Sketch).
Usage guide
Inserting data
UberData inserts text and images into selected layers. You can select multiple layers at once - data will be inserted in the correct order.
To insert text, select a text layer. New text either replaces existing text or is appended when you click with Shift pressed.
To insert an image, select a shape layer (a vector layer with fill). The image is inserted as a smart object above the selected shape, resized to fit it, and applied as a clipping mask.
Adding data sources
Create custom sources or connect ready-made ones:
- JSON files or links to public JSON APIs;
- RSS or XML feeds from websites;
- image folders from your computer;
- text files with names, phone numbers, or any other values.
In the lower-left corner of the panel, click the (+) button to add a new source.
Each source type has its own visual representation, from simple lists for text files to adaptive tiles for image folders.
JSON
You can add JSON files or fetch data from public no-auth JSON APIs, for example:
- uinames.com, user profile data
http://uinames.com/api/?ext&amount=25®ion=United%20States - spotify.com, music data
https://api.spotify.com/v1/search?q=metallica&type=album
RSS
You can add news RSS and XML feeds. For example:
- dribbble.com: https://dribbble.com/shots/popular.rss
- abduzeedo.com: http://abduzeedo.com/rss.xml
- meduza.io: https://meduza.io/rss/all
It is best to provide a direct feed URL, but if you paste a website URL (for example http://abduzeedo.com/), UberData will try to detect RSS automatically.
Text files
UberData reads data from *.txt files. One requirement: every item must start on a new line.
Image folders
You can add any local image folder. UberData scans all files, including nested folders.
For testing, try this free pack of 100 avatars.
Tips
In the source list
For image folders and text files, you can hold Alt while clicking. In that case, the source is not opened - UberData inserts a random value immediately.
- Click -> open source
- Alt + Click -> insert random value (works for text files and image folders)
Inside a source
You can rename a source by clicking its title at the top.
In the top-right corner, behind the three-dot menu, you can refresh a source (fetch latest online data for RSS and JSON) or remove it.
Most RSS and JSON items are text, but sometimes they contain URLs. UberData checks links and marks image links with a special icon. Clicking such an item inserts an image instead of raw text.
- Click -> insert image or text
- Alt + Click -> insert random image or text
- Shift + Click -> append text
- Shift + Alt + Click -> append random text
Supported versions
- Photoshop CC
- Photoshop CC 2014
- Photoshop CC 2015
- Photoshop CC 2015.5
- Photoshop CC 2017
Does not work in CS6 and earlier.
Download
You can download this and my other Photoshop extensions at UberPlugins.cc.
UberData is in active testing. That means bugs are possible, and behavior may occasionally differ from expectations. If you find issues or have suggestions, message me: