By Howard Pinsky
Working with data is something many of us take part in infrequently, but it’s not always simple. Let’s take a look at how the Google Sheets plugin for Adobe XD and how it can help improve your design workflows.
On this project I'm building out the menu for an at-home cooking service, where each card will display quite a bit of information, including an image, the meal's category, the dish name, how long it takes to prepare, how many people it serves, and a star rating.
I've also made sure to name each layer with a unique name that will help us map the data to various elements within the menu. You'll see that in action in a moment.
With one card set up, I'll go ahead and create a Repeat Grid and then drag out a few across and down the screen. And then adjust the padding a touch. With the grid set up, we now need to populate it. Over in my browser, I have a Google sheet that was provided to me by the marketing team, which contains all the information I'll need for these cards. And each column is titled and aligned with the layer names within the Repeat Grid.
Now, in order for the plugin to pull in your data, the sheet needs to be public, but only those you share the link with can see that information. Copying the sheet's URL, I'll hop back over to Adobe XD and jump into the plugins panel, where I already have Google sheets installed. But if you haven't grabbed it just yet, click the Plus button at the top and install it.
Now we're ready to go. I'll make sure that the Repeat Grid is selected, and then choose Paste Public Link. But if you're working with a local CSV file, you can load that in as well. Within the options, we'll want to make sure that the layer names that we set up earlier align with the columns. And if any were not mapped automatically, you can set them manually. Finally, if you want the content to be randomized, you can check the box at the bottom. Otherwise, content will be populated from top to bottom.
With everything now set up, all there is left to do is hit Apply and watch the content, including the images, flow into your Repeat Grid. Once it's all in place, one of the benefits of working with a plugin like this is the ability to keep the content up to date. For instance, if the marketing team changes a few items within the menu, as I've just done, I as the Designer, simply need to select the Repeat Grid and then hit Refresh Content within the plugin.
And that's a look at the Google Sheet plugin for Adobe XD and how it can help you and your team work more seamlessly.
Incorporating real data, and data tables into your design can help identify weaknesses in the design or layout, and areas where the design needs to be changed to accommodate the data. Using the Google Sheets plugin for Adobe XD from Impekable, easily import data, copy and images into your Adobe XD designs to quickly import real information.
