Like many, I am always looking for things that can improve my design and prototyping workflow. When Adobe announced their Design System Package concept, I was very interested. Not having to constantly keep a browser window open to refer to syntax for a component or other design token I might need, sounded very appealing. Having written code-hinters for the Brackets editor in the past, I was more than will to a take a peak under the hood and see how this tool works.
At the heart of it, there is the extension for VS Code, which in turns consumes the design system package (DSP). While you can author a DSP completely within VS Code, it is really meant to be paired with Adobe XD, their prototyping and design tool. While I have been tinkering with the idea of creating a UI kit for the Ionic Framework in XD, that level of effort wasn’t one I was ready to take on yet. Instead, I turned to their icon library, Ionicons. Now, there are about 1,300 icons in that collection, so I was not really looking forward to importing them into XD to then generate the library to then create the DSP. Instead, I saw that the structure of the DSP is really just various folders and some JSON. Given that, I instead wrote a quick node app that would generate the package for me. After a few tweaks, I published the package.
Installation
- From the command prompt run `npm install ionic-ionicons-dsp`
- Open Adobe XD extension from command palette or via the icon in the lower right of the editor.
- The extension should recognize that there is a DSP installed. If not, then choose “Load package”, “select folder”, then “open” from pop-up that finds the ionicons package within your project.
- Type “ion”…. enjoy.
If you have any comments or ideas, please let me know chris.griffith at gmail.
Prototype A 
You must be logged in to post a comment.