Announcing Automatic Component Detection - Anima Blog
Product Updates

Announcing Automatic Component Detection2 min read

Reading Time: 3 minutes Following the DRY Principle in automatic code generation

Announcing Automatic Component Detection in Anima

Announcing Automatic Component Detection2 min read

Reading Time: 3 minutes

“Don’t repeat yourself (DRY, or sometimes do not repeat yourself) is a principle of
software development aimed at reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy”- (Wikipedia)


Components were born to save writing code, and instead of repeating code over and over, you write it once as a component.
As a front-end developer, at that moment when you first glance at a design mockup, your mind is busy detecting repeating UI patterns. You know what I’m talking about ;). When the time comes to actually code the design into a real product, this is when these repeating patterns translate into what are known as components.

Anima’s Automatic Component Detection

Recognizing repeating UI patterns is something that a developer does easily. However, for a computer, this is a different story.
Here at Anima, it was clear to us that this was a challenge worth investing our time into. So our team worked around the clock developing algorithms that can automatically detect repeating UI patterns and translate them into reusable components. Today, I am excited to announce Anima’s Automatic Component Detection.

Anima’s Automatic Component Detection

Can you spot all the repeating patterns?

Why is it useful?

The bottom line is this, anything that can be automated and be usable will save you a lot of time, improve productivity, and maximize your workflow. By having components automatically detected for you, all you need to do is apply the necessary changes, who could ask for anything more?

How to use Components in Anima

  1. First, sync your design to Anima
  2. Open Anima and switch to Code mode
  3. On the left, you’ll see the Components Panel
  • The Components Panel will present all the automatically detected components.
  • You can decide to remove a component from the list by converting the component to an element. This will also mean that in the code it will no longer be a component. Instead, it will be a simple HTML element.
  • Components can have nested components. They are marked with a layered icon. Selecting such a component will present all its nested components.
The Component Panel in Anima | Automatic component detection

The Component Panel is located on the left

Anima detects the component instances

Anima will automatically detect the component instances

Get started with Anima:

Join the Anima family and start saving time today.

Stay creative!
❤️ Anima team


Co-founder & CTO

A software engineer who believes that whatever can be automated should be automated. Loves sharing facts, ideas, and opinions about code. Lives in Tel Aviv with his wife and toddler.

Leave a comment

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