# Import from Figma

> Import your Figma designs into Orshot Studio using our Figma plugin

- **URL**: https://orshot.com/docs/importing-templates/import-from-figma

---

Orshot provides a Figma plugin that exports your designs in a format compatible with Orshot Studio. This allows you to design in Figma and seamlessly convert your work into dynamic, API-driven templates.

> **Ownership Notice**: By importing a design, you confirm that you have the rights to use it and accept responsibility for any copyright issues.

## Install the Figma Plugin

Before importing, you'll need to install the Orshot Figma plugin:

1. Open Figma and go to **Plugins** → **Browse plugins in Community**
2. Search for "**Orshot**" or "**Figma to Orshot**"
3. Click **Install** to add it to your plugins

Or visit the [Orshot Figma Plugin](https://el.orshot.com/orshot-figma) page directly.

## How to Import

### 1. Open your design in Figma

Navigate to the Figma file containing the design you want to export.

### 2. Select a frame or group

Click on the frame or group you want to export. The plugin works best with:

- Top-level frames (artboards)
- Groups containing your design elements
- Component instances

### 3. Run the Orshot plugin

1. Right-click on your selection
2. Go to **Plugins** → **Orshot** (or search for it)
3. The plugin window will open and display the JSON export

### 4. Copy the JSON

In the plugin window, click **Copy JSON** to copy the exported data to your clipboard.

### 5. Open Orshot Studio

Go to [Orshot Studio](https://orshot.com/studio) and click **+ New Template**.

### 6. Choose "Import JSON"

In the new template dialog, select the **Import JSON** option (also labeled as Import from Figma).

### 7. Paste the JSON and import

Paste your copied JSON into the text area. The system will validate the JSON and show you details about the template. Click **Import Template** to create your template.

## Video Tutorial

Watch our step-by-step video tutorial for a visual guide:

<a href="https://www.youtube.com/watch?v=5IYy4aNTL-8" target="_blank">
  ▶️ Watch: How to Import from Figma to Orshot
</a>

## What Gets Exported

The Figma plugin exports:

- **Text layers** — with font family, size, weight, color, and alignment
- **Images** — embedded images and fills
- **Rectangles** — with fill colors, borders, and corner radius
- **Frames** — as container elements with backgrounds
- **Groups** — flattened into individual elements
- **Canvas size** — preserves your frame dimensions

## Automatic Parameterization

All text and image elements are automatically configured for API parameterization:

- Unique `parameterId` assigned to each element
- Elements added to the modifications list
- Ready for dynamic content via the API

## Limitations

> The plugin exports only elements supported by Orshot Studio:

- **Vectors/Paths** — Complex vector shapes may not export correctly
- **Auto Layout** — Auto layout properties are not preserved (positions are absolute)
- **Constraints** — Figma constraints are not transferred
- **Effects** — Shadows and blurs may be simplified
- **Masks** — Complex masking operations may not translate
- **Components** — Exported as their visual representation, not as linked components
- **Styles** — Figma styles are resolved to their values

## Tips for Best Results

1. **Use frames, not groups** — Frames export more reliably than complex nested groups
2. **Flatten complex vectors** — Convert complex shapes to images before exporting
3. **Use Google Fonts** — These work seamlessly across both platforms
4. **Check the preview** — Review the JSON stats in the plugin before importing
5. **Upload custom fonts** — If using non-Google fonts, upload them to Orshot Brand Assets first

## Missing Fonts Warning

If your Figma design uses fonts not available in Orshot, you'll see a warning during import listing the missing fonts. To ensure text renders correctly:

1. Upload the font files to your **Brand Assets** in Orshot
2. Or substitute with a similar available font after import