> For the complete documentation index, see [llms.txt](https://helpdesk.smaply.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpdesk.smaply.app/migration/how-to-import-from-figma.md).

# How to import from Figma

Export a Figma frame as an image, then rebuild it as a journey map in Smaply with AI.

Bring a journey map you've drawn in Figma into Smaply. Export the frame as an image, upload it, and Smaply AI rebuilds it as an editable journey map.

{% hint style="info" icon="compass" %}
To keep a live, interactive Figma frame inside a card instead of rebuilding it, see [How to use embed cards](/journey-maps/cards/how-to-use-embed-cards.md).
{% endhint %}

Smaply imports an image, not a Figma file. AI reconstructs the map from the picture, so the task is to get one clean, legible image out of Figma, then upload it. The import itself is the same for every source and lives in [How to import from image](/migration/how-to-import-from-image.md).

#### How to export your Figma frame as an image

{% stepper %}
{% step %}
**Select the frame**

On the canvas, click the frame that holds your journey map. Selecting it scopes the export to that one frame rather than the whole page. **Can view** access is enough to export, unless the file owner has restricted copying.
{% endstep %}

{% step %}
**Open the Export section**

In the right sidebar, find the **Export** section and click the **+** to add an export setting.
{% endstep %}

{% step %}
**Choose PNG or SVG**

Set the format to **PNG** for the crispest text, or **SVG** if the frame is mostly text and shapes. Both upload cleanly to Smaply. Do not choose **PDF**: Smaply does not accept it.
{% endstep %}

{% step %}
**Set the scale to 2x or 3x**

For a PNG, raise the scale from the default **1x** to **2x** or **3x** so the AI can read the card text. Larger scale means sharper text. SVG is resolution-independent, so it has no scale setting.
{% endstep %}

{% step %}
**Export and save the file**

Click **Export** and save the image. You now have a file ready to upload.
{% endstep %}
{% endstepper %}

If you can't reach the Export section or your frame is simple enough to fit one screen, take an operating-system screenshot instead (macOS **Cmd + Shift + 4**, Windows **Win + Shift + S**) and save it as a PNG. Crop tightly around the map and keep the text legible.

#### Import it into Smaply

In a workspace, open **Journey maps** and click **Import**. In the **Select import source** modal, pick the **Figma** card, click **Continue**, then upload your exported image and click **Import**.

<figure><img src="https://1197101183-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2For99xDEElfps9uMDY60K%2Fuploads%2Fgit-blob-76c2d398130be10e89b952cf893d0c7254525372%2Frn-2026-06-importer-excel-json.png?alt=media" alt="The Select import source modal showing six cards: Figma, Miro, Image or screenshot, and Powerpoint marked with an AI icon, plus an Excel card labelled .xlsx spreadsheet and a JSON card labelled JSON import. Cancel and Continue buttons sit at the bottom."><figcaption><p>Select import source > Figma</p></figcaption></figure>

<figure><img src="https://1197101183-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2For99xDEElfps9uMDY60K%2Fuploads%2Fgit-blob-99026ecd876bb9cf972ddd46de5b7dd9e431f33e%2Fmigration-import-03-upload-step.png?alt=media" alt="The Add an image or screenshot step with a dropzone for uploading or pasting an image, a note listing supported formats, and an Import button."><figcaption><p>Add an image or screenshot</p></figcaption></figure>

For the full upload flow and what to expect while the map builds, see [How to import from image](/migration/how-to-import-from-image.md).

Smaply AI reconstructs the journey map from your image, so treat the result as a starting point: open it in the editor and review the lanes, stages, and card text before you rely on it.

#### Related topics

<table data-column-title-hidden data-view="cards"><thead><tr><th>Article</th><th>What it covers</th><th data-hidden data-card-target data-type="content-ref">Target</th></tr></thead><tbody><tr><td><strong>How to import from image</strong></td><td>The full upload-and-rebuild flow that every import source funnels into.</td><td><a href="/migration/how-to-import-from-image.md">Import from image</a></td></tr><tr><td><strong>How to import from Miro</strong></td><td>Export a Miro board or frame as an image, then import it.</td><td><a href="/migration/how-to-import-from-miro.md">Import from Miro</a></td></tr><tr><td><strong>How to import from PowerPoint</strong></td><td>Save a slide as an image, then import it.</td><td><a href="/migration/how-to-import-from-powerpoint.md">Import from PowerPoint</a></td></tr><tr><td><strong>Create a journey map</strong></td><td>Start a journey map from scratch, a template, or AI.</td><td><a href="/journey-maps/how-to-create-a-journey-map.md">Create a journey map</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://helpdesk.smaply.app/migration/how-to-import-from-figma.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.