When a Figma import looks off, check fills/blend modes, grids, icons/images, and rotation — flowmo translates the Figma REST model to f0 elements + components.
Where: Import → Figma — After importing a Figma file
Key ideas
- HTML-first translation: Figma nodes (frames, components, vectors, text) are translated to f0 elements + classes.
- Common gaps: Blend modes, grids, icon/image rasterization, and rotation are the usual mismatches.
Steps
- Re-check the source frame for unusual blend modes or grids.
- Confirm icons/images imported as expected.
- Adjust rotation/constraints after import if needed.
Inspect common translation differences
- Blend modes may not map identically between the source and translated CSS.
- Grids, icon/image rasterization, and rotation are common areas to inspect after import.
- The importer translates Figma nodes into f0 elements and classes; the result is an editable translation, not a native Figma document.
Repair in a predictable order
- Compare the source frame and imported page at the same viewport size.
- Check fills/blend modes and grid structure first, then verify icons/images and rotation.
- Correct the imported elements/classes in f0 and preview responsive sizes after the visual repair.
Tips
- Keep the source Figma frame available during review so you can compare structure and styling without relying on memory.
Limitations and important notes
- Unsupported or differently rendered Figma features may require manual adjustment after import.