UX DESIGN
Our experience using linked data in Sketch
By Stefan Kukla and Marie Dorušková
Designing tables with data can mean tricky business, especially when it comes to iterative design. A static table may solve a current use case but ultimately leads to painful and repetitive editing processes along the way. In order to design tables nimbly with data, designers need some kind of data linking solution.
In May 2021, Sketch answered that call with the introduction of their Data tool plugin. This feature allows Sketch users to enhance their design process with linked data, enabling them to combine image and text through self-managed profiles. With linked data, Sketch users can switch data sources in components and refresh designs with different content, making experimentation much easier in practice. Linked data helps bring designs to life and gives them a more realistic look.
As with any new tool or feature, it’s up to users to create methods and processes that work for them. As user experience designers on Red Hat’s User Experience Design (UXD) team, we jumped into the Data tool and adjusted it for our needs. Our team consists of tons of designers, and the potential for automating tasks would be a great help in the designing process.
As we took the opportunity to enhance the designing process, we explored our existing data sources and brainstormed plugin uses that would help us in future work. We took a closer look at two main data sources we use to prepare components: Text data and prepared JSONs and image data. Using these two ingredients, we built linked data that works for us and our workflow.
Customizing our linked data workflow allowed us to learn more about creating text and image data sources, preparing components, and linking JSONs in Sketch. Let’s walk through some of our key takeaways to help you or your team do the same.
Creating text and image data sources
Preparing JSONs is an essential part of using linked data in your designs. After reviewing the data types we used in our table designs, we gave them easily identifiable profile names (“Recommendation, Added” etc.) so that we could more easily connect components to them in JSON.
[{
“Recommendation”: “Decreased security”,
“Added”: “5 months ago”,
“Total risk”: “moderate.png”,
“Risk of change”: “moderate-rc.png”,
“Systems”: “241”,
“Ansible”: “No”
}, ]
By creating these profiles, we’re able to more easily switch between different variations of data. Profiles are prefilled in JSONs, using text and images. Image components are created on top using text and have to be named specifically.
Preparing components in Sketch
Most of our designs consist of tables and that’s why we decided to recreate them and connect them to our data sets. To refresh table content, we created one essential component: the table row.
In the table row, each symbol simulates a structure of a row. Black and white pixelated rectangles will be replaced by images from image data sources. In this case, labels for Total risk and Risk of change appear instead. The only obstacle to this design concept was text wrapping: If a name is relatively long, it wraps onto the next line and increases the row height. To accommodate for use cases with lengthier text strings, we created a table row variation with two lines.
Table row component variations, varied by height: One-lined and two-lined. Each row features black and white pixelated boxes that will be replaced by linked data.
By using our custom table row components, we’re able to create tables that fit our use cases. Let’s bring our table to life with prepared JSON data.
Linking JSONs and components
To link JSONs and components, we used the same naming conventions for image and text data sources in JSONs.
After all the preparation there is the last step before using adjusted data: Adding data sources to Sketch and connecting them to our prepared components.
Voila! Thanks to the Data plugin, we no longer need to spend hours updating data in tables.
Takeaways
As we reflected on our experience using linked data in Sketch, we came up with a list of pros and cons to consider as you think about exploring the Data plugin for your own design work.
Some advantages of linked data are:
- Saving time for future projects by making the design more efficient.
- Encouraging looking at your future work from a new perspective.
- Unlocking the full potential of Sketch.
- Raising awareness of the data you use, by analyzing, revising, and exploring your data sources.
- Allowing you to use a variety of data.
- Colleagues might love you for being thoughtful and making their work more efficient
Some disadvantages of using linked data are:
- Finding time to create symbols, a Sketch library, and JSON files.
- Introducing this tool to your team and advocating for adoption.
- Connecting real symbols from Sketch to JSON data isn’t possible. Instead, you need to export an image from each symbol.
- Switching between different types of data (text to image or image to text) isn’t possible.
- Adapting to possible updates in the future may seem daunting, depending on your comfort level.
- Connecting third-party tools is currently limited to Unsplash.
As every new feature arises, it needs a little exploration to make it work for you. Try adjusting plugins to make your experience designing better.
This article has been written by Stefan Kukla and Marie Dorušková
Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.
