Automatic AI-driven icon naming | Anima Blog
Code

Automatic AI-Driven Icon Naming2 min read

Reading Time: 2 minutes Anima’s AI can now analyze an icon's visual characteristics and accurately name its class.

Automatic AI-Driven Icon Naming2 min read

Reading Time: 2 minutes
 
TL;DR – Distinguishing icons in code is difficult if they don’t have meaningful names. Using AI image recognition, Anima can now automatically identify the types of icon in your design and name their classes accordingly.
 

 
At Anima, we focus on automatically converting design into developer-friendly code. As Martin Fowler once said – There are only two hard things in Computer Science: cache invalidation and naming things. In Anima’s new feature we tacked the naming challenge.
 
Developers want high-quality code with meaningful naming. They can spot machine-generated code in poor CSS class names (i.e. “vector-383”). These names do not help identify what they’re referring to. That’s why we’ve added an ML solution to improve layer naming.
 
Using AI image recognition Anima can now automatically identify the types of icons in your design and name their classes accordingly.

 


The problem: design files include non-descriptive icon naming

 
Designers use icons across their designs frequently. These Icons may have their own custom styling depending on their usage. Developers manage these elements but they can be difficult to identify if they are not named well.
 
For example, it is difficult to identify what icon may be represented by the class name ‘icon-1’, but if it were named ‘cart-icon’ it would be instantly identifiable.
Icons

The solution: automatically identify icons and name them accordingly

Using Machine Learning, Anima automatically scans your design’s images and identifies what types of icon you have used. It then names the elements according to the icon type.
 
This means that when you export to code, the class names match to the type of icon used.

Benefits

  • For Designers: You no longer need to worry about adding icon image class names
  • For Developers: You’ll be able to quickly and easily identify the icon type from its name

Coming up: AI-Driven Automation

At Anima, we’re continuously looking to improve the designer and developer experience. To do so we’re investigating areas in the design-to-code process where automation can make a big difference. 
 
If you have an idea for a step in this process that would be improved by automation, whether it’s something you have to spend time on regularly, or could simply be made easier, please let us know.

|

Machine Learning Engineer

A Machine learning master intent on making your life easier through automation. If he's not knee-deep in code, he's probably sunbathing, snowboarding, or perfecting his acclaimed artisanal pizzas.

Leave a comment

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