Announcing Smart Styleguide - Anima Blog
Product updates

Announcing Smart Styleguide2 min read

Reading Time: 3 minutes Helping developers easily recognize the building blocks of designs, automatically generating them to CSS

Announcing Anima Styleguides

Announcing Smart Styleguide2 min read

Reading Time: 3 minutes

We’re excited to share that a great new feature is now live! An automatically generated Styleguide written in CSS. The Smart Styleguide will help developers easily recognize the building blocks that make your designs tick.

Background

Great designs are built in a consistent way. The best teams use a Design System to prevent inconsistencies. The team decides on the color pallets, the various fonts, text styles, border styles, etc. These are then used across the various components within the Design System, making every component look and feel consistent.

Styleguide are used to describe these decisions. They are a list of colors, text styles, border styles, spacing, (and sometimes more).
This Styleguide are compiled and coded by a developer. With Anima’s Smart Styleguide your Style Guide is created automatically.

How it works

When you sync your design to Anima, the system scans it and detects all the colors and text styles that appear multiple times.

🎨 Colors

Each color will be assigned a name automatically, but you can easily change that assigned name. Once you change a color name, the new name will propagate throughout the code that Anima generates.

colors: smart styleguides AnimaColors

🔤 Fonts

Fonts will be detected and added to the Styleguide. A CSS import declaration will be added to a globals.css file, so you can run the code instantly without scrambling to find the font file in Google.

Font names - smart styleguides Anima

Font names

👕 Font sizes

Developers like to name font sizes like t-shirt sizes, for example, xs,s,m,l,xl.

Anima detects all the font sizes within your design and creates font scaling using this t-shirt size concept, just like a human developer would do.

Font sizes Anima Smart Styleguide

Font sizes

Text Styles

Repeating text styles are compiled into CSS classes that use the tokens from above. Each class is given a name and the names are editable.
Changing the name would propagate the change throughout the code that Anima generates.

Text styles: Anima Smart Styleguide

Text styles

Smart Styleguide

And here is how a complete Smart Styleguide looks like. The Styleguide is a fully functional CSS style sheet and can be placed in any project.

Color, fonts, font sizes, and text styles: Anima Smart Styleguide

Color, fonts, font sizes, and text styles

There are many more features coming for Smart Styleguide. We welcome you to try it out and please let us know what you think!

Ready to be a part of the Anima community?

Get started now:

Stay creative!
❤️ Anima team

|

Co-founder & CTO

Software engineer that believes that anything that can be automated should be automated. Loves sharing ideas, facts, and opinions about code. Based in NYC and the proud owner of Bugsy, his pug.

Leave a comment

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