The Beginner’s Guide to Writing Sketch Plugins Part 6 — Exporting Data

Sketch conveniently provides access to css and svg object code by right-clicking a layer. This is great for web designers, but for those of us working in application or game development, this isn’t really that useful. And while helpful to some, you’re still just copying and pasting values from one application to another, which leaves a lot of room for error.

There are many 3rd party tools to help bridge the gap between design and development (Zeplin, Avocode, Sketch Measure, Sympli, to name a few), but those options just create reference guides for developers to work from. What would be more useful, is if design and development applications worked together directly. Imagine designing something once in Sketch, hitting export, then having your development project read and recreate the layout. This would eliminate the need for a pixel spec and even save an engineer’s time trying to replicate your design.

The current selection of tools available for designers were built to fill a general need, so it’s more likely that their solutions won’t solve specific ones. But that’s the beauty of plugin development, you are fully capable of building tools primarily for your own needs, you just need to know how.

In the previous articles, we focused a lot on the basics, which we needed to learn as the foundation for everything. But now that that’s covered, we can now get into the heart of plugin development, where we start to focus on providing real solutions to real problems.

Sketch plugins are the tools that connect design and development

To connect design and development, we need to find common ground between the two. Since they can’t communicate natively, what can we use that both will understand? The answer is either XML or JSON. Through plugins Sketch can export both of these formats, and most likely the development environment you’re working in can read them. So why send a developer a proprietary pixel spec that they have to manually read and copy values, when you can send them an XML or JSON file that they can import instantly?

This is really one of the most powerful solutions Sketch can provide. So for this article, I’ll be walking through a basic example of how to export a layer’s attributes to XML or JSON. Like we’ve done in the past articles, let’s outline how we are going to do this:

Our plugin, when finished will work through the following steps:

1. Select a layer
2. Create a modal for a user to select a folder, and save that location in a variable
3. Create variables from the selected layer to store it’s basic information (Name, X Position, Y Position, Height, and Width)
4. Store all of these variables in either an XML or JSON object
5. Then finally, save this object as an XML or JSON file to the folder selected previously

Exporting XML

To begin with, we’ll start by creating our plugin to work from, and if you’ve come this far into these tutorials, you should already know how to do this. So create a plugin called Export Layer to XML, with the main script named ExportLayerToXML.js. We’ll also include our common.js file for using our custom alert window we made previously.

From our previous articles, we already know how to find out if a layer is selected by:

In the else statement is where we’ll create the panel for a user to choose where this file will be saved:

Then we’ll create a variable to check if a button is clicked, then assign it to the OK button, then format the selected directory and save it to a variable for later:

Once this is done, we loop through the selected layers and call a function that writes the XML. So all together, the code will look like this:

Now for the exportXML function, we will pass 2 values: the selected layer and the file_path.

First we’ll set up the XML:

Then we’ll use the passed layer to extract the variables we need:

Then we’ll save these variables to the XML object:

And then finally, we’ll write the XML to the passed file path and alert the user when it’s done:

The whole script, when complete looks like this:

Download the plugin or view it on GitHub, and test it for yourself! If you create a Rectangle on an artboard and export the XML, you should get something like this:

<document>
 <layer>
 <name>Rectangle</name>
 <xPos>550</xPos>
 <yPos>258</yPos>
 <height>234</height>
 <width>235</width>
 </layer>
</document>

Exporting JSON

Saving a JSON file is almost exactly the same, except for a few things. We can reuse the first part of our script and create an exportJSON function, which looks like this:

So this entire script, looks like this:

You can download this plugin here, or view it on GitHub. If you test this script out, you should get a JSON file with this:

{
   "layer": [
      {
         "name": "Rectangle",
         "xPos": "550",
         "yPos": "258",
         "height": "234",
         "width": "235"
      }
   ]
}

Conclusion

To summarize this article, we learned how to:

• Create a modal window to save a file
• Create both XML and JSON objects to store variables
• Save XML and JSON files to a specified folder

This is really just the tip of what you can do with exporting data from Sketch. I only included a few attributes to get you started, but there’s a wealth of data to choose from depending on your needs.

Thanks again to everyone that have enjoyed these tutorials so far. If you want more of these, feel free to like them! Also, a couple people have sent me some plugins they’ve created since reading this article, but I’d love to see more! Happy plugin development to you all!

As always, feel free to contact me with feedback or suggestions for the next articles: Twitter, Facebook, or Email.

Continue to Part 7