Prepare your Figma file

Assets and graphics

How images, icons, and illustrations are exported, and how to keep complex artwork out of trouble.

Images

Any layer with an image fill is exported as a picture and placed in the build. You choose the export size in the plugin.

The default you see is Low, 1024px. Raise it if your design has large photography.

Export sizes

Low: 1024px. The default. Fine for thumbnails, cards, and small photos.
Medium: 1280px. A reasonable middle for most pages.
Standard: 1920px. Use for full width hero images and large photography.

Crop your images in Figma to the shape you actually want. The crop is exported with the image, so a square photo in a wide frame arrives as a square photo.

Icons and vectors

Vectors are exported as images, not as editable shapes. This is expected and they will look correct.

Small icons get a minimum export size so they stay crisp when scaled.

Strokes: Outlined automatically before export, so stroke weights survive.
Small icons: Exported at a larger size than drawn, so they never look soft.
Shape groups: A group made only of shapes exports as one image, kept together.
Icon fonts: Glyphs from Font Awesome or similar become images. Use real vectors.

Complex artwork

Dense illustrations are flattened into a single picture on purpose. Rebuilding them as hundreds of elements would be slower to load and impossible to edit.

Good: One illustration, grouped and named, exported as one clean image.
Bad: The same illustration spread loose across a section, mixed with real content.
Why it matters: Loose artwork can pull nearby text and buttons into the picture with it.

Group your artwork deliberately

If a decorative shape sits loose next to a heading, it may be flattened together with that heading. Put the artwork in its own named group and the text stays editable.

The exact rules for when a group is flattened are on what stays editable.

What to avoid

Common causes of poor asset output

Loose artwork: Decorative shapes scattered among real content instead of grouped.
Icon fonts: Glyph characters instead of vectors. They cannot be recoloured later.
Deep nesting: Artwork buried many groups deep is flattened earlier than you expect.
Default names: Rectangle 3 and Ellipse 7 make a group read as artwork.
Hidden layers: Alternate versions left hidden are skipped, not exported.

1Group each illustration and name it
2Keep decorative shapes out of text groups
3Use real vectors for icons, not icon fonts
4Raise the image size setting if the design has large photography

One change UpBuilder makes to your file

When it merges scattered layers into a single graphic, it can create a real group in your Figma file named AI-Group followed by a timestamp. That group stays after the export.