How to import Adobe Fireworks files into Figma

Adobe stopped developing Fireworks in 2013. A decade later, many teams still have a drawer of .fw.png files: the mobile site from 2014, the dashboard mock-ups, the e-commerce checkout that shipped and was never redrawn. Those files are more useful than they look. Open one in any image viewer and you see a single flat picture — but Fireworks kept the whole editable document inside it.

fireworks.to.design reads that document and rebuilds it in Figma as editable layers: every page, layer, text run, vector, bitmap and symbol. This guide shows the three ways to use it — the Figma plugin, the web app and the API — and what to expect from the conversion.

What is a .fw.png file? From Fireworks CS3 onwards, Fireworks saved its documents as PNG files. The image part is a flattened render of the first page, so the file opens anywhere. Fireworks also stored the editable document — pages, layers, paths, text and effects — in extra data inside the same PNG, which only Fireworks read. Until now.

From Fireworks to Figma — quick guide

1. Find the original .fw.png — the layered file Fireworks saved, not a PNG exported from it.
2. Open a Figma Design file and run fireworks.to.design from the plugins menu — or drop the file on fireworks.to.design in your browser.
3. Choose which pages to import and replace any missing fonts.
4. Edit the result in Figma: real layers, editable text.

Why Figma alone doesn’t get you there

Figma imports PNG files — so it will happily open a .fw.png. What you get is the flat image: the first page only, text burned into pixels, no layers. Every other page in the document is ignored, because it lives in data Figma doesn’t read.

Rebuilding by hand means redrawing every shape, retyping every label and re-cutting every bitmap, page after page. For a 40-page Fireworks file that is weeks of work for a result that is, at best, a copy.

Detailed tutorial

Step 1: Find the layered file

fireworks.to.design needs the document Fireworks saved, the one that opens in Fireworks with its Pages and Layers panels. Two kinds of PNG look the same in Finder but are not:

• The layered document (home.fw.png) — what Fireworks writes when you save. This is the one to import.
• An exported PNG — what File › Export produces, or what any other app writes when it re-saves the file. It holds only the picture.

You don’t have to tell them apart yourself: fireworks.to.design checks the file when you drop it, and says so if a PNG holds no Fireworks layers. The name doesn’t matter either — a layered document renamed to home.png is still recognised.

Step 2: Import with the Figma plugin

Open a Figma Design file, add a page for the import if you want to keep it apart from your current work, and run fireworks.to.design from the plugins menu. Pick your .fw.png file.

The plugin converts the file on your computer: nothing is uploaded. That matters for client work and unreleased designs — the kind of archive Fireworks files tend to be.

Step 3: Choose pages and replace missing fonts

A Fireworks document can hold dozens of pages. Import them all, or a range such as 1-3,7, and review one flow at a time.

Fireworks designs were often set in fonts of their era — Myriad Pro, Helvetica Neue, Trebuchet MS, Tahoma. If one isn’t available in Figma, the plugin asks you to pick a replacement before converting, so you don’t restyle text layers afterwards. On text-heavy pages, check line breaks after a replacement: a different typeface has different widths.

Step 4: Edit in Figma

Each page lands as a frame at its Fireworks canvas size, with its layers as named groups. Select, rename, restyle — and start turning repeated elements into components.

No plugin? Use the web app or the API

The web app. Open fireworks.to.design, sign in, and drop one or more .fw.png files. Each converts in the browser tab; click Copy to Figma and paste into any Figma file.

The API. For a whole archive, the ‹div›RIOTS API converts Fireworks documents on a server: send the file to /convert with the input format fw, an output format such as figma-clipboard or figma-rest, and an optional range of pages. See the API documentation for authentication and the full reference.

What to expect after importing

Editable text, run by run. Text comes across as Figma text with its fonts, sizes, colours, leading, tracking, alignment, underline, strikethrough and all caps. Text blocks keep their width and wrap; single-line labels grow with their content.

Vectors and bitmaps. Paths stay editable vectors, with solid and gradient fills and their strokes; rectangles import as rectangles. Bitmaps become image fills at their original pixels.

Symbols. Each symbol instance is expanded from the document’s symbol library, at its own position and scale.

Effects. Drop shadows, inner shadows, glows, colour fills and Photoshop live effects become native Figma effects and paints. Filters Figma has no equivalent for — bevel, emboss, hue/saturation, sharpen — import as the render Fireworks itself stored for that layer: exact to the pixel, but a picture rather than a live effect.

What is left out. Each layer imports its first state; slices and hotspots, which live on the Web Layer, are export settings rather than artwork and are skipped. Fireworks’ faux bold becomes the font’s bold face, and raised or lowered characters (baseline shift) sit on the baseline.

The fireworks.to.design documentation lists every element and limit.

When to import Fireworks files into Figma

• Rescuing an archive. Fireworks has not been updated since 2013; turn the files you still have into designs your team can open and edit today.
• Taking over a legacy product. A client hands over a site designed in Fireworks. Import it and continue in Figma instead of rebuilding from screenshots.
• Redesigning from the original. Bring the old pages in as editable layers, and redesign on top of the real typography and assets rather than a picture.
• Consolidating tools. The same family of importers covers Adobe XD, Photoshop and Illustrator files.

Start importing

Your first five imports are free — the first three pages of each file — no card required. Get the plugin, or drop a .fw.png on fireworks.to.design and paste the result into Figma.