YAPF/extensions/figma/README.md
Claude 0ba1f0af17
JavaScript port decodes YAPF 2; VS Code and Figma open every file
yapf.js: decodeTexture (container, yapf-sum checks, code books with
context decoding, 16-bit / float planes, GPU block tiles), BC1-BC7 /
BC6H block decoding and textureToRGBA for display. Matches the C library
on 417 generated files (surfaces bit-exact) and survives fuzzing with
clean YapfErrors; fixtures in bindings/js/test-data keep it checked.

VS Code preview: pickers for mip, face, layer, frame and slice; storage,
normal-map convention and version in the info bar. Figma import:
textures converted to 8-bit, 8-bit images stay exact.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DVrVthWN8GsmgHGUhhsCYm
2026-10-11 09:57:52 +00:00

1.7 KiB
Raw Blame History

YAPF for Figma

  • Plugins → YAPF Image Format → Import YAPF image… — choose or drop .yapf files; each becomes a rectangle filled with the image.
  • Plugins → YAPF Image Format → Export selection as YAPF… — every selected layer is exported at 1×, 2× or 4× and downloaded as .yapf.

Both directions are pixel-exact: the plugin carries its own small PNG encoder/decoder instead of going through a canvas, which would alter semi-transparent pixels.

Import reads every YAPF file, version 1 and 2. 8-bit images keep their exact pixels; GPU blocks (BC1–BC7, BC6H), 16-bit and float textures are converted to 8-bit for display (Figma images are 8-bit); cubes, arrays, volumes and animations bring their first image. Damaged files are reported as such.

Install (development plugin)

  1. Use the Figma desktop app.
  2. Plugins → Development → Import plugin from manifest… and choose extensions/figma/manifest.json (or the one inside yapf-figma.zip from the Releases).
  3. Run it from Plugins → Development → YAPF Image Format.

To publish it to the Figma Community, use Publish in the same menu; Figma then assigns the plugin its real id.

Build

ui.html is generated: it inlines bindings/js/yapf.js and src/png.js into src/ui.src.html, because Figma loads the UI as a single file.

node build.js

Figma limits images to 4096 × 4096; larger .yapf files report an error.

Status

The plugin UI was tested in a browser engine (headless Chromium) with a simulated Figma main thread: import hands Figma a pixel-exact PNG, and export downloads a pixel-exact .yapf. code.js is syntax-checked. It has not yet been run inside Figma itself.