Your shortcut to a flawless workflow between Figma and Zuuvi Studio starts here. This guide walks you through the setup, best practices, and what features are (and aren't) supported when exporting designs using the Zuuvi Figma Plugin.

🔌 First things first: Install the Plugin

Download the Zuuvi Figma Plugin here:
👉 Zuuvi Export Service

See here how it's working

✏️ Suggested Work Process - From Figma ➡️ Zuuvi

Create a frame in Figma to represent one ad format.
Add only supported design elements.
Design your frame while keeping the feature list in mind.
Make sure each element has a unique name.
Duplicate frames for multiple formats.
Resize and tweak the layout for each frame.
Select your frames, check the Warnings tab, then upload.

Use this checklist before exporting:

✅ Unique element names per frame
✅ Consistent names/types across formats
✅ Resized images - with correct cropping and aspect ratio
✅ Use high-res images carefully
✅ Only use Google Fonts
✅ Properly sized text boxes
✅ Gradients handled correctly (no stretching!)
✅ Warnings tab checked - you know what will be adjusted

🔄 Updating a Template You Already Imported

You don't have to import the same design twice. When you select frames you've uploaded before, the plugin finds the Zuuvi templates they were imported into and offers to update them.

How it works:

Select your frames.
Switch to Update existing in the plugin.
Pick the template you want to update - or tick Update all linked templates to update every one of them at once.
Upload.

Good to know:

Each row shows how much of the template your selection covers, e.g. "5 of 7 layers".
Search by template name or ID if the list is long.
Your Studio work is kept. Animations and layer settings stay on the layers being updated, and nothing is deleted from the template - layers that no longer exist in Figma are left alone.
You're warned before overwriting. If someone edited the template in Studio since your last sync, the row is flagged with the date of that edit.
After the update you get a summary of how many formats and layers were updated, added or removed.

💡 The update matches layers by their Figma identity, so renaming a layer in Studio won't break the link - but deleting and redrawing a layer in Figma creates a new one.

🔍 Check the Warnings Tab Before You Upload

The moment you select frames, the plugin analyses them and lists everything that will be adjusted on export.

One card per issue, with a plain description - a shape flattened to an image, a font that isn't available, mixed text styling collapsed to one value.
Click a card to jump straight to that layer in your Figma file (it switches page if the layer lives elsewhere).
Frames that will be adjusted are outlined in the preview grid while the Warnings tab is open.
The bottom bar keeps count: "6 frames selected · 2 will be adjusted".

⚠️ Warnings never block your upload. Every check has a defined fallback, so this tells you what to expect - it doesn't stop you.

⚠️ What You Need to Know Before Exporting from Figma to Zuuvi

1. How Frames and Fills Behave when exporting

If a frame has a visible fill, it turns into a rectangle in Studio.
If the frame's fill is switched off, no background rectangle is created.
The root element must not be inside other containers - it needs to be placed directly on the canvas.
Don't apply opacity to the entire frame - use it on individual elements instead.
You can use an image fill on a frame.
Hidden layers: layers you've hidden in Figma are imported and appear in Studio with the eye toggled off. Nothing disappears silently, and you can switch a layer back on in Studio without re-importing. Hide it in Figma, and the next update hides it in Studio too.
Layers bigger than their frame: if you've drawn a photo or shape larger than the frame and let Figma crop it, the plugin now clips it to the format's edges on import, so it can't spill out and cover the layers underneath. This doesn't apply to rotated layers - keep those inside the frame.

2. The Right Way to Resize and Crop Images in Figma

Getting your image to behave in Studio starts with how you prep it in Figma.

How to Resize Like a Pro:

Set fill to Fit
Resize the image frame
Switch to Fill
Resize again if needed
Change fill to Crop
Done! Or switch back to Fill, if needed

Best Practices:

Stick to Crop filling when resizing.
Always lock aspect ratio to avoid distortion.
Avoid clever image-stretching tricks - they don't work well in Studio.

💡High-resolution images may cause Figma or the plugin to freeze. Use with care

3. Finish Your Design, Then Select Your Frames ✍️

The plugin analyses whatever you have selected. It re-runs that analysis every time you change the selection - not while you edit.

That means: if you tweak a layer after selecting your frames, the plugin is still holding the version it analysed. Click away and re-select your frames so it picks up your changes, then upload.

What to do:

Finalise your layout first
Select your frames
Check the Warnings tab
Export 💨

4. How to Handle Text Boxes & Alignment in Figma 🔡

Oversized text boxes are sneaky - they can throw off your entire layout in Studio.

This guide helps you work smarter with typography and spacing for pixel-perfect results.

Rules to Follow:

Use px (pixels) for line height and letter spacing
Avoid % values - they're only loosely supported
Keep text boxes snug around the content
No extra padding unless you want it visible

5. Fonts That Actually Work 🔠

Only Google Fonts are supported. Anything else - custom fonts, system fonts, that retro serif you love - is switched to Arial, and the plugin tells you which layer and which font before you upload.

6. Groups & Layers - What Happens Behind the Scenes 🧩

Nested groups keep their structure on import, so a group inside a group arrives as a group inside a group in Studio.

Stacking order still deserves a look after import: Figma and Studio describe front-to-back order differently, and reference images are always placed behind everything else.

What to expect:

Use groups to manage display order in Figma
Always preview layer order in Studio after export

7. Rotation and Gradients: The Rules You Need to Know

Yes, you can rotate stuff and use gradients - but there are a few catches.

Rotation:

✅ Rotate individual layers
❌ Don't rotate groups
⚠️ Might not be pixel-perfect
⚠️ A rotated layer that sticks out past its frame isn't cropped on import - keep rotated layers inside the frame

Gradients:

✅ Linear and Radial gradients supported - including on text
❌ Radial rotation is not supported
❌ Stretched gradients don't update correctly in Figma
⚠️ Angular and diamond gradients aren't supported: on simple shapes they import as a flattened image, and the plugin flags them before upload

8. Vectors, Snapshots, & Reference Images: Special Handling 📐

There's a method to how Studio processes your fancy vector work and reference visuals.

Vectors:

Group multiple vectors together = exported as one snapshot
Mixed group (e.g. vector + text) = each item drawn separately
Reused but modified vectors = uploaded as duplicates
Stars, polygons, lines and arrows import as flat vector images - they look identical, but they aren't editable as shapes in Studio

Reference Images:

Appear behind everything
Are low-quality by default
Turning the toggle on or off no longer resets your frame selection - flip it whenever you like

Text Transform:

UPPERCASE, lowercase (but not shown visually in Studio)
Title Case will be shown on the text layer, but is not possible to choose as a text transform in Studio.

🎨 What Features Are Supported?

✅ General Support

Nested Groups & Frames
Components and instances - they import just like frames
Text (size, colour, bold, italic, etc.)
Mixed colours, bold and italic inside one text box - imports as rich text
Gradient text - linear and radial gradients on a text layer import as a real Studio text gradient
Rectangles and Circles
Stars, polygons, lines and arrows - as flat vector images
Multiple formats via multiple frames
Images (cropped, filled, reused)
Hidden layers - imported, and hidden in Studio
Vectors (uploaded as SVG)
Full colour palette + frame background colours
Drop Shadows & Inner Shadows
Only Google Fonts (other fonts fall back to Arial)
Element rotation (with limits)
Gradients (linear and radial)
Multiple fills on one shape - flattened into a single image on rectangles, ellipses and vector shapes

🚫 Unsupported Features

These won't work (yet):

Figma component sets (variants) - select a single variant or an instance instead
Layout Grids & Constraints
Frame backgrounds with video
Angular and diamond gradients
Mixed font sizes, font families, letter spacing, line height or text case inside a single text box - the first character's value is used for the whole layer
Custom/system fonts
Masks - they import as a flattened snapshot rather than an editable crop
Figma-only canvas objects (sections, stickies, connectors, embeds and similar)

Everything in this list is flagged in the Warnings tab before you upload, with the layer it affects.

🛠️ If an Upload Fails

The plugin offers a debug report to download - a small CSV with your frame names, sizes and the error message. Attach it to a support chat and we can see what happened without a round of questions.
If you updated several templates at once and only some succeeded, the message tells you how many.
If an image couldn't be included, you're told how many - rather than getting a clean success over a blank layer.

🔐 Authentication & Privacy

You need a valid Zuuvi and Figma account. Signing in opens Zuuvi's normal login in your browser.

The design you upload - layers, text and images - is sent to the Zuuvi account you pick in the plugin. That's the import itself.
Nothing else in your Figma file is read or uploaded: only the frames you have selected.
The plugin stores your sign-in and your last used account locally in Figma, so you don't have to pick it every time. Sign out clears all of it.

Got questions or something's not working?
Pop into the chat in the right corner - we've got your back 💙

🧩 How To Import From Figma To Zuuvi Studio