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.
- Organize your data
- Convert data into JSON
- Import the JSON
- Link data and duplicate
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.
Download the file. In your spreadsheet, Go to File → Download As → Comma-separated values and click to download the CSV file.
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.
Designing with JSON helps us make better designs by cutting down the time spent entering data into mockups.