[Update] A Sketch plugin is released for everyone to use it.
I’m one of the organizers of Design Spectrum, the most active design community in South Korea. We host an event every month for over 100 people where we make a nametag for each participant. The nametag is our appreciation and a small gift to the guests.
But making 100+ nametags is challenging as you can expect. We have been manually editing over 100 names at every event in Illustrator or Sketch. You may do this repetitive design work for fun and to give your brain a rest. But I wanted to explore a more efficient way to value our time. The theme of July’s event was ‘Designing with Code and Data’. As a host and an organizer, I wanted to make a representable and tangible example for the audience. So I automated the process of making the nametags.
The first solution came into my mind was to use React-Sketch.app. It is something you can design by coding (which is an opposite process of what designers would do). It seemed promising because code by nature is flexible enough to put design into control.
But the problem was that I coudn’t reuse the design elements that I already created in Sketch. I had to design them again with code. (Let me know if I’m wrong.) It was inefficient for the side project like this. And it wasn’t sustainable either because other designers in our team should be able to design nametags with their preferred tools. Otherwise, we should always rely on someone to translate the design into code.
Scripting in Sketch
The biggest hurdle to code in Sketch was that you had to learn Cocoascript. It wasn’t a familar languge for designers anyhow. But now Sketch supports Javascript API where we don’t have to learn a new language anymore. But their JS API seems still in progress and not kindly described like Framer or other well organized APIs yet. I went through the basics from the Sketch developer website and got helped from the community below.
http://sketchplugins.com
Automation
It was easier than I thought to code in Sketch. Run Script (Shift + Cmd + K) in the menu will bring a new modal window that you can start writing code. It’s simple and fast enough to test things and see the result right away inside the Sketch.
This is the test code I wrote. You can copy and paste to yours to test. Since I didn’t design it for all cases, there are certain rules to follow. You should name both the text layer that you want to change and its parent group layer as ‘name’. Then you need to select the artboard before running the script.
Hit the Run button and Voila! You will see as many artboards as the number of the items in the array (‘participants’). The text layers (‘name’) in the artboards should display names in the array in order.
Converting A List To An Array
I needed to convert the list of participant’s names into something that code can understand. That is an array.
I could download the participant’s list in CSV or MS Excel format from the event organizing service. I selected the column of names and paste them into the website below to convert to an array. (JSON is also possible.)
http://www.seabreezecomputers.com/excel2array/
Then I pasted the array into the top my code like below:
participants = [“James”, “Peter”, “David”];
which is already included in the code I shared above.
Getting Ready for Printing
As a next step, I put three nametags in a letter size paper to save papers (and our nature).
After Automation
As we are planning to have a big design conference next year for more than 1,000 people, we feel like we are confident at least for making event badges.
Anybody can reuse the code and tweak things (if she has a little knowledge about Javascript). You can perhaps use Craft to do the same. But that doesn’t always scratch your itch. Having flexibility will be a huge asset for designers.
I have many more things to automate and do more with code. There’s no such a developer that always makes things for me. He that would eat the fruit must climb the tree.
It doesn’t mean that designers should code. But let’s think once more about the role of designers that is expanding and becoming blended with other disciplines. Where would you want to be in the near future as a designer? And what would you contribute?
Thanks for reading.
Thanks to Sarah Lim for early feedbacks.
