P5.sketchplugin

A plugin for using p5.js in Sketch

Create rich and editable graphics inside Sketch using only few lines of JavaScript

Download on GitHub

or read more
p5 Sketch plugin

What is this?

p5.sketchplugin helps you to create rich, interesting and editable graphics right into Sketch. You write simple JavaScript — using the powerful p5.js functions — and it creates editable layers in a new artboard.

This plugin was made to help with the creation of complex graphics, generative visuals and data visualizations with real data. And, in general, because I think we need more variety in our tools. As Jon Gold says: «I see nothing to tie the role of designer to rectangle-dragger».

How does it work?

1. Install the plugin

Install the plugin from the Releases page on GitHub. You can also install from Sketch Runner.

2. Write p5.js code in the editor

Open the editor with ctrl+alt+cmd+R and either select one of the examples from the presets dropdown or write some p5.js code. You can use many 2D primitives from p5.js and full JavaScript logic to code your design. Full reference can be found on GitHub.

3. Run!

Press the big “Play” button and run your code. If your code is valid after a moment you’ll see a new artboard in the current page with your code rendered in Sketch.

Examples

Copy the code on the left in the editor and click “Play”. The drawing on the right will render inside Sketch in a new artboard.

Basic code

Shape primitives

Pie chart

Sin wave

Generative grid

Reference

p5.sketchplugin doesn't match the whole p5.js library (yet!) but it gives access to most of the basic functions for drawing. Take a look at the reference on GitHub to see what is available and how to call these functions.

FAQ

Do I need to know how to code to use this?

Yes and no. P5 is designed «to make coding accessible for artists, designers, educators, and beginners». You can get a lot done with only basic commands and without knowing anything about JavaScript. Obviously, to draw more interesting things a basic knowledge of JavaScript is useful. Luckily, p5 is intended to be a tool that helps people learn coding. If you want to start somewhere, this course is great.

Isn't p5.js a library for animating stuff? How does that work in Sketch?

P5.js is a library for drawing with code. One of the key concepts of p5.js is to render the code contained in the draw() function up to 60 times per second in the browser. This is clearly not possible in Sketch. p5.sketchplugin exposes part of the p5.js library but does't allow to create animations within Sketch: the code is rendered only once. However, the same code can be copied in the browser and used without changes.

Is there a way to draw the code in a custom artboard?

Not yet. It's something I’m planning but it completely breaks away from the p5.js model so I’m still trying to understand how to do it properly.

When I tweak things in the p5canvas artboard, the code doesn't change.

Yes, there isn't a way to convert back changes made manually into code.

Can you implement…

Maybe. Suggest a new feature on GitHub or just reach out to me on Twitter.