Export Your Designs

Images, CSS tokens, Figma import, or share links — get your designs out of Pixeliro and into production.

Image Export

Per-layer or full canvas as PNG, WebP, JPEG at @1x, @2x, @3x scale. Client-side rendering via html-to-image.

CSS Tokens

Copy the complete :root CSS variable block. Paste into any project — works with any framework.

Figma Import

Import designs to Figma via the Pixeliro plugin. HTML layers are converted to native Figma frames, text, and fills.

Share Preview Link

Generate a password-protected preview URL. Viewers see a live, interactive preview — no Pixeliro account needed.

Per-Layer Export

Select any layer or element and export just that piece. Great for exporting individual icons, cards, or sections.

Batch Export

Export all canvases at once through the Settings panel. Each canvas becomes a separate image file.

Image Formats

PNG.png

Lossless, transparent background support

WebP.webp

Modern, compressed, smaller files

JPEG.jpg

Photos, no transparency, smallest size

All formats support @1x, @2x, and @3x pixel density. Quality slider available for WebP and JPEG.

Token Export Formats

CSS Custom Properties

Copy-paste :root { --kit-primary: #6366F1; ... } directly into your stylesheet.

:root {
  --kit-primary: #6366F1;
  --kit-surface: #F8FAFC;
  --kit-text: #0F172A;
  /* ... 25+ more tokens */
}

Tailwind Config

Extend your tailwind.config.js with design token values. Pro feature.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--kit-primary)',
        surface: 'var(--kit-surface)',
      }
    }
  }
}

Ready to Export?

Create a design and export in any format — free to start.