# In-Product Illustration Export Workflow From Figma

> Export onboarding, empty-state, and feature illustrations from Figma with the right format, dimensions, quality, and developer handoff.

- Canonical page: https://www.hypermatic.com/articles/tinyimage-in-product-illustration-export-workflow-from-figma/
- Published: 2026-10-30T00:00:00.000Z
- Updated: 2026-10-30T00:00:00.000Z

For related resources, read [the resource directory](https://www.hypermatic.com/resources/llms.txt). The [site index](https://www.hypermatic.com/llms.txt) links to products and current pricing. Article and tutorial Markdown URLs replace the final slash with .md; product Markdown uses /<plugin>.md.


An illustration inside a product is part of the interface, not a generic marketing asset. It appears in a specific state, beside specific copy, inside a responsive container, and often under a strict performance budget. Exporting it at “2x PNG” may look fine in a design review while creating a blurry mobile image, a needlessly heavy desktop download, or a dark-mode asset with a visible white edge.

Treat the export as an interface contract between design and development.

## Inventory the states before choosing formats

List every illustration and where it appears. Typical groups include onboarding steps, empty states, permission prompts, success moments, upgrade screens, and instructional panels. Record the component or route, intended display size, responsive behavior, light or dark theme, background treatment, and whether the artwork contains animation.

Then classify the artwork itself:

- simple vectors, icons, and flat shapes;
- complex vectors with masks, gradients, or many paths;
- raster artwork or photography;
- mixed artwork containing raster fills and vectors;
- motion sequences.

That classification matters more than a team-wide “always use PNG” rule. A clean vector may suit SVG; a path-heavy illustration may be smaller and more reliable as WebP or AVIF; a motion asset may need GIF or MP4 depending on playback and accessibility requirements.

## Define what the layout owns

Before export, agree whether padding, background color, rounded corners, shadows, and labels belong inside the asset or in the product component. Baking interface chrome into the image makes responsive changes and theme updates harder. Leaving intentional illustration space to CSS can also be wrong if the composition relies on that space.

Create a simple contract for each asset:

| Property | Example decision |
| --- | --- |
| Intrinsic canvas | 960 × 640 |
| Display box | Maximum 480 × 320 CSS pixels |
| Background | Transparent; component supplies surface color |
| Crop behavior | Contain, never crop |
| Theme | Separate light and dark exports |
| Accessible text | No essential text inside image |

If text is part of the interface, keep it as live product text. This allows translation, zoom, screen-reader access, and copy changes without re-exporting artwork. Decorative lettering can remain in the illustration only when no meaning is lost without it.

## Test at real display sizes

Review the artwork at its smallest and largest intended sizes. Thin lines, tiny facial details, subtle texture, and low-contrast shapes can disappear on mobile. Large raster exports can look soft on high-density displays if the intrinsic dimensions are too small.

Do not automatically export every asset at the largest possible scale. Use the actual display box and device-density strategy agreed with development. If responsive image sources are required, name the widths explicitly and keep their crops consistent. The [responsive image handoff from Figma](/articles/tinyimage-responsive-image-handoff-from-figma/) covers the broader `srcset` and breakpoint discussion.

Check the illustration in context with realistic copy. An empty-state graphic may need to shrink when a translated heading wraps to three lines. The layout should respond without obscuring the action or forcing the art below the useful part of the screen.

## Export and compress from a controlled source

Keep one approved export frame per asset variant. Name frames and files by semantic role, such as `empty-search-dark`, rather than by page location or version number. Avoid exporting directly from nested layers whose bounds may change when the illustration is edited.

With [TinyImage](/tinyimage/), designers can export and compress assets from Figma while comparing format and quality choices close to the source. For raster output, inspect gradients, transparent edges, line art, and small details after compression. For vector output, verify that masks, strokes, gradients, and filters survive optimization.

Choose a format based on the delivered behavior:

- SVG for suitable vector artwork that must scale cleanly;
- PNG when transparency and crisp raster detail justify the weight;
- WebP or AVIF for compact modern raster delivery when the product supports it;
- MP4 or another product-approved motion format for longer animation;
- GIF only where its compatibility outweighs limited color and larger size.

The [Figma export format workflow](/articles/tinyimage-figma-export-format-workflow-for-static-motion-and-pdf-assets/) provides a wider comparison. Here, the decisive test is the real interface state and its supported browser or application matrix.

## Give developers a reproducible handoff

Deliver an asset manifest rather than a loose folder. Include the filename, source frame, intrinsic dimensions, expected display behavior, theme, format, file size, and intended component. Note whether the asset is decorative and what fallback appears if it fails to load.

Use stable filenames so an updated export can replace the previous asset without requiring code churn. If a visual change is intentionally breaking—for example, the aspect ratio changes—call that out instead of silently overwriting the file.

Developers still need to implement loading, responsive selection, caching, layout stability, and accessibility. Compression does not prove the page is fast. Test the integrated product with throttled loading and confirm that the container reserves enough space to avoid a layout jump.

## Validate every shipped state

Before release, review a matrix of theme, viewport, density, localization, loading, and failure states. Confirm:

- no visible halo appears on transparent edges;
- dark-mode artwork does not use light-mode assumptions;
- the smallest rendering remains legible;
- essential meaning exists outside the image;
- filenames and paths match the manifest;
- file size stays within the agreed budget;
- slow or failed loading does not block the main action;
- updated artwork appears in every route that reuses it.

Archive the manifest with the Figma source and final exports. When the product theme, illustration style, or component layout changes, the team can find every dependent asset and regenerate it deliberately. That is much safer than discovering months later that an “empty state final” PNG was copied into six unrelated parts of the product.