Figma import for Polotno SDK

Polotno doesn't parse Figma's proprietary .fig files, but Figma's built-in SVG export gives you a clean bridge. Export a frame as SVG, run it through @polotno/svg-import, and the layers arrive in Polotno as editable elements — vector shapes stay vector, text stays editable, and the layer hierarchy is preserved.

The workflow

The flow is the same in development and in production.

In Figma: select a frame → right panel → Export → SVG → Export frame name.

In your app: convert the SVG with @polotno/svg-import and load the result into the store.

import { svgToJson } from '@polotno/svg-import';

const json = await svgToJson({ svg: svgContent });
store.loadJSON(json);

That's it. The frame is now an editable Polotno design — you can move elements, change text, swap images, or export it back out as JSON, PNG, PDF, or any other format Polotno supports.

Try it without writing code

Two ways to see what your Figma file looks like in Polotno before integrating anything:

SVG to JSON tool — drop the SVG you exported from Figma into the browser and inspect the resulting Polotno JSON. No upload, no account, no SDK install — svgToJson() runs locally in your browser on your file.
polotno.com/studio — open the free web editor, click Import → SVG, and load your Figma export. You'll see exactly how it renders on the canvas, with all layers ready to edit.

If either of those produces what you expect, the SDK integration will produce the same result.

What comes through

Figma's SVG export is faithful for most static design work:

Vector shapes stay vector — paths, rectangles, ellipses, polygons.
Text stays editable text, as long as you don't tick "Outline text" in Figma's export options.
Images stay images (Figma embeds them as data URIs in the SVG, which Polotno extracts as Polotno image elements).
Layer hierarchy is preserved — groups in Figma become groups in Polotno.
Fills, strokes, opacity, and blend modes carry over for standard cases.

What doesn't

Figma's SVG export is a flattening operation. Things that don't survive:

Components and variants — these become flat SVG, not reusable components.
Auto-layout — positions are baked at the moment of export, not preserved as layout rules.
Prototypes and interactions — SVG has no concept of these.
Text converted to paths — if you exported with "Outline text" enabled, text becomes vector paths and stops being editable.
Some advanced effects — drop shadows and filters generally come through; more exotic Figma effects may render differently or not at all.

The right mental model: SVG export is for bringing a static design into Polotno as a starting canvas, not for syncing a live Figma file. If you need bidirectional sync or component-level fidelity, talk to us about a deeper integration.

Why teams do this

Common reasons customers move work from Figma into Polotno:

Embed design in their own product. Figma is a design tool, not a building block. When the goal is "let our users design things inside our app," Polotno is the embeddable editor and Figma is where the brand templates start.
Programmatic customization. Once a Figma frame is Polotno JSON, you can swap text, images, and colors from code or data — generate hundreds of branded variants from one design.
Server-side rendering at scale. Render Polotno designs as PNG, PDF, or video without a browser. Cloud Render API handles high-volume workflows.
Open data ownership. Polotno designs are open JSON. No more designs trapped inside a tool you don't control. See JSON import and export.

FAQs

Can I import a `.fig` file directly?

Not natively. Use Figma's SVG export as the bridge. For most static designs, the result is indistinguishable from a direct importer.

Does text stay editable?

Yes, as long as Figma's export setting "Outline text" is turned off. With it off, text remains text; with it on, text becomes vector paths and loses its editability.

What about auto-layout?

Auto-layout rules don't survive SVG export — positions are baked at the moment you export. The visual layout is preserved; the constraints are not.

Can I run this server-side?

Yes. @polotno/svg-import works in both Node.js and the browser. You can convert Figma SVG exports to Polotno JSON in your backend without spinning up a headless browser.

What if my design uses Figma components or variants?

They flatten on export. Each variant becomes a separate SVG. If your workflow depends on Figma components, you may want to organize variants into separate exports or talk to us about deeper integration options.