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
✏️ Suggested Work Process - From Figma ➡️ Zuuvi
✏️ 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.
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!)
PRO TIP PLACEHOLDER
(E.g.: Always lock aspect ratio when resizing images to avoid cropping surprises in Studio! 🎯)
⚠️ What You Need to Know Before Exporting from Figma to Zuuvi
⚠️ What You Need to Know Before Exporting from Figma to Zuuvi
1. How Frames and Fills Behave when exporting
What to Know:
If a frame has a visible fill, it turns into a rectangle in Studio.
If the fill is invisible, it’s excluded entirely.
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, but the behaviour depends on your settings.
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. Avoid Reprocessing! Finish Your Design Before Using the Plugin ✍️
Want to speed up your export process? Don’t touch anything after opening the plugin. Any edits made to a frame while the plugin is open will trigger a full reprocessing, slowing things down and possibly creating bugs.
What to do:
Finalise your layout first
Then open the plugin
Then 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 spacingAvoid % 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.
If you’re using anything else - custom fonts, system fonts, or that retro serif you love - Studio will switch it to Arial.
6. Groups & Layers – What Happens Behind the Scenes🧩
Your Figma group structure won’t look exactly the same in Studio - here’s why.
Nested groups are flattened to the root level during export. This may mess with the visual stacking order if you’re not careful.
What to Expect:
Use groups to manage display order in Figma
But Studio rearranges groups during import
Always preview layer order in Studio after export
🙋We handle all the groups, and then root elements. As you see below - Ellipse 17, will be rendered below Group 23 in the timeline in Studio.
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
Gradients:
✅ Linear and Radial gradients supported
❌ Radial rotation is not supported
❌ Stretched gradients don’t update correctly in Figma
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
Reference Images:
Appear behind everything
Are low-quality by default
If you’ve selected your frames and then choose 'Export Reference Image', your selected frames will be reset, so you’ll need to select them again.
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?
🎨 What Features Are Supported?
✅ General Support
Nested Groups & Frames
Text (size, colour, bold, italic, etc.)
Rectangles and Circles
Multiple formats via multiple frames
Images (cropped, filled, reused)
Vectors (uploaded as SVG)
Full colour palette + frame background colours
Drop Shadows & Inner Shadows
Only Google Fonts (other fonts fallback to Arial)
Element rotation (with limits)
Gradients (linear and radial)
🚫 Unsupported Features
🚫 Unsupported Features
These won't work (yet):
Shapes: Polygon, Star, Line, Arrow
Figma Instances or Components
Layout Grids & Constraints
Frame backgrounds with video
Mixed font styles/sizes/colours inside a single text box
Double fills on an element
Custom/system fonts
🔐 Authentication & Privacy
🔐 Authentication & Privacy
You just need a valid Zuuvi and Figma account.
No Figma data is shared or stored - the plugin only verifies your Zuuvi login. Easy!
Got questions or something’s not working?
Pop into the chat in the right corner - we’ve got your back 💙