Unit data plugin

Define

Working with the Guest Experience design team at Vacasa meant creating plenty of designs that used, what we called, the 'Unit Card'. This is the card containing unit data that we used on the search results page and many other places.

To create life-like designs using the unit card, we would add the base card component (pictured below) to our Sketch file, and then we would visit the Vacasa search results page to grab unit names, prices, cities, details, and images.

This process of skimming content from the site was inefficient and something I knew we could improve.

Ideate

Creating a plugin seemed like the natural choice to connect the design team with real unit data without having to bloat our design system with real images and data placeholders.

Build

I began work on a Sketch data plugin that would integrate with the Vacasa unit data APIs and inject real unit data into designs. I worked with engineers who taught me how to call an API and securely handle the necessary keys.

In the end, I was able to deliver to the design team exactly what I had set out to create. The plugin could be called from within Sketch and it would dynamically grab unit data and inject it into designs.

Iterate

In later versions, I was able to add multi-select support so a designer could add multiple cards to a view, select many elements, and populate all of them with data with a single click.

Lookback

What I liked

• Opened the door to future design process automation at Vacasa.
• Ability to add real unit data to a design without having to repetitively copy and paste data from the site.

What I learned

• Working with design tool plugins. Sketch and Figma both use JavaScript for their plugins so the knowledge extends to both.

What I would do differently

• Add a region search so that a designer could specify regions for the unit data. This would be helpful for targeted tests where we may have wanted to use units from the same region as our test subjects.
• Add support for unit image injection.
• Optimize the workflow so that a designer could select a whole card and have the plugin detect which pieces to swap based on their layer name in Sketch.