Using real data to craft better designs in Sketch

Do you ever have the need to create repetitive design elements in Sketch? Well then, you probably know how tiring that can get.

Many applications contain elements such as tables or forms with tons of data. While Sketch provides great tools to handle this, (like symbols with overrides) it’s still incredibly tedious to paste all of that data into your design. Luckily for all designers out there, drumroll please — there’s a better way. By using Craft, a plugin for Sketch by InVision, we can save time and the headaches.

In four easy steps, I’ll guide you through how you can use the Craft plugin for Sketch.

1. Organize your data
2. Convert data into JSON
3. Import the JSON
4. Link data and duplicate

Don’t worry, it’s simpler than it looks.

Recently, I started working on an internal admin tool to help manage our clients and projects. Once I started visualizing the view for projects, I quickly realized I wanted to show them with different length fields for names and estimates. In this case, if I used placeholder text or dummy data, it would result in unnecessary redesign.

Organize your Data

First you’ll need to organize your data into a spreadsheet. Doing this is a bit easier than writing raw JSON. I like to use Google spreadsheet.

Turn your Spreadsheet into JSON

Converting your spreadsheet into JSON requires two simple steps.

Step 1

Download the file. In your spreadsheet, Go to File → Download As → Comma-separated values and click to download the CSV file.

Step 2

Open the CSV file in a text editor application like TextEdit. Then copy that CSV data into a conversion tool. The tool I use is called Convert CSV To JSON Online. Paste your CSV data into the tool, click “Convert CSV to JSON” and download.

Import the JSON

Now that you have a JSON file saved, let’s import it to Sketch and put it to work. To do that, first open the Data Menu in Craft and switch the tab to JSON if needed. Import your JSON file and then we’ll start applying those properties to the fields in our table.

Link data and duplicate

To make things easy, I started by creating a symbol that represents the first line of the table. Now you can edit the symbol to link the properties from your design and the JSON.

From now on, when you use the Duplicate feature in Craft, it will auto-populate the Symbol Overrides with values from the JSON.

We duplicated the row 5 times. You can see that it pulled data from JSON to fill the list.

That’s it!

Designing with JSON helps us make better designs by cutting down the time spent entering data into mockups.

Go Nimbly is the premier marketing and sales consultancy for SaaS companies. Founded and headquartered in San Francisco, Go Nimbly provides customers with a customized team to manage everything from strategy to execution for their marketing and sales systems. To learn more, visit gonimbly.com.