Anima is converting the design to a big image instead of Html code

Developer Topics
1

I’m using Anima to generate Html and CSS code. In my design there is a head section, content section and bottom section. Head section has a title and a button, bottom section has two buttons and content section has all the major textbox, label and buttons.

Anima is able to generate Html and CSS for the head and bottom sections correctly but convert content section into a big image.

I searched and found an article saying removing “export” may help. However I looked everywhere in my Figma project and don’t see any where that says the design (or any elements in the design) is marked as export.

Could some one help. This is an urgent project. Thanks!

I tried another screen in the same project and the conversion is perfect. Above mentioned screen is still not working.

Updates:
So the second screen which was working stopped working. Anima is converting the content section to an image now. What happened between working and not working - I clicked “Text Input” in Anima plugin and selected one of the textbox. This is the plugin UI in my Figma.

image
image415×707 26.1 KB

2

If you add export(to svg, png, etc) for the frame in figma, then maybe anima thinks you’re gonna use it as an image, and then the frame changes into image. Delete the export option in figma. I had the same problem and just solved it

1 Like
3

Thank you, restyanima! This really helps.

For anyone who might be in the same trap, the minus sign and plus sign in add export are clickable. And add export is not a property. You can actually delete it by clicking the minus sign.

4

There is a new Feature - Export image Over-ride

  1. Layer notification: during export, the plugin checks for layers marked as images. If any are detected, it prompts you to review them.

  2. Toggle layers: a pop-up window shows the marked layers. You can toggle each one, choosing whether to keep it as an image or export it as code.

    export these layers as images
    export these layers as images615×249 18.4 KB

  3. Export optimized code: once you’ve made your selections, continue with the export to create a functional component instead of an image.