FIGMA-OS: The first Turing-complete Figma file. SPECS: 8-bit architecture, 512 bits of RAM, 16 bytes of Program Memory, MISC instruction set of 16 OPCODES, 10HZ clock speed, 4 fast access registers, binary-tree RAM/ROM memory. MOTIVATIONS: For the meme. HOW: Explained below.

FIGMA-OS has every feature that any modern, enterprising technologist could possibly need: ► A stunning and detailed user manual. ► Useful pre-installed programs like: Fibonacci Numbers. ► An award-winning graphical user interface.

FIGMA-OS has been generously open-sourced to serve all your computing needs, live on the Figma Community today. ▼ Try our demo ▼ ▼ Duplicate FIGMA-OS and see it for yourself ▼

----- Ok so on Wednesday, Figma released new prototyping tools. After seeing their tweet (at 1AM) I knew I had to be the first to build a working computer. If you want to read me trying to figure how to build this late at night, check out this thread.

The goal was really just to mess with the prototyping PM that woke up to my computer on day one. Shoutout to the team for an insanely stable launch + great features. I'll do a writeup of how this all works soon (it's pretty easy actually). But here's a quick simplification:

Computers are made out of very simple parts (think mostly switches and wires). If you can make extremely simple circuits (AND, OR, NOT) you can build a computer. They're also universal, meaning my Figma PC can technically do anything your Macbook can, with infinite space/time.

Figma-OS is a MISC computer (look that up), here's the key parts: - Random Access Memory - Read-Only Memory, to store programs (can't be changed) - Instruction Set (16 different operators) - CPU "Clock", registers, and a counter to run ops. - Programs, made up of instructions.

RAM is just read and write storage here, which lets you store and load 8 bit numbers (0 -> 255). ROM is simpler memory that can't change and stores the list of instructions to run a program in order. Each part of memory is addressed by a unique number for retrieval, see below.

Each memory slot is a Figma number variable. Since I'm doing operations in binary, I need to convert numbers to binary and back when loading/storing. This requires a de/composition algorithm to do these conversions. While a bit slower this allows 8x the computer memory in Figma.

Registers, as seen above, are just temporary storage that you can put data in and do operations on that data. A lot of programs might pull data from memory, do an operation on it in the register, and put it back. A register is simply 8 different boolean variables in Figma.

There's 16 different instructions (10 unique operators). Loading from memory, storing from memory, jumping to a different point in the program, bitshift register, bitwise not register, output data, stop program. With these 16 operations, you can do nearly any computation.

Instructions come in the form of an ADDRESS (ex: 0001) and a OPCODE (ex: 0110) and. These are joined together (ex: 00010110), converted to numbers (22), and saved in ROM. The computer reads these codes sequentially, converts to binary, and then runs the respective instruction.

The computer uses a program counter to know which OPCODE to run. Every time an operation is run, the program counter is incremented and the next program is run (or JUMP commands, which directly edit the counter).

There were many workarounds and hacks to get this all to work. Obviously, Figma wasn't designed for this. Since I can run code when a slide loads, the structure is like a presentation that keeps jumping to the next slide in a loop, taking different turns each time.

If you're interested in learning more, stick around until I release a post that goes into detail + simply explains how the system works. If you want to check it out yourself, see the Figma. It's surprisingly simple to understand just by poking through.

Also, @zoink @figma can a homie get some merch for building the first Figma CPU? Taught myself design on Figma, massive fan of the product + I'm the only guy on the planet who uses Figma as his IDE.