File Handoff Between Design Tools: Format Compatibility

Design handoff is where format problems become business problems. A designer exports from Figma, a developer gets a folder of PNGs that are 1x when they need 2x. A client sends a Canva design, and you need to edit it in Illustrator. A brand guideline ships as a Word doc with embedded JPEGs when you need vector logos.

This guide maps the format paths between the tools designers actually use — Figma, Photoshop, Illustrator, Canva, Sketch, and development workflows — with the settings that produce usable output on the receiving end.

Figma to Development

Figma is the dominant design tool for web and app projects. Its handoff to development is the most critical format path in modern design.

Export Types from Figma

SVG (icons, logos, illustrations): Select the frame or component, Export at 1x, format SVG. Figma's SVG export is clean but includes some extra grouping and naming attributes. Run through SVGO to optimize (typically 30–60% size reduction).

SVG settings: "Include ID attribute" — useful if your CSS targets specific elements. "Outline text" — converts text to paths (guarantees visual fidelity but loses text accessibility and editability). "Flatten images" — yes, unless you need SVG filter effects preserved. "Simplify stroke" — yes for cleaner paths.

PNG (complex graphics, photographs, screenshots): Export at 2x for Retina (standard practice). For app development, export at 1x, 2x, and 3x (iOS requires all three). PNG-24 for transparency, PNG-8 if no transparency needed and colors are limited.

PDF (print-ready output): Figma's PDF export is vector-based — text and shapes remain vector, images stay raster at their placed resolution. Suitable for basic print handoff, though InDesign-based workflows will want TIFF/PNG placed into their own layouts.

CSS code inspect: Figma's Inspect panel provides CSS values for selected elements: font families, sizes, weights, colors, border-radius, box-shadow, opacity, and layout properties. This isn't a file export but a critical part of the handoff — developers read these values directly rather than guessing from a visual.

Figma API for Automated Export

Figma REST API: Programmatically export any frame or component as PNG, SVG, JPG, or PDF. This enables automated asset pipelines: a CI job that pulls the latest icons from a Figma file and commits them to the repo whenever the design changes.

API endpoint: GET /v1/images/{file_key}?ids={node_ids}&format=svg returns the exported image as a URL. The Figma CLI and various plugins (Figma Asset Downloader, Figma to Code) wrap this API for easier use.

Design tokens: Figma Tokens plugin exports design system values (colors, spacing, typography, border-radius) as JSON. This JSON feeds into Style Dictionary or Tailwind config generators, creating a source-of-truth pipeline from Figma to code.

Photoshop to Web

Photoshop remains the primary tool for photo editing, compositing, and raster-heavy design work. Getting assets out of Photoshop for web use requires specific export settings.

Export Methods

Export As (File > Export > Export As): The modern export dialog. Supports PNG, JPG, GIF, WebP, and SVG. Allows per-layer export, multiple sizes simultaneously, and custom suffixes (@2x, @3x). This is the recommended method for all web exports.

Quick Export (File > Export > Quick Export as PNG): One-click PNG export with default settings. Fast for grabbing a quick asset. Configure the default format in Preferences > Export.

Generator: Photoshop's automatic export feature. Name a layer "hero.png" and Photoshop generates the file automatically when you save. Supports size variants: "200x100 hero@2x.png" exports a 200x100 version. Useful for maintaining an always-current set of assets from a PSD.

What to export as:

• Photos: WebP quality 80–85 (primary), JPG quality 85 (fallback)
• Graphics with transparency: PNG-24
• Simple graphics without transparency: PNG-8 or WebP lossless
• UI elements from vector shapes: SVG (limited — only works well for simple shapes)

Convert PSD to PNG | Convert PSD to WebP | Convert PSD to JPG

Illustrator to Web

Illustrator is the vector powerhouse. Getting clean SVG out of it requires attention to export settings.

SVG Export from Illustrator

Export method: File > Export > Export As > SVG. Do NOT use File > Save As > SVG — Save As includes Illustrator editing data (AI metadata) that bloats the file 2–5x. Export As produces clean SVG intended for web use.

Export settings:

• Styling: "Presentation Attributes" (smallest file, styles as attributes on elements). Avoid "Style Elements" (creates a <style> block that can conflict with your page CSS).
• Font: "Convert to outlines" for logos and graphics (guarantees visual fidelity). "SVG" for text-heavy SVGs where you want the text selectable/searchable.
• Images: "Embed" (includes raster data in the SVG file) or "Link" (references external files). Embed for self-contained SVGs; link for assets that share images across multiple SVGs.
• Decimal places: 1–2 for web graphics (smaller files). 3–4 for precision-critical illustrations.
• Minify: Yes (removes whitespace and comments).

Post-export optimization: Run SVGO (npx svgo icon.svg) for an additional 20–50% size reduction. SVGO removes metadata, simplifies paths, merges redundant groups, and removes empty tags.

Convert AI to SVG | Convert AI to PNG | Convert EPS to SVG

Raster Export from Illustrator

For cases where SVG isn't appropriate (complex illustrations with effects, social media graphics, email):

File > Export > Export for Screens: Allows multiple artboards and multiple scales (1x, 2x, 3x) in one export pass. Supports PNG, JPG, SVG, and PDF. Set format per scale factor (SVG at 1x, PNG at 2x and 3x).

Resolution: 72ppi for web (the number is irrelevant for web but this produces pixel dimensions matching the artboard dimensions). 300ppi for print. For 2x Retina, export at 2x scale rather than increasing the PPI.

Canva to Anything

Canva is widely used by non-designers. When you receive Canva output, here's what to expect.

Canva Export Options

PNG: Default export. Supports transparency (Pro feature). Resolution: 96dpi standard, not configurable in free tier. Pro users can export at any DPI. Quality is good for web; may be insufficient for large format print (a Canva poster at 96dpi printed at 24"x36" will be only 2304x3456px, which is 96ppi — well below the 150dpi minimum for large format).

JPG: Lossy, no transparency. Smaller files than PNG. Quality is fixed by Canva.

PDF (Standard): Suitable for documents and presentations. Images compressed. Not ideal for print.

PDF (Print): Higher quality images, crop marks included. 300dpi raster content. The best option for print from Canva.

SVG: Pro feature. Exports vector elements as SVG. Quality depends on the design — elements from Canva's library export as clean vectors, but raster photos remain raster (embedded in the SVG). Useful for logos and simple graphics designed in Canva.

MP4 / GIF: For video and animated designs. MP4 up to 1080p. GIF quality is limited (256 colors, large files for video content).

Canva Output Limitations

No native file handoff: Canva designs can't be opened in Figma, Photoshop, or Illustrator as editable files. The only path is export to an intermediate format (SVG for vectors, PNG for rasters, PDF for print).

Font issues: Canva uses web fonts that may not match your desktop fonts. A design using "Canva Sans" (Canva-specific font) can't be exactly replicated in other tools without substitution.

Limited export control: You can't set JPEG quality, choose PNG bit depth, or control SVG optimization. Canva decides the export quality. For maximum control, export at the highest quality available (PDF Print for raster content, SVG for vector content) and reprocess in a professional tool.

Cross-Tool Exchange

Moving designs between different design tools is always lossy. Here's what to expect.

Tool-to-Tool Compatibility

Design Tokens: The Programmatic Bridge

Design tokens are the values (colors, spacing, typography, shadows, border-radius) that define a design system, exported as a structured data file (usually JSON).

Where tokens come from: Figma Tokens plugin, Style Dictionary definitions, manually maintained JSON. The Figma plugin can sync bi-directionally with a Git repository, making the token file the single source of truth.

Token format (W3C draft):

{
  "color": {
    "primary": { "$value": "#2563eb", "$type": "color" },
    "success": { "$value": "#16a34a", "$type": "color" }
  },
  "spacing": {
    "sm": { "$value": "8px", "$type": "dimension" },
    "md": { "$value": "16px", "$type": "dimension" }
  }
}

Token processors: Style Dictionary (Amazon, converts tokens to CSS custom properties, iOS Swift, Android XML, etc.), Tailwind CSS config generators, Theo (Salesforce). These transform the same JSON source into platform-specific output.

Asset Naming and Organization

A consistent naming system prevents handoff confusion and enables automated pipelines.

Naming Conventions

Icon naming: icon-{name}-{size}.svg → icon-arrow-right-24.svg, icon-search-16.svg. Include the size in the filename for assets exported at fixed dimensions.

Image naming: {component}-{variant}-{state}@{scale}.{ext} → hero-homepage-default@2x.webp, card-product-hover@2x.png. The component-variant-state pattern maps directly to your component library.

Scale suffixes: @1x, @2x, @3x (iOS convention) or -mdpi, -hdpi, -xhdpi, -xxhdpi, -xxxhdpi (Android convention). Web typically uses @2x only (served via srcset).

Directory structure:

assets/
  icons/         # SVG icons
  images/        # Raster images
    hero/        # Grouped by component
    cards/
    avatars/
  logos/         # Brand assets (SVG + PNG at standard sizes)
  videos/        # If applicable

Design handoff problems are format problems. Designers export in formats developers can't use, developers request formats designers don't know how to produce, and everyone ends up with a folder of mystery PNGs at the wrong resolution. The fix is establishing format standards for your team: SVG for all vector assets (optimized with SVGO), PNG at 2x for all raster assets, and design tokens as JSON for all style values.

When you need to convert between design tool outputs, ChangeThisFile handles the common paths: PSD to PNG, AI to SVG, SVG to PNG for rasterization, and EPS to SVG for modernizing legacy assets.