Loading video...

Video Failed to Load

Go Home

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.

338,140 views • 3 years ago •via X (Twitter)

15 Comments

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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 ▼

will depue's profile picture
will depue3 years ago

----- 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.

will depue's profile picture
will depue3 years ago

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:

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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).

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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.

will depue's profile picture
will depue3 years ago

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.

Related Videos