Karl’s Projects
Online Splendor
A Typescript frontend / python backend implementation of the game Splendor, one of my all-time favorite games. The frontend was initially written in vanilla JS before being ported to Typescript. Fully playable online with other users and features a in-game chat interface. One day, I will finally convert this to using websockets :P. This was my first experience using React and I was fully hooked (no pun intended) by the end of the project.
Figma REST API
Created the first web accessible API for a design tool, allowing designers and developers to automate parts of the design workflow. Shown to the right, a set of Uber screens pull design assets from Figma and highlights them for people around the office to see. Read more about it in the Fast Company article below. As part of an exploration into the potential applications of the API, I also created the Figma to React project that uses the API to convert Figma documents to working React pages where the React components’ code could be editted, but the CSS for them could be kept in sync with Figma.
Fast Company
Figma to React
FigSequencer
A Figma plugin built during a hack week that allows users to sequence music in Figma by drawing rectangles. An exploration of the interchangeability of editors. Can Figma be a platform on top of which any editor can be built? Are all acts of creation inherently linked?
Game Table / Catan
In the theme of Figma as a universal editor, I tried to explore Figma as a place where people could create and play board games, similar to Tabletop Simulator. The main challenge here was to figure out a way to represent hidden information in an open multiplayer collaborative environment. Initially, my concept was for hidden information to appear on separate pages that users could open on their mobile devices. After some playtesting, it was clear that this was much more cumbersome than just having the plugin show the hidden information in a popup. Some games that use Game Table linked below.
Figma Catan
+
Tutorial Video
Multiplayer Words
Uno
Gfychess
A collab with Golf, I wrote a GIF engine that converts chess notation into chess GIFs. While existing services use server-side generation that take many seconds to execute, Gfychess runs completely client-side in optimized Javascript and is able to render full games in milliseconds for an instantaneous user experience. The key to Gfychess’s speed is row caching. GIFs utilize LZW compression, and by abusing the LZW clear code, we are able to always terminate rows on byte boundaries which allows us to cache rows effectively. As a side note, the GIF specification would be greatly improved if 0ms inter-frame durations were respected.
Magic Button
Another Figma plugin built during a hack week, a collaboration with Jamie and Kelsey. Similar to the previous Figma to React project, Magic Button takes a Figma document and automatically turns it into a static website. This personal website was made and deployed with Magic Button! The core innovation here is linking with the Netlify API, leading to deployable sites with nearly zero effort from within Figma.
Magic Button Demo Reel
Karl’s Projects
Online Splendor
A Typescript frontend / python backend implementation of the game Splendor, one of my all-time favorite games. The frontend was initially written in vanilla JS before being ported to Typescript. Fully playable online with other users and features a in-game chat interface. One day, I will finally convert this to using websockets :P. This was my first experience using React and I was fully hooked (no pun intended) by the end of the project.
Figma REST API
Created the first web accessible API for a design tool, allowing designers and developers to automate parts of the design workflow. Shown to the right, a set of Uber screens pull design assets from Figma and highlights them for people around the office to see. Read more about it in the Fast Company article below. As part of an exploration into the potential applications of the API, I also created the Figma to React project that uses the API to convert Figma documents to working React pages where the React components’ code could be editted, but the CSS for them could be kept in sync with Figma.
Fast Company
Figma to React
FigSequencer
A Figma plugin built during a hack week that allows users to sequence music in Figma by drawing rectangles. An exploration of the interchangeability of editors. Can Figma be a platform on top of which any editor can be built? Are all acts of creation inherently linked?
Game Table / Catan
In the theme of Figma as a universal editor, I tried to explore Figma as a place where people could create and play board games, similar to Tabletop Simulator. The main challenge here was to figure out a way to represent hidden information in an open multiplayer collaborative environment. Initially, my concept was for hidden information to appear on separate pages that users could open on their mobile devices. After some playtesting, it was clear that this was much more cumbersome than just having the plugin show the hidden information in a popup. Some games that use Game Table linked below.
Figma Catan
+
Tutorial Video
Multiplayer Words
Uno
Gfychess
A collab with Golf, I wrote a GIF engine that converts chess notation into chess GIFs. While existing services use server-side generation that take many seconds to execute, Gfychess runs completely client-side in optimized Javascript and is able to render full games in milliseconds for an instantaneous user experience. The key to Gfychess’s speed is row caching. GIFs utilize LZW compression, and by abusing the LZW clear code, we are able to always terminate rows on byte boundaries which allows us to cache rows effectively. As a side note, the GIF specification would be greatly improved if 0ms inter-frame durations were respected.
Magic Button
Another Figma plugin built during a hack week, a collaboration with Jamie and Kelsey. Similar to the previous Figma to React project, Magic Button takes a Figma document and automatically turns it into a static website. This personal website was made and deployed with Magic Button! The core innovation here is linking with the Netlify API, leading to deployable sites with nearly zero effort from within Figma.
Magic Button Demo Reel