Export exactly what you want with Anima: Code or images - Anima Blog
Design to code Product Updates

Export exactly what you want with Anima: Code or images2 min read

Reading Time: 2 minutes Learn how to control Figma-to-code exports with Anima's new image export override feature. Keep designs interactive by choosing when layers should export as images or code, ensuring a responsive and functional final product.

Export exactly what you want with Anima: Code or images2 min read

Reading Time: 2 minutes

Should layers marked as images export as images or code?

Converting Figma designs to code can be tricky, especially when layers unexpectedly turn into static images rather than functional code. This happens if layers are marked for export as images in Figma, resulting in <img> tags instead of interactive HTML elements or styled-components. Our latest Anima plugin update in Dev Mode now offers a flexible solution to manage these exports.

export as images

Why does this occur?

Marking a Figma layer for export signals it should be generated as a static image, even if it would be better suited for code. As a result, elements like buttons, text fields, or icons may lose interactivity and appear as flat images, affecting responsiveness and accessibility.

Why mark layers as images?

Designers often mark layers as images to ensure visual accuracy, especially for branding elements like logos or intricate backgrounds. While this preserves design fidelity, it can complicate the coding process by transforming functional elements into static images.

Our solution: image export override

To give you more control over the export process, we’ve introduced a feature that lets you review and decide how each layer is exported. Here’s how it works:

  1. Layer notification: during export, the plugin checks for layers marked as images. If any are detected, it prompts you to review them.export 1 layer as image review
  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.
  3. Export optimized code: once you’ve made your selections, continue with the export to create a responsive, functional component.

Using this feature

  1. Start your export in Anima’s Figma plugin. If layers are marked as images, you’ll see a prompt.
  2. Click ‘review’ to open a list of marked layers.
  3. Toggle settings for each layer as needed.
  4. Finish your export to generate optimized code ready for production.

When to keep layers as images

It’s often best to keep complex vector graphics or branding elements as images for visual fidelity. For everything else, turning off image export will create interactive components, making your code more flexible and reusable.

A solution to a common issue

If static images have limited your design-to-code process, this new feature provides a way to control how each design element appears in code. Now you can align your final product with your design vision, whether you need images or functional HTML/CSS/React code.

Try out this feature to make your designs more dynamic and let us know what you think!

|

CPO

Leader in tech known for her strategic approach to product development and her passion for DevOps and developer tools. Her innovative mindset drives advancements in developer workflows and productivity. Outside of work, Orit explores her creativity as an aspiring pastry chef and enjoys crafting fancy cocktails, combining her love for precision and artistry in the culinary world.

Leave a comment

Your email address will not be published. Required fields are marked *