Announcing Smart Styleguide2 min read

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

🔤 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

👕 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

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

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

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:

• Download Anima plugin for Sketch, Adobe XD or Figma
• Visit Anima 101 page

Stay creative!
 Anima team