Figma
Adobe XD
Sketch
Discord
Twitter
GitHub
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.
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.
