Defining text styles in Zeplin

Zeplin
Zeplin Gazette
Published in
3 min readMar 16, 2016

--

As designers spend more and more time on Zeplin, this feedback sticks out the most:

“Zeplin forces me — in a good way — to be consistent with my designs, to make sure that I have a solid styleguide that I stick to.”

This is mostly because of the way Zeplin lays out the data. If you use a color that is not defined in your color palette, it sticks out. If the distances between elements are not consistent, they stick out. Developers especially love this, as consistent design leads to better crafted code.

Now, Zeplin also lists text styles in your styleguide, helping the whole team to achieve better consistency.

Traditional styleguides are always outdated though. Most designs tend to evolve over time, so preparing a PDF is not the ideal solution any more. The balance comes from being flexible while keeping the fundamentals intact. Zeplin now helps you keep your styleguide up-to-date as it adapts, by automatically grabbing text styles from Sketch.

Zeplin now grabs your text styles from Sketch.

Even if you prefer not to use text styles in Sketch, you can still create them in Zeplin by clicking the “Add to Styleguide” button on a text layer.

Here’s the cool part: As developers are working on the UI, they’ll be able to see which style a text layer matches with.

Typeface panel now shows the matching text style.

To color, or not to color?

Before tackling the text styles feature, we’ve talked with a bunch of designers on Zeplin and researched examples out in the wild. Everyone seems to agree on what a text style means, except one thing: Should colors be involved? 🤔

A few styleguides from the interwebs, with and without colors.

There’s no right answer or a best practice to be honest. It all depends on the project, the platform, even personal taste. That’s why it’s possible to define text styles with or without colors in Zeplin.

By default, when you add a text style (either from Sketch or a text layer in Zeplin) it’ll be added with the color. Then, you can remove the colors individually as you please.

Colors can be removed from text styles.

Generating code from styles

Zeplin also generates style sheets from text styles (only on web projects). Developers can now see and copy the CSS for both the color variables and the text styles in the “Styleguide” section.

We’re also planning to generate XML resources for Android and UIFont/UILabel extensions for iOS, but these require more thinking and we’ll be spending time figuring out the ideal solutions. If you have ideas, we’d love to hear them!

Hope you’ll enjoy working with text styles! If you have any feedback, feel free to ping us at support@zeplin.io. 👋

--

--

Zeplin
Zeplin Gazette

Connected space for product teams. (YC S15) Supports Sketch, Adobe XD CC, Figma and Photoshop.