The Umpteenth Reason for Designers to Code

Benjamin Carrier
Nov 27, 2017 · 4 min read

The young interaction designer that I am was always tackled with the question of: should designers learn to code. I thought it was a good idea because it would help me understand better the process after design, what goes on after developers look at my design. The teachers I had in school also thought so, they would argue that it would help us work with developers afterwards and I think it’s true, at least for the sake of empathy, which is very important in design. As a designer I also found myself preferring to work with developers who have a sense of the designer’s job, it is always great to work with someone who understands what is your job. There is a ton of article explaining why designers should code or not, but the one reason that I think is overlooked is to master your tools.

Existing Designer’s Tools

There is a ton of tools available right now to work from wireframe to prototyping. They are not perfect, but a great thing about them is that you can add things to them and share it with others. Sketch lets you create plugins, modules can be added to Framer, Adobe lets you create extensions and I am forgetting many others. (Check out this site for more)

Starting with “There must be a better way to do it.”

As I pointed out earlier, I am not the most experienced designer out there, but I came to the point quite a few times where I wanted to do something with an existing tool, looked how online and did not find the answer. You probably know the feel, you are working on a project and in the process, something does not seem as fluid and simple as you think it should be. “There must be a better way to do it,” you are thinking. That is my main source of inspiration. I asked my friend Marc who has worked on a few plugins for Sketch (Sketch Constraints, Sketch Maps and more recently Alembic)about his inspiration and it’s pretty much the same thing, he said that basically if a functionality was not in Sketch, he would create a plug in.

Working on Your Own Tools

It’s with that mindset that I personally started working on tools a little under a year ago. I started using Framer this spring for working prototypes. It is a great tool, especially with high-fidelity prototypes with custom animations and complex gestures. At that time (before the Design update), I found that it lacked a simple way to quickly put design of different pages and test it with animation. I then built this module to create the base of an app that I can use as often as I wanted and quickly test my design on a screen. This is the first module I created.

After the first one, I went on and built more modules, like one to insert photos in prototypes. I now have a list of tools I think would be useful in my design workflow. I think the more designers get involved into making the tools they use better, the more it will benefit the community as a whole.

My latest module that lets you add images from Unsplash into your Framer prototype.

A few tips to start

Despite my modest experience in creating plugins / modules/ extensions / whatever you want to call them, here are a few tips to get you started.

Start small and start by creating something that will benefit you and that you will use. After that, share it with the world! There is a great community of people using the same existing tool and workflow as you are and they might also benefit from the tools you create. It is a great way to help others, but also, receive feedback on your work and learn new things.It’s nice because you get to produce something that will help you in your current or future projects. It’s also good because you work on your own project, but it is great because you get to share it with others and have them test / comment / criticize your work, all very useful in design.

JavaScript is a great way to start. It is used in Sketch plugins and in similar ways with CoffeeScript in Framer Modules. If there is one language that you should at least try even if you hate to code, it is JavaScript.

Thanks to Marc Bouchenoire for help on this article and in plugin creation, I highly recommend that you read his article on how to make floating Sketch plugin that takes an in-depth look on how to make floating plugins.

Feel free to comment if you have any opinion on the question of tools, design and code, I will be more than happy to pursue the discussion.

Benjamin Carrier

Written by

Designer d'interactivité - Interaction designer @_Conserto, MDes Management du Design et de l'Innovation @lecolededesign