From figma to p5.js

Prototyping interactive apps beyond UX flows

Visual overview of the article. On the left; the Figma logo (colourful F), with an isometric exploded view of the Figma (and thus SVG) file structure with a hearth in the middle. On the right the p5.js logo (red star) with code snippets underneath. (as explained in the article below).
This overview shows an isometric overview of the SVG structure of the file created in Figma, which is then being controlled by code in P5.

What is Figma?

What is SVG?

What is P5.js?


This technique was used to create these short videos where the concept was explained using P5.js sketches that contain Figma frames that are connected to physical hardware.


Scale & proportions

On the left side an interface with a slider that is moving, the value on the left top says "voltage" and is being influenced by the slider on the screen. On the right side, there is a Figma mirror screen.
On the left side, the P5.js sketch, on the right side is the Figma mirror sketch. If the fonts and rendering techniques are similar it should show similar results. (In this case, the exact font rendering of Roboto is slightly different P5.js sketch for this can be found here and the Figma file here:


A closeup of the Figma interface where the "include ID attribute" is selected

How to include the Figma frame in P5.js

An animated overview of how to upload files to the p5.js web editor
An animated overview of how to upload files to the p5.js web editor


Text alignment

How to control text and fonts

select("#voltageText tspan").html("Put your dynamic text here")
<text id=”voltageText” 
style=”white-space: pre”
<tspan x=”30" y=”60.7539">

Make a slider work

if (mouseIsPressed) {
//put code in here
const pt = svg.createSVGPoint();
//Get the x and y of the mouse/finger
pt.x = mouseX
pt.y = mouseY
svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
var x = svgP.x — select(“#SliderHandle”).attribute(“width”) / 2;
select("#SliderHandle").attribute("x", x)
//Get the full range of where the slider could go (slider_active_area), this is a transparent rectangle
var min_x = select("#sliderActiveArea").attribute("x");
var max_x = Number(select("#sliderActiveArea").attribute("x")) + Number(select("#sliderActiveArea").attribute("width"))
select("#voltageText tspan").html(round(map(svgP.x, min_x, max_x, 0, 50)) / 10 + "V");

Make a button work

function chooseButtonPressed(){
select("#SliderHandle").attribute("fill", "#999999")

How is this working?

Figma logo with Figma text underneath -> Svg logo with SVG text underneath-> Js logo with figma.js text underneath-> P5.js logo with P5.js text underneath.

Disable 'normal' behaviour

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: fixed;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */

FullScreen Browser App

Using the embed link you have a 'pure' version of your p5 sketch, without any distractions or injected code



Maker and Interaction design student Umeå Institute of Design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store