File Formats

Native Format: .varve

The Varve native file format (.varve) is a JSON-based document that stores the complete design state. Each file contains:

• Format version — Semver string for forward compatibility with document migration (migrateDocument() supports version upgrades)
• Document metadata — Name, creation date, last modified date
• Pages — Array of Page objects with dimensions, bleed, safe area, and content root
• Node tree — Recursive tree of scene nodes (shape, text, frame, group, image, adjustment)
• Styles — Reusable color, text, effect, and layout style definitions
• Variable store — Variable collections with modes and groups
• Component definitions — Reusable components with slots and property definitions
• Installed libraries — References to shared library packages
• Prototype data — Interactions, triggers, actions, and flow graph
• Color mode — RGB, CMYK, or Grayscale with profile metadata

The .varve format is versioned. When opening an older file, Varve automatically migrates it to the current format version. The Document.variableStore field is the sole source of truth for all variable data. Documents saved by pre-release builds with the legacy .strata extension (from before the project's rename from Strata to Varve) remain openable through the same migration pipeline.

Import Formats

Varve can import designs from a variety of formats through the File > Import dialog (Ctrl+I). The import pipeline validates each file, estimates node count, detects unsupported features, and provides a preview before import.

SVG

Full SVG import via recursive descent parser. Supports:

• Primitive shapes: <rect>, <circle>, <ellipse>, <line>, <polygon>, <polyline>
• <path> with M, L, C, S, Q, T, A, Z commands
• <g> groups with transforms
• <text> elements
• <image> embedded images
• <use> and <defs> references
• Transform attributes (matrix, translate, rotate, scale, skew)
• Fill, stroke, opacity, and style attributes

Figma design data

Varve accepts native Figma .fig archives, official Figma REST file JSON, and compatible plugin-export JSON for semantic, editable conversion. Native archives are decoded locally; the importer then normalizes source data before building a native Varve document, preserving pages, frames, vectors, text, rich-text runs, components, styles, variables, layout metadata, and prototype references wherever the source and Varve expose an equivalent representation.

• Editable text: Text remains text, including mixed rich-text runs where the source data provides them
• Font recovery: Missing families are reviewed through ranked local replacement candidates; the original family and replacement remain in the document manifest
• Native semantics: Auto Layout, components, variants, variables, and interactions are converted only when the target model can preserve their meaning
• Safe degradation: Unsupported effects, missing dependencies, and approximations appear in the structured Import Report

Native .fig conversion is local-first and does not require Figma credentials. Source schema versions and resource maps evolve, so Varve reports unsupported effects, missing dependencies, and degraded semantics in its Import Report. When maximum documented Figma resource fidelity is required, use an authorized REST or plugin export; SVG and PDF remain useful visual fallbacks but cannot preserve Figma-specific components, variables, Auto Layout, or prototype semantics. Read the missing-font replacement workflow and typography documentation for details.

PDF

PDF import via pdf.js with %PDF- header detection. Extracts:

• Text content from BT...ET blocks
• Rectangle path operators
• Multi-page conversion (each page becomes a Varve frame)

PSD (Photoshop)

PSD import via @webtoon/psd with 8BPS header detection. Supports:

• Layer tree extraction (groups, text layers, image layers)
• Text layer content and styling
• Image layer pixel data

AI (Adobe Illustrator)

Adobe Illustrator files use a PDF wrapper with embedded SVG content. The importer:

• Detects the PDF wrapper via header
• Extracts embedded SVG content where available
• Falls back to EPS header parsing for legacy files
• Reports fidelity warnings for AI-specific features

EPS

Encapsulated PostScript import with:

• BoundingBox extraction
• Basic rectangle and text conversion
• Unsupported feature warnings

Raster Images

Direct import of PNG, JPG, WebP, and GIF files. Images are loaded into the ImageCache and can be used as image fills on shapes or imported as ImageNodes.

Export Formats

See the full Export & Code Generation guide for complete details. Quick summary:

• PNG — Configurable scale (1x-3x)
• SVG — Full vector preservation
• PDF, PDF/X-1a, PDF/X-4 — Print-ready with CMYK, marks, profiles
• CSS @keyframes — Animation as CSS keyframes
• SVG animate — Animation as SMIL SVG
• Lottie — Animation as Lottie JSON
• React + Tailwind — React component with Tailwind classes
• CSS Modules — Modular CSS with BEM naming
• Flutter — Flutter widget tree (Container, Text, Stack, Row/Column)
• SwiftUI — SwiftUI views (ZStack, HStack, VStack)

Drag and Drop Import

You can also import files by dragging them directly onto the canvas:

• Drag SVG, PNG, JPG, WebP, or GIF files from your file manager
• Files are placed at the drop position with proper world-coordinate conversion
• Multiple files are tiled with spacing
• Batch import processes files sequentially with progress indication