History

Danila Poyarkov 46c678e18f feat: model variables as CSS design tokens (#852 ) * feat(scene-graph): model variables as CSS tokens A variable now has a CSS custom property name, a unit, raw CSS expressions per mode, and each mode a CSS condition (a selector or @media prelude), so code export can treat variables as design tokens rather than resolved literals. Names are derived when not set: Tailwind v4 theme namespaces from the type, the scopes or the leading name segment, so Gray/50 is --color-gray-50. The first token to claim an explicit name keeps it; Figma files contain duplicates, and later claimants fall back to a derived name. FLOAT tokens infer px except for opacity and font weights. Lengths stay in canvas pixels and only convert when written, so rem does not change what the canvas or Figma sees. In .fig, the name goes to codeSyntax.WEB in the form the snippet already uses, or to plugin data when WEB holds something else such as a Tailwind class. Unit, expressions and conditions are OpenPencil plugin data, validated with Valibot. Conditions and expressions reject braces and semicolons because they are written into stylesheets, and an expression whose mode value was edited elsewhere is dropped so the number stays authoritative. * refactor: move token naming to dom-css and keep fig to persistence CSS naming, namespaces and units are CSS projection, which dom-css owns; scene-graph keeps only the token data and the px/rem storage conversion, and fig only persists plugin data, validated for shape. Drop Variable.cssName: codeSyntax.WEB is the single place a token's name lives, read with postcss-value-parser when it is --x or var(--x), so no second copy has to stay in sync with Figma's field. Derived names use es-toolkit kebabCase and twirlwind's Tailwind namespace table, which excludes opacity since Tailwind v4 has no such namespace. Whether a condition or expression is valid CSS is no longer guessed with a regex in fig; the stylesheet generator will check it with cssom where the string enters a stylesheet. * refactor(fig): parse token plugin data with Valibot's parseJson Invalid JSON becomes a validation issue like any wrong shape instead of a caught exception, and the plugin data lookup reuses getOpenPencilPluginValue rather than repeating it. * refactor: use es-toolkit for token expression keys and name segments mapKeys re-keys expressions by file mode id instead of a manual loop, and compact drops empty name segments. Reading expressions keeps the plain filter: pickBy returns Partial<T>, which would need a cast. * fix: keep token expressions on float32 values and rem precision .fig stores numbers as float32 while plugin data keeps the resolved value as a double, so a value such as 1234.567 differed by more than the 1e-6 tolerance and its expression was dropped as stale on reopen. Compare both at float32 precision. Token numbers were written with four decimals, which turned 0.5px into 0.0313rem; six keep every pixel step down to 1/1024px exact. Also note that derived names can collide, so stylesheets take them from variableCSSNames.		2026-10-04 10:50:46 +00:00
..
docs	fix(fig): read, render, and write Figma slots (#850 )	2026-10-04 00:45:10 +04:00
scripts	feat(fig): occurrence-scoped instance interpretation as the single .fig reader	2026-10-01 11:20:27 +04:00
src	feat: model variables as CSS design tokens (#852 )	2026-10-04 10:50:46 +00:00
tests	feat: model variables as CSS design tokens (#852 )	2026-10-04 10:50:46 +00:00
AGENTS.md	feat(fig): occurrence-scoped instance interpretation as the single .fig reader	2026-10-01 11:20:27 +04:00
package.json	feat: model variables as CSS design tokens (#852 )	2026-10-04 10:50:46 +00:00
README.md	feat(fig): occurrence-scoped instance interpretation as the single .fig reader	2026-10-01 11:20:27 +04:00
tsconfig.json	fix: explain unsupported browsers instead of a blank window (#745 )	2026-09-22 14:40:59 +04:00
tsconfig.test.json	feat(fig): scaffold package shell	2026-06-30 10:51:36 +03:00
tsdown.config.ts	refactor(fig): own Figma clipboard encoding and conversion	2026-09-11 00:36:03 +03:00

README.md

@open-pencil/fig

.fig file-format package for OpenPencil.

The package owns the outer .fig archive boundary and is the staged home for Figma-specific SceneGraph conversion policy. Production SceneGraph read/write remains available through @open-pencil/core/io while conversion modules move behind this package's public API.

Current ownership:

Complete .fig archive parsing through parseFigBuffer()
.fig archive assembly through writeFigArchive()
Canvas payload and image resource handling
readFigContainer() / writeFigContainer() helpers for raw fig-kiwi payloads
.fig source and archive result types
NodeChange-to-SceneGraph property conversion, including styles, plugin metadata, text, paint, vector, and font policy, through @open-pencil/fig/node-change
Component-property, symbol-override, derived-symbol-data, and instance synchronization policy through @open-pencil/fig/instance-overrides
Effective raw-metadata precedence and invalidation over SceneGraph's format-neutral edited-field tracking
SceneGraph-to-NodeChange export conversion with an explicit glyph-outline runtime service
Package-local archive, conversion, instance, export, and dist smoke tests

Architecture documentation

Start with the package docs for the source model, instance evaluation, materialization, document sessions, export, and validation contracts.

Planned ownership:

Oracle-backed .fig fixtures

Non-goals:

Generic Kiwi schema/runtime internals — use @open-pencil/kiwi
Format-neutral IO registration, export targeting, CanvasKit thumbnails, or browser workers — use @open-pencil/core/io
Editor actions, renderer behavior, Vue/app UI, CLI formatting, or MCP transport

This follows the existing @open-pencil/pen pattern: a format package owns its source model/parser and SceneGraph policy, while core registers it in the shared IO system.

Checks

cd packages/fig
bun run check