I worked myself on a similar plugin : https://github.com/florianpnn/sketch-data-parser
And now I'm already on the next steps you describe. At Onefootball we are building a plugin that plug our API to Sketch and allow us to use real time data and populate our design by real content.
It's definitely going to be a game changer for the speed and the accuracy of our design!
Florian, thanks for reading!
Do you have anything you can share with the next steps you are working on please?
Nice! I had a need some time ago to populate a music app design with Spotify data and wrote a quick Spotify API plugin that does token replacement like you wrote about and both of your articles have me wondering what the next step is? Because I'd actually like to make Josh's article as close to reality as possible.
I don't feel like a more elaborate Sketch plugin is the solution but I'd be interested to hear your thoughts.
Thanks for reading :)
Did you make the plugin for Sketch? Would be interested in checking it out to see how it works.
Next step for us to take the live data from the API and work out a structure so that we can populate design modules with the relevant data.
I'd expect that we'd keep a separate artboard of the modules and keep those connected to the live data. Then we can make design modifications based around those and replicates across any other artboards.
I don't get the separate artboard idea, could you explain that a bit deeper?
Sure, I mean by creating a separate artboard that contains all of the elements we use for our design. For example, Action Bar for Android where we can create a custom symbol and then add different states.
By that, I mean we design atomically, creating a design for a system of components.
Each app view/screen is a combination of the components and by keeping the separate artboard it means I can update one symbol and it applies the changes recursively across the board :)
The project can be found here: https://github.com/davidklaw/sketch-generator-spotify
It's fairly basic in that it expect layer names based on the structure of the JSON, so an album title might be
album.title. The assumption being that the designer knows enough about the API to be able to view it and structure these tokens properly. It's then specific in the sense that it traverses Spotify's
trackdata and and replaces it for each selected group.
I think the one twist on my script is that I wanted to work with symbols for my track list rows but also wanted unique album art per row, so I was working on an update to insert a similarly sized album art image as a symbol sibling.
It's not a greatest solution but the idea of what's possible certain has my interest peaked.
At work we deal with a different API each project so I'd be looking for something that's not only flexible, but able to authenticate.
Thanks for sharing! Will take a look at this today and let you know how I get on.
Really interested to have a dig around and see how this all works :)
Is there anyway you could share a screenshot to explain how to set up the plugin layers both text and image please?
I remember encountering a few bugs at the time. One in particular seemed related to Sketch because the text layers were updating but not reflecting the changes until I clicked into them.
This is great, thank you David!
Now I can see how it works much better. I'm going to see what I can do to extend that same plugin and rewrite a bit of the code to use Depop's API
I've also encountered the same problem, sometimes the text in the field disappears until you click in too
I am SO excited about the possibilities and opportunities to start connecting Sketch to data...and then to the internet!
Great start, looking forward to seeing more of this kind of work.
Thanks Charlie, I'll be sharing more when we've got more to share, there's some really interesting scope here to do some amazing things!