5 min read · Step-by-step guide
Prepare your Figma designs
Keep a complete design together, with a layer structure that makes its parts easy to understand and reuse. Start with the final artwork you want Mica to work with.
What you’ll accomplishA clear, complete Figma frame ready for import or conversion, with known visibility and editability limits.
Before you start
- A Figma Design file you can access.
- The complete creative you want to import or convert.
One complete creative per root frame
Put the whole ad, slide, or layout in one frame at its intended size. Keep text, images, background, and CTA inside that frame. Select the complete root rather than a loose collection of unrelated layers.
Campaign creative · 1080 × 1080
├── Background
├── Product imagery
│ ├── Product image
│ └── Decorative shapes
├── Copy
│ ├── Headline
│ └── Supporting text
└── CTA
├── Button background
└── Button labelUse names that describe each part. This hierarchy is a recommendation, not a required naming convention.
Nest related parts together
Group parts that belong together, such as a button and its label or an image and its decoration. Keep the headline separate from supporting copy so each can be edited independently.
Use frames, groups, components, and instances where they reflect the design. Auto layout can help organize your source, but conversion does not guarantee that every original layout constraint or component relationship becomes a live browser or Figma relationship.
Preserve stacking order and parent transforms. Avoid flattening the whole design when you need editable text and individual elements.
Hidden, covered, and clipped are different
| Layer state | What to expect |
|---|---|
| Hidden with Figma’s visibility control | Excluded from the current export, including hidden descendants of a hidden parent. |
| Covered by another visible layer | May remain in the exported structure or native artwork. Being covered does not remove the source content. |
| Clipped by a frame or mask | The visible result follows clipping or mask boundaries. Source elements may still be retained within the structure or artwork. |
| Zero opacity or no visible paint | Retention depends on the export mode and layer role. Masks and animation capture have different requirements from static artwork. |
| Outside the selected root | Unrelated layers are outside the selection. Content belonging to the selected root can extend beyond its bounds; check clipping and the actual result. |
Check clipping, masks, and effects
Keep a mask with the artwork it affects and confirm the intended sibling order. Review frame clipping, opacity, rotation, blend modes, strokes, and transparency before exporting.
Supported parts remain editable. Complex vectors, paints, or effects can be preserved as SVG or image fallbacks, and unsupported cases can produce a visible error. Read Conversion details for the affected layers; a matching preview does not mean every part is editable.
Keep typography editable
Keep copy as text layers when you want Mica to edit, resize, or localize it. Include the correct weights and italic styles. Supply missing licensed fonts through the plugin uploader.
Editable text can use replacement fonts when originals are unavailable. Original lettering (outlines) preserves lettering appearance but removes text editability in the exported result. Neither choice changes your original Figma text. See Fonts and licensing.
Before you submit
Confirm the destination and selection
Check the plugin’s organization and project. Select the complete root frames and verify their names and dimensions.Inspect layers and typography
Check nested groups, hidden layers, clipping, masks, and missing font styles. Remove unrelated source content.Review the actual result
Inspect text, images, transparency, layer editability, and warnings. Conversion completion is separate from quality approval.