Overview
When importing Figma designs into Obello, issues often come from how files are structured rather than the design itself. We can’t assume perfect file hygiene, but we can set clear best practices to help clients prep files for smoother, more predictable imports.
This doc outlines recommended guidelines and common pitfalls to avoid when preparing Figma files for Obello.
Best Practices
1. Don’t overly complicate frames
Keep frame structures as simple as possible. Deeply nested frames and containers make it harder for the importer to reliably detect and interpret designs.
2. Avoid excessive grouping, nesting, and sections
Figma integrations can only traverse a limited number of nested levels.
Avoid structures like:
Elements
→ Group
→ Group
→ Frame
→ Section
→ Parent Frame
If elements are grouped without a clear need, the importer may struggle to locate the actual design content.
Best practice
Keep key elements grouped directly inside the primary design frame
Use grouping only when it adds real structure or meaning
3. Place images inside frames, not as frame fills
Images applied as fills on frames are difficult to control in Figma and difficult for Obello to interpret correctly.
This is one of the most common issues, and many users don’t realize they’ve applied images this way.
Best practice
Use image layers inside frames
Avoid using image fills on frames or containers whenever possible
 |  |
4. Clearly label Figma layers
Layer names are imported directly into Obello and currently can’t be renamed after import.
Best practice
Use clear, descriptive layer names
Use Figma’s built-in Rename layers feature
Avoid generic names like Frame 12, Group 4, or Image 1
This makes assets easier to identify and manage once inside Obello.
Not so clean
| A bit more tidy
|
5. Remove unnecessary layers
Before importing:
Delete empty frames
Delete empty groups
Remove unused layers
Remove duplicate or hidden junk
If it doesn’t serve the final design, it shouldn’t be there.
6. Clean up sections before importing
We understand everyone organizes differently.
Recommended workflow:
Work freely while designing
Before importing, create a cleaned-up version:
Fewer sections
Minimal nesting
Clear layer names
No unused elements
Think of this as a “handoff” version of the file.