@twilio-labs/sketch-twilio-ipsum

A realistic fake data populator for Sketch

---

Installation

1. Download the Sketch plugin zip file
2. Unzip the file twilio-ipsum.sketchplugin.zip
3. Double-click the extracted twilio-ipsum.sketchplugin file and it should install into Sketch.
4. Now you should see a new option for Twilio Ipsum in your data menu, located in Layer / Data with all the different types of mock realistic data you can use when you have a text layer selected. You can also right-click on text layers and pull up the same menu under Data.

About

• This is a Sketch plugin that provides realistic and internationalized (i18n) data directly into your mockups.
• 75% of the time, the data shows up as English. The other 25% of the time it generates in one of our other locales
• If you would like to force a locale, simply append your layer name with the follow text: |locale. For example, for french you can do cool-layer|fr. i.e.:

List of supported locales

GERMAN: 'de',
ENGLISH: 'en',
SPANISH: 'es',
FARSI: 'fa',
FRENCH: 'fr',
ITALIAN: 'it',
JAPANESE: 'ja',
KOREAN: 'ko',
NORWEGIAN: 'nb_NO',
NEPALI: 'nep',
DUTCH: 'nl',
POLISH: 'pl',
PORTUGESE: 'pt_PT',
RUSSIAN: 'ru',
SLOVAK: 'sk',
SWEDISH: 'sv',
TURKISH: 'tr',
UKRAINIAN: 'uk',
VIETNAMESE: 'vi',
CHINESE_CHINA: 'zh_CN',
CHINESE_TAIWAN: 'zh_TW'

More info about using the Data tool in Sketch. Hope you enjoy this nifty plugin!

Contributing

This project welcomes contributions from the community.

Code of Conduct

Please be aware that this project has a Code of Conduct. The tl;dr is to just be excellent to each other ❤️

Maintainers

This project is maintained by the design systems team.

Prior Art

• Data Populator
• Sketch Data Faker

---

Dev stuff

This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.

This plugin makes extensive use of Sketch's Data Supplier API.

Prerequisites

• Sketch

Usage

Install the dependencies

npm install

Once the installation is done, you can run some commands inside the project folder:

npm run build

To watch for changes:

npm run watch

Additionally, if you wish to run the plugin every time it is built:

npm run start

Debugging

To view the output of your console.log, you have a few different options:

• Use the sketch-dev-tools
• Open Console.app and look for the sketch logs
• Look at the ~/Library/Logs/com.bohemiancoding.sketch3/Plugin Output.log file

Skpm provides a convenient way to do the latter:

skpm log

The -f option causes skpm log to not stop when the end of logs is reached, but rather to wait for additional data to be appended to the input

Workflow

• Clone the repo
• Use yarn build to compile any changes. The plugin is built into the package's root directory.
• Double click the plugin to install it in Sketch.
• With Sketch in focus, from the toolbar select Plugins -> Manage Plugins. From there you will be able to toggle the plugin on and off and make sure it was installed.

Publishing your plugin

skpm publish <bump>

(where bump can be patch, minor or major)

skpm publish will create a new release on your GitHub repository and create an appcast file in order for Sketch users to be notified of the update.

You will need to specify a repository in the package.json:

...
+ "repository" : {
+   "type": "git",
+   "url": "git+https://github.com/ORG/NAME.git"
+  }
...