This tutorial will show you how to add fake, but realistic, data to your prototypes.
Ensure you have the Design in the Browser Extension
for VS Code installed.
- Place your cursor in the position you want to insert fake data.
- Select View > Command Palette...
- Type
fake
and select an appropriate fake data type (Name, Phone, Data, Address, etc.) from the list presented. - Fake data in the format you selected will be automatically entered.
You can also automatically insert an entire page of fake data when viewing your prototypes. This is extremely useful when running through prototypes for testing or demos. We'll use the Chrome Form Filler
extension to accomplish this.
- Open a prototype page in Chrome that contains user input fields.
- Click the Form Filler extension icon.
- The form fields will be automatically filled in with appropriate fake data.
- Each time you click the Form Filler icon on that page, the form will repopulate with new fake data.
Sometimes it's useful to blur, redact, or hide fake or realistic data. Genesys provides a useful button on the Genesys Toolbar and several CSS classes that let you accomplish this easily.
CSS Class Name | Result |
---|---|
gns-blur | Data is blurred |
gns-redact | Data is redacted (blacked out) |
gns-invisible-ink | Data is not visible (white-out) |
You can apply any of these classes to any input element or to the BODY
element to affect the entire page at once. Additionally, you can select the Redact button on the Genesys Toolbar to enable this as you view your prototypes.