JigJam
~interactive computing
A multi-user whiteboard where users can collaboratively add, delete, and modify graphics on a canvas in real time.
Type
Project
Role
Frontend Designer, Developer
Timeline
Nov 2023
Collaborators
Joshua Le,
Victoria Liu
Skills
Full-Stack, Visual Design, UX
Technologies
p5.js
Links(Try Me!)
︎ JigJam
Project
Role
Frontend Designer, Developer
Timeline
Nov 2023
Collaborators
Joshua Le,
Victoria Liu
Skills
Full-Stack, Visual Design, UX
Technologies
p5.js
Links(Try Me!)
︎ JigJam
Prompt
Build an interactive media experience using p5.js.
Concept
Figma started as a simple multiplayer collaboration tool for UI/UX designers over a decade ago, but has quickly evolved into the go-to whiteboarding service for software engineers, product managers, creatives, students, and all individuals looking to easily share their vision with a team. Figma has now transformed into a unicorn startup with their aim being to easily create spaces for teams to collaborate, design, and share their ideas/visions. With this, we wanted to see how far we could go with replicating one of their services, FigJam - a playful "rough draft" storyboard that allows users to easily draw, post, and illustrate ideas quickly with the use of pen tools, shapes, sticky notes, comments, text, stickers, etc.
Features
Development
Developed using p5.js(frontend). Artwork created using Adobe Illustrator.![]()
![]()
![]()
![]()
![]()
Future Development
FigJam has a fun feature that allows you to high-five other players currently on the canvas when your cursors are nearby and you are both holding the “H” key. We’d love to implement a similar interaction!
We could also expand on the range of tools offered. Figma has other tools such as the drawing tool or the washi-tape tool.
We would also like to expand on existing tools by adding more customization options like color picking and more resizing mechanics (like snapping, retaining proportions with shift, etc). We could also allow users to rotate the graphics and arrange their layer order to customize what will appear on top.
With our current draggable canvas, we would like to make it zoomable using additional off screen graphics buffers.
While we didn’t get to it, we originally wanted to have multiple rooms for users, and state management options that allow you to save, undo, export, etc.
There are also unlimited possibilities with adding widgets like the ones featured on FigJam, which include things like tools and games.
Build an interactive media experience using p5.js.
Concept
Figma started as a simple multiplayer collaboration tool for UI/UX designers over a decade ago, but has quickly evolved into the go-to whiteboarding service for software engineers, product managers, creatives, students, and all individuals looking to easily share their vision with a team. Figma has now transformed into a unicorn startup with their aim being to easily create spaces for teams to collaborate, design, and share their ideas/visions. With this, we wanted to see how far we could go with replicating one of their services, FigJam - a playful "rough draft" storyboard that allows users to easily draw, post, and illustrate ideas quickly with the use of pen tools, shapes, sticky notes, comments, text, stickers, etc.
Features
- Pen tool: draw using different colors and different stroke weights
-
Sticky notes: drag and drop sticky notes around the canvas, add text within sticky note
-
Stickers: choose from library of stickers(doodles, foods, reactions, words), place and resize
- Text: create text and customize with different font sizes, colors
- Multiplayer interaction: 2+ players can edit the document at the same time
- Pointer tool(select objects) vs. hand tool(grab and move canvas)
- Draggable Canvas
- Record player with 4 instrumental track options
Development
Developed using p5.js(frontend). Artwork created using Adobe Illustrator.
Future Development
FigJam has a fun feature that allows you to high-five other players currently on the canvas when your cursors are nearby and you are both holding the “H” key. We’d love to implement a similar interaction!
We could also expand on the range of tools offered. Figma has other tools such as the drawing tool or the washi-tape tool.
We would also like to expand on existing tools by adding more customization options like color picking and more resizing mechanics (like snapping, retaining proportions with shift, etc). We could also allow users to rotate the graphics and arrange their layer order to customize what will appear on top.
With our current draggable canvas, we would like to make it zoomable using additional off screen graphics buffers.
While we didn’t get to it, we originally wanted to have multiple rooms for users, and state management options that allow you to save, undo, export, etc.
There are also unlimited possibilities with adding widgets like the ones featured on FigJam, which include things like tools and games.