13 comments

  • Florian PnnFlorian Pnn, almost 8 years ago

    Exciting stuffs!

    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!

    2 points
    • Mark JenkinsMark Jenkins, almost 8 years ago

      Florian, thanks for reading!

      Do you have anything you can share with the next steps you are working on please?

      Thanks

      0 points
  • David KlawitterDavid Klawitter, almost 8 years ago

    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.

    2 points
    • Mark JenkinsMark Jenkins, almost 8 years ago

      Hi David,

      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.

      Thanks Mark

      1 point
      • Florian PnnFlorian Pnn, almost 8 years ago

        I don't get the separate artboard idea, could you explain that a bit deeper?

        1 point
        • Mark JenkinsMark Jenkins, almost 8 years ago

          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 :)

          0 points
      • David KlawitterDavid Klawitter, almost 8 years ago

        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 track data 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.

        1 point
        • Mark JenkinsMark Jenkins, almost 8 years ago

          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 :)

          0 points
        • Mark JenkinsMark Jenkins, almost 8 years ago

          Is there anyway you could share a screenshot to explain how to set up the plugin layers both text and image please?

          0 points
          • David KlawitterDavid Klawitter, almost 8 years ago

            http://cl.ly/image/251r1U2j110t

            Spotify

            The quality of this gif is quite terrible but you can see that my layer names user dot notation similar to Ruby or Javascript, matching the structure of the response JSON.

            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.

            1 point
            • Mark JenkinsMark Jenkins, almost 8 years ago

              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

              Thanks Mark

              0 points
  • Charlie SneathCharlie Sneath, almost 8 years ago (edited almost 8 years ago )

    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.

    1 point
    • Mark JenkinsMark Jenkins, almost 8 years ago

      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!

      0 points